簡単なデモや管理画面を作るレベルで利用する最低限の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で既存のスタイルを少しいじるのが一番良い。