目次
ブートストラップ グリッド system_html/css_WEB-ITnose
bootstrap
システム
グリッド
バージョン 2.3.2 以降、Bootstrap はデフォルト グリッド システムと流体グリッド システムの 2 種類のグリッドを提供します。デフォルトのグリッド システムは幅 940 ピクセル、列数 12 です。この記事では主に 1 番目のタイプについて説明します。
- まずデフォルトのグリッド システムを適用する方法を見てみましょう
<!DOCTYPE html><html> <head> <title>Fixed layout example with Bootstrap</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Bootstrap --> <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen"> </head> <body> <script src="http://code.jquery.com/jquery.js"></script> <script src="bootstrap/js/bootstrap.min.js"></script> </body></html>
ログイン後にコピー
Bootstrap は CSS クラス "row" を使用して水平行を作成し、CSS クラス "spanx" (x の値は 1 から 12 まで) を使用して垂直の列を作成します。これら 2 つを使用して、3 列のグリッドを作成できます (各列にはテキスト コンテンツが含まれます)。HTML は次のとおりです。
<!DOCTYPE html><html> <head> <title>Fixed layout example with Bootstrap</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Bootstrap --> <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen"> </head> <body><div class="container"><div class="row"> <div class="span4"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis, massa. Sed eleifend nonummy diam. Praesent mauris ante, elementum et, bibendum at, posuere sit amet, nibh. Duis tincidunt lectus quis dui viverra vestibulum. Suspendisse vulputate aliquam dui. Nulla elementum dui ut augue. Aliquam vehicula mi at mauris. Maecenas placerat, nisl at consequat rhoncus, sem nunc gravida justo, quis eleifend arcu velit quis lacus. Morbi magna magna, tincidunt a, mattis non, imperdiet vitae, tellus. Sed odio est, auctor ac, sollicitudin in, consequat vitae, orci. Fusce id felis. Vivamus sollicitudin metus eget eros.</p></div> <div class="span4"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis, massa. Sed eleifend nonummy diam. Praesent mauris ante, elementum et, bibendum at, posuere sit amet, nibh. Duis tincidunt lectus quis dui viverra vestibulum. Suspendisse vulputate aliquam dui. Nulla elementum dui ut augue. Aliquam vehicula mi at mauris. Maecenas placerat, nisl at consequat rhoncus, sem nunc gravida justo, quis eleifend arcu velit quis lacus. Morbi magna magna, tincidunt a, mattis non, imperdiet vitae, tellus. Sed odio est, auctor ac, sollicitudin in, consequat vitae, orci. Fusce id felis. Vivamus sollicitudin metus eget eros.</p></div> <div class="span4"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis, massa. Sed eleifend nonummy diam. Praesent mauris ante, elementum et, bibendum at, posuere sit amet, nibh. Duis tincidunt lectus quis dui viverra vestibulum. Suspendisse vulputate aliquam dui. Nulla elementum dui ut augue. Aliquam vehicula mi at mauris. Maecenas placerat, nisl at consequat rhoncus, sem nunc gravida justo, quis eleifend arcu velit quis lacus. Morbi magna magna, tincidunt a, mattis non, imperdiet vitae, tellus. Sed odio est, auctor ac, sollicitudin in, consequat vitae, orci. Fusce id felis. Vivamus sollicitudin metus eget eros.</p></div></div> </div> <script src="http://code.jquery.com/jquery.js"></script> <script src="bootstrap/js/bootstrap.min.js"></script> </body></html>
ログイン後にコピー
グリッドを作成するための構文は次のとおりです。
<div class="row"><div class="spanx">inline elements like span, block level elements like p, div.</div> <div>
ログイン後にコピー
CSS 代码 解释.span12 { width: 940px;} 如果该行有一个单一的列，列宽为 940px。.span11 { width: 860px;} 如果该行有一个由 11 列合并的列，列宽为 860px。.span10 { width: 780px;} 如果该行有一个由 10 列合并的列，列宽为 780px。.span9 { width: 700px;} 如果该行有一个由 9 列合并的列，列宽为 700px。.span8 { width: 620px;} 如果该行有一个由 8 列合并的列，列宽为 620px。.span7 { width: 540px;} 如果该行有一个由 7 列合并的列，列宽为 540px。.span6 { width: 460px;} 如果该行有一个由 6 列合并的列，列宽为 460px。.span5 { width: 380px;} 如果该行有一个由 5 列合并的列，列宽为 380px。.span4 { width: 300px;} 如果该行有一个由 4 列合并的列，列宽为 300px。.span3 { width: 220px;} 如果该行有一个由 3 列合并的列，列宽为 220px。.span2 { width: 140px;} 如果该行有一个由 2 列合并的列，列宽为 140px。.span1 { width: 60px;} 单个列宽为 60px。ログイン後にコピー
ブートストラップのデフォルトグリッドインスタンス
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Bootstrap Grid System Example - w3cschool Bootstrap Tutorial</title> <meta name="description" content="Creating a 16 columns Grid with Bootstrap. Learn with examples to create a Grid System in Bootstrap."> <link href="booststrap/css/bootstrap.min.css" rel="stylesheet"> <style>.span12 h1{color:#FE6E4C; font-weight: bold; padding: 5px;}h3 {margin: 10px 0 10px 0;}</style></head><body><div class="container"><div class="row"><div class="span12"><h1>w3cschool.cc is a web design and development tutorial.</h1> </div></div><div class="row"><div class="span12"><p>w3cschool offers web development tutorials. We believe in Open Source. Love standards. And prioritize simplicity and readability while serving content. With 3000+ unique content pages and thousands of examples, we are comprehensive. We have online practice editors to play around with the example codes.</p> </div></div><div class="row"><div class="span12"><h3>Some of the topics and more... :</h3> </div><div class="span2"><p><img src="images/html5_logo.png" width="140" height="86" alt="html5 logo" /></p> </div><div class="span2"><p><img src="images/javascript-logo.png" width="140" height="86" alt="javascript logo" /></p> </div><div class="span2"><p><img src="images/json.gif" width="140" height="86" alt="JSON logo" /></p> </div><div class="span2"><p><img src="images/php.png" width="140" height="86" alt="PHP logo" /></p> </div><div class="span2"><p><img src="images/mysql-logo.png" width="140" height="86" alt="MySQL logo" /></p> </div><div class="span2"><p><img src="images/browser-statistics.png" width="140" height="86" alt="Browser Statistics logo" /></p> </div></div><div class="row"><div class="span12"><h3>Social networking sites to share:</h3> </div></div><div class="row"><div class="span1"><p><img src="images/gplus.png" width="50" height="49" alt="GPlus logo" /></p> </div><div class="span1"><p><img src="images/twitter.png" width="50" height="38" alt="Twitter logo" /></p> </div><div class="span1"><p><img src="images/orkut.png" width="50" height="55" alt="Orkut logo" /></p> </div><div class="span1"><p><img src="images/ipad.png" width="50" height="53" alt="iPad logo" /></p> </div><div class="span1"><p><img src="images/digo.png" width="50" height="54" alt="Digo logo" /></p> </div><div class="span1"><p><img src="images/zapface.png" width="51" height="53" alt="Zapface logo" /></p> </div><div class="span1"><p><img src="images/facebook.png" width="48" height="53" alt="facebook logo" /></p> </div><div class="span1"><p><img src="images/netvibes.png" width="51" height="53" alt="Netvibes logo" /></p> </div><div class="span1"><p><img src="images/linkedin.png" width="49" height="54" alt="LinkedIn logo" /></p> </div><div class="span1"><p><img src="images/newsvine.png" width="48" height="53" alt="Newsvine logo" /></p> </div><div class="span1"><p><img src="images/blogger.png" width="51" height="53" alt="Blogger logo" /></p> </div><div class="span1"><p><img src="images/reditt.png" width="48" height="57" alt="Reddit logo" /></p> </div></div><div class="row"><div class="span3"><h3>Fontend Development:</h3> <p>HTML4.0, XHTML1.0, CSS2.1, HTML5, CSS3, JavaScript</p></div><div class="span3"><h3>Backend Developemt:</h3> <p>PHP, Ruby, Python, Java, ASP.NET, SCALA</p></div><div class="span3"><h3>Database Management:</h3> <p>SQL, MySQL POstgreSQL, NoSQL, MongoDB</p></div><div class="span3"><h3>APIs, Tools and Tips:</h3> <p>Google Plus API, Twitter Bootstrap, JSON, Firebug, WebPNG</p></div></div></div></body></html>ログイン後にコピー
次のようになります:
オフセット列: デフォルトグリッド
オフセットを使用すると、次のように移動できます元の位置の右側の列。これは、列に左マージンを追加することで実現されます。 Bootstrap では、「offsetx」クラス (x の値は正の整数) とクラス「spany」(y の値は正の整数) を使用できます。 「offestx」の「x」の値に応じて、関連する列が「x」列幅だけ右にシフトされます。
オフセット幅はBootstrap CSSで定義されます。 offset12 の左マージンの最大値は 980px、offset1 の左マージンの最小値は 100px です。
デフォルトのグリッド システムはピクセル ベースであるため、オフセットを適用するときは、どのピクセルをオフセットに使用するか、どのピクセルを列に使用するかを知っておく必要があります。これら 2 つの合計が水平ビューポートのピクセル数を超えてはなりません。
以下の例では、2 列のグリッドを作成します。その中で、左の列を右に 4 列移動します。 HTML コードは次のとおりです:
<!DOCTYPE html><html> <head> <title>Bootstrap offsetting column example</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Bootstrap --> <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen"> </head> <body> <div class="container"> <div class="row"><div class="span4 offset4"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis, massa. Sed eleifend nonummy diam. Praesent mauris ante, elementum et, bibendum at, posuere sit amet, nibh. Duis tincidunt lectus quis dui viverra vestibulum. Suspendisse vulputate aliquam dui. Nulla elementum dui ut augue. Aliquam vehicula mi at mauris. Maecenas placerat, nisl at consequat rhoncus, sem nunc gravida justo, quis eleifend arcu velit quis lacus. Morbi magna magna, tincidunt a, mattis non, imperdiet vitae, tellus. Sed odio est, auctor ac, sollicitudin in, consequat vitae, orci. Fusce id felis. Vivamus sollicitudin metus eget eros.</p></div><div class="span3"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis, massa. Sed eleifend nonummy diam. Praesent mauris ante, elementum et, bibendum at, posuere sit amet, nibh. Duis tincidunt lectus quis dui viverra vestibulum. Suspendisse vulputate aliquam dui. Nulla elementum dui ut augue. Aliquam vehicula mi at mauris. Maecenas placerat, nisl at consequat rhoncus, sem nunc gravida justo, quis eleifend arcu velit quis lacus. Morbi magna magna, tincidunt a, mattis non, imperdiet vitae, tellus. Sed odio est, auctor ac, sollicitudin in, consequat vitae, orci. Fusce id felis. Vivamus sollicitudin metus eget eros.</p></div></div></div> <script src="http://code.jquery.com/jquery.js"></script> <script src="bootstrap/js/bootstrap.min.js"></script> </body></html>
ログイン後にコピー
レンダリングは次のとおりです:
ネストされた列: デフォルトのグリッド
Bootstrap のデフォルトのグリッドを使用すると、列をネストできます。列内に行を作成し、その行内にネストする列を必要な数だけ作成するだけです。同時に、他の列をネストするために使用される列の合計数が、親列の作成時に指定した列数を超えてはいけないことに注意する必要があります。
次の例は、Bootstrap のデフォルト グリッドで列をネストする方法を示しています。
<!DOCTYPE html><html> <head> <title>Bootstrap nested columns example</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Bootstrap --> <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen"> </head> <body> <div class="container"> <div class="row"> <div class="span7"> <div class="row"> <div class="span4"> <p>Maecenas aliquet velit vel turpis. Mauris neque metus, malesuada nec, ultricies sit amet, porttitor mattis, enim. In massa libero, interdum nec, interdum vel, blandit sed, nulla. In ullamcorper, est eget tempor cursus, neque mi consectetuer mi, a ultricies massa est sed nisl. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Proin nulla arcu, nonummy luctus, dictum eget, fermentum et, lorem. Nunc porta convallis pede.</p> </div> <div class="span3"><p>Maecenas aliquet velit vel turpis. Mauris neque metus, malesuada nec, ultricies sit amet, porttitor mattis, enim. In massa libero, interdum nec, interdum vel, blandit sed, nulla. In ullamcorper, est eget tempor cursus, neque mi consectetuer mi, a ultricies massa est sed nisl. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Proin nulla arcu, nonummy luctus, dictum eget, fermentum et, lorem. Nunc porta convallis pede.</p> </div> </div> </div> <div class="span5"> <p>Maecenas aliquet velit vel turpis. Mauris neque metus, malesuada nec, ultricies sit amet, porttitor mattis, enim. In massa libero, interdum nec, interdum vel, blandit sed, nulla. In ullamcorper, est eget tempor cursus, neque mi consectetuer mi, a ultricies massa est sed nisl. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Proin nulla arcu, nonummy luctus, dictum eget, fermentum et, lorem. Nunc porta convallis pede.</p> </div> </div> </div> <script src="http://code.jquery.com/jquery.js"></script> <script src="bootstrap/js/bootstrap.min.js"></script> </body></html>
ログイン後にコピー
効果は次のとおりです。
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
R.E.P.O.説明されたエネルギー結晶と彼らが何をするか（黄色のクリスタル）
1 か月前
By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最高のグラフィック設定
1 か月前
By 尊渡假赌尊渡假赌尊渡假赌
アサシンのクリードシャドウズ：シーシェルリドルソリューション
2週間前
By DDD
R.E.P.O.誰も聞こえない場合はオーディオを修正する方法
1 か月前
By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.チャットコマンドとそれらの使用方法
1 か月前
By 尊渡假赌尊渡假赌尊渡假赌
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
Gmailメールのログイン入り口はどこですか？
7543
15
7543
15
CakePHP チュートリアル
1381
52
1381
52
Steamのアカウント名の形式は何ですか
83
11
83
11
NYTの接続はヒントと回答です
21
87
21
87
ブートストラップ検索バーを取得する方法
Apr 07, 2025 pm 03:33 PM
ブートストラップを使用して検索バーの値を取得する方法：検索バーのIDまたは名前を決定します。 JavaScriptを使用してDOM要素を取得します。要素の値を取得します。必要なアクションを実行します。
ブートストラップの垂直センタリングを行う方法
Apr 07, 2025 pm 03:21 PM
ブートストラップを使用して垂直センタリングを実装します。FlexBoxメソッド：D-Flex、Justify-Content-Center、Align-Items-Centerクラスを使用して、FlexBoxコンテナに要素を配置します。 ALIGN-ITEMS-CENTERクラス方法：FlexBoxをサポートしていないブラウザの場合、親要素の高さが定義されている場合、Align-Items-Centerクラスを使用します。
VueでBootstrapの使用方法
Apr 07, 2025 pm 11:33 PM
vue.jsでBootstrapを使用すると、5つのステップに分かれています。ブートストラップをインストールします。 main.jsにブートストラップをインポートしますブートストラップコンポーネントをテンプレートで直接使用します。オプション：カスタムスタイル。オプション：プラグインを使用します。
ブートストラップにスプリットラインを書く方法
Apr 07, 2025 pm 03:12 PM
ブートストラップスプリットラインを作成するには2つの方法があります。タグを使用して、水平方向のスプリットラインを作成します。 CSS Borderプロパティを使用して、カスタムスタイルのスプリットラインを作成します。
ブートストラップに写真を挿入する方法
Apr 07, 2025 pm 03:30 PM
ブートストラップに画像を挿入する方法はいくつかあります。HTMLIMGタグを使用して、画像を直接挿入します。ブートストラップ画像コンポーネントを使用すると、レスポンシブ画像とより多くのスタイルを提供できます。画像サイズを設定し、IMG-Fluidクラスを使用して画像を適応可能にします。 IMGボーダークラスを使用して、境界線を設定します。丸い角を設定し、IMGラウンドクラスを使用します。影を設定し、影のクラスを使用します。 CSSスタイルを使用して、画像をサイズ変更して配置します。背景画像を使用して、背景イメージCSSプロパティを使用します。
ブートストラップのフレームワークをセットアップする方法
Apr 07, 2025 pm 03:27 PM
Bootstrapフレームワークをセットアップするには、次の手順に従う必要があります。1。CDNを介してブートストラップファイルを参照してください。 2。独自のサーバーでファイルをダウンロードしてホストします。 3。HTMLにブートストラップファイルを含めます。 4.必要に応じてSASS/LESSをコンパイルします。 5。カスタムファイルをインポートします（オプション）。セットアップが完了したら、Bootstrapのグリッドシステム、コンポーネント、スタイルを使用して、レスポンシブWebサイトとアプリケーションを作成できます。
ブートストラップの日付を表示する方法
Apr 07, 2025 pm 03:03 PM
回答：ブートストラップの日付ピッカーコンポーネントを使用して、ページで日付を表示できます。手順：ブートストラップフレームワークを紹介します。 HTMLで日付セレクター入力ボックスを作成します。ブートストラップは、セレクターにスタイルを自動的に追加します。 JavaScriptを使用して、選択した日付を取得します。
