ブートストラップ

足場

Bootstrap は、レスポンシブな 12 列のグリッド上に構築されています。また、そのシステムに基づく固定幅および可変幅のレイアウトも含まれています。

CSS リセット、タイポグラフィ、およびリンクのグローバル スタイル

HTML5 doctype が必要です

Bootstrap は、HTML5 doctype の使用を必要とする HTML 要素と CSS プロパティを利用します。プロジェクトのすべての Bootstrapped ページの先頭に必ず含めてください。

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

タイポグラフィとリンク

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

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

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

Bootstrap 2 の時点で、従来の CSS リセットは、 Nicolas Gallagherによるプロジェクトで、 HTML5 Boilerplateも強化しているNormalize.cssの要素を利用するように進化しました。

新しいリセットは引き続きreset.lessにありますが、簡潔さと正確さのために多くの要素が削除されています。

デフォルトのグリッド システムレスポンシブなひねりを加えた 12 列

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

Bootstrap で提供されるデフォルトのグリッド システムは、724px、940px (レスポンシブ CSS が含まれていないデフォルト)、および 1170px の幅でレンダリングされる12 列を使用します。767 ピクセルのビューポートより下では、列が流動的になり、垂直に積み重なっています。

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

ここに示すように、基本的なレイアウトは 2 つの「列」で作成できます。各列は、グリッド システムの一部として定義した 12 の基本的な列にまたがっています。


列のオフセット

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

列のネスト

Bootstrap の静的 (非流体) グリッド システムを使用すると、ネスティングが簡単になります。コンテンツをネストするには、既存の列内に新しい.row一連の列を追加するだけです。.span*.span*

例

ネストされた行には、その親の列数まで合計される一連の列が含まれている必要があります。たとえば、入れ子になった 2 つの.span3列は 内に配置する必要があります.span6。

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

流体グリッド システム12 のレスポンシブなパーセントベースの列

流体カラム

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

ピクセルではなくパーセント

流体グリッド システムでは、列幅に固定ピクセルではなくパーセントが使用されます。また、固定グリッド システムと同じ応答性のバリエーションがあり、主要な画面解像度とデバイスに対して適切な比率を確保します。

流動的な行

.rowに変更するだけで、行を流動的にし.row-fluidます。列はまったく同じままなので、固定レイアウトと流動レイアウトを簡単に切り替えることができます。

マークアップ

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

流体ネスティング

流動グリッドでのネストは少し異なります。ネストされた列の数は、親と一致する必要はありません。代わりに、各行が親列の 100% を占めるため、列は各レベルでリセットされます。

液体 12
液体 6
液体 6 
  1. <div class = "row-fluid" > 
  2.   <divクラス= "span12" > 
  3.     列のレベル 1
  4.     <div class = "row-fluid" > 
  5.       <div class = "span6" >レベル 2 </div> 
  6.       <div class = "span6" >レベル 2 </div> 
  7.     </div>
  8.   </div>
  9. </div>

グリッドのカスタマイズ

変数 デフォルト値 説明
@gridColumns 12 列の数
@gridColumnWidth 60px 各列の幅
@gridGutterWidth 20px 列間の負のスペース

LESS の変数

Bootstrap には、上記のデフォルトの 940px グリッド システムをカスタマイズするためのいくつかの変数が組み込まれています。グリッドのすべての変数は、variables.less に保存されます。

カスタマイズ方法

グリッドを変更する@grid*と、3 つの変数が変更され、Bootstrap が再コンパイルされます。variables.less のグリッド変数を変更し、ドキュメントに記載されている 4 つの方法のいずれかを使用して再コンパイルします。さらに列を追加する場合は、それらの CSS を grid.less に必ず追加してください。

応答性の維持

グリッドのカスタマイズは、デフォルト レベルの 940px グリッドでのみ機能します。Bootstrap のレスポンシブな側面を維持するには、responsive.less のグリッドもカスタマイズする必要があります。

レイアウトWeb ページを作成するための基本的なテンプレート

固定レイアウト

単一の<div class="container">.

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

流動的なレイアウト

<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 を使用できますが、通常はmin-widthとmax-width.

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

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

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

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

ラベル レイアウト幅 列幅 ガター幅
スマートフォン 480px以下 可変列、固定幅なし
スマートフォンからタブレットへ 767px以下 可変列、固定幅なし
縦型タブレット 768px以上 42ピクセル 20px
デフォルト 980px以上 60px 20px
大型ディスプレイ 1200px以上 70px 30px

メタタグが必要

デバイスがレスポンシブ ページを適切に表示するようにするには、viewport メタ タグを含めます。

  1. <meta name = "viewport" content = "width=device-width, initial-scale=1.0" >

メディア クエリの使用

Bootstrap はこれらのメディア クエリを自動的に含めませんが、それらを理解して追加することは非常に簡単で、最小限の設定で済みます。Bootstrap のレスポンシブ機能を含めるには、いくつかのオプションがあります。

  1. コンパイル済みのレスポンシブ バージョン、bootstrap-responsive.css を使用する
  2. @import "responsive.less" を追加して Bootstrap を再コンパイルする
  3. Respond.less を別のファイルとして変更して再コンパイルする

なぜそれを含めないのですか？正直なところ、すべてがレスポンシブである必要はありません。開発者にこの機能を削除するよう促すのではなく、有効にするのが最善であると考えています。

  1.   /* 横向きの電話と下向き */
  2.   @media (最大-幅: 480px ) { ... }     
  3.  
  4.   /* 横向きのスマートフォンから縦向きのタブレットへ */
  5.   @media (最大-幅: 767px ) { ... }     
  6.  
  7.   /* 縦長のタブレットから横長およびデスクトップへ */
  8.   @media (最小-幅: 768px )および(最大-幅: 979px ) { ... }        
  9.  
  10.   /* 大きなデスクトップ */
  11.   @media (最小-幅: 1200px ) { ... }

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

彼らは何ですか

モバイル対応の開発を迅速に行うには、これらの基本的なユーティリティ クラスを使用して、デバイスごとにコンテンツを表示および非表示にします。

いつ使用するか

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

たとえば、<select>モバイル レイアウトではナビゲーションの要素を表示できますが、タブレットやデスクトップでは表示されません。

支援授業

ここに示されているのは、サポートされているクラスと、特定のメディア クエリ レイアウトに対するそれらの影響の表です (デバイスごとにラベル付けされています)。それらは にありますresponsive.less。

クラス 電話480px以下 錠剤767px以下 デスクトップ768px以上
.visible-phone 見える
.visible-tablet 見える
.visible-desktop 見える
.hidden-phone 見える 見える
.hidden-tablet 見える 見える
.hidden-desktop 見える 見える

テストケース

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

目に見える...

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

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

に隠されています...

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

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