&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] **全般 [#c56a2e62] ***.form-controlを適用するのは? [#ka1469e5] -[[CSS · Bootstrap:http://getbootstrap.com/css/]]によると、 <input>、<textarea>、<select>あたりに適用するのが読みたい。 -checkboxやradiobuttonに適用すると変になる。 **form-horizontal [#pb165a9e] ***ラベルとコントロールを同一行に配置する場合 [#t80ecd70] -1行ごとにfrom-groupのdivで囲み、その中をcolで区切る。 -control-labelを指定するとラベルは右寄せになる。 -チェックボックスは外側をcheckboxのclass指定をしたdivで囲む。チェックボックス自体はlabelで囲まないと位置が揃わない? #pre{{ <form class="form-horizontal"> <div class="form-group"> <label for="inputEmail3" class="col-sm-2 control-label">Email</label> <div class="col-sm-10"> <input type="email" class="form-control" id="inputEmail3" placeholder="Email"> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <div class="checkbox"> <label><input type="checkbox"> Remember me</label> </div> </div> </div> <div class="form-group"> <label for="confirm" class="col-sm-2 control-label">確認</label> <div class="col-sm-10"> <div class="checkbox"> <label><input id="confirm" type="checkbox"> ※ラベルタグが無いと位置が揃わない?</label> </div> </div> </div> </form> }} **form-inline [#z4708579] ***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> }} うまくいかない場合、 ですきまをかえるしかないかも。