&tag(Bootstrap3); *目次 [#e6cbfae5] #contents *関連ページ [#n8bc65da] *参考情報 [#c7e6ea87] -[[Bootstrap3でさくっとWebサイトを作ってみよう | Designup:http://designup.jp/bootstrap3-3min-create-90/]] // Bootstrap3の使用例 *変更点 [#xc50e8d7] -レスポンシブルを無効にしづらくなった。 *グリッド [#ia3fca41] **グリッドシステムの基本 [#o38095dc] -[[Twitter Bootstrapのcontainer、row、col(span)の正しい使い方 -- ぺけみさお:http://www.xmisao.com/2013/10/20/bootstrap-container-row-col-tips.html]] -全体をセンタリングするためにcontainerを使う。 -rowはネガティブマージンを持ち始点をずらすもの。 -その中にcolが12個まで格納できる。 #pre{{ }} **グリッドを入れ子にする [#e4c1a648] -入れ子にするときrowで囲む。その中は12から始まる。 #pre{{ <div class="container"> <div class="col-xs-6" style="background-color: #999;">列1</div> <div class="col-xs-6" style="background-color: #bbb;">列2</div> <div class="col-xs-8" style="background-color: #999;">列1</div> <div class="col-xs-4" style="background-color: #bbb;">列2</div> <div class="col-xs-8" style="background-color: #999;"> <div class="row"> <div class="col-xs-6" style="background-color: #777;">列1-1</div> <div class="col-xs-6" style="background-color: #888;">列1-2</div> </div> </div> <div class="col-xs-4" style="background-color: #bbb;">列2</div> </div> }} -ネストサせたい場合、rowとcolをまとめて指定しないといけない。逆にいえばネストさせなくていいならばrowとcolはいらない。 *Form [#scdf2c1f] **.form-controlを適用するのは? [#ka1469e5] -[[CSS · Bootstrap:http://getbootstrap.com/css/]]によると、 <input>、<textarea>、<select>あたりに適用するのが読みたい。 -checkboxやradiobuttonに適用すると変になる。