Bootstrap基礎

Gridシステムについて

containerクラスで囲うと余白ができる

全体の横幅12に分割すると考える。

先ず、rowクラスを作り、その中に
col-sm-12クラスのようにして追加いく。

col-sm-12のsmの部分は、該当px以下のときに適応される。
xs = auto
sm = 750px
md = 970px
lg = 1170px
が種類。

hidden-xs
visible-xs
のように該当サイズになると見せたり消したりもできる。

tableタグ

tableタグにtableクラスを付けるだけで見た目が変わる。
その他にも、tableクラスと合わせて
table-stripedクラス(色分)
table-borderedクラス(枠線)
table-hoverクラス(カーソル反応)
table-condensed(縮小)
などがある。

trタグではwarningクラスと付けると行に色が付く。

formタグ

先ずform-groupクラスで囲う。
その中にlabelタグとinputタグを入れる。
labeタグにはcontrol-labelクラスを付けて、
inputタグには、form-controlクラスを付ける。

buttonタグには、
btn btn-primaryクラス等を付ける。

formタグにform-inlineクラスを付けと横並び。

glyphiconsとボタン

<i class=”glyphicon glyphicon-book”></i>
のように使う。

btn btn-primaryクラス等でボタンとなる。

ボタンをグループ化スル場合、要素を
btn-groupクラスで囲う。

dropdown

ボタングループを作って、ボタンを入れて、そのボタンに、
dropdown-toggleクラスを付けのと、
data-toggle属性にdropdownを付ける。

メニューは、ulタグにdropdown-menuクラスを付ける。

<button class=”btn btn-primary dropdown-toggle” data-toggle=”dropdown” >
xxx <span class=”caret”></span>
</button>
<ul>
<li class=”dropdown-menu”>xxx</li>
</ul>
のような感じ。

最大幅を固定

@media(min-width:750px){.container{max-width:750px;}}
この場合750pxより大きい場合に適用。

グリッドのネスト

ネストさせる場合。
.row > .col > .row > .col
にする。

子になった方も12で分割される。

適当に実験