Comparaison du système de grille: bootstrap 3 vs fondation 5

Bootstrap et Foundation sont deux de mes cadres frontaux préférés, en particulier pour le prototypage rapide du site Web. Les deux sont livrés avec des composants prêts à l'emploi qui accélèrent mon flux de travail. Au-delà de leurs petites différences, la plupart de leurs caractéristiques fondamentales me ressemblent.

Dans cet article, je couvrirai les bases de leurs grilles. Tout d'abord, je vais vous montrer comment ils sont structurés, décrivant leurs composants clés et comment ils se différencient en fonction de la taille de l'écran. Ensuite, je vais passer en revue un véritable exemple qui vous aidera à mettre les connaissances acquises en pratique.

Commençons!

Les plats clés

• Bootstrap et Foundation sont des cadres frontaux populaires avec des caractéristiques fondamentales similaires, mais elles diffèrent dans leurs structures de grille et leurs options de personnalisation.
• Bootstrap spécifie quatre points d'arrêt de requête multimédia basés sur quatre pixels pour les dispositions réactives, tandis que la fondation comprend cinq requêtes multimédias basées sur EM. Les deux frameworks offrent une grille de 12 colonnes sur mobile composée de lignes et de colonnes.
• La grille de bootstrap nécessite un élément de wrapper pour les lignes, qui devrait avoir une classe de conteneur ou de conteneur-fluide. La grille de la Fondation, en revanche, est un peu plus simple et ne nécessite pas d'élément de wrapper.
• Fondation prend en charge une fonctionnalité de grille supplémentaire appelée Block Grid, qui permet la création de colonnes de taille égale avec un balisage minimal. Bootstrap n'offre pas une fonctionnalité similaire.

Comparaison des requêtes multimédias

Avant d'analyser la structure de la grille de Bootstrap et Foundation, examinons d'abord les points d'arrêt qui offrent tous deux des dispositions réactives. Ceux-ci sont utilisés pour définir le numéro des grilles disponibles que chaque cadre offre.

bootstrap spécifie quatre points d'arrêt de requête multimédia basés sur des pixels. Le tableau ci-dessous les montre:

écrans Taille de la fenêtre Largeur du conteneur préfixe de classe Extra petits écrans La fondation comprend cinq requêtes multimédias basées sur EM. Ceux-ci sont indiqués dans le tableau suivant: écrans Taille de la fenêtre préfixe de classe (grille par défaut) préfixe de classe (grille de blocs) Petits écrans ≤ 40EM (640px) .Small- * .Column (s) .small-block-grid- * Écrans moyens ≥ 40,063em (641px) .Medium- * .Column (s) .Medium-Block-Grid- * Grands écrans ≥ 64,063em (1025px) .Large- * .Column (s) .Large-Block-Grid- * Écrans xlarge ≥ 90,063em (1441px) Non activé Non activé Écrans xxlarge ≥ 120,063em (1921px) Non activé Non activé

Pour vous donner une idée du fonctionnement de ces requêtes médiatiques, je vous suggère de jeter un œil à une démo bootstrap et à la démo de fondation connexe. Mais si vous êtes encore un peu confus, les sections à venir clarifieront les choses.

Remarque: Les grilles de la Fondation pour les écrans XlARGE et XXLARGE sont par défaut désactivées. Si vous souhaitez les utiliser, vous devez «comements» et définir les valeurs des classes $ inclue-xl-html-grid et $ include-xl-html-bloc-group-classes à true. Vous pouvez trouver ces variables dans le partiel _settings.SCSS.

Structure de la grille

Bootstrap et fondation proposent chacun une grille de 12 colonnes mobile en ligne composée de lignes et de colonnes. Les colonnes sont imbriquées à l'intérieur d'une ligne. Ils évoluent jusqu'à 12 pour chaque ligne. Les lignes peuvent également être imbriquées dans les colonnes.

