Mise en page pleine largeur avec twitter bootstrap

Question

J'essaie de réaliser une mise en page similaire à celle-ci : http://dribbble.com/shots/829195-Slate/attachments/86422

Mon projet utilise Twitter Bootstrap avec un design réactif. Est-il possible de mettre en œuvre une mise en page pleine largeur avec Bootstrap ?

Le problème est que, d'après ce que j'ai lu, les mises en page fluides seront supprimées dans bootstrap 3.0, et le responsive design a des largeurs fixes.

Answer 1

Vous trouverez un excellent tutoriel ici : bootstrap-3-grid-introduction et la réponse à votre question est <div class="container-fluid"> ... </div>

Answer 2

Comme la réponse acceptée n'est pas sur la même planète que BS3, je vais partager ce que j'utilise pour obtenir des capacités presque complètes.

Tout d'abord, c'est de la triche. La largeur n'est pas vraiment fluide - mais elle semble l'être - en fonction de la taille de l'écran qui affiche le site.

Le problème avec BS3 et les sites à largeur fluide est qu'ils ont adopté cette approche "mobile first", qui exige qu'ils définissent chaque largeur d'écran jusqu'à ce qu'ils considèrent comme un écran de bureau (1200px). Je travaille sur un ordinateur portable avec un écran de 1900px de large - donc je me retrouve avec 350px de chaque côté du contenu à ce que BS3 pense être une largeur de bureau.

Ils ont défini 10 largeurs d'écran (en réalité seulement 5, mais bon). Je ne me sens pas vraiment à l'aise pour les modifier, car ce sont des largeurs courantes. J'ai donc choisi de définir des largeurs supplémentaires pour que BS puisse choisir la largeur de la classe conteneur.

La façon dont j'utilise BS est de prendre tous les fichiers LESS fournis par Bootstrap, d'omettre le fichier variables.less pour fournir les miens, et d'en ajouter un à la fin pour remplacer les choses que je veux changer. Dans mon fichier less, j'ajoute ce qui suit pour obtenir deux paramètres de largeur d'écran courants :

@media screen and (min-width: 1600px) {
    .container {
        max-width: (1600px - @grid-gutter-width);
    }
}
@media screen and (min-width: 1900px) {
    .container {
        max-width: (1900px - @grid-gutter-width);
    }
}

Ces deux paramètres servent d'exemple pour ce que vous devez faire pour obtenir différentes largeurs d'écran. Ici, vous obtenez la pleine largeur à 1600px, et 1900px. En deçà de 1600, BS revient à la largeur de 1200px, puis à 768px et ainsi de suite jusqu'à la taille du téléphone.

Si vous avez plus à soutenir, créez simplement plus de déclarations d'écran @media comme celles-ci. Si vous créez plutôt le CSS, vous devrez déterminer la largeur de la gouttière utilisée et la soustraire de la largeur d'écran cible.

Mise à jour :

Bootstrap 3.0.1 et en haut (jusqu'à présent) - il suffit de paramétrer @container-large-desktop a 100%

Answer 3

Mise à jour :

Bootstrap 3 est sorti depuis que la réponse à cette question a été donnée en janvier. Si vous êtes un utilisateur de BS3, veuillez vous référer à la page BS3. documentation . Pour ceux qui sont encore sous BS2, la réponse initiale reste valable. Si vous êtes intéressé par le passage de 2 à 3, consultez la page migration guide.

Réponse originale :

A partir du bootstrap 2 docs :

Rendez n'importe quelle ligne "fluide" en changeant .row en .row-fluid. Les classes de colonnes restent les mêmes, ce qui permet de passer facilement d'une grille fixe à une grille fluide. grilles fluides.

Code

<div class="row-fluid">
  <div class="span4">...</div>
  <div class="span8">...</div>
</div>

Ceci, en conjonction avec la définition de la largeur de votre conteneur à une valeur fluide, devrait vous permettre d'obtenir la disposition souhaitée.

Answer 4

Depuis la dernière version de Bootstrap (3.1.x), le moyen d'obtenir une mise en page fluide est d'utiliser les éléments suivants .container-fluid classe.

Ver Grille Bootstrap pour référence

Answer 5

Dans Bootstrap 3, les colonnes sont spécifiées à l'aide de pourcentages. (Dans Bootstrap 2, ce n'était le cas que si une colonne/espace se trouvait à l'intérieur d'une zone .row-fluid mais ce n'est plus nécessaire et cette classe n'existe plus). Si vous utilisez un élément .container alors @Michael a tout à fait raison de dire que vous serez coincé avec une mise en page à largeur fixe. Cependant, vous devriez vous en sortir si vous évitez simplement d'utiliser un élément .container.

<body>
  <div class="row">
    <div class="col-lg-4">...</div>
    <div class="col-lg-8">...</div>
  </div>
</body>

La marge pour le corps est déjà de 0, donc vous devriez être en mesure d'aller jusqu'au bord. (Les colonnes ont toujours un padding de 15px des deux côtés, donc vous devrez peut-être en tenir compte dans votre conception, mais cela ne devrait pas vous arrêter, et vous pouvez toujours personnaliser cela lorsque vous téléchargez Bootstrap).