Bootstrap3 の履歴(No.4)

• 履歴一覧
• 差分 を表示
• 現在との差分 を表示
• ソース を表示
• Bootstrap3 へ行く。
  • 1 (2014-05-29 (木) 06:28:18)
  • 2 (2014-12-11 (木) 06:08:36)
  • 3 (2015-07-02 (木) 06:56:12)
  • 4 (2015-07-17 (金) 11:22:15)
  • 5 (2015-07-18 (土) 06:01:43)
  • 6 (2015-07-22 (水) 06:59:05)
  • 7 (2015-07-27 (月) 06:54:08)

Tag: Bootstrap3

目次†

関連ページ†

参考情報†

• Bootstrap3でさくっとWebサイトを作ってみよう | Designup // Bootstrap3の使用例

変更点†

• レスポンシブルを無効にしづらくなった。

グリッド†

グリッドシステムの基本†

• Twitter Bootstrapのcontainer、row、col(span)の正しい使い方 -- ぺけみさお
• 全体をセンタリングするためにcontainerを使う。
• rowはネガティブマージンを持ち始点をずらすもの。
• その中にcolが12個まで格納できる。

グリッドを入れ子にする†

• 入れ子にするときrowで囲む。その中は12から始まる。

      <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†

.form-controlを適用するのは？†

• CSS · Bootstrapによると、 <input>、<textarea>、<select>あたりに適用するのが読みたい。
• checkboxやradiobuttonに適用すると変になる。