Les deux cadres sont livrés avec de nombreuses classes prédéfinies que vous pouvez utiliser pour définir la taille de vos colonnes. Comme mentionné ci-dessus, Bootstrap comprend quatre points d'arrêt des requêtes multimédias et la fondation en a cinq. Pour chaque grille, il existe un préfixe de classe différent qui peut être utilisé pour définir la taille des colonnes (voir les deux tables).

La grille de Bootstrap nécessite également un élément de wrapper pour les lignes. Cela devrait avoir une classe de conteneur ou de conteneur-fluide. Un élément avec la classe de conteneurs a une largeur fixe, qui varie en fonction de la fenêtre (voir le premier tableau ci-dessus), tandis qu'un élément avec une classe de conteneur-fluide se développe pour remplir la largeur entière de la fenêtre du navigateur.

colonnes! = 12?

Il est possible que le nombre de colonnes dans une grille ne soit pas exactement 12. Dans un tel cas, Bootstrap flottera la dernière colonne à gauche, tandis que la fondation la fera flotter vers la droite. Si vous souhaitez remplacer le comportement par défaut de la Fondation, ajoutez la classe de fin à la dernière colonne.

Pour voir cette différence d'action, vous pouvez jeter un œil à un exemple de bootstrap et à un exemple de fondation.

Classes d'utilité

Les deux cadres offrent des cours supplémentaires qui vous offrent une grande flexibilité pour personnaliser leurs grilles.

Les classes de visibilité vous permettent d'afficher ou de masquer le contenu en fonction de tailles d'écran spécifiques. Les classes de décalage vous permettent de centrer des colonnes incomplètes ou de régler la quantité d'espacement entre elles. Il existe également des classes qui spécifient l'ordre des colonnes sur différents appareils.

Des exemples de toutes ces différentes classes peuvent être montrés dans cette démo bootstrap et cette démo de fondation.

Block Grid

Au-delà de la grille par défaut, la fondation prend en charge une autre fonctionnalité de grille, appelée Block Grid. Cela vous permet de créer des colonnes de taille égale avec un balisage minimal. Afin de l'utiliser, définissez la ligne comme un élément UL et les colonnes à l'intérieur en tant qu'éléments Li. Spécifiez ensuite les tailles de colonne en appliquant les classes connexes (voir le 2ème tableau ci-dessus) à l'élément UL.

À ce stade, vous pensez peut-être, quelles sont les différences entre la grille ordinaire et la grille de blocs? Examinons brièvement deux d'entre eux:

1. Contrairement à la grille par défaut, qui applique une largeur maximale à chaque ligne, la grille de bloc remplit toujours la largeur de la fenêtre complète.
2. La grille de bloc ne peut être utilisée que pour les éléments de taille égale.

Pour mieux démontrer comment les grilles se différencient, voici une démo.

en utilisant les grilles

Maintenant que nous avons une bonne compréhension des grilles de ces deux cadres, voyons comment nous pouvons les utiliser pour construire une page bootstrap et la page de fondation correspondante.

La capture d'écran ci-dessous montre la première mise en page que nous allons construire:

En commençant par bootstrap, nous définissons un élément avec une classe de conteneur. Comme discuté précédemment, cette classe définit une largeur fixe à l'élément avec la valeur en fonction de la taille de l'écran (voir la table bootstrap). Ensuite, nous ajoutons un élément avec une classe de ligne.

Maintenant, nous sommes prêts à configurer nos colonnes. Pour les grands écrans, nous voulons quatre colonnes de taille égale. Nous définissons donc quatre éléments Div chacun avec une classe de Col-LG-3. Cependant, pour les petits et moyens appareils, nous préférons avoir deux colonnes par ligne. Pour cette raison, nous utilisons la classe Col-SM-6. Enfin, pour les appareils extra-petits, nous voulons que les colonnes soient empilées. Il s'agit du comportement par défaut des cadres mobiles d'abord, et donc, il n'est pas nécessaire de définir la classe COL-XS-12.

Voici à quoi ressemble le HTML:

