バージョン 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 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 のデフォルト グリッドで列をネストする方法を示しています。
<!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>
効果は次のとおりです。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
