&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に適用すると変になる。 **form-inlineでform-groupの幅を指定するには? [#bb9ea656] -[[jquery - input width in form-inline bootstrap 3 - Stack Overflow:http://stackoverflow.com/questions/23982110/input-width-in-form-inline-bootstrap-3]]にあるように、container > row > form-inline > col > from-groupのように構成する? #pre{{ <div class="container"> <div class="row"> <form role="form" class="form-inline"> <div class="col-xs-12 col-md-2"> <div class="form-group"> <input type="text" class="form-control" placeholder="Почтовый идентификатор" id="search"> </div> </div> <div class="col-xs-6 col-md-1"> <input type="button" class="btn btn-success" value="Найти" onclick="window.location.href = '/result/' + document.getElementById('search').value"/> </div> </form> </div> </div> }} うまくいかない場合、 ですきまをかえるしかないかも。