Wann sollte ich Container und Zeilen in Twitter Bootstrap 3 verwenden?

Question 1

Bitte erklären Sie mir, wann Sie die Klassen verwenden sollen containerund row. Ich bin mir nicht sicher, da die Dokumentation von Bootstrap zu diesem Teil ziemlich unklar ist.

Ich benutze Bootstrap 3.

Question 2

containerist ein Container mit rowElementen.

row Elemente sind Container mit Spalten (die Dokumente nennen es Rastersystem)

Auch containersetzt die Margen des zufrieden mit dem reaktions Verhalten Ihres Layouts zu tun.

Daher wird die containerKlasse häufig verwendet, um "Boxed" -Inhalte basierend auf den Stilrichtlinien des Bootstrap-Projekts zu erstellen.

Wenn Sie "out of the box" erstellen möchten, um ein Raster in voller Breite zu erstellen, können Sie nur rowElemente mit darin enthaltenen Spalten verwenden (über die üblichen 12 Spalten insgesamt).

Die Klassen containerund rowstehen für Elemente im Körper. Ein grundlegendes Layout wäre also:

<html>
 <body>
  <div class="container">
   <div class="row">
     <div class="col-md-xx"></div>
       ...
   </div>
   <div class="row">
     <div class="col-md-xx"></div>
       ...
   </div>
  </div>
 </body>
</html>

Für ein reaktionsschnelles Layout in einer Box.

Wenn Sie das weglassen, erhalten containerSie ein Layout in voller Breite.

Jumbotron Beispiel

Jumbotron ist ein gutes Beispiel für das containerVerhalten. Wenn Sie ein Jumbotron-Element in ein containerElement einfügen , hat es abgerundete Ränder und eine feste Breite, die auf der Reaktionsbreite basiert. Befindet sich das Jumbotron außerhalb eines Containers, erstreckt es sich über die gesamte Breite ohne Rahmen.

Question 3

Ich habe mich über das Gleiche gewundert und verstanden, dass ich die bootstrap.cssVersion 3 durchlaufen habe . Die Antwort liegt in Zeile Nr. 1585 bis 1605. Ich werde diese Zeilen hier zum besseren Verständnis wie unten veröffentlichen.

.container
{
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}

Der gesamte Code ist selbsterklärend. Doch auf diese auszuarbeiten, würden Behälter , 750pxwenn Bildschirmbreite zwischen ist 768pxund 992pxund so weiter , wie die Code - Shows. Für eine übliche Bildschirmauflösung von mehr als 1200 würde der Container nun benötigen 1170px, aber wenn der Abstand von 30 px( 15px+15px) abgezogen wird 1140px, ist der effektive linke Raum , der auf dem Bildschirm zentriert ist , wenn der Rand von links und rechts auf automatisch eingestellt ist.

Im Falle von class="row"gibt es nun folgenden Code:

.row {
  margin-right: -15px;
  margin-left: -15px;
}

Befindet sich die Reihe also innerhalb des Containers, wird die Polsterung von 15 Pixel pro Seite effektiv aus dem Container gerissen und der gesamte Platz genutzt. Befindet sich die Klassenzeile jedoch innerhalb des Body-Tags, wird sie aufgrund negativer Ränder aus dem sichtbaren Bereich in die linke und rechte Seite des Browsers verschoben.

Ich hoffe es wurde klargestellt.

Question 4

Container

Der Container bietet die Breitenbeschränkungen für reaktionsfähige Breiten. Wenn sich die Reaktionsgrößen ändern, ändert sich der Container. Zeilen und Spalten basieren alle auf Prozentsätzen, sodass sie nicht geändert werden müssen. Beachten Sie, dass auf jeder Seite ein Rand von 15 Pixel vorhanden ist, der durch Zeilen unterbrochen ist.

Reihen

Zeilen sollten sich immer in einem Container befinden.

Die Zeile bietet den Spalten einen Platz zum Leben, idealerweise mit Spalten, die sich zu 12 addieren. Sie fungiert auch als Wrapper, da alle Spalten nach links schweben. Zusätzliche Zeilen haben keine Überlappungen, wenn Floats komisch werden.

Zeilen haben auf jeder Seite einen negativen Rand von 15 Pixel. Das Div, aus dem die Reihe besteht, wird normalerweise innerhalb der Container-Polsterung eingeschränkt und berührt die Ränder des rosa Bereichs, jedoch nicht darüber hinaus. Die 15px-negativen Ränder drücken die Reihe über die 15px-Polsterung des Containers hinaus und negieren sie im Wesentlichen. Darüber hinaus stellen Zeilen sicher, dass alle darin enthaltenen Divs in einer eigenen Zeile angezeigt werden, die von den vorherigen und den folgenden Zeilen getrennt ist.

