Bootstrap3：標準的な構造とレイアウトは何ですか？

ブートストラップ要素についてのチュートリアルがたくさんあります。Bootstrap3：標準的な構造とレイアウトは何ですか？

しかし、私はexample..DoためのNAV /ヘッダ/コンテナ/行/ウェル/パネル/セクション

を使用する必要があり、それは、カラム12のために使用する列を必要とする場所を知りたいですか？

1 - 現在、私はそれをこのように実行します。

<body> 
<div class="container-fluid"> /*only for top navbar*/ 
    <nav> 
</div> 

<div class="container"> /* for body */ 
    <header></header> 

    <main class="row"> 
     <div class="col-md-2"></div> 
     <div class="col-md-5"></div> 
     <div class="col-md-5"></div> 
    </main> 

    <footer class="row"> 
     <div class="col-md-4"></div> 
     <div class="col-md-4"></div> 
     <div class="col-md-4"></div> 
    </footer> 
</div> 

</body>

は、それは本当ですか？

2このフォーマットは、真実か必要か？

<div class="row"> 
    <div class="col-md-12"></div> 
</div>

3-いずれかが標準ですか？

<div class ="well"> 
    <div class="row"> <div class="col-md-*"></div> </div> 
</div>

または

<div class ="row"> 
    <div class="well"> <div class="col-md-*"></div> </div> 
</div>

、4-用量それはすべてのセクションのためにのみ、親セクションのための "コンテナ" クラスを使用する必要がありますか？

出典

2016-04-07 elize

1： - 正しい方法です。 col-xs-12のようなブートストラップカラムクラスを最初の親クラスに使用する場合は、クラス "row"を配置する必要があります。

2： - これは本当です。方法も付属品です。

3： - 最初のオプションは正しいです。

4： - ページデザインの必要性に依存します。すべてのサイトが同じコンテナにある場合は、それを親クラスに入れることができます。

出典

2016-04-07 09:27:58

＃3 - "行は適切な整列とパディングのために.container（固定幅）または.container-fluid（全幅）内に配置する必要があります。" ... http://getbootstrap.com/css/ #grid – ZimSystem

-1

は、しかし、私は実際に彼らはすべてのdivをすることができ、私はすべてのこれらのフィールドは意味的な目的のためにのみですまあNAV /ヘッダ/セクション/フッタ

を使用しなければならない場所を知りたいです。将来的には、さらにはのSEOのベストプラクティスはnav、フッタの場合はfooterなどです。コンテンツを紹介するにはタグが必要です。

これには多くの情報がウェブであり、ここでreference

他のすべてのブートストラップクラスは、あなたが自分で適用できるだけのスタイルですされています。 A containerは、たとえば、フル幅の要素を必要としない場合は、すべてのコンテンツに対して1回使用できますが、フル幅の要素が必要な状況（イメージ）がある場合は、すべてのコンテンツをラップする必要はありません容器に入れる。

Here you want to use multiple containers and not one for everything (Fiddle)

が、これはあなたに少しお役に立てば幸いです。

出典

2016-04-07 09:28:25 Roman

すべてのオプションが正しいです。

ただし、以下の記述構造は意味があります。つまり、をcontainerまたはcontainer-fluidに使用している場合は、rowにする必要があります。

<div class="container"> 
     <div class="row"> 
      <div class="col-*-*"> 
      </div> 
     </div> 
    </div>

あなたは、ブートストラップが書き込まれるどれだけチェックしたいいつでも場合は、container、rowとcol-*との関係がexplained in the docsあるhttp://www.bootlint.com/

出典

2016-04-07 09:34:12

推奨リンク "http://www.bootlint.com/"は、ブートストラップのコード構造を確認するのに非常に役立ちます。おかげで:) –

Bootlintが役に立ちます。 – ZimSystem

-1

でそれを確認することができます。

行が

列のみが行の直下の子かもしれ.containerまたは.container流体内に配置する必要があります。あなたのケースでは

＃1、＃2は細かいですが、＃3でオプションでもないが標準です。

＃4の場合：アウターcontainerを使用する必要があります。nestingは、列をコンテナとして使用できるようにします。

出典

2016-04-07 11:24:06 ZimSystem

下垂体を説明するのに気をつけますか？ – ZimSystem

Bootstrap3：標準的な構造とレイアウトは何ですか？

答えて

関連する問題