Quand dois-je utiliser le conteneur et la ligne dans Twitter Bootstrap 3?

84

Veuillez m'expliquer quand utiliser les cours containeret row. Je ne suis pas sûr car la documentation de Bootstrap n'est pas très claire sur cette partie.

J'utilise Bootstrap 3.

twitter-bootstrap-3 CodeShark
la source
1
Lire cet article sur les lignes et les cols de Bootstrap
Zim

Réponses:

91

containerest un conteneur d' rowéléments.

row les éléments sont des conteneurs de colonnes (les documents l'appellent système de grille)

Définit également containerles marges du contenu en fonction des comportements réactifs de votre mise en page.

Ainsi, la containerclasse est souvent utilisée pour créer des contenus «en boîte» basés sur les directives de style du projet Bootstrap.

Si vous voulez sortir de la boîte en créant une grille pleine largeur, vous ne pouvez utiliser que des rowéléments avec des colonnes à l'intérieur (couvrant le total habituel de 12cols).

Les classes containeret rowsont pour les éléments à l'intérieur du corps. Donc, une mise en page de base serait:

<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>

Pour une mise en page réactive en boîte.

Si vous omettez le container vous obtiendrez une mise en page pleine largeur.

Exemple de Jumbotron

Jumbotron est un bon exemple du containercomportement. Si vous placez un élément Jumbotron dans un containerélément, il a des bordures arrondies et une largeur fixe basée sur la largeur sensible. Si le Jumbotron est à l'extérieur d'un conteneur, il s'étend sur toute la largeur sans bordures.

Paolo Casciello
la source
1
Est-ce donc une bonne pratique de donner au corps HTML le conteneur de classe ou est-ce une mauvaise pratique? Si c'est mauvais, pourquoi?
CodeShark
1
@CodeShark c'est mauvais car c'est une partie structurelle de la mise en page. Vous pouvez par exemple vouloir une barre de navigation pleine largeur et un pied de page pleine largeur mais un contenu encadré de la page.
Paolo Casciello
1
Si vous voulez sortir de la boîte en créant une grille pleine largeur, vous ne pouvez utiliser que des rowéléments avec des colonnes à l'intérieur (couvrant le total habituel de 12cols). Je pense que vous pouvez utiliser container-fluidet row-fluidpour cela. (Bootstrap débutant ici, prenez-le avec une pincée de sel.)
ADTC
@Zim, votre lien est mort.
Noir
23

Je me posais des questions sur la même chose et pour comprendre que je suis passé par la bootstrap.cssversion 3. La réponse se trouve à partir de la ligne non. 1585 à 1605. Je posterai ces lignes ici pour une meilleure compréhension comme ci-dessous.

.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;
  }
}

L'ensemble du code est explicite. Cependant, pour élaborer sur cela, le conteneur prendrait 750pxsi la largeur de l'écran est comprise entre 768pxet 992pxet ainsi de suite, comme le montre le code. Désormais, pour une résolution d'écran commune supérieure à 1200, le conteneur prendrait 1170px, mais en soustrayant le remplissage de 30 px( 15px+15px), l'espace effectif à gauche est 1140px, qui est centré sur l'écran lorsque la marge de gauche et de droite est définie sur auto.

Maintenant, dans le cas de class="row", il y a le code ci-dessous:

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

Ainsi, si la ligne est à l'intérieur du conteneur, elle arracherait efficacement le rembourrage de 15px de chaque côté du conteneur et utiliserait tout l'espace. Mais si la ligne de classe est à l'intérieur de la balise body, elle aura tendance à se déplacer hors de la zone visible vers les côtés gauche et droit du navigateur en raison des marges négatives.

J'espère que cela a été clair.


la source
mais comme vous n'utilisez pas de ligne sans colonnes à l'intérieur, c'est correct, car les colonnes ont à nouveau un remplissage de 15px. Donc, tout est presque parfait.
Falk
2

Récipient

Le conteneur fournit les contraintes de largeur sur les largeurs réactives. Lorsque les tailles responsives changent, c'est le conteneur qui change. Les lignes et les colonnes sont toutes basées sur un pourcentage, elles n'ont donc pas besoin d'être modifiées. Notez qu'il y a une marge de 15 px de chaque côté, annulée par des lignes.

Lignes

Les lignes doivent toujours être dans un conteneur.

La ligne fournit aux colonnes un endroit où vivre, ayant idéalement des colonnes qui totalisent 12. Elle agit également comme un wrapper puisque toutes les colonnes flottent à gauche, les lignes supplémentaires ne se chevauchent pas lorsque les flottants deviennent bizarres.

Les lignes ont également une marge négative de 15 pixels de chaque côté. Le div qui compose la ligne serait normalement contraint à l'intérieur du rembourrage des conteneurs, touchant les bords de la zone rose mais pas au-delà. Les marges négatives de 15 pixels poussent la ligne au-dessus du rembourrage de 15 pixels des conteneurs, ce qui l'annule essentiellement. De plus, les lignes vous garantissent que toutes les divs à l'intérieur apparaissent sur leur propre ligne, séparées des lignes précédentes et suivantes.

Colonnes

Les colonnes ont maintenant un remplissage de 15 px. Ce remplissage signifie que les colonnes touchent réellement le bord de la ligne, qui lui-même touche le bord du conteneur puisque la ligne a la marge négative et que le conteneur a le remplissage positif. Mais le rembourrage de la colonne pousse tout ce qui se trouve à l'intérieur de la colonne là où il doit être et fournit également la gouttière de 30 pixels entre les colonnes. N'utilisez jamais une colonne en dehors d'une ligne, cela ne fonctionnera pas.

Pour plus d'informations, je vous suggère de lire cet article . Il est vraiment clair et explique bien le fonctionnement du système de grille de Bootstrap.

Mistalis
la source
1

La classe «conteneur» enveloppe le contenu au centre du port de vue. Tout le contenu avec une balise dans le corps peut être placé dans les résultats de la page affichée de largeur spécifiée au centre de la page.

La classe 'row' est utilisée lorsque vous devez placer du contenu dans des colonnes avec dans une ligne, vous pouvez avoir jusqu'à 12 colonnes au total dans chaque ligne.

code2use
la source
0

Dans les pratiques CSS traditionnelles, vous utiliseriez probablement les classes suivantes:

wrapper, header, navigator, contents, footer

l'utilisation des classes ci-dessus peut être comme cet exemple:

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

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

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

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

        </div>
    </div>

</body>

En bootstrap, vous pouvez utiliser si vous le souhaitez ou si vous êtes habitué au modèle ci-dessus, les classes bootstrap comme cet exemple:

<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>

Pour la classe de ligne, vous pouvez utiliser la classe de ligne lorsque vous souhaitez concevoir une mise en page tabulaire pour la page, mais lorsque vous souhaitez afficher des données au format tableau, vous devez utiliser la classe de table, mais la table ne sera pas réactive.

Pour créer une mise en page tabulaire différente des tables de données, utilisez la classe de ligne comme dans cet exemple:

<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>

Vous devez essayer d'éviter d'utiliser la mise en page basée sur des tableaux et essayer d'utiliser des tableaux réactifs comme décrit ici

Achraf Abusada
la source