<span><span><span><div</span> class<span>="container"</span>></span>
</span>    <span><span><span><div</span> class<span>="row"</span>></span>
</span>        <span><span><span><div</span> class<span>="col-sm-6 col-lg-3"</span>></span>
</span>            <span><!-- content -->
</span>        <span><span><span></div</span>></span>
</span>        <span><span><span><div</span> class<span>="col-sm-6 col-lg-3"</span>></span>
</span>            <span><!-- content -->
</span>        <span><span><span></div</span>></span>
</span>        <span><span><span><div</span> class<span>="col-sm-6 col-lg-3"</span>></span>
</span>            <span><!-- content -->
</span>        <span><span><span></div</span>></span>
</span>        <span><span><span><div</span> class<span>="col-sm-6 col-lg-3"</span>></span>
</span>            <span><!-- content -->
</span>        <span><span><span></div</span>></span>
</span>    <span><span><span></div</span>></span>
</span><span><span><span></div</span>></span></span>

Continuons avec les bases.

La grille de la Fondation est très similaire à celle de Bootstrap, mais c'est un peu plus simple. Tout d'abord, nous devons définir un élément avec une classe de ligne qui contiendra nos colonnes. Cette classe définit la largeur maximale de l'élément à 62.5rems (1000px). Ensuite, nous ajoutons les colonnes. Pour y parvenir, nous spécifions chacun des éléments avec une classe de colonnes ou de colonnes, et définissons leur largeur à l'aide des classes de grille correspondantes (voir le tableau de fondation ci-dessus). Encore une fois, pour les petits appareils, nous n'avons pas à définir la petite classe-12.

Voici le HTML basé sur la grille de la Fondation:

<span><span><span><div</span> class<span>="row"</span>></span>
</span>    <span><span><span><div</span> class<span>="medium-6 large-3 columns"</span>></span>
</span>        <span><!-- content -->
</span>    <span><span><span></div</span>></span>
</span>    <span><span><span><div</span> class<span>="medium-6 large-3 columns"</span>></span>
</span>        <span><!-- content -->
</span>    <span><span><span></div</span>></span>
</span>    <span><span><span><div</span> class<span>="medium-6 large-3 columns"</span>></span>
</span>        <span><!-- content -->
</span>    <span><span><span></div</span>></span>
</span>    <span><span><span><div</span> class<span>="medium-6 large-3 columns"</span>></span>
</span>        <span><!-- content -->
</span>    <span><span><span></div</span>></span>
</span><span><span><span></div</span>></span></span>

À ce stade, j'espère que vous avez commencé à vous familiariser avec le système de grille des deux frameworks. Mais peut-être qu'un autre exemple contribuera à rendre cela plus clair.

Dans ce cas suivant, nous structurerons le pied de page. La représentation graphique suivante montre comment nous voulons le coiffer:

Ici, nous choisirons un mode de mise en page différent par rapport à l'exemple précédent.

Pour les tailles d'écran moyen et plus (ou petites et vers le bas pour la grille de bootstrap), nous voulons afficher trois colonnes. Notez cependant qu'il y a une ligne imbriquée dans la dernière colonne. Cela se compose de deux colonnes. Nous allons définir leur largeur pour être de 50% de la largeur d'une ligne pour tous les appareils. Enfin, nous allons ajuster la visibilité des icônes qui apparaissent dans les colonnes imbriquées.

Voici le code de bootstrap:

