ブートストラップグリッドシステム例：中規模および大規模の設備
では例：スタックレベル 、我々は基本的なグリッドシステムを見てきました。 ここでは、2のdivを使用し、それらのビューポートの幅が50％/ 50％の分割の真ん中に：
<DIVクラス= "COL-MD-6"> .... </ DIV> <DIVクラス= "COL-MD-6"> .... </ DIV>
しかし、大規模な設備、33％/ 66％の最終的なデザインに。 だから我々は、ブレークポイントの列幅を変更するために用意されているしなければなりません。
<DIVクラス= "COL-MD-6 COL-LG-4"> .... </ DIV> <DIVクラス= "COL-MD-6 COL-LG-8"> .... </ DIV>
今、ブートストラップは、中型機で、MDを持つクラスを探し、それらを使用しています。 大規模な設備では、LG電子を持つクラスを探し、それらを使用しています。 この例では、33％/ 66％に50％/ 50％の分割から我々の2つのdiv。 検証のために以下の例を参照してください。 （ここでは、列がそれぞれのスタイルのために定義されている、あなたはそうすることを避けることができます。）
<！DOCTYPE HTML>
<HTML>
<ヘッド>
<タイトル>ブートストラップ・インスタンス - 中規模および大規模な設備</タイトル>
<リンクのhref = "/ストラップ/ CSS / bootstrap.min.css"のrel = "スタイルシート">
<スクリプトSRC = "/スクリプト/ jquery.min.js"> </スクリプト>
<スクリプトSRC = "/ストラップ/ JS / bootstrap.min.js"> </スクリプト>
</ HEAD>
<ボディ>
<DIVクラス= "コンテナ">
<H1>こんにちは、世界！</ H1>
<DIVクラス= "行">
<DIVクラス= "COL-MD-6 COL-LG-4"スタイル= "背景色：＃のdedef8。
ボックスシャドウ：インセット1pxの-1px 1pxの＃444、はめ込み-1px 1ピクセル1ピクセル＃444; ">
<P> Loremのイプサムの嘆きはAMET座る、consectetur adipisicing ELIT、行うSED
eiusmod laboreらdoloreマグナaliqua incididunt UTをtempor。ユタ
enim広告ミニムveniam、QUISのnostrudのexercitation ullamco laboris
NiSi UT aliquipの元のEA commodoのconsequat。
</ P>
<P> sedのUT perspiciatisアンクルオムニISTE natusエラーシットvoluptatem
accusantium doloremque laudantium、totamレムaperiam、eaque IPSA
beatae履歴書architecto quae ABイロinventore veritatisら準
傍論のsuntのexplicabo。
</ P>
</ DIV>
<DIVクラス= "COL-MD-6 COL-LG-8"スタイル= "背景色：＃のdedef8。
ボックスシャドウ：インセット1pxの-1px 1pxの＃444、はめ込み-1px 1ピクセル1ピクセル＃444; ">
<P> sedのUT perspiciatisアンクルオムニISTE natusエラーシットvoluptatem
accusantium doloremque laudantium。
</ P>
<P> Nequeポロquisquam estは、QUI doloremイプサムquia嘆き、AMET座ります
consectetur、adipisci velit、sedのquia非ヌンクアムeius MODI
TEMPORA incidunt utのlaboreらdolore magnam aliquam quaerat
voluptatem。
</ P>
</ DIV>
</ DIV>
</ BODY>
</ HTML>
結果は以下の通りであります：
