1。はじめに
Bootstrapには、レスポンシブなモバイルファーストストリーミンググリッドシステムが組み込まれています。画面デバイスまたはビューポートサイズが大きくなると、システムは自動的に最大12列に分割されます。これには、簡単に定義されたクラスを使いやすいクラスと、より多くのセマンティックレイアウトを生成するための強力なミキシンが含まれます。
2。ラスターオプション
bootstrap3.xは、4つのグリッドオプションを使用してグリッドシステムを形成します。公式ウェブサイトにこれらの4つのオプションを導入するのは次のとおりです。多くの人はそれを理解していません。ここでは、4つのグリッドオプションの違いを詳細に説明します。実際、違いの1つだけが、さまざまなサイズのスクリーンデバイスに適していることです。クラスのプレフィックスアイテムを見てみましょう。プレフィックスのこれらの4つのグリッドオプションに名前を付けましょう。それらは、col-xs、col-sm、col-md、およびcol-lgです。英語を理解している人は、LGが大規模の略語であり、MDはMIDの略語であり、SMは小型の略語、XSは***の略語です。この命名は、これらのクラスが適応するさまざまな画面幅を反映しています。以下に、これらのクラスの特性を紹介します。
次の表を使用すると、Bootstrapのラスターシステムが複数の画面デバイスでどのように機能するかを詳細に確認できます。
3。列オフセット
.col-md-offset-*を使用して、列を右に相殺します。これらのクラスは、 *セレクターを使用して、すべての列を列の左マージンに追加します。たとえば、.col-md-offset-4は幅4列ごとに.col-md-4を右にシフトしました。
4。ネストされた列
組み込みのラスターを使用してコンテンツをネストするには、既存の.col-md-*列に新しい.rowと一連の.col-md-*列を追加することで実行できます。ネストされた行に含まれる列は、最大12になるはずです。
5。列のソート
列の順序は、.col-md-push-*および.col-md-pull-*を使用して簡単に変更できます。
場合
<％@ page Language = "java" pageEncoding = "utf-8"％> <％string path = request.getContextPath（）;％> <！doctype html> <html lang = "zh-cn"> <title> <title> raster </title> <meta content = "ie = edge http-equiv = "content-type" content = "text /html; charset = utf-8" /> <meta http-equiv = "content-language" content = "zh-cn" /> <meta name = "著者" content = "[email protected]" />株式会社」 /> <Meta http-equiv = "pragma" content = "no-cache"> <meta http-equiv = "cache-control" content = "no-cache"> <meta http-equiv = "conters" content = "0"> <meta http-equiv = "keywords" keyword1、keyword http-equiv = "description" content = "これは私のページ"> <jsp：include page = "/demo/js_bootstrap.jsp"/> <style type = "text/css">。 #dddd; background-color：rgba（86、61、124、.15）; border：1px solid rgba（86、61、124、.2）;} </style> <スクリプトタイプ= "text/javascript"> $（function（）{}）; </script> </head> <bod> <b> collg-*useage <div> <div> .col-lg-8 </div> <div> .col-lg-4 </div> </div> <br/> <b> col-md-*usage </b> <div> <div> div> .col-md-1 </div> <div> .col-md-1 </div> <div> .col-md-1 </div> <div> .col-md-1 </div> <div> .col-md-1 </div> <div> .col-md-- 1 </div> <div> .col-md-1 </div> <div> .col-md-1 </div> <div> .col-md-1 </div> <div> .col-md-1 </div> <div> .col-md-1 </div> <div> .col-md-1 </div> </div> <br/ <b> col-md-8 </div> <div> .col-md-4 </div> </div> <br/> <b> col-sm-*usage </b> <div> div> .col-sm-8 </div> <div> .col-sm-4 </div> </div> <br/> <b> col-xs-*usage </b> <div> <div> .col-xs-8 </div> <div> .col-xs-4 </div> </div> <br/> <b>列オフセット： col-md-offset-*</b> <div> <div> .col-md-4 </div> <div> .col-md-4 </div> <div> .col-md-4 </div> <div> .col-md-4 </div> <di v> .col-md-4 </div> <div> .col-md-4 </div> <div> .col-md-4 </div> <div> .col-md-4 </div> <div> .col-md-4 </div> <div> .col-m D-4 </div> <div> .col-md-4 </div> <div> .col-md-4 </div> <div> .col-md-4 </div> <div> .col-md-4 </div> <div> .col-md-4 </di v> <div> .col-md-4 </div> <div> .col-md-4 </div> <div> .col-md-4 </div> <div> .col-md-4 </div> <div> .col-md-4 </div> </div> <br//> <b>列オフセット：col-MD-offset-*</b> <div> <div> .col-md-4 </div> <div> .col-md-4 </div> <div> .col-md-offset-4 </div> </div> <div> .col-md-md-3.col-md-ofmdset-md-md-3.col-md-ofmdset-md-md-3.col-md-ofmdset-md-md-3.col-mdset-md-md-3.col-mdset-md-md-3. .col-md-offset-3</div></div><div><div>.col-md-6 .col-md-offset-3</div></div><br/> <b>Nested columns: The columns contained in a nested row should be equal to 12</b><div><div>Level 1: .col-md-9<div><div>Level 2: .col-md-6</div><div>Level 2：.col-md-6 </div> </div> </div> <br/> <b>列ソート：.col-md-push-* and .col-md-pull-* </b> <div> <div> .col-md-9 .col-md-push-3 </div> <div> .col-md-pull-9 </div> </div> </body> </html>
デモ効果
上記は、編集者が紹介したブートストラップグリッドシステムに関する関連する知識です。それがあなたに役立つことを願っています！