ラスター

<！DOCTYPE HTML > 
< HTML > 
< メタ文字コード= "UTF-8" > 
< メタ名= "ビューポート" コンテンツ= "幅=装置幅、初期の規模= 1" > 
< タイトル> </ タイトル> 
< リンクのrel = "スタイルシート" のhref = "bootstrap.min.css" > 
< スクリプトSRC = "jquery.min.js" > </ スクリプト> 
< スタイルタイプ= "テキスト/ cssの" >20ピクセル; 
  } 
    [*クラス= "COL-"] { 
        パディングトップ：15ピクセル; 
        パディング底：15ピクセル、
        背景色：＃66afe9 ; 
        ボーダー：1ピクセル固体銀; 
    } 
</ スタイル> 
< ボディ> 
   < DIV クラス= "コンテナ" > 
       < divのクラス= "行" > 
           <！ - 行12までは、内容に基づいて、適応性の高いコンテンツになります> - 
           < divのクラス= "MD。 - COL 1">COL-MD-1 </ DIV > 
           < DIV クラス= "COL-MD-1" > COL-MD-1 </ DIV > 
           < DIV クラス= "COL-MD-1" > COL-MD-1 </ DIV > 
           < DIV クラス= "COL-MD-1" > COL-MD-1 </ DIV > 
           < DIV クラス= "COL-MD-1" > COL-MD-1 </ DIV > 
       </ DIV > 
       < DIV クラス= "行" >
           < divのクラス= "COL-MD-3" > COL-MD-3 </ DIV > 
           < DIV クラス= "COL-MD-3" > COL-MD-3 </ DIV > 
           < DIV クラス= "COL-MD-3" > COL-MD-3 </ divの> 
           < divのクラス= "COL-MD-3" > COL-MD-3 </ DIV > 
       </ DIV > 
       < DIV クラス= "行" > 
           <！ - 实现偏移- > 
           <DIV クラス= "COL-MD-4 COL-LG-オフセット1" >。4-MD-COL </ DIV > 
       </ DIV > 
       <！ - ネストされた1と2は、ネストされた1の内部にある- > 
       < divのクラス= "行" > 
       < divのクラス= "COL-SM-10" >
           1
           < DIV クラス= "行" > 
               < DIV クラス= "COL-XS-8" >
                    1
               </ DIV > 
               < DIV クラス= "COL-XS-4" >
                   2
               </ DIV > 
           </ DIV > 
       </ DIV > 
       </ DIV > 
       <！ - 左右互换- > 
       < DIV クラス= "行" > 
           < DIV クラス= "COL-MD-9 COL-MD-プッシュ3" > COL-MD-9 </ DIV > 
           < DIV クラス= "COL-MD-3 COL-MD-プル9" > COL-MD-3 </ DIV > 
       </ DIV > 
   </ DIV > 
</ ボディ> 
</ HTML >