Liquide ou fixe système de grille, en responsive design, basé sur Twitter Bootstrap

Je suis confus sur les différentes options dans le twitter bootstrap grille, et comment ils vont ensemble.

Pour commencer, vous pouvez avoir un ordinaire fixe container, ou un container-fluid.

Alors soit on peut inclure soit un ordinaire row, ou un fluide de ligne, row-fluid. Qui est, vous pouvez avoir un fixe récipient avec un liquide d'une ligne ou d'un conteneur de fluide... avec une ligne fixe?

Puis pour couronner le tout, vous pouvez inclure le responsive requêtes de média, ou pas.

Je suis confus quant à la façon dont ces choses interagissent. Mais commençons par un exemple évident.

Sur la page des exemples lui-même, il y a ce qui est présenté comme un exemple à la fois d'un grille fixe et un grille fluide

Cependant, dans mon navigateur, sur l'exemple de la page elle-même-les deux grilles se comportent de façon identique. Peut-être parce que la page d'exemple utilise l'option responsive media queries? Dans les deux grille d'exemples, si je commencer à se rétrécit graduellement ma fenêtre de navigateur, la grille, les éléments pas obtenir progressivement plus étroite, une fois un certain (responsive) la largeur de la limite est atteinte, ils s'accrochent à une taille plus petite, et encore davantage les limites de largeurs. Mais à la fois de l'ordinaire "fixe" exemple ET le 'liquide' exemple, se comportent exactement de la même ici -- donc, ce que le diable est la différence?

  • Peut-être ceci est un meilleur exemple du fluide style de mise en page?
