Bootstrap-div-Verschachtelung mit HTML5-Elementen

Question

Bei Verwendung des Bootstrap-Frameworks wird Inhalt in Container, Zeilen und Spalten eingefügt. Meine Frage behandelt, wie die Bootstrap div/Container-Modell mit HTML5-Elementen zu mischen, wie:

<header> 
<main> 
<footer> 

Von meinem Verständnis mit der Verwendung von Bootstrap-Inhalt wird auf diese Weise angelegt werden:

<div class="container"> 
    <div class="row"> 

Mit dem anschließenden :

<div class="col-*-*"> 

Um Ihre Raster/Layout zu erstellen.

Meine Frage geht dahin, ob Sie ein HTML5-Element oder DIV mit einer Klasse/ID auf der Außen- oder Innenseite der Behälter/Reihe von Bootstrap, wie solche genutzt einrichten wickeln sollen:

<div class="header"> 
    <div class="container"> 
     <div class="row"> 

Oder:

<div class="container"> 
    <div class="header"> 
     <div class="row"> 

Oder schließlich:

<div class="container"> 
    <div class="row"> 
     <div class="header"> 

gibt es eine best-Practice-HTML5-Element für die Bestellung s oder DIVs mit Klassen/IDs wie Kopfzeile, Fußzeile usw. mit Bootstrap?

PS: Ich weiß, dass ich alle div-Tags und nicht HTML5-Elemente in meinen Codebeispielen verwendet habe. Ich dachte nur, dass das hilfreich wäre, um zu verdeutlichen, was ich frage.

Answer 1

Das Bootstrap-Grid-System basiert auf Klassen, die nicht auf ein bestimmtes Element beschränkt sind. Sie können divs als Zeilen oder Spalten verwenden, aber auch jedes andere HTML-Element. Wenn ich es richtig verstehe, dass Sie HTML5-Elemente verwenden möchten, dh nützliche und wertvolle Informationen zur Verfügung zu stellen Motoren zu suchen, Screenreadern usw., könnte man im Grunde tun:

<div class="container"> 
    <header class="row"> 
     <main class="col-md-6"></main> 
     <aside class="col-md-6"></aside> 
    </header> 
</div> 

Und so weiter.

Das Header-Element fungiert jetzt als Zeile, die dann mit dem Element-Tag formatiert werden kann.

(nicht auf Bugs/Glitches in allen verschiedenen Browsern und Geräten getestet), Bootstrap Beispiele basieren auf All-Div-Layouts.

Answer 2

Die Art und Weise, dass ich es am besten interpretieren würde wie folgt aus:

<div class="container"> 
    <div class="row"> 
     <div class="header"> 

Der Behälter wie das Packpapier auf einer Box Sie auf Weihnachten gegeben Art ist (wenn Sie feiern Weihnachten, natürlich) . Die Zeile befindet sich immer noch im Container, aber sie begrenzt Ihren Inhalt in einem weiteren Ausmaß (so in der Analogie: Es ist nicht zufrieden, aber es ist kein Geschenkpapier, also ist es die Box). Der eigentliche Inhalt wird wahrscheinlich so etwas wie <header>, <main>, oder <footer>, so da der eigentliche Inhalt ist in der <header> Tag, wird es oben schweben, und so unsere Analogie zu beenden, ist die <header> das eigentliche Geschenk selbst, in der Box, die selbst von dem Geschenkpapier umgeben ist.

Ich hoffe, das hilft, und ich weiß, es ist definitiv nicht in der Nähe von Dezember. Für mich ist es am sinnvollsten mit der Reihenfolge und den obigen Überlegungen (manchmal kann das "Geschenkpapier" und "nicht ganz Packpapier" einige XD verwechseln).