ブートストラップ

足場

Bootstrap は、レスポンシブな 12 列のグリッド、レイアウト、およびコンポーネントに基づいて構築されています。

全体設定

HTML5 doctype が必要です

Bootstrap は、HTML5 doctype の使用を必要とする特定の HTML 要素と CSS プロパティを利用します。すべてのプロジェクトの最初に含めます。

  1. <!DOCTYPE html>
  2. <html lang = "ja" > 
  3.   ...
  4. </html>

タイポグラフィとリンク

Bootstrap は、基本的なグローバル表示、タイポグラフィ、およびリンク スタイルを設定します。具体的には、

  • margin本体から取り外します
  • background-color: white;上に設定body
  • @baseFontFamily、@baseFontSize、および@baseLineHeight属性をタイポグラフィのベースとして使用する
  • 経由でグローバル リンクの色を設定し、@linkColorリンクの下線のみを適用します。:hover

これらのスタイルはscaffolding.less内にあります。

ノーマライズによるリセット

Bootstrap 2 では、 HTML5 Boilerplateを強化するNicolas GallagherとJonathan NealによるプロジェクトであるNormalize.cssを支持して、古いリセット ブロックが削除されました。reset.less内で多くの Normalize を使用していますが、Bootstrap 用にいくつかの要素を削除しました。

デフォルトのグリッド システム

ライブ グリッドの例

デフォルトの Bootstrap グリッド システムは12 列を使用し、レスポンシブ機能が有効になっていない幅 940 ピクセルのコンテナーを作成します。レスポンシブ CSS ファイルを追加すると、ビューポートに応じてグリッドが 724px および 1170px 幅に適応します。767 ピクセルのビューポートより下では、列が流動的になり、垂直に積み上げられます。

1
1
1
1
1
1
1
1
1
2
3
4
4
5
9

基本的なグリッド HTML

単純な 2 列のレイアウトの場合.rowは、適切な数の.span*列を作成して追加します。これは 12 列のグリッドであるため、それぞれ.span*がこれらの 12 列の数にまたがり、各行 (または親の列の数) に対して常に最大 12 を追加する必要があります。

  1. <divクラス= "行" > 
  2.   <divクラス= "span4" > ... </div> 
  3.   <divクラス= "span8" > ... </div> 
  4. </div>

この例では、 と が.span4あり.span8、合計 12 列と完全な行になります。

列のオフセット

.offset*クラスを使用して列を右に移動します。各クラスは、列の左マージンを列全体で増やします。たとえば、 4 つの列を.offset4移動.span4します。

4
3 オフセット 2
3 オフセット 1
3 オフセット 2
6 オフセット 3 
  1. <divクラス= "行" > 
  2.   <divクラス= "span4" > ... </div> 
  3.   <divクラス= "span3 オフセット 2" > ... </div> 
  4. </div>

列のネスト

コンテンツを既定のグリッドにネストするには、既存の列内に新しい.row一連の列を追加します。ネストされた行には、その親の列数まで合計される一連の列が含まれている必要があります。.span*.span*

レベル 1 列
レベル2
レベル2 
  1. <divクラス= "行" > 
  2.   <divクラス= "span9" > 
  3.     レベル 1 列
  4.     <divクラス= "行" > 
  5.       <div class = "span6" >レベル 2 </div> 
  6.       <div class = "span3" >レベル 2 </div> 
  7.     </div>
  8.   </div>
  9. </div>

流体グリッドシステム

ライブ流体グリッドの例

流体グリッド システムでは、列幅にピクセルではなくパーセントが使用されます。固定グリッド システムと同じ応答機能を備えているため、主要な画面解像度とデバイスの適切な比率が保証されます。

1
1
1
1
1
1
1
1
1
1
1
1
4
4
4
4
8
6
6
12

基本的な流動グリッド HTML

.rowに変更して、任意の行を「流動的」にし.row-fluidます。列クラスはまったく同じままなので、固定グリッドと流動グリッドを簡単に切り替えることができます。

  1. <div class = "row-fluid" > 
  2.   <divクラス= "span4" > ... </div> 
  3.   <divクラス= "span8" > ... </div> 
  4. </div>

流体オフセット

固定グリッド システムのオフセットと同じように動作し.offset*ます。任意の列に追加して、その数の列だけオフセットします。

4
4 オフセット 4
3 オフセット 3
3 オフセット 3
6 オフセット 6 
  1. <div class = "row-fluid" > 
  2.   <divクラス= "span4" > ... </div> 
  3.   <divクラス= "span4 オフセット 2" > ... </div> 
  4. </div>

流体ネスティング

流動グリッドはネストを異なる方法で利用します。ネストされた各レベルの列は、最大 12 列を追加する必要があります。これは、流体グリッドが幅の設定にピクセルではなくパーセンテージを使用するためです。

液体 12
液体 6
液体 6
液体 6
液体 6 
  1. <div class = "row-fluid" > 
  2.   <divクラス= "span12" > 
  3.     液体 12
  4.     <div class = "row-fluid" > 
  5.       <divクラス= "span6" > 
  6.         液体 6
  7.         <div class = "row-fluid" > 
  8.           <div class = "span6" > Fluid 6 </div> 
  9.           <div class = "span6" > Fluid 6 </div> 
  10.         </div>
  11.       </div>
  12.       <div class = "span6" > Fluid 6 </div> 
  13.     </div>
  14.   </div>
  15. </div>

レイアウト

固定レイアウト

必要なだけの一般的な固定幅 (およびオプションでレスポンシブ) レイアウトを提供します<div class="container">。

  1. <本体>
  2.   <divクラス= "コンテナ" > 
  3.     ...
  4.   </div>
  5. </body>

流動的なレイアウト

流動的な 2 列のページを作成するには<div class="container-fluid">、アプリケーションやドキュメントに最適です。

  1. <div class = "コンテナ流体" > 
  2.   <div class = "row-fluid" > 
  3.     <divクラス= "span2" > 
  4.       <!--サイドバーの内容-->
  5.     </div>
  6.     <divクラス= "span10" > 
  7.       <!--本文内容-->
  8.     </div>
  9.   </div>
  10. </div>

レスポンシブデザイン

レスポンシブ機能の有効化

ドキュメント内に適切なメタ タグと追加のスタイルシートを含めて、プロジェクトでレスポンシブ CSS をオンにします<head>。[カスタマイズ] ページから Bootstrap をコンパイルした場合は、meta タグのみを含める必要があります。

  1. <meta name = "viewport" content = "width=device-width, initial-scale=1.0" >  
  2. <link href = "assets/css/bootstrap-responsive.css" rel = "stylesheet" >

注意喚起！現時点では、すべてがレスポンシブである必要はないため、Bootstrap にはデフォルトでレスポンシブ機能が含まれていません。開発者にこの機能の削除を促すのではなく、必要に応じて有効にするのが最善であると考えています。

レスポンシブ Bootstrap について

レスポンシブ デバイス

メディア クエリでは、さまざまな条件 (比率、幅、表示タイプなど) に基づいてカスタム CSS を使用できますが、通常はmin-widthとmax-width.

  • グリッドの列の幅を変更します
  • 必要に応じて float ではなく要素を積み重ねる
  • デバイスに合わせて見出しとテキストのサイズを変更する

メディア クエリは責任を持って使用し、モバイル オーディエンスの開始点としてのみ使用してください。大規模なプロジェクトの場合は、メディア クエリのレイヤーではなく、専用のコード ベースを検討してください。

サポートされているデバイス

Bootstrap は、1 つのファイルで少数のメディア クエリをサポートし、さまざまなデバイスや画面解像度でプロジェクトをより適切なものにするのに役立ちます。含まれるものは次のとおりです。

ラベル レイアウト幅 列幅 ガター幅
大型ディスプレイ 1200px以上 70px 30px
デフォルト 980px以上 60px 20px
縦型タブレット 768px以上 42ピクセル 20px
電話からタブレットへ 767px以下 可変列、固定幅なし
電話 480px以下 可変列、固定幅なし 
  1. /* 大きなデスクトップ */
  2. @media (最小-幅: 1200px ) { ... }     
  3.  
  4. /* 縦長のタブレットから横長およびデスクトップへ */
  5. @media (最小-幅: 768px )および(最大-幅: 979px ) { ... }        
  6.  
  7. /* 横向きのスマートフォンから縦向きのタブレットへ */
  8. @media (最大-幅: 767px ) { ... }     
  9.  
  10. /* 横向きの電話と下向き */
  11. @media (最大-幅: 480px ) { ... }

レスポンシブ ユーティリティ クラス

モバイル対応の開発を迅速に行うには、これらのユーティリティ クラスを使用して、デバイスごとにコンテンツを表示および非表示にします。以下は、使用可能なクラスと、特定のメディア クエリ レイアウトに対するそれらの影響の表です (デバイスによってラベル付けされています)。それらは にありますresponsive.less。

クラス 電話767px以下 錠剤979px～768px デスクトップデフォルト
.visible-phone 見える
.visible-tablet 見える
.visible-desktop 見える
.hidden-phone 見える 見える
.hidden-tablet 見える 見える
.hidden-desktop 見える 見える

いつ使用するか

限定的に使用し、同じサイトのまったく異なるバージョンを作成することは避けてください。代わりに、各デバイスのプレゼンテーションを補完するために使用してください。レスポンシブ ユーティリティはテーブルで使用しないでください。そのため、サポートされていません。

レスポンシブ ユーティリティのテスト ケース

上記のクラスをテストするには、ブラウザーのサイズを変更するか、さまざまなデバイスにロードします。

目に見える...

緑のチェックマークは、クラスが現在のビューポートに表示されていることを示します。

  • 電話✔ 電話
  • タブレット✔ タブレット
  • デスクトップ✔ デスクトップ

に隠されています...

ここで、緑色のチェックマークは、現在のビューポートでクラスが非表示になっていることを示しています。

  • 電話✔ 電話
  • タブレット✔ タブレット
  • デスクトップ✔ デスクトップ