Edited at

Bootstrap3.x.で何かやるときの最低限のメモ

More than 3 years have passed since last update.

簡単なデモや管理画面を作るレベルで利用する最低限のBootstrapの知識のメモ。

フロントエンドを作るのはここが参考になります。


やりたいこと

Bootstrapって、テイストそのままでいいので、さくっと作りたい!と思っても、何かとCSSいじることになり、標準のまま使えないことが多いです。ここでは、オリジナルのCSSには一切手を入れず、基本的な画面をレイアウトしてみます。

・オリジナルのCSSに一切手をいれない。

・いじる場合は、inline styleで少しいじる。

・オリジナルのCSSは、ほとんど使わない(10行以下)。


ひな形

なにも無ければ基本CDN派。たまにネット未接続環境で「はっ」とすることがあるが、問題ない。

<!doctype html>

<html lang="ja">
<head>
<meta charset="utf-8">
<title>test</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" media="screen">
</head>
<body>
test
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</body>
</html>


レイアウト

単純なようで意外と奥が深い。


containerとrow

Gridの分割とかは、お決まりなのでどうでもいい。どちらかというとその「外側」の挙動が気になる。

まずは、何もbootstrapの要素は使わず。それでも、リセット系は効いてます。

<body>

<!-- header -->
<div id="header" style="background-color:#ff0000">header</div>
<!-- content -->
<div id="header" style="background-color:#00ff00">content</div>
<!-- footer -->
<div id="header" style="background-color:#0000ff">footer</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</body>

これは、こうなる(全体に伸びる)。

次にこれ。全体をContainerで包んでみる。そして、contentを分割したいので、class=rowを追加。

<div class="container">

<!-- header -->
<div id="header" style="background-color:#ff0000">header</div>

<!-- content -->
<div class="row" style="background-color:#00ff00">
<div class="col-md-3">left</div>
<div class="col-md-6">center</div>
<div class="col-md-3">right</div>
</div>

<!-- footer -->
<div id="header" style="background-color:#0000ff">footer</div>

</div>

これは、こうなる(センタリングされるが、class=rowの有無で凸凹に)。

class=rowを追加したところが、ちょっと幅広になる(というか、そっちが標準の970px)。なんで?CSSを調べる気にもならんが、.rowに

・margin-left:-15px;

・margin-right:-15px;

が適用されるみたい。で、結局全体で30px伸びる。これを防ぐには、(というか、全体をこれに合わせるためには)、

・header,footerの内容をrowに入れる。

・header,center,footer要素に個別にclass="container"を定義する。

しかないようだ。全体を大きなrowで囲むのもありか?と思ったが、baseが970pxにはなるもの、入れ子のrowはmargin分だけ、伸びる。

全体をどうしても1つのcontainerで囲みたい場合は、

それぞれの要素にrowを入れる。

<div class="container">

<!-- header -->
<div class="row">
<div id="header" style="background-color:#ff0000">header</div>
</div>

<!-- content -->
<div class="row" style="background-color:#00ff00">
<div class="col-md-3">left</div>
<div class="col-md-6">center</div>
<div class="col-md-3">right</div>
</div>

<!-- footer -->
<div class="row">
<div id="header" style="background-color:#0000ff">footer</div>
</div>

</div>

となる。

これでやっと落ち着いた。


Navbar(メインメニュー)

では、TOPメニュー(Navbar)を追加する。特に難しいことは何もないが、navbar-fixed-topでメニューを固定にしたときに、下の要素の上にpadding:60px 0 0 0しないと、バーに埋もれてしまう。

header要素はもういらないので、消して、Navbarとし、left,center,rightに色つけた。

navbarを黒ベースにするときは、navbar-inverseとする。

<div class="container">

<!-- navbar -->
<div class="row">
<nav class="navbar navbar-default navbar-fixed-top">

<div class="navbar-header">
<a href="" class="navbar-brand">Home</a>
</div>

