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


簡単なデモや管理画面を作るレベルで利用する最低限のBootstrapの知識のメモ。
フロントエンドを作るのは[ここ](http://designup.jp/bootstrap3-3min-create-90/)が参考になります。

##やりたいこと

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

・オリジナルのCSSに一切手をいれない。
・いじる場合は、inline styleで少しいじる。
・オリジナルのCSSは、ほとんど使わない（10行以下）。


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

```html
<!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の要素は使わず。それでも、リセット系は効いてます。

```html
<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>
```

これは、こうなる（全体に伸びる）。

![boot1](http://www.bluecode.jp/qiita/boot1.png)


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

```html
<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の有無で凸凹に）。

![boot2](http://www.bluecode.jp/qiita/boot2.png)

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を入れる。

```html
<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>
```
となる。

![boot3](http://www.bluecode.jp/qiita/boot3.png)

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


###Navbar（メインメニュー）

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

header要素はもういらないので、消して、Navbarとし、left,center,rightに色つけた。
navbarを黒ベースにするときは、navbar-inverseとする。

```html
<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する。

![boot4](http://www.bluecode.jp/qiita/boot4.png)

###サイドメニュー

サイドメニューは「これ！」という作り方がありません。サイドバー用のグリッドの中で適当にメニューを作るしかないのですが、折角なのでBootstrapの要素で対応したいものです。
縦メニューは、class="nav nav-pills nav-stacked"で作れるのですが、味気ないので、ここではpanelで囲ってみます。
普通にpanelを使うと、menuにpaddingがかかった感じになるので、bodyを定義せず、そのままul,liを記述します。
glyphicon等を利用していろどりを添えます。

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

```html
<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>
```

![boot5](http://www.bluecode.jp/qiita/boot5.png)

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

###全体を整える

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

・right要素を削除。
・centerをmainに。

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

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

```html
<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。。。（無念）。

```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自体をいじらなくていいので便利です。

![boot6](http://www.bluecode.jp/qiita/boot6.png)

だいぶそれっぽい。

###テーブルコンテンツ

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

```html
		<!-- 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>
```

![boot7](http://www.bluecode.jp/qiita/boot7.png)

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

###Form

次は、Formのレイアウトのおさらい。何も考えず普通に書けばこうなる（contentだけ抜粋）。
なお、この書き方は一貫性が無いので、飛ばしてもらっても構わない。

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

```html
<!-- 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>

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

![boot8](http://www.bluecode.jp/qiita/boot8.png)

まあ、内々なら十分使えるレベルか。
bootstrapのややこしいのは、class="horizontal"の時のマークアップと、普段のマークアップが違うこと。何で？

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

```html
<!-- 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>
```

![boot9](http://www.bluecode.jp/qiita/boot9.png)


まあこんな感じ。radiobuttonとかでclass="radio-inline"としても、横並びにならない。なんで？
→たぶんradio-inlineを入れる位置がおかしい。\<radio>にいれれば動くと思う。

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

###画像一覧

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

```html
	<!-- 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 -->
```

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

![boot10](http://www.bluecode.jp/qiita/boot10.png)

###最後なのでソース全体

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

```html
<!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行以内。

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

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

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

[ここ](http://tasudesign.com/web-desing/bootstrap-non-responsive/)を参考に、その通りやればいい。ただ、適用したCSSで変なbackgraoud-colorやborderがついたので、inline sytleで上書きした。
Gridを使っている場合は、col-xs-Xにするのだけど、そこに変なスタイルがついていた。

```html
				<!-- この単位を繰り返す -->
				<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で既存のスタイルを少しいじるのが一番良い。