Système de grille fluide ou fixe, au design réactif, basé sur Twitter Bootstrap
Je suis confus au sujet des diverses options de la Twitter bootstrap grid , et de la manière dont elles vont ensemble.
Pour commencer, vous pouvez avoir un container ou un container-fluid fixes.
Ensuite, on peut inclure soit un row ordinaire, soit une ligne de fluide, row-fluid. Autrement dit, vous pouvez avoir un conteneur fixe avec une rangée de fluide ou un conteneur de fluide ... avec une rangée fixe?
Ensuite, vous pouvez inclure ou non les requêtes multimédias "réactives".
Je suis confus quant à la façon dont ces choses interagissent. Mais commençons par un exemple évident.
Sur la page des exemples elle-même, voici ce qui est présenté à titre d'exemple: a grille fixe et a fluide grille
Cependant, dans mon navigateur, sur cet exemple de page lui-même, les deux grilles se comportent de manière identique. Peut-être parce que la page d'exemple utilise les requêtes de média réactives facultatives? Dans les deux exemples de grille , si je commence à rétrécir progressivement la fenêtre de mon navigateur, les éléments de la grille ne ne sont pas , progressivement plus étroit - une fois qu'une certaine limite de limite (sensible) est atteinte, ils s'alignent sur une taille plus petite et à nouveau à des largeurs de limite plus grandes. Mais l'exemple "fixe" ordinaire ET l'exemple "fluide" se comportent exactement de la même manière ici. Quelle est donc la différence?
Lorsque vous décidez entre largeur fixe et largeur de fluide, vous devez penser en termes de page ENTIRE. Généralement, vous voulez choisir l'un ou l'autre, mais pas les deux. Les exemples que vous avez énumérés dans votre question se trouvent en fait sur la même page à largeur fixe. En d'autres termes, la page Échafaudage utilise une disposition à largeur fixe. Les grille fixe et grille de fluide de la page Échafaudage ne sont pas censés être des exemples, mais plutôt la documentation permettant de mettre en œuvre des dispositions de largeur fixe et de largeur de fluide.
Le bon exemple de largeur fixe est ici . L’exemple de largeur de fluide approprié est ici .
Lorsque vous observez l'exemple de largeur fixe, vous ne devriez pas voir le contenu changer de taille lorsque la taille de votre navigateur est supérieure à 960 pixels. C'est la largeur maximale (fixe) de la page. Les requêtes de média dans une conception à largeur fixe désigneront les largeurs minimales pour des styles particuliers. Vous verrez cela en action lorsque vous réduirez la fenêtre de votre navigateur et que vous verrez la mise en page prendre une taille différente.
Inversement, la disposition de la largeur des fluides sera toujours étendue pour s’adapter à la fenêtre de votre navigateur, quelle que soit sa largeur. Les requêtes multimédias indiquent quand les styles changent, mais la largeur des conteneurs correspond toujours à un pourcentage de la fenêtre de votre navigateur (plutôt qu’à un nombre fixe de pixels).
Les requêtes médiatiques "réactives" sont toutes prêtes. Vous devez simplement décider si vous souhaitez utiliser une mise en page de largeur fixe ou de largeur fluide pour votre page.
Auparavant, dans bootstrap 2, vous deviez utiliser row-fluid à l'intérieur d'un conteneur de fluide et row à l'intérieur d'un conteneur fixe. Avec l'introduction de bootstrap 3, row-fluid a été supprimé, ne l'utilisez plus .
EDIT: Selon les commentaires, certains jsFiddles pour:
- mise en page non sensible aux fluides ,
- mise en page fluide sensible ,
- mise en page fixe non sensible ,
- mise en page réactive fixée .
Ces violons sont totalement sans Bootstrap, basés sur des requêtes de média CSS pures, ce qui en fait un bon point de départ pour quiconque souhaitant concevoir une solution similaire sans utiliser Twitter Bootstrap.
Discussion intéressante. Je me posais aussi cette question. La principale différence entre fluid et fixed est simplement que la mise en page fixe a une largeur fixe en termes de mise en page complète du site Web (fenêtre d'affichage). Si vous avez une fenêtre de largeur 960px, chaque colonne a une largeur fixe qui ne changera jamais.
La disposition des fluides se comporte différemment. Imaginez que vous avez défini la largeur de votre mise en page principale sur 100% largeur. Désormais, chaque colonne ne sera calculée qu’à sa taille relative (c’est-à-dire 25%) et s’étirera à mesure que le navigateur sera redimensionné. Donc, en fonction de votre objectif de mise en page, vous pouvez sélectionner le comportement de votre mise en page.
Voici n bon article sur fluide vs flex .
Avantages
- Les dispositions à largeur fixe sont beaucoup plus faciles à utiliser et à personnaliser en termes de conception.
- Les largeurs étant les mêmes pour tous les navigateurs, les images, formulaires, vidéos et autres contenus à largeur fixe sont moins encombrants.
- Il n’est pas nécessaire d’utiliser Min-width ou max-width, qui n’est de toute façon pas pris en charge par tous les navigateurs.
- Même si un site Web est conçu pour être compatible avec la plus petite résolution d'écran, 800 × 600, le contenu sera quand même suffisamment large pour une résolution plus large afin qu'il soit facilement lisible.
Les inconvénients
- Une disposition à largeur fixe peut créer un espace blanc excessif pour les utilisateurs avec des résolutions d'écran plus grandes, bouleversant ainsi les "proportions divines", la "règle des tiers", l'équilibre global et d'autres principes de conception.
- Les résolutions d'écran plus petites peuvent nécessiter une barre de défilement horizontale, en fonction de la largeur de la disposition fixe.
- Des textures homogènes, des motifs et la continuation des images sont nécessaires pour s'adapter aux résolutions supérieures.
- Les dispositions à largeur fixe ont généralement un score global inférieur en termes de facilité d'utilisation.
Mise en page fluide dans Bootstrap 3.
Contrairement à Boostrap 2, Bootstrap 3 ne dispose pas d'un mélange .container-fluid pour créer un conteneur de fluide. Le conteneur est une disposition de grille sensible à la largeur fixe. Sur un grand écran, il y a des espaces blancs excessifs des deux côtés du contenu de la page Web.
container-fluid est ajouté dans Bootstrap 3.1
Une disposition de grille fluide utilise toute la largeur de l'écran et fonctionne mieux dans un grand écran. Il s'avère qu'il est facile de créer une disposition de grille fluide en utilisant Bootstrap 3 mixins. La ligne suivante crée une disposition de grille réactive fluide:
.container-fixed;
Le mixin .container-fixed définit le contenu au centre de l'écran et ajoute des rembourrages. Il ne spécifie pas une largeur de page fixe.
Une autre approche consiste à utiliser style CSS d’Eric Flowers
.my-fluid-container {
padding-left: 15px;
padding-right: 15px;
margin-left: auto;
margin-right: auto;
}