<span><span><span><div</span> class<span>="container"</span>></span>
</span>  <span><span><span><div</span> class<span>="row"</span>></span>
</span>    <span><span><span><div</span> class<span>="col-sm-4"</span>></span>
</span>      <span><!-- content -->
</span>    <span><span><span></div</span>></span>
</span>    <span><span><span><div</span> class<span>="col-sm-4"</span>></span>
</span>      <span><!-- content -->
</span>    <span><span><span></div</span>></span>
</span>    <span><span><span><div</span> class<span>="col-sm-4"</span>></span>
</span>      <span><span><span><div</span> class<span>="row"</span>></span>
</span>        <span><span><span><div</span> class<span>="col-xs-6"</span>></span>
</span>          <span><span><span><a</span> href<span>="#"</span>></span>
</span>            <span><span><span><p</span>></span>Let's meet and discuss<span><span></p</span>></span>
</span>            <span><span><span><i</span> class<span>="fa fa-map-marker fa-2x visible-lg"</span>></span><span><span></i</span>></span>
</span>          <span><span><span></a</span>></span>
</span>        <span><span><span></div</span>></span><!-- .col-xs-6 -->
</span>        <span><span><span><div</span> class<span>="col-xs-6"</span>></span>
</span>          <span><!-- content -->
</span>        <span><span><span></div</span>></span>
</span>      <span><span><span></div</span>></span><!-- .row -->
</span>    <span><span><span></div</span>></span><!-- .col-sm-4 -->
</span>  <span><span><span></div</span>></span><!-- .row -->
</span><span><span><span></div</span>></span><!-- .container --></span>

et avec fondation:

<span><span><span><div</span> class<span>="container"</span>></span>
</span>    <span><span><span><div</span> class<span>="row"</span>></span>
</span>        <span><span><span><div</span> class<span>="col-sm-6 col-lg-3"</span>></span>
</span>            <span><!-- content -->
</span>        <span><span><span></div</span>></span>
</span>        <span><span><span><div</span> class<span>="col-sm-6 col-lg-3"</span>></span>
</span>            <span><!-- content -->
</span>        <span><span><span></div</span>></span>
</span>        <span><span><span><div</span> class<span>="col-sm-6 col-lg-3"</span>></span>
</span>            <span><!-- content -->
</span>        <span><span><span></div</span>></span>
</span>        <span><span><span><div</span> class<span>="col-sm-6 col-lg-3"</span>></span>
</span>            <span><!-- content -->
</span>        <span><span><span></div</span>></span>
</span>    <span><span><span></div</span>></span>
</span><span><span><span></div</span>></span></span>

Remarque: Au lieu de la grille de bloc, nous aurions pu utiliser la grille par défaut de Foundation pour créer la ligne imbriquée.

Conclusion

Si vous voulez plus d'informations sur le système de grille de bootstrap, vous voudrez peut-être également lire l'article de Syed Fazle Rahman en compréhension du système de grille de bootstrap.

Pour conclure, dans cet article, j'ai introduit la structure de la grille de bootstrap et de fondation. Ensuite, nous avons examiné comment profiter de leurs grilles dans un vrai projet. Comme vous pouvez le voir, les deux grilles semblent similaires et peuvent être plus personnalisées.

J'espère que vous avez aimé lire cet article et peut-être que vous pouvez appliquer ce que vous avez appris ici à vos propres projets. Comme toujours, n'hésitez pas à partager vos réflexions sur ces frameworks dans les commentaires ci-dessous.

Questions fréquemment posées (FAQ) sur Bootstrap vs Foundation

Quelles sont les principales différences entre bootstrap et fondation?

Bootstrap et Foundation sont tous deux des frameworks frontaux populaires utilisés pour le développement Web. Cependant, ils ont des différences clés. Bootstrap est connu pour ses longues caractéristiques et ses composants pré-style, ce qui en fait un excellent choix pour les débutants ou les développeurs qui souhaitent prototyper rapidement une conception. D'un autre côté, la fondation est plus flexible et personnalisable, ce qui en fait un choix préféré pour les développeurs qui souhaitent plus de contrôle sur leur conception. Il a également un système de grille plus complexe par rapport à Bootstrap.

Bootstrap ou Foundation est-il meilleur pour une conception réactive?

Bootstrap et Foundation sont conçus pour créer des sites Web réactifs qui s'adaptent à différentes tailles d'écran. Cependant, Foundation adopte une approche mobile, ce qui signifie qu'elle est conçue avec les appareils mobiles à l'esprit, puis se révèle pour des écrans plus grands. Bootstrap, en revanche, a été initialement conçu pour le bureau d'abord, mais a depuis adopté une approche mobile d'abord de Bootstrap 3. Les deux cadres offrent une conception réactive, mais le choix entre les deux se résume souvent aux préférences personnelles et aux exigences du projet.

