web-dev-qa-db-ja.com

HTML5＆Bootstrap class = "container"、bodyまたはdivのみに適用できますか？

私は誰もが抱えているこの問題にぶつかり続けています：a）HTML5セマンティックタグをdivでラップしたい、b）クラスセレクターをセマンティックタグではなくdivに適用したい。それは、人々が何らかの理由でクラスをセマンティックタグに叩きつけることを恐れているかのようです。

たとえば、これは「正しくない」と常に言われていますが、

<body class="container">
    <header class="row">
        <div class="col-md-12"> ...

そして、このようなものがより好ましいです、

<body>
   <div class="container">
      <div class="row">
          <div class="col-md-12"> ...

そしてここで、最初の例では、h2タグに列クラスがあります

    <div class="row">
        <h2 class="col-4 feature">Featured Work</h2>
    </div>

しかし、「正しい」方法は、クラスを適用するためにさらに別のdivタグを追加することです。

    <div class="row">
        <div class="col-4 feature">
            <h2>Featured Work</h2>
        </div>
    </div>

これは意見に基づくものかもしれないと理解していますが、HTML5を扱う場合、事実上すべての人が問題を抱えており、意見なしに詳細を打ち出す方法が他にないため、意見が実際に重要であることがわかりました。

csshtmltwitter-bootstrapclasscontainers
15
Padawan

私はに固執することをお勧めします

<body>
   <div class="container">
      <div class="row">
          <div class="col-md-12"> ...

フォーマット。

他の多くの開発者またはbootstrapテンプレート-）を使用する場合は、containerクラスが通常ネストされていることがわかりますrow class divs 。

マークアップについて話しているので正しい答えはありませんが、この規則に従うことを強くお勧めします。

  1. 一貫性のために
  2. 他のプロジェクトでのスタイリングと再利用性を簡単に変更するために-これにより、他のプロジェクトまたはbootstrapテンプレートからのcssスタイルシートのドロップイン置換への扉が開かれます。（これで驚くほど良い結果が得られました。 ）。

ただし、div以外のタグに「container」タグと「col-X」タグを付けることを主張する場合は、一貫性を保ってください。ただし、これはお勧めしません。独自の規則に従っているテンプレートは、コード品質が低いことを示していると見なします。

9
FredTheWebGuy