InformationsquelleAutor jrochkind | 2012-03-20
  1. 443

    Lorsque vous décider entre une largeur fixe de fluide et de la largeur que vous devez penser en termes de l'ENSEMBLE de votre page. En général, vous voulez choisir l'un ou l'autre, mais pas les deux. Les exemples que vous avez indiquée dans votre question sont, en fait, dans le même fixe la largeur de la page. En d'autres termes, l'Échafaudage de la page est à l'aide d'une largeur fixe de mise en page. Le grille fixe et grille fluide sur l'Échafaudage de la page ne sont pas destinés à être des exemples, mais plutôt la documentation pour la mise en œuvre de fixe et de liquide de mises en page à largeur.

    La bonne largeur fixe exemple est ici.
    Le liquide largeur exemple est ici.

    Lors de l'observation de la largeur fixe exemple, vous ne devriez pas voir le contenu en changeant la taille lors de votre navigateur est supérieure à 960px de large. C'est le maximum (fixe) de la largeur de la page. Les requêtes de média dans une largeur fixe design désigne la largeur minimum de styles particuliers. Vous allez le voir en action lorsque vous réduisez la fenêtre de votre navigateur et de voir la mise en page de composant logiciel enfichable pour une taille différente.

    À l'inverse, le liquide de mise en page à largeur sera toujours étirer pour s'adapter à la fenêtre de votre navigateur, peu importe comment elle obtient. Les requêtes de média indiquer quand les styles de changement, mais la largeur de conteneurs sont toujours un pourcentage de la fenêtre de votre navigateur (plutôt que d'un nombre fixe de pixels).

    Le responsive requêtes de média sont tous prêts à aller. Vous avez juste besoin de décider si vous souhaitez utiliser une largeur fixe ou fluide de mise en page à largeur de votre page.

    Précédemment, dans le bootstrap 2, vous avez eu à utiliser row-fluid à l'intérieur d'un récipient de liquide et row à l'intérieur d'un conteneur fixe. Avec l'introduction de bootstrap 3, row-fluid a été supprimé, ne plus l'utiliser.

    MODIFIER: selon les commentaires, certains jsFiddles pour:

    Ces violons sont complètement Bootstrap-gratuit, basé sur la pure CSS media queries, ce qui en fait un bon point de départ pour quiconque est prêt à l'artisanat solution similaire sans l'aide de Twitter Bootstrap.

    • hmm, d'accord, les docs m'ont semblé suggérer que vous pouvez mélanger et assortir fluide et fixe, mais je suppose que c'est l'utilisation avancée je ne suis pas prêt pour. 🙂 Je ne comprends toujours pas comment responsive changements, à la fois fixe et fluide respectivement: vous pouvez utiliser les réactifs (ou pas) à la fois fixe et fluide, non? Pouvez-vous expliquer la réactivité des effets de chacun d'eux?
    • la confusion de la chose pour moi reste que la 'bonne largeur fixe à l'exemple de NE modifier les tailles de colonnes que la fenêtre du navigateur changements (beause c'est sensible?) Et donc le liquide largeur exemple. Mais je suppose que le fluide largeur exemple n'en permanence, et la largeur fixe réactif exemple le fait de sauts discrets, ainsi que d'atteindre une taille maximale? Est ce que c'est? Comment au sujet de fluide réactive vs ne réagit pas?
    • Vous l'avez. Dans la mise en page à largeur fixe, les colonnes de changer lorsque la fenêtre du navigateur atteint une largeur définie dans une requête de média. Alors, quand vous avez votre fenêtre de plus de 960px de large, il va rester à son maximum de largeur. Ensuite, lorsque vous réduisez votre navigateur pour 959px, elle se colle à un nouveau modèle basé sur une requête de média qui a une largeur maximale de 768px. Donc, parce que vous êtes visionnement d'une largeur fixe de mise en page, les colonnes ne changer lorsque votre navigateur largeur est comprise entre 768 et 960.
    • Et lors de la visualisation d'un fluide de mise en page à largeur, la colonne taille toujours modifier pour correspondre à votre navigateur de la largeur. La mise en page elle-même va aussi changer selon les requêtes de média, comme avec une largeur fixe de mise en page.
    • La chose la plus importante à retenir est que la largeur fixe = pixels, fluide et largeur = pour cent. La réactivité vient de toutes les fantaisie CSS règles définies dans le bootstrap-responsive.css, et ces règles s'appliquent aux deux modèles.
    • je ne peux pas dire quelle est la différence entre twitter bootstrap fluide réactive vs non-réactif si. peut-être que j'ai juste besoin de jouer avec elle plus. Le liquide déjà les changements avec la taille de la fenêtre, ce qui est de la réactivité de la partie lorsque vous avez fluide réactive?
    • Ok, pour les fluides sensibles, ce faire: Ouvrez le fluide exemple et de maximiser votre fenêtre. Observer comment le menu de navigation est une liste horizontale. Maintenant en train de réduire la largeur de votre navigateur. À un certain point, la barre de navigation de changement de sorte qu'un bouton apparaît, et lorsque le bouton est cliqué, le menu s'affiche comme à la verticale. Donc, avec liquide, la seule chose qui change, c'est la largeur des éléments. Avec une conception souple, vous pouvez modifier aucun règle css en fonction de la largeur du navigateur. Voir mon édité réponse pour certains jsFiddle exemples.
    • A la JSFiddle Exemples ci-dessus, utile?
    • Ils l'ont fait pour moi, de toute façon 🙂 Merci beaucoup pour cette discussion!
    • Btw, pourquoi la mise en page à largeur fixe contient pas de barre latérale? Il est également utilisable là, n'est-ce pas?
    • La mise en page à largeur fixe peut absolument inclure une barre latérale. Mon projet actuel utilise un maintenant. Assurez-vous qu'il est à l'intérieur de votre container-fluid div, et de lui attribuer un spanX classe. J'ai demandé à une barre latérale liés à la question qui pourrait vous aider ici: stackoverflow.com/questions/9386441/...
    • Ouais, j'ai figuré que lors de l'essai. Je suppose que les docs sont à blâmer (encore une fois? :0) - il n'a pas l'air comme le fluide est le seul qui peut le contenir. Merci 🙂
    • super utile question, la réponse et la discussion ici, merci beaucoup
    • s'il vous plaît, pouvez-vous modifier votre réponse et ajoutez tous les 4 combinaison avec la description exacte des caractéristiques de conception pour chacun? Moyenne: fixe normal, fixe-réactif, fluide normal, fluide réactive? C'est un excellent post, mais ne comprends toujours pas pleinement ce qu'est le "fixed-responsive design.
    • Hey @jm666, j'ai ajouté un couple de plusieurs exemples. Fixe-réactif, c'est presque exactement le même que le fluide réactif, il utilise seulement les valeurs de pixels pour la largeur au lieu de %. Ainsi, dans un fixe normal de la page, votre largeurs ne changera jamais. Vous pouvez réduire le navigateur comme beaucoup que vous le souhaitez et les colonnes dans l'exemple restera toujours 130px chaque. Dans le fixe, sensibles exemple, Vous pouvez étirer et réduisez la fenêtre de votre navigateur, et les colonnes restera la même largeur jusqu'à ce que la fenêtre devient de moins de 300px de large. Lorsque cela se produit, la requête de média coups de pied dans et applique les nouvelles règles css.
    • Merci beaucoup! J'ai une tâche où j'ai besoin de jeter les images dans une grille. Chacun est à propos de 300px de large. Je veux utiliser des fluides version de bootstrap. Je pratique le mobile premier de la philosophie. donc, pour 320px je vais montrer que 2 images, mais comme vous augmentez le navigateur, plus d'images de flux en vue. Cela nécessite plus de points d'arrêt que bootstap utilise: il y a un point de rupture pour chaque nouvelle image/ligne. Avez-vous une idée de comment réaliser cela à l'aide de bootstap. J'ai fait quelque chose, mais je voudrais entendre/voir comment vous pouvez l'aborder. Je vais probablement utiliser un max-width de 1800px après laquelle les choses sont centrés. thnx!
    • Pouvez-vous ne pas avoir un fluide rangée dans une disposition fixe? Je ne suis pas pourquoi vous ne pouvez pas.
    • Vous ne pouvez absolument fluide mélange de lignes dans une disposition fixe. Il n'est pas commun, même si, comme ayant des parties de la page se comporter différemment des autres peut causer de la confusion pour les utilisateurs. Si vous avez besoin de le faire si, juste remplacer les largeurs en pixels de la durée de tags avec des valeurs en pourcentage, ou créer votre propre % en fonction de la div et de style pour l'adapter à l'intérieur de l'Amorçage de l'échafaudage.
    • avec les exemples que vous avez fourni, vous dites que si px est utilisé comme la largeur de l'appareil, puis utilisez fixed. si % est utilisé comme la largeur de l'appareil, puis utilisez fluid?
    • C'est la convention utilisée par Bootstrap. VOUS choisissez fixe ou fluide. Une fois que vous avez BOOTSTRAP sera mis en place px pour la téléphonie fixe, et % pour le fluide.
    • Donc, une question de suivi à ce sujet: à l'Aide d'une disposition fixe avec un plein taille de l'image d'en-tête après le gros titre du site à la Bootstrap - quelle taille dois-je récolte mon image?
    • Bootstrap pour redimensionner la balise img. Donc, de la récolte à la plus grande taille que vous voulez.
    • Est-il possible de “verrouiller” le taille fixe? Par exemple, la mienne a l'air parfaite à 1000px, mais il est mauvais quand il se rétrécit vers le bas. (C'est pourquoi j'ai été en utilisant ce que je pensais était un “fixe” mise en page.) Pouvez-vous faire avec bootstrap?
    • ont répondu à cette question hors de la SORTE, mais je vais le mettre ici pour info: on dirait que vous voulez fixe, mais pas de réponse. Ne pas utiliser bootstrap-responsive.css (ou l'équivalent à moins de fichiers). Vous pouvez la tester très rapidement en commentant les deux dernières lignes du bootstrap.min.css.
    • Merci @eterps Veuillez mettre à jour le lien pour votre réponse à "Le bon fluide largeur exemple est ici." J'obtiens une erreur 404 "Il n'y a pas une Page GitHub ici." lorsque l'on va sur twitter.github.io/bootstrap/examples/fluid.html
    • Merci pour le heads up. J'ai corrigé les liens pour pointer vers le nouvel emplacement pour le fichier de Bootstrap 2.3 docs.
    • Bien que n'étant pas votre point de vue, c'est la première fois que j'ai été montré que la distinction entre le fluide et réactive.

    InformationsquelleAutor eterps
  2. 21

    Discussion intéressante. Je me posais cette question aussi. La principale différence entre le fluide et fixe est simplement que la disposition fixe a une largeur fixe en termes de l'ensemble de la mise en page du site (viewport). Si vous avez un 960px de largeur de fenêtre d'affichage de chaque colonne a une largeur fixe qui ne changera jamais.

    Le design fluide se comporte de façon différente. Imaginez que vous avez défini la largeur de votre page principale à 100% de largeur. Maintenant, chaque colonne ne sera calculée à la taille relative (c'est à dire 25%) et s'étire comme le navigateur est redimensionnée. Sur la base de votre mise en page, vous pouvez sélectionner le mode de mise en page se comporte.

    Ici est un bon article sur les fluides vs flex.

    InformationsquelleAutor Lido
  3. 7

    Source - http://coding.smashingmagazine.com/2009/06/02/fixed-vs-fluid-vs-elastic-layout-whats-the-right-one-for-you/

    Pros

    • Mises à largeur fixe sont beaucoup plus faciles à utiliser et plus facile à personnaliser en termes de conception.
    • Largeurs sont les mêmes pour tous les navigateurs, donc il ya moins de tracas avec des images, des formes, de la vidéo et d'autres contenus qui sont de largeur fixe.
    • Il n'est pas nécessaire pour le min-width et max-width, ce qui n'est pas pris en charge par tous les navigateurs de toute façon.
    • Même si un site web est conçu pour être compatible avec la plus petite résolution d'écran de 800×600, le contenu sera toujours suffisamment large pour une plus grande résolution pour être facilement lisible.

    Contre

    • D'une largeur fixe de mise en page peut créer excessive d'espace blanc pour les utilisateurs avec de grandes résolutions d'écran, donc de bouleverser la “divine proportion”, la “Règle des Tiers”, solde global de la balance et d'autres principes de conception.
    • Les petites résolutions d'écran peut nécessiter une barre de défilement horizontale, en fonction de la disposition fixe la largeur.
    • Des textures transparentes, des motifs et de l'image de continuation sont nécessaires pour accueillir des personnes avec une plus grande résolution.
    • Mises à largeur fixe ont généralement un faible score total quand il s'agit de la facilité d'utilisation.
    InformationsquelleAutor Thilanka De Silva
  4. 6

    Design fluide dans le Bootstrap 3.

    À la différence de Bootstrap 2, Bootstrap 3 n'a pas .conteneur de fluide de mixin pour faire un récipient de liquide. L' .conteneur fixe la largeur de la grille souple de mise en page. Dans un grand écran, il y a excessive des espaces blancs dans les deux côtés d'une page Web de contenu.

    container-fluid est ajouté dans le Bootstrap 3.1

    Une grille fluide, mise en page utilise toute la largeur de l'écran et fonctionne mieux dans le grand écran. Il s'avère que c'est facile de créer une grille fluide, mise en page à l'aide de Bootstrap 3 mixin. La ligne suivante fait un liquide réactif de la grille de mise en page:

    .conteneur fixe;

    L' .conteneur fixe mixin définit le contenu au centre de l'écran et ajouter des remplissages. Il ne spécifie fixe la largeur de la page.

    Une autre approche consiste à utiliser Eric Fleurs de style CSS

    .my-fluid-container {
    padding-left: 15px;
    padding-right: 15px;
    margin-left: auto;
    margin-right: auto;
}
    • Je ne comprends pas pourquoi les gens continuent à dire que "container-fluid" n'est pas pris en charge dans le Bootstrap 3, tandis qu'il est. Je viens de vérifié et dans le Bootstrap 3.1.0 c'est clairement définie.
    • C'est parce qu'il a été enlevé dans 3 ajouté en 3.1.
    InformationsquelleAutor Ying
  5. -2

    vous pouvez utiliser ce - https://github.com/chanakyachatterjee/JSLightGrid ..JSLightGrid. jetez un oeil.. j'ai trouvé cela vraiment très utile. De bonnes performances, un poids très léger, toutes les navigateur convivial et fluide en lui-même, de sorte que vous n'avez pas vraiment besoin de bootstrap pour la grille.

    • Alors que ce lien peut répondre à la question, il est préférable d'inclure les parties essentielles de la réponse et de fournir le lien de référence. Lien-ne répond peut devenir non valide si la page liée changements. - Revue
    • Je suis d'accord .. mais ce n'est pas une référence à la réponse , c'est un lien pour le plugin , où les fichiers peuvent être téléchargés, je suppose que je ne peut pas joindre des fichiers à répondre ici..
    InformationsquelleAutor enthusiast