Säulen

Die Spalten sind jetzt mit 15 Pixel aufgefüllt. Diese Auffüllung bedeutet, dass die Spalten tatsächlich die Kante der Zeile berühren, die selbst die Kante des Containers berührt, da die Zeile den negativen Rand und der Container die positive Auffüllung aufweist. Die Polsterung der Säule drückt jedoch alles innerhalb der Säule dorthin, wo es sein muss, und bietet auch die 30-Pixel-Rinne zwischen den Säulen. Verwenden Sie niemals eine Spalte außerhalb einer Zeile, da dies nicht funktioniert.

Für weitere Informationen empfehle ich Ihnen, diesen Artikel zu lesen . Es ist wirklich klar und erklärt gut, wie das Grid-System von Bootstrap funktioniert.

Question 5

Die Klasse 'container' umschließt den Inhalt mit dem Port in der Mitte der Ansicht. Der gesamte Inhalt mit dem In-Body-Tag kann in den Ergebnissen der Seite mit der angegebenen Breite in der Mitte der Seite platziert werden.

Die Klasse 'Zeile' wird verwendet, wenn Sie Inhalte in Spalten mit einer Zeile platzieren müssen. In jeder Zeile können insgesamt bis zu 12 Spalten vorhanden sein.

Question 6

In den traditionellen CSS-Praktiken würden Sie wahrscheinlich die folgenden Klassen verwenden:

wrapper, header, navigator, contents, footer

Die Verwendung der oben genannten Klassen kann wie folgt aussehen:

<body>
    <div class="wrapper">
        <div class="header">

        </div>
        <div class="navigator">

        </div>
        <div class="content">

        </div>
        <div class="footer">

        </div>
    </div>

</body>

In Bootstrap können Sie die Bootstrap-Klassen wie folgt verwenden, wenn Sie dies wünschen oder wenn Sie an die obige Vorlage gewöhnt sind:

<body>

    <div class="container">
        <div class="col-md-12">
            <h1>Header</h1>
            <p>Header contents goes here</p>
        </div>
        <div class="col-md-12">
            <nav role="navigation" class="nav navbar">
                <h1>Navigation</h1>
                <p>Navigation contents goes here</p>
            </nav>
        </div>
        <div class="col-md-12">
            <div class="pagination">
                <h1>Page contents</h1>
                <p>Webpage contents goes here</p>
            </div>

        </div>
        <div class="col-lg-12">
            <h1>Footer contents</h1>
            <p>footer contents goes here</p>
        </div>
    </div>

</body>

Für die Zeilenklasse können Sie die Zeilenklasse verwenden, wenn Sie ein Tabellenlayout für die Seite entwerfen möchten. Wenn Sie jedoch Daten im Tabellenformat anzeigen möchten, sollten Sie die Tabellenklasse verwenden, die Tabelle reagiert jedoch nicht.

Verwenden Sie die Zeilenklasse wie in diesem Beispiel, um ein Tabellenlayout zu erstellen, das sich von Datentabellen unterscheidet:

<body>

<div class="container">
    <div class="row">
    <div class="col-sm-4" >.col-sm-4</div>
    <div class="col-sm-4" >.col-sm-4</div>
    <div class="col-sm-4" >.col-sm-4</div>
  </div>
</div>

</body>

Sie müssen versuchen, die Verwendung eines tabellenbasierten Layouts zu vermeiden, und versuchen, reaktionsfähige Tabellen wie hier beschrieben zu verwenden

Answer 1

84

Bitte erklären Sie mir, wann Sie die Klassen verwenden sollen containerund row. Ich bin mir nicht sicher, da die Dokumentation von Bootstrap zu diesem Teil ziemlich unklar ist.

Ich benutze Bootstrap 3.

twitter-bootstrap-3 CodeShark
quelle

1

Lesen Sie diesen Artikel über Bootstraps Zeilen und Spalten

Zim

Answer 2

1

Lesen Sie diesen Artikel über Bootstraps Zeilen und Spalten

Zim

Answer 3

containerist ein Container mit rowElementen.

row Elemente sind Container mit Spalten (die Dokumente nennen es Rastersystem)

Auch containersetzt die Margen des zufrieden mit dem reaktions Verhalten Ihres Layouts zu tun.