<ul class="nav navbar-nav">
<li class="active"><a href="">menu1</a></li>
<li><a href="">menu2</a></li>
<li><a href="">menu3</a></li>
<li><a href="">menu4</a></li>
</ul>

</nav>
</div>

<!-- content -->
<div class="row" style="padding:60px 0 0 0">
<div class="col-md-3" style="background-color:#f0f000">left</div>
<div class="col-md-6" style="background-color:#0ff000">center</div>
<div class="col-md-3" style="background-color:#00f0f0">right</div>
</div>

<!-- footer -->
<div class="row">
<div id="header" style="background-color:#0000ff">footer</div>
</div>

</div>

こうなる。navbarの高さは50pxのようなので、必要に応じて、marginを入れるか、paddingする。


サイドメニュー

サイドメニューは「これ!」という作り方がありません。サイドバー用のグリッドの中で適当にメニューを作るしかないのですが、折角なのでBootstrapの要素で対応したいものです。

縦メニューは、class="nav nav-pills nav-stacked"で作れるのですが、味気ないので、ここではpanelで囲ってみます。

普通にpanelを使うと、menuにpaddingがかかった感じになるので、bodyを定義せず、そのままul,liを記述します。

glyphicon等を利用していろどりを添えます。

以下、contentのところだけ抜粋、

<div class="container">

<!-- content -->
<div class="row" style="padding:60px 0 0 0">
<!-- left -->
<div class="col-md-3">
<!-- パネルで囲む -->
<div class="panel panel-default">
<div class="panel-heading">
Menu
</div>
<!-- 敢えてbodyを作らないことで、メニューを詰める -->
<!-- <div class="panel-body"> -->
<ul class="nav nav-pills nav-stacked">
<li><a href=""><i class="glyphicon glyphicon-pencil"></i> submenu1</a></li>
<li><a href=""><i class="glyphicon glyphicon-download"></i> submenu2</a></li>
<li><a href=""><i class="glyphicon glyphicon-leaf"></i> submenu3</a></li>
<li><a href=""><i class="glyphicon glyphicon-folder-open"></i> submenu4</a></li>
</ul>
<!-- </div> -->
</div>
</div>

<!-- center -->
<div class="col-md-6" style="background-color:#0ff000">
center
</div>

<!-- right -->
<div class="col-md-3" style="background-color:#00f0f0">
right
</div>
</div>

</div>

だいぶ、それっぽくなってきました。もうちょっと、Navbarとの差があってもいいかも(80pxとか)。


全体を整える

ここで、3カラムから2カラムへ変更します。また、footerはheader同様、センタリングせず、左右に伸びた状態がいいと思うのでそうします。

・right要素を削除。

・centerをmainに。

それから、Bootstrapには、footer用のスタイルはないので、そこは、cssで書くことにします。

あと、page-headerを使いますが、marginとpaddingが少し多いので、インラインで引き算します(オリジナルは触りたくないので)。あと、contentのmargin-topを80pxとした。

<div class="container">

<!-- navbar -->
<div class="row">
<nav class="navbar navbar-default navbar-fixed-top">

<div class="navbar-header">
<a href="" class="navbar-brand">Home</a>
</div>

<ul class="nav navbar-nav">
<li class="active"><a href="">menu1</a></li>
<li><a href="">menu2</a></li>
<li><a href="">menu3</a></li>
<li><a href="">menu4</a></li>
</ul>

</nav>
</div>

<!-- content -->
<div class="row" style="padding:80px 0 0 0">

<div class="col-md-3">
<div class="panel panel-default">
<div class="panel-heading">
Menu
</div>
<!-- <div class="panel-body"> -->
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href=""><i class="glyphicon glyphicon-pencil"></i> submenu1</a></li>
<li><a href=""><i class="glyphicon glyphicon-download"></i> submenu2</a></li>
<li><a href=""><i class="glyphicon glyphicon-leaf"></i> submenu3</a></li>
<li><a href=""><i class="glyphicon glyphicon-folder-open"></i> submenu4</a></li>
</ul>
<!-- </div> -->
</div>
</div>