Comment le système de grille dans Bootstrap se compare-t-il à Foundation?

Bootstrap et Fondation utilisent-ils à la fois Bootstrap et Foundation Un système de grille pour structurer et aligner le contenu, mais ils le font de manières légèrement différentes. Bootstrap utilise un système de grille à 12 colonnes, qui est facile à comprendre et à utiliser. La fondation, en revanche, utilise un système de grille flexible qui peut être personnalisé pour utiliser n'importe quel nombre de colonnes jusqu'à 12. Cela rend le système de grille de Foundation plus flexible, mais aussi légèrement plus complexe à utiliser.

Quelles sont les différences dans les options de personnalisation entre bootstrap et fondation?

Les options de personnalisation de bootstrap et de fondation offrent à la fois leur approche. Bootstrap fournit un outil de personnalisation qui vous permet de personnaliser facilement ses composants et variables. La fondation, en revanche, utilise un système de personnalisation basé sur SASS qui vous donne plus de contrôle sur la conception, mais nécessite une bonne compréhension de Sass.

Comment le bootstrap et la fondation gèrent-ils les composants JavaScript?

Bootstrap et Foundation sont livrés avec un ensemble de composants JavaScript qui ajoutent des fonctionnalités à votre site Web. Les composants JavaScript de Bootstrap sont basés sur jQuery, tandis que Foundation propose deux versions: une qui utilise jQuery et une qui utilise Zepto.js, une alternative plus légère à jQuery. Les composants JavaScript des deux frameworks sont modulaires, ce qui signifie que vous ne pouvez inclure que ceux dont vous avez besoin.

Comment les performances de Bootstrap et Foundation comparent-elles? vous les utilisez. Les deux cadres peuvent être personnalisés pour inclure uniquement les composants dont vous avez besoin, ce qui peut aider à améliorer les performances. Cependant, parce que la fondation est plus flexible et personnalisable, elle peut potentiellement conduire à un site Web plus léger et plus rapide s'il est utilisé correctement.

Comment le soutien et les ressources de la communauté pour Bootstrap et Foundation comparent-ils?

Bootstrap A une communauté plus grande et plus de ressources disponibles, y compris un large éventail de thèmes, de modèles et de plugins tiers. La fondation, tout en ayant une communauté plus petite, est soutenue par Zurb, une entreprise de conception qui fournit un soutien professionnel et des ressources.

À quel point est-il facile de migrer de bootstrap à la fondation, ou vice versa?

La migration d'un cadre vers une autre peut être une tâche complexe, car elle implique la réécriture de votre HTML, CSS et potentiellement JavaScript. Cependant, Bootstrap et Foundation ont des concepts et des composants similaires, donc si vous en connaissez l'un, l'apprentissage de l'autre devrait être relativement simple.

Comment les caractéristiques d'accessibilité de Bootstrap et Foundation comparent-elles?

Bootstrap et Foundation ont fait des efforts pour être accessibles, mais ils l'approchent de différentes manières. Bootstrap comprend un certain nombre de fonctionnalités d'accessibilité dans ses composants et fournit une documentation d'accessibilité détaillée. La Fondation, en revanche, propose un ensemble d'outils d'accessibilité intégrés dans le cadre et fournit également une documentation d'accessibilité complète.

Quel cadre dois-je choisir: bootstrap ou fondation?

Le choix entre bootstrap et fondation dépend en grande partie de vos besoins et préférences. Si vous voulez un cadre avec des fonctionnalités étendues, des composants pré-style et une grande communauté, Bootstrap peut être le meilleur choix. Si vous préférez un cadre plus flexible, personnalisable et adopte une approche mobile, la fondation pourrait être plus appropriée.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!