ブートストラップ学習体験のまとめ - CSS スタイル デザイン共有

 

何か問題は見つかりましたか?上記はなぜ均等に8に分布していないのでしょうか?
理由: デバッグコンソールを見てみましょう
padding-left と padding-right はどちらも 15px であることがわかりました。これは、列間のパディングが影響を受けるためです。では、なぜ 2 番目の div には影響がないのでしょうか?フェンスグリ​​ッドの原理を探ってみましょう。


1: 行に適切な配置とパディングを施すには、行を .container (固定幅) または .container-fluid (100% 幅) に含める必要があります。

2: 列の padding プロパティを設定して、列間にガターを作成します。 .row 要素に負のマージンを設定すると、.container 要素に設定されたパディングがオフセットされます。
これは、「行」に含まれる「列」のパディングを間接的にオフセットします。
注: この時点では行は列のパディングをオフセットしているため、パディング値はありません。
4: 列の並べ替え

主にcol-xs-push-* col-xs-pull-* (* は0～11の数字を表します) を使用します。この2つのクラスをどのように理解すればよいでしょうか? 「Push」は押すという意味で、「pull」は引っ張るという意味です。
XML/HTML コードコンテンツをクリップボードにコピー
< div  クラス= "行" >             
                     < div  クラス= "col-xs-4" > 21 </ div >   
                     < div  クラス= "col-xs-8" > 24 </ div >             
      </div>​​   
        < div  クラス= "行" >   
                
                     < div  クラス= "col-xs-4 col-xs-push-8" > 21 </ div >   
                     < div  クラス= "col-xs-4 col-xs-pull-4" > 24 </ div >     
             
      </div>​​   
効果図は以下のとおりです。
  <div class="col-xs-4 col-xs-push-8">21</div>---div1 として記録
 <div class="col-xs-8 col-xs-pull-4">24</div>---div2 として記憶され、2 つの位置を入れ替えると理解できます。div1 は 8 列右に押し出す必要があり、div2 は 4 列左に引っ張る必要があります。

 3: 流動的なグリッドレイアウト

1: 列幅にはピクセルではなくパーセンテージを使用する

2: 行クラスをrow-fluidに変更する

3: その他の基本機能は上記の固定レイアウトと同じで、レスポンシブ性をサポートします。

4: 列を均等に分割する場合、フローレイアウトではパーセンテージが使用されるため、6 に従って計算する必要があります。
 XML/HTML コードコンテンツをクリップボードにコピー

//次の状況に注意してください。8 列が均等に分割されると、ブートストラップ グリッドは 12 列に分散されるため、2 つの 4 ではなく 2 つの 6 に設定されます。
           < div  クラス= "行" >   
              < div  クラス= "col-xs-8" >   
                     < div  クラス= "col-xs-6" > 2 </ div >   
                     < div  クラス= "col-xs-6" > 2 </ div >   
                   
          </div>​​   
      </div>​​   

4: レスポンシブデザイン
簡単に言えば、さまざまなデバイス（携帯電話、PC）の解像度（960PX、1366PX、978PXなど）への適応的な応答をサポートします。

XML/HTML コードコンテンツをクリップボードにコピー


    
< div  クラス= "行" >      
    
                     
    
                         < div  クラス= "col-xs-6 col-md-12" > 21 </ div >      
    
                         < div  クラス= "col-xs-6 col-md-12" > 24 </ div >        
    
                     
    
           </div>​​     



デバイスが 768 ピクセルより小さい場合、効果は次のようになります。