この記事では、主にBootstrapのグリッドシステムを紹介します。
グリッドシステムの実装は、コンテナサイズを定義し、12部（または24部または32パーツを除算しますが、12部が最も一般的です）を除算し、内側と外側のマージンを調整し、最後にメディアクエリを組み合わせて強力なレスポンシブグリッドシステムを作成します。
ブートストラップのグリッドシステムは、コンテナを12部に分割することです。
Bootstrapのグリッドシステムは、実際には列の組み合わせであるレイアウトに使用されます。 4つの基本的な使用法があります。
1。カラムの組み合わせ
たとえば、列をマージする列に変更します（原則：列の合計は12を超えることはできません）。
<！doctype html> <html> <head> <meta charset = "utf-8"> <title>列の組み合わせの基本的な使用</title> <link rel = "href =" http://netdna.bootstrapcdn.com/boottrap/3.1.1/css/boottrap.min.cssss "スタイル - > <style> [class *= col-] {background-color：#eee;ボーダー：1pxソリッド#ccc; } </style> </head> <body> <br> <div> <div> <！ - ブートストラップのグリッドシステムは、コンテナを12個に分割します - > <！ - このラインは1：1：1-> <div>で均等に分離されています。 <div> .col-md-4 </div> </div> <div> <！ - この行は1：2：1-> <div> .col-md-3 </div-md-6 </div> div> .col-md-3 </div> </div> div> div> </body> </html>レンダリングは次のとおりです。
2。列のオフセット
列要素（アスタリスクがオフセットする列の組み合わせの数を表す）にクラス名「col-md-offset-*」を追加し、このクラス名を持つ列が右にオフセットされます。
<div> <！ - 右に移動する4つの列の間隔 - > <div> <div> .col-md-4 </div> <div>右に移動する4つの列の間隔</div> <div> .col-md-3 </div> </div> <発生 - > <div> <div> div> div> .col-md-4 </div> <div>右に移動する4つの列の間隔</div> <div> .col-md-3 </div> </div> <div> <div> .col-md-3 </div> <div> .col-md-3 </div> </div> <> <> </div> <> div> <> div> div> div> div> <div> col-MD-4 </div> </div> </div>
レンダリングは次のとおりです。
3。列の並べ替え
列の並べ替えは、列の方向を変更し、左と右の浮遊を変更し、浮動距離を設定することです。ブートストラップは、クラス名「col-md-push-」と「col-md-pull-」（アスタリスクが移動列の組み合わせの数を表す）を追加することで達成されます。
<！Doctype html> <html> <head> <meta charset = "utf-8"> <title>基本的な使用法</title> <link rel = "stylesheet" href = "http://netdna.bootstrapcdn.com/boottrap/3.1.1/css/boottrap.min.cs [class *= col-] {background-color：#eee;ボーダー：1pxソリッド#ccc; } </style> </head> <body> <div> <div> <div> .col-md-3 </div> <div> .col-md-6 </div> </div> </div> </body> </html>4。柱のネスト
<！Doctype html> <html> <head> <meta charset = "utf-8"> <title>基本的な使用法</title> <link rel = "stylesheet" href = "http://netdna.bootstrapcdn.com/boottrap/3.1.1/css/boottrap.min.cs [class *= col-] {background-color：#eee;ボーダー：1pxソリッド#ccc; } [class *= col-] [class *= col-] {background-color：＃f36;ボーダー：1pxダッシュ#ffff;色：#ffff; } </style> </head> <body> <div> <div> <div> <div> itにネストされたグリッドがあります<div> <div> div> div> div> <div> div> div> div> </div> <div> col-md-4 </div> </div> div> </div> </html </htmlレンダリングは次のとおりです。
まだ詳細に学びたい場合は、ここをクリックして2つのエキサイティングなトピックを学び、添付できます。BootstrapLearning Tutorial Bootstrap Practical Tutorial
一連の記事：
初めて魔法のブートストラップベーシックレイアウト//www.vevb.com/article/89278.htmと接触したとき
初めて魔法のブートストラップフォームに接触したとき//www.vevb.com/article/89330.htm
上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。