<!-- main -->
<div class="col-md-9">
<!-- apply custom style -->
<div class="page-header" style="margin-top:-30px;padding-bottom:0px;">
<h1><small>menu1->submenu1</small></h1>
</div>
</div>

</div>

</div>

<!-- footer -->
<div id="footer">copy left everything free.</div>

あと、ここに来て、無念のオリジナルCSS。。。(無念)。


#footer{
background-color: #aaa;
height: 50px;
text-align: center;
line-height: 50px;
color : #fff;
margin-top:30px;
}

ポイントとしては、

・fooderは、containerから外に出し、幅制限やセンタリングの制限を受けなくしています。

・page-headerは標準でtop40のmarginがありますが多いので取っています(引き算)。

・あと、page-headerのh1をsmallタグでくくっています。

あと、paddingも9pxありますが、0に設定しています。

bootstrapはマージンが多く取られていることがおおいのですが、「引き算」すればCSS自体をいじらなくていいので便利です。

だいぶそれっぽい。


テーブルコンテンツ

ダミーのテーブルを挿入して雰囲気をみます(mainだけ抜粋)。

        <!-- main -->

<div class="col-md-9">
<!-- apply custom style -->
<div class="page-header" style="margin-top:-30px;padding-bottom:0px;">
<h1><small>menu1->submenu1</small></h1>
</div>
<table class="table table-striped table-hover">
<thead>
<tr>
<th>No</th>
<th>name</th>
<th>email</th>
<th>tel</th>
<th>opration</th>
</tr>
</thead>
<tbody>
<tr>
<td>01</td><td>hoge foo</td><td>hoge@foo.com</td><td>03-1234-5678</td>
<td>
<a href="" class="btn btn-primary btn-xs">詳細</a>
<a href="" class="btn btn-primary btn-xs">編集</a>
<a href="" class="btn btn-primary btn-xs">削除</a>
</td>
</tr>
<!-- 繰り返し(省略)-->

</tbody>
</table>
</div>

まあ、後は好みで微調整のレベルでしょうか。パンくずリストとかは、パーツにあるので、そっち使いましょう。


Form

次は、Formのレイアウトのおさらい。何も考えず普通に書けばこうなる(contentだけ抜粋)。

なお、この書き方は一貫性が無いので、飛ばしてもらっても構わない。

class="horizontal"とかを使わないのであれば、control-labelとかの記述はいらないみたい。

<!-- main -->

<div class="col-md-9">
<!-- apply custom style -->
<div class="page-header" style="margin-top:-30px;padding-bottom:0px;">
<h1><small>menu1->submenu1</small></h1>
</div>

<form method="post" action"">

<!-- name -->
<div class="form-group">
<label>名前</label>
<input type="text" name="name" class="form-control" placeholder="名前を入力して下さい">
</div>

<!-- email -->
<div class="form-group">
<label>E-Mail</label>
<input type="text" name="email" class="form-control" placeholder="E-Mailを入力して下さい">
</div>

<!-- area -->
<div class="form-group">
<label>お住まいのエリア</label>
<select name="area" class="form-control">
<option value="関東">関東</option>
<option value="関西">関西</option>
</select>
</div>

<!-- gender -->
<p><b>性別</b></p>
<div class="radio">
<label>
<input type="radio" name="gender" value="1" id="man">

</label>
</div>
<div class="radio">
<label>
<input type="radio" name="gender" value="2" id="woman">

</label>
</div>

<!-- known by -->
<p><b>何で知りましたか?</b></p>
<div class="checkbox">
<label>
<input type="checkbox" name="knownby" value="web" id="web">
Web
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="knownby" value="magazine" id="magazine">
雑誌
</label>
</div>

<!-- comment -->
<div class="form-group">
<label>コメント</label>
<textarea class="form-control" rows=3 placeholder="100文字までです。"></textarea>
</div>

<!-- submit -->
<button type="submit" class="btn btn-primary">Submit</button>

</form>

</div>

そして、こうレンダリングされる。

まあ、内々なら十分使えるレベルか。

bootstrapのややこしいのは、class="horizontal"の時のマークアップと、普段のマークアップが違うこと。何で?

次は、応用というか、本流。記述量は多いが、記述に一貫性があるので、こちらが結局早いかな。

<!-- main -->

<div class="col-md-9">
<!-- apply custom style -->
<div class="page-header" style="margin-top:-30px;padding-bottom:0px;">
<h1><small>menu1->submenu1</small></h1>
</div>

<form method="post" action="" class="form-horizontal">

<!-- name -->
<div class="form-group">
<label class="col-md-2 control-label">名前</label>
<div class="col-sm-5">
<input type="text" name="name" class="form-control" placeholder="名前を入力して下さい">
<p class="help-block">メールは入れてね。</p>
</div>
</div>

<!-- email -->
<div class="form-group">
<label class="col-md-2 control-label">E-Mail</label>
<div class="col-md-5">
<input type="text" name="email" class="form-control" placeholder="E-Mailを入力して下さい">
</div>
</div>

<!-- select -->
<div class="form-group">
<label class="col-md-2 control-label">エリア</label>
<div class="col-md-5">
<select name="area" class="form-control">
<option value="関東">関東</option>
<option value="関西">関西</option>
</select>
</div>
</div>

<!-- gender -->
<div class="form-group">
<label class="col-md-2 control-label">性別</label>
<div class="col-md-5">
<div class="radio">
<label class="radio-inline">
<input type="radio" name="gender" value="1" id="man">
</label>
</div>
<div class="radio">
<label class="radio-inline">
<input type="radio" name="gender" value="2" id="woman">
</label>
</div>
</div>
</div>

<!-- known by -->
<div class="form-group">
<label class="col-md-2 control-label">何で知った?</label>
<div class="col-md-5">
<div class="checkbox">
<label>
<input type="checkbox" name="knownby" value="web" id="web">Web
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="knownby" value="magazine" id="magazine">雑誌
</label>
</div>
</div>
</div>

<!-- comment -->
<div class="form-group">
<label class="col-md-2 control-label">コメント</label>
<div class="col-md-5">
<textarea class="form-control" rows=3 placeholder="100文字までです。"></textarea>
</div>
</div>

<!-- submit -->
<div class="col-md-offset-2">
<button type="submit" class="btn btn-primary">Submit</button>
</div>

</form>

</div>

まあこんな感じ。radiobuttonとかでclass="radio-inline"としても、横並びにならない。なんで?

→たぶんradio-inlineを入れる位置がおかしい。<radio>にいれれば動くと思う。

あと、エラーメッセージ等はpタグでclass="help-block"で記述する。


画像一覧

Bootstrap使ってるとあまり使いませんが、ECサイトのような写真の羅列。これは、簡単(contentだけ抜粋)。

    <!-- content -->

<div class="row" style="padding:80px 0 0 0">

<div class="col-md-3">
<div class="panel panel-default">
<div class="panel-heading">
Menu
</div>
<!-- <div class="panel-body"> -->
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href=""><i class="glyphicon glyphicon-pencil"></i> submenu1</a></li>
<li><a href=""><i class="glyphicon glyphicon-download"></i> submenu2</a></li>
<li><a href=""><i class="glyphicon glyphicon-leaf"></i> submenu3</a></li>
<li><a href=""><i class="glyphicon glyphicon-folder-open"></i> submenu4</a></li>
</ul>
<!-- </div> -->
</div>
</div>

<!-- main -->
<div class="col-md-9">
<!-- apply custom style -->
<div class="page-header" style="margin-top:-30px;padding-bottom:0px;">
<h1><small>menu1->submenu1</small></h1>
</div>

<div class="row">

<!-- この単位を繰り返す -->
<div class="col-md-4">
<div class="thumbnail" style="text-align:center;padding-top:10px;">
<a href="">
<img src="150x150.jpg">
</a>
<div class="caption">
<p><b>Caption</b></p>
<p>this is a caption.</p>
<p style="margin-bottom:0px"><a href="" class="btn btn-primary">to cart</a></p>
</div>
</div>
</div>
<!-- ここまで -->
<!-- 繰り返し -->

</div><!-- end row -->

</div><!-- end main -->

</div><!-- end content -->

これは、こんな感じになる。


最後なのでソース全体

これは画像リスト版。上記は、各contentが違うだけ。

<!doctype html>

<html lang="ja">
<head>
<meta charset="utf-8">
<title>test</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="base.css" rel="stylesheet">
</head>
<body>

<div class="container">

<!-- navbar -->
<div class="row">
<nav class="navbar navbar-default navbar-fixed-top">

<div class="navbar-header">
<a href="" class="navbar-brand">Home</a>
</div>

<ul class="nav navbar-nav">
<li class="active"><a href="">menu1</a></li>
<li><a href="">menu2</a></li>
<li><a href="">menu3</a></li>
<li><a href="">menu4</a></li>
</ul>

</nav>
</div>

<!-- content -->
<div class="row" style="padding:80px 0 0 0">

<div class="col-md-3">
<div class="panel panel-default">
<div class="panel-heading">
Menu
</div>
<!-- <div class="panel-body"> -->
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href=""><i class="glyphicon glyphicon-pencil"></i> submenu1</a></li>
<li><a href=""><i class="glyphicon glyphicon-download"></i> submenu2</a></li>
<li><a href=""><i class="glyphicon glyphicon-leaf"></i> submenu3</a></li>
<li><a href=""><i class="glyphicon glyphicon-folder-open"></i> submenu4</a></li>
</ul>
<!-- </div> -->
</div>
</div>

<!-- main -->
<div class="col-md-9">
<!-- apply custom style -->
<div class="page-header" style="margin-top:-30px;padding-bottom:0px;">
<h1><small>menu1->submenu1</small></h1>
</div>

<div class="row">

<!-- この単位を繰り返す -->
<div class="col-md-4">
<div class="thumbnail" style="text-align:center;padding-top:10px;">
<a href="">
<img src="150x150.jpg">
</a>
<div class="caption">
<p><b>Caption</b></p>
<p>this is a caption.</p>
<p style="margin-bottom:0px"><a href="" class="btn btn-primary">to cart</a></p>
</div>
</div>
</div>
<!-- ここまで -->
<!-- 繰り返し -->

</div><!-- end row -->

</div><!-- end main -->

</div><!-- end content -->

</div>

<!-- footer -->
<div id="footer">copy left everything free.</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</body>
</html>

それとCSS。一応10行以内。

#footer{

background-color: #aaa;
height: 50px;
text-align: center;
line-height: 50px;
color : #fff;
margin-top:30px;
}


レスポンシブを無効にする

管理画面では、レスポンシブ対応いらないことがある。

ここを参考に、その通りやればいい。ただ、適用したCSSで変なbackgraoud-colorやborderがついたので、inline sytleで上書きした。

Gridを使っている場合は、col-xs-Xにするのだけど、そこに変なスタイルがついていた。

                <!-- この単位を繰り返す -->

<div class="col-xs-4" style="background-color:#fff;border:none">
<div class="thumbnail" style="text-align:center;padding-top:10px;">
<a href="">
<img src="150x150.jpg">
</a>
<div class="caption">
<p><b>Caption</b></p>
<p>this is a caption.</p>
<p style="margin-bottom:0px"><a href="" class="btn btn-primary">to cart</a></p>
</div>
</div>
</div>
<!-- ここまで -->


まとめ

Bootstrapをなるべくカスタマイズせずに利用するためには、inline styleで既存のスタイルを少しいじるのが一番良い。