Bootstrap自分メモ #CSS

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

Bootstrapって何？

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

Bootstrapのテンプレ

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

<!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なども指定できる。

        <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などのように書く。

        <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"をつけて、特定行を強調することもできる。

    <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：ボタンにはこれをつけておくといい感じになる

    <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：空白部分はこれで確保する

    <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：これで囲うことでボタンをくっつけられる

        <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：使いたいアイコン名を指定する

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

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

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

Bootstrap自分メモ