ブートストラップグリッドシステム2024 年の最新の入門チュートリアル。このコースでは グリッド(グリッド)とは何ですか?,ブートストラップグリッドシステム(グリッドシステム)とは何ですか?,ブートストラップグリッドシステム(グリッドシステム)の作品,メディアクエリ,グリッドオプション,応答列はリセット,例,オフセット列,例,ネストした列,例,列のソート,例, について学習できます。
ブートストラップグリッドシステム
このセクションでは、ブートストラップグリッドシステム(グリッドシステム)を説明します。
ブートストラップは、画面またはビューポート(ビューポート)のサイズの増加に伴って、応答性、モバイル優先フローグリッドシステムを提供し、システムは自動的に12の最大値に分割されます。
ウィキペディアから:
グラフィックデザインでは、グリッドは、(通常は2次元)からなる交差(垂直、水平)構造により、コンテンツを整理するために使用される一連の直線です。 これは、広くデザインプリントデザインレイアウトとコンテンツ構造で使用されています。 ウェブデザインでは、迅速にHTMLやCSSアプローチを使用して一貫して効果的なレイアウトを作成するために使用されます。
単にサイトがナビゲートしやすいであるように、コンテンツを整理するためのウェブデザイングリッドを入れて、クライアントの負荷を軽減します。
グリッドシステムの説明上の公式ドキュメントブートストラップ:
ブートストラップは、適切12に拡張機器またはビューポートのサイズの増大に応答して、モバイルデバイスの優先順位、固定されていないグリッドシステムを含みます。 また、クラスを混ぜ複数の意味のレイアウトを生成するための強力な含まれ、簡単にレイアウトオプションの定義済みのクラスが含まれています。
私たちはどのように上記のステートメントを理解しましょう。 3ブートストラップ、モバイルデバイスの優先順位は、この意味では、(モバイル、タブレットなど)小さな画面のデバイス用のブートストラップコードは、その後、コンポーネントおよびグリッド上(ラップトップ、デスクトップコンピュータなど)の大画面デバイスに拡張されます。
モバイル-最初の戦略
- コンテンツ
- レイアウト
- 優先順位は小さい幅を設計しました。
- CSSベースのモバイルデバイスは、メディアクエリは、タブレットコンピュータ、デスクトップコンピュータに送られ、優先事項です。
- プログレッシブ・エンハンスメント
増加画面やビューポート(ビューポート)サイズの応答グリッドシステムは、システムが自動的に12の最大値に分割されます。
1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 |
4 | 4 | 4 |
4 | 8 |
6 | 6 |
12 |
ページレイアウトを作成するためのコンテンツを持つ行と列は一連のグリッドシステム。 それがどのように動作するかを以下に示しますブートストラップグリッドシステムは、次のとおりです。
- 行は、適切な位置合わせ(アライメント)とパディング(詰め物)を得るために、.containerクラスに配置する必要があります。
- 列の水平方向のセットを作成する行を使用します。
- コンテンツは、列に配置されるべきであり、カラムは、直接の子の行であることができます。
- 所定のグリッドクラス、例えば.rowと.COL-XS-4は、すぐにグリッドレイアウトを作成するために使用することができます。 LESS混合クラスでは、複数の意味のレイアウトを使用することができます。
- パディング(パディング)によって列の内容との間のギャップを作成するための列。 パディングは、外部(マージン)否定し、最後の行にを通じて.rowsから、最初の列はオフセットを示しています。
- グリッドシステムは、あなたがクロスを作成したい12の列を指定することで利用可能です。 例えば、3つの等しい列を作成するために、3.COL-XS-4を使用します。
メディアクエリは非常にシックな「条件付きCSSルール」です。 それだけでいくつかの所定の基準をCSSに基づいていくつかに適用されます。 これらの条件が満たされている場合には、適切なスタイルを適用します。
ブートストラップメディアクエリを使用すると、ビューポート、ショーと非表示コンテンツのサイズに基づいて移動することができます。 ブートストラップグリッドシステムの重要な境界点のしきい値を作成するために使用されるLESSファイルを使用して、次のメディアクエリ。
/ *超小型デバイス(携帯電話、未満768px)* /
/ *デフォルトでは、ブートストラップなしメディアクエリ* /
/ *小型デバイス(タブレット、以降768px)* /
@media(最小幅:画面-SM-分@){ja.}
/ *ミディアムデバイス(デスクトップ、992px以降)* /
@media(最小幅:@画面-MD-分){ja.}
/ *大型機器(大型デスクトップコンピュータ、以降1200px)* /
@media(最小幅:画面-LG-分@){ja.}
私たちは時々 、画面サイズの小さい範囲内に閉じ込められたCSSに影響を与えるコード内のmax-widthメディアクエリーが含まれています。
@media(最大幅:@画面-XS-MAX){ja.}
@media(幅分:画面-SM-分@)と(最大幅:画面-SM-MAX @){ja.}
@media(最小幅:@画面-MD-分)及び(最大幅:@画面-MD-MAX){ja.}
@media(最小幅:画面-LG-分@){ja.}
メディアクエリは、二つの部分、第一のデバイスの仕様は、サイズルールを有します。 上記の場合、次のルールを設定します。
それでは、このコード行を見てみましょう:
@media(幅分:画面-SM-分@)と(最大幅:画面-SM-MAX @){ja.}
分幅を持つすべての場合:画面の幅が@画面-SM-maxよりも小さい場合、画面-SM-分のデバイス@、それはいくつかの処理を行います。
次の表は、複数のデバイス間でブートストラップグリッドシステムがどのように動作するかを要約したものです。
| 超小设备手机(<768px) | 小型设备平板电脑(≥768px) | 中型设备台式电脑(≥992px) | 大型设备台式电脑(≥1200px) |
网格行为 | 一直是水平的 | 以折叠开始,断点以上是水平的 | 以折叠开始,断点以上是水平的 | 以折叠开始,断点以上是水平的 |
最大容器宽度 | None (auto) | 750px | 970px | 1170px |
Class 前缀 | .col-xs- | .col-sm- | .col-md- | .col-lg- |
列?数量和 | 12 | 12 | 12 | 12 |
最大列宽 | Auto | 60px | 78px | 95px |
间隙宽度 | 30px (一个列的每边分别 15px) | 30px (一个列的每边分别 15px) | 30px (一个列的每边分别 15px) | 30px (一个列的每边分别 15px) |
可嵌套 | Yes | Yes | Yes | Yes |
偏移量 | Yes | Yes | Yes | Yes |
列排序 | Yes | Yes | Yes | Yes |
グリッドの基本構造
ここで、ブートストラップ・グリッドの基本的な構造は次のとおりです。
<DIVクラス= "コンテナ">
<DIVクラス= "行">
<DIVクラス= "COL - * - *"> </ div>の
<DIVクラス= "COL - * - *"> </ div>の
</ DIV>
<DIVクラス= "行"> ja. </ DIV>
</ DIV>
<DIVクラス= "コンテナ"> jaja
我々はグリッドを見ていくつかの簡単な例をみましょう:
次の例では、4つのグリッドが含まれていますが、我々はグリッドの位置が小さなデバイスの閲覧に表示されるかを決定することはできません。
この問題を解決するには、.clearfixクラスと使用使用することができます応答ユーティリティを次の例に示すように、解決するために:
例
<DIV クラス = "コンテナ">
<DIV クラス = "行" >
<DIV クラス= "COL-XS-6 COL-SM-3」
スタイル= "背景色:#の dedef8、ボックスシャドウ:インセット1pxの-1px 1pxの#444、はめ込み-1px 1ピクセル#444 1pxの;">
<P> Loremのイプサムの嘆きAMET座る 、consecteturのadipisicingのELITを。</ P>
</ DIV>
<DIV クラス= "COL-XS-6 COL-SM-3」
スタイル= "背景色:#の dedef8、ボックスシャドウ:インセット1pxの-1px 1pxの#444、はめ込み-1px 1ピクセル#444 1pxの;">
<P> Loremのイプサムの悲しみはAMET座る consectetur adipisicing ELIT、eiusmod incididunt UTをtemporんsedのlaboreらdoloreマグナaliqua。ユタenim広告ミニムveniam、QUISのnostrudのexercitation ullamcoのlaborisのNiSi UT aliquipの元のEA commodoのconsequat。</ P>、
<P> Loremのイプサムの嘆きはAMET座る 、consectetur adipisicing ELIT、eiusmod incididunt UTをtemporんsedの。</ P>
</ DIV>
<DIV クラス= "clearfix可視XS" > </ div>の
<DIV クラス= "COL-XS-6 COL-SM-3」
スタイル= "背景色:#の dedef8、ボックスシャドウ:インセット1pxの-1px 1pxの#444、はめ込み-1px 1ピクセル#444 1pxの;">
<P>ユタenim広告ミニムveniam 、QUIS nostrudのexercitation ullamcoのlaborisのNiSi UT aliquipの元のEA commodoのconsequat。</ P>
</ DIV>
<DIV クラス= "COL-XS-6 COL-SM-3」
スタイル= "背景色:#の dedef8、ボックスシャドウ:インセット1pxの-1px 1pxの#444、はめ込み-1px 1ピクセル#444 1pxの;">
<P> Loremのイプサムの悲しみはAMET座る consectetur adipisicing ELIT、eiusmod incididunt UTをtemporんsedのlaboreらdoloreマグナaliqua。ユタenim広告ミニム</ P>、
</ DIV>
</ DIV>
</ DIV>
»をお試しください ブラウザは、変更内容を確認するために、またはあなたの携帯電話への影響を表示するには、ウィンドウのサイズを変更します。
オフセットは、より専門的なレイアウトのために便利な機能です。 これらはカラムのためのより多くのスペースを作るために使用することができます。例えば、.COL-XSは= *クラスはオフセットをサポートしていませんが、彼らは単に効果を達成するために空のセルを使用してすることができます。
大画面ディスプレイ上のオフセットを使用するためには、.COL-MD-offset- *カテゴリを使用しています。 これらのクラスの外*範囲は1月11日からです(マージン)の増加*列から列をだろう残しました。
次の例では、我々はの<divクラス= "COL-MD持っ-6"> ja </ div>のを、私たちはこのdiv要素を中央に.COL-MD-オフセット-3クラスを使用します。
例
<DIV クラス = "コンテナ">
<H1>こんにちは、世界!< / H1>
<DIV クラス = "行" >
<DIV クラスは、= "COL-XS-6 COL-MD-オフセット-3」
スタイル= "背景色:#の dedef8、ボックスシャドウ:インセット1pxの-1px 1pxの#444、はめ込み-1px 1ピクセル#444 1pxの;">
<P> Loremのイプサムの嘆きAMET座る 、consecteturのadipisicingのELITを。</ P>
</ DIV>
</ DIV>
</ DIV>
»をお試しください 結果は以下の通りであります:
コンテンツ内のネストされたグリッドのデフォルトは、新しい.rowを追加し、既存の列.COL-MD-内*グループ.COL-MD-*列を追加します。 ネストされた行が12を超えることはできません列の数を設定する列のセットを、含まれている必要があります(実際には、あなたが12を埋めるために持っている必要はありません)。
以下の例では、レイアウトは、2つの列があり、第2列は、4つのボックスの二列に分割されます。
例
<DIV クラス = "コンテナ">
<H1>こんにちは、世界!< / H1>
<DIV クラス = "行">
<DIV クラスは= "COL-MD-3 」 スタイル= "背景色:#の dedef8、ボックスシャドウ:インセット1pxの-1px 1pxの#444、はめ込み-1px 1ピクセル#444 1pxの;">
<H4> 最初の列 </ H4>
<P> Loremのイプサムの嘆きAMET座る 、consecteturのadipisicingのELITを。</ P>
</ DIV>
<DIV クラス= "COL-MD-9 」 スタイル= "背景色:#の dedef8、ボックスシャドウ:インセット1pxの-1px 1pxの#444、はめ込み-1px 1ピクセル#444 1pxの;">
<H4> 第二カラムは- 4つのボックス </ H4> に分割され、
<DIV クラス = "行">
<DIV クラス= "COL-MD-6 」 スタイル= "背景色:# B18904;ボックスシャドウ:インセット1pxの-1px 1pxの#444、はめ込み-1px 1ピクセル#444 1pxの;">
<P> ConsecteturアートパーティーTonxの罪の記号論。Pinterestのassumendaミニム有機QUIS。</ P>
</ DIV>
<DIV クラス= "COL-MD-6 」 スタイル= "背景色:# B18904;ボックスシャドウ:インセット1pxの-1px 1pxの#444、はめ込み-1px 1ピクセル#444 1pxの;">
<P> eiusmod incididunt temporんsedの UTをlaboreらdoloreマグナaliqua。ユタenim広告ミニムveniam、QUISのnostrudのexercitation ullamcoのlaborisのNiSi UT aliquipの元のEA commodoのconsequat。</ P>
</ DIV>
</ DIV>
<DIV クラス = "行">
<DIV クラス= "COL-MD-6 」 スタイル= "背景色:# B18904;ボックスシャドウ:インセット1pxの-1px 1pxの#444、はめ込み-1px 1ピクセル#444 1pxの;">
<P> QUISのnostrudのexercitation ullamcoのlaborisのNiSi UT aliquipの元のEA commodoのconsequat。</ P>
</ DIV>
<DIV クラス= "COL-MD-6 」 スタイル= "背景色:# B18904;ボックスシャドウ:インセット1pxの-1px 1pxの#444、はめ込み-1px 1ピクセル#444 1pxの;">
<P> Loremのイプサムの嘆きAMET座る 、sedのconsecteturのadipisicingのELITは、eiusmod laboreらdoloreマグナaliqua incididunt UTをtemporん。ユタenim広告ミニム。</ P>
</ DIV>
</ DIV>
</ DIV>
</ DIV>
</ DIV>
»をお試しください 結果は以下の通りであります:
別の完璧な機能へのブートストラップグリッドシステムでは、簡単に、注文が別の列に表示され、順番にコラムを書くことができるということです。
*範囲は1月11日からここであなたは簡単に、.COL-MD-プッシュ構築されたグリッド列*と.COL-MD-プル*クラスとの順序を変更することができます。
以下の例では、2列のレイアウトを持って、左の列は、サイドバーのように、非常に狭いです。 我々は2つの列の順序を交換する* .COL-MD-プッシュを使用し、.COL-MD-プル*クラスます。
例
<DIV クラス = "コンテナ">
<H1>こんにちは、世界!< / H1>
<DIV クラス = "行">
<P> </ P> 並べ替えの前に
<DIV クラスは= "COL-MD-4 」 スタイル= "背景色:#の dedef8、ボックスシャドウ:インセット1pxの-1px 1pxの#444、はめ込み-1px 1ピクセル1ピクセル#444;"> 私は左 </ DIV>
<DIV クラスは= "COL-MD-8 」 スタイル= "背景色:#の dedef8、ボックスシャドウ:インセット1pxの-1px 1pxの#444、はめ込み-1px 1ピクセル#444 1pxの;"> 私は右の </ div>の 上です
</ DIV>
<BR>
<DIV クラス = "行">
<P> ソート </ P>
<DIV クラス= "COL-MD-4 COL-MD-プッシュ-8" スタイル= "背景色:#の dedef8、ボックスシャドウ:インセット1pxの-1px 1pxの#444、はめ込み-1px 1ピクセル1ピクセル#444;"> 私は左 </ DIV>
<DIV クラス= "COL-MD-8 COL-MDプル-4」 スタイル= "背景色:#の dedef8、ボックスシャドウ:インセット1pxの-1px 1pxの#444、はめ込み-1px 1ピクセル#444 1pxの;"> 私は右の </ div>の 上です
</ DIV>
</ DIV>
»をお試しください 結果は以下の通りであります: