Bootstrap自分メモ


自分用勉強メモです。記載不足や間違い等あるかもしれません。

## Bootstrapって何？

CSSフレームワークと呼ばれるもの。
CSSとbootstrapの.jsをHTMLで読み込んでおくことで、デザインセンスの良いウェブサイトを容易に作ることができます。

## Bootstrapのテンプレ
http://getbootstrap.com/getting-started/#template
にあるサンプルの引用を少し改変。
class="container"を入れることで、中央揃えにし、左右に隙間を開けられる。

```html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  </head>
  <body>
	<div id="header" class="container" style="background:red;">header</div>
	
	<div class="container">
    body
	</div>
	
	<div id="footer" class="container" style="background:blue;">footer</div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  </body>
</html>
```

## Grid system
「col-sm- * 」の * の部分に割合を指定する。 * の合計が12になるようにする。
作りたいページのサイズに応じて、smの代わりにxs、md、lgなども指定できる。

```html
		<div class="row">
			<div class="col-sm-3" style="background:gray;">Left</div>
			<div class="col-sm-6" style="background:green;">Main</div>
			<div class="col-sm-3" style="background:orange;">Right</div>
		</div>
```

さらに画面が小さくなったときのサイズを指定する場合は、併記する。
非表示にする場合は、hidden-xsなどのように書く。

```html
		<div class="row">
			<div class="col-sm-3 hidden-xs" style="background:gray;">Left</div>
			<div class="col-sm-6 col-xs-6" style="background:green;">Main</div>
			<div class="col-sm-3 col-xs-6" style="background:orange;">Right</div>
		</div>
```

Gridのサンプルは以下を見ると参考になる。
http://getbootstrap.com/examples/grid/
すべてのオプションは以下を参照。
http://getbootstrap.com/css/#grid

## Tables
- table：いい感じにしてくれる
- table-striped ：奇数偶数行で色を変える
- table-bordered ：枠線をつける
- table-hover：マウスオーバーで色を変える

また、div要素にstyle="padding:20px 0"のようにつけておくと便利。
 class="warning"をつけて、特定行を強調することもできる。

```html
	<div class="container" style="padding:20px 0">
		<table class="table table-striped table-bordered table-hover">
			<thead>
				<tr><th>Name</th><th>Score</th></tr>
			</thead>
			<tbody>
				<tr><td>A</td><td>200</td></tr>
				<tr><td>B</td><td>280</td></tr>
				<tr class="warning"><td>C</td><td>320</td></tr>
			</tbody>
		</table>
	</div>
```

## Forms

- form-inline：一行フォーム
- form-group：入力項目ごとにこれでくくる
- btn btn-primary：ボタンにはこれをつけておくといい感じになる

```html
	<div class="container" style="padding:20px 0">
		<form class="form-inline">
			<div class="form-group">
				<label class="control-label" for="email">Email</label>
				<input type="text" id="email" class="form-control" placeholder="email">
			</div>
			<div class="form-group">
				<input type="submit" value="submit" class="btn btn-primary">
			</div>
		</form>
	</div>
```

入力項目が複数あり、縦に並べたい場合は、form-horizontalを使う。

- col-sm-2：これでレイアウトする
- inputなどのコントロールは、divで囲ってレイアウトする
- 入力項目ごとに、form-groupでくくる
- col-sm-offset-2：空白部分はこれで確保する

```html
	<div class="container" style="padding:20px 0">
		<form class="form-horizontal">
			<div class="form-group">
				<label class="control-label col-sm-2" for="email">Name</label>
				<div class="col-sm-4">
					<input type="text" id="name" class="form-control" placeholder="name">
				</div>
			</div>
			<div class="form-group">
				<label class="control-label col-sm-2" for="email">Email</label>
				<div class="col-sm-4">
					<input type="text" id="email" class="form-control" placeholder="email">
				</div>
			</div>
			<div class="form-group">
				<div class="col-sm-offset-2 col-sm-4">
					<input type="submit" value="submit" class="btn btn-primary">
				</dfiv>
			</div>
		</form>
	</div>
```

ちなみに、ボタンにもいろいろ種類があります。
また、複数のボタンをくっつけることもできます。

- btn-primary、btn-success、btn-info：ボタンのデザインを変える
- btn-group：これで囲うことでボタンをくっつけられる

```html
		<div class="btn-group">
			<button class="btn btn-primary">AAA</button>
			<button class="btn btn-success">BBB</button>
			<button class="btn btn-info">CCC</button>
		</div>
```

## Glyphicons

デフォルトでいろいろなアイコンが用意されています。
以下を参照。
http://getbootstrap.com/components/

- glyphicon：まずこれを指定して
- glyphicon-book：使いたいアイコン名を指定する

```html
		<p><i class="glyphicon glyphicon-book"> Book</i></p>
```

ボタンにアイコンをつけることもできます。

```html
		<button class="btn btn-primary"><i class="glyphicon glyphicon-book"></i> Push</button>
```

## 続く