Daher wird die containerKlasse häufig verwendet, um "Boxed" -Inhalte basierend auf den Stilrichtlinien des Bootstrap-Projekts zu erstellen.

Wenn Sie "out of the box" erstellen möchten, um ein Raster in voller Breite zu erstellen, können Sie nur rowElemente mit darin enthaltenen Spalten verwenden (über die üblichen 12 Spalten insgesamt).

Die Klassen containerund rowstehen für Elemente im Körper. Ein grundlegendes Layout wäre also:

<html>
 <body>
  <div class="container">
   <div class="row">
     <div class="col-md-xx"></div>
       ...
   </div>
   <div class="row">
     <div class="col-md-xx"></div>
       ...
   </div>
  </div>
 </body>
</html>

Für ein reaktionsschnelles Layout in einer Box.

Wenn Sie das weglassen, erhalten containerSie ein Layout in voller Breite.

Jumbotron Beispiel

Jumbotron ist ein gutes Beispiel für das containerVerhalten. Wenn Sie ein Jumbotron-Element in ein containerElement einfügen , hat es abgerundete Ränder und eine feste Breite, die auf der Reaktionsbreite basiert. Befindet sich das Jumbotron außerhalb eines Containers, erstreckt es sich über die gesamte Breite ohne Rahmen.

Answer 4

1

Ist es also eine gute Praxis, dem HTML-Body den Klassencontainer zu geben, oder ist es eine schlechte Praxis? Wenn es schlecht ist, warum?

CodeShark

Answer 5

1

@CodeShark ist schlecht, weil es ein struktureller Bestandteil des Layouts ist. Möglicherweise möchten Sie beispielsweise eine Navigationsleiste in voller Breite und eine Fußzeile in voller Breite, jedoch einen umrahmten Inhalt der Seite.

Paolo Casciello

Answer 6

1

Wenn Sie "out of the box" erstellen möchten, um ein Raster in voller Breite zu erstellen, können Sie nur rowElemente mit darin enthaltenen Spalten verwenden (über die üblichen 12 Spalten insgesamt). Ich denke du kannst container-fluidund row-fluiddafür verwenden. (Bootstrap Anfänger hier, nehmen Sie es mit einer Prise Salz.)

ADTC

Answer 7

@Zim, dein Link ist tot.

Schwarz

Answer 8

Ich habe mich über das Gleiche gewundert und verstanden, dass ich die bootstrap.cssVersion 3 durchlaufen habe . Die Antwort liegt in Zeile Nr. 1585 bis 1605. Ich werde diese Zeilen hier zum besseren Verständnis wie unten veröffentlichen.

.container
{
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}

Der gesamte Code ist selbsterklärend. Doch auf diese auszuarbeiten, würden Behälter , 750pxwenn Bildschirmbreite zwischen ist 768pxund 992pxund so weiter , wie die Code - Shows. Für eine übliche Bildschirmauflösung von mehr als 1200 würde der Container nun benötigen 1170px, aber wenn der Abstand von 30 px( 15px+15px) abgezogen wird 1140px, ist der effektive linke Raum , der auf dem Bildschirm zentriert ist , wenn der Rand von links und rechts auf automatisch eingestellt ist.

Im Falle von class="row"gibt es nun folgenden Code:

.row {
  margin-right: -15px;
  margin-left: -15px;
}

Befindet sich die Reihe also innerhalb des Containers, wird die Polsterung von 15 Pixel pro Seite effektiv aus dem Container gerissen und der gesamte Platz genutzt. Befindet sich die Klassenzeile jedoch innerhalb des Body-Tags, wird sie aufgrund negativer Ränder aus dem sichtbaren Bereich in die linke und rechte Seite des Browsers verschoben.

Ich hoffe es wurde klargestellt.

Answer 9

Da Sie jedoch keine Zeilen ohne Spalten verwenden, ist dies in Ordnung, da die Spalten wieder einen Abstand von 15 Pixel haben. Also ist meistens alles perfekt.

Falk

Answer 10

Container

Der Container bietet die Breitenbeschränkungen für reaktionsfähige Breiten. Wenn sich die Reaktionsgrößen ändern, ändert sich der Container. Zeilen und Spalten basieren alle auf Prozentsätzen, sodass sie nicht geändert werden müssen. Beachten Sie, dass auf jeder Seite ein Rand von 15 Pixel vorhanden ist, der durch Zeilen unterbrochen ist.

Reihen

Zeilen sollten sich immer in einem Container befinden.

Die Zeile bietet den Spalten einen Platz zum Leben, idealerweise mit Spalten, die sich zu 12 addieren. Sie fungiert auch als Wrapper, da alle Spalten nach links schweben. Zusätzliche Zeilen haben keine Überlappungen, wenn Floats komisch werden.

Zeilen haben auf jeder Seite einen negativen Rand von 15 Pixel. Das Div, aus dem die Reihe besteht, wird normalerweise innerhalb der Container-Polsterung eingeschränkt und berührt die Ränder des rosa Bereichs, jedoch nicht darüber hinaus. Die 15px-negativen Ränder drücken die Reihe über die 15px-Polsterung des Containers hinaus und negieren sie im Wesentlichen. Darüber hinaus stellen Zeilen sicher, dass alle darin enthaltenen Divs in einer eigenen Zeile angezeigt werden, die von den vorherigen und den folgenden Zeilen getrennt ist.

Säulen

Die Spalten sind jetzt mit 15 Pixel aufgefüllt. Diese Auffüllung bedeutet, dass die Spalten tatsächlich die Kante der Zeile berühren, die selbst die Kante des Containers berührt, da die Zeile den negativen Rand und der Container die positive Auffüllung aufweist. Die Polsterung der Säule drückt jedoch alles innerhalb der Säule dorthin, wo es sein muss, und bietet auch die 30-Pixel-Rinne zwischen den Säulen. Verwenden Sie niemals eine Spalte außerhalb einer Zeile, da dies nicht funktioniert.

Für weitere Informationen empfehle ich Ihnen, diesen Artikel zu lesen . Es ist wirklich klar und erklärt gut, wie das Grid-System von Bootstrap funktioniert.

Answer 11

Die Klasse 'container' umschließt den Inhalt mit dem Port in der Mitte der Ansicht. Der gesamte Inhalt mit dem In-Body-Tag kann in den Ergebnissen der Seite mit der angegebenen Breite in der Mitte der Seite platziert werden.

Die Klasse 'Zeile' wird verwendet, wenn Sie Inhalte in Spalten mit einer Zeile platzieren müssen. In jeder Zeile können insgesamt bis zu 12 Spalten vorhanden sein.

Answer 12

In den traditionellen CSS-Praktiken würden Sie wahrscheinlich die folgenden Klassen verwenden:

wrapper, header, navigator, contents, footer

Die Verwendung der oben genannten Klassen kann wie folgt aussehen:

<body>
    <div class="wrapper">
        <div class="header">

        </div>
        <div class="navigator">

        </div>
        <div class="content">

        </div>
        <div class="footer">

        </div>
    </div>

</body>

In Bootstrap können Sie die Bootstrap-Klassen wie folgt verwenden, wenn Sie dies wünschen oder wenn Sie an die obige Vorlage gewöhnt sind:

<body>

    <div class="container">
        <div class="col-md-12">
            <h1>Header</h1>
            <p>Header contents goes here</p>
        </div>
        <div class="col-md-12">
            <nav role="navigation" class="nav navbar">
                <h1>Navigation</h1>
                <p>Navigation contents goes here</p>
            </nav>
        </div>
        <div class="col-md-12">
            <div class="pagination">
                <h1>Page contents</h1>
                <p>Webpage contents goes here</p>
            </div>

        </div>
        <div class="col-lg-12">
            <h1>Footer contents</h1>
            <p>footer contents goes here</p>
        </div>
    </div>

</body>

Für die Zeilenklasse können Sie die Zeilenklasse verwenden, wenn Sie ein Tabellenlayout für die Seite entwerfen möchten. Wenn Sie jedoch Daten im Tabellenformat anzeigen möchten, sollten Sie die Tabellenklasse verwenden, die Tabelle reagiert jedoch nicht.

Verwenden Sie die Zeilenklasse wie in diesem Beispiel, um ein Tabellenlayout zu erstellen, das sich von Datentabellen unterscheidet:

<body>

<div class="container">
    <div class="row">
    <div class="col-sm-4" >.col-sm-4</div>
    <div class="col-sm-4" >.col-sm-4</div>
    <div class="col-sm-4" >.col-sm-4</div>
  </div>
</div>

</body>

Sie müssen versuchen, die Verwendung eines tabellenbasierten Layouts zu vermeiden, und versuchen, reaktionsfähige Tabellen wie hier beschrieben zu verwenden

Wann sollte ich Container und Zeilen in Twitter Bootstrap 3 verwenden?

Antworten:

Jumbotron Beispiel