ブートストラップグリッドシステム例：携帯電話、タブレットコンピュータ、デスクトップコンピュータ
我々は見ている中規模および大規模な設備を 。 今、私たちは別の例を見てみましょう、私たちは小さな携帯電話のそれは等しく適切になります。 私たちは、次のオプションを追加します、タブレットカラムは25％/ 75％に分割されたいです。
<DIVクラス= "COL-SM-3 COL-MD-6 COL-LG-4"> .... </ DIV> <DIVクラス= "COL-SM-9 COL-MD-6 COL-LG-8"> .... </ DIV>
今、3つのデバイスのために、それぞれ、私たちに別の列レイアウト3を与えます。 お使いの携帯電話では、それは正しい25％75％レイアウトに残されます。 錠剤では、50％/ 50％の分布です。 大型ビューポートの機器では、それは33％/ 66％の分布になります。 検証のために以下の例を参照してください。 （ここでは、列がそれぞれのスタイルのために定義されている、あなたはそうすることを避けることができます。）
<！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-SM-3 COL-MD-6 COL-LG-8」
スタイル= "背景色：＃のdedef8。
ボックスシャドウ：インセット1pxの-1px 1pxの＃444、
はめ込み-1px 1pxの＃444 1pxの; ">
<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-SM-9 COL-MD-6 COL-LG-4」
スタイル= "背景色：＃のdedef8。
ボックスシャドウ：インセット1pxの-1px 1pxの＃444、
はめ込み-1px 1pxの＃444 1pxの; ">
<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>
結果は以下の通りであります：
