&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>
}}

*Form [#scdf2c1f]
**.form-controlを適用するのは? [#ka1469e5]
-[[CSS &#183; Bootstrap:http://getbootstrap.com/css/]]によると、 <input>、<textarea>、<select>あたりに適用するのが読みたい。
-checkboxやradiobuttonに適用すると変になる。


トップ   新規 一覧 検索 最終更新   ヘルプ   最終更新のRSS