Bootstrap et Foundation sont deux de mes cadres frontaux préférés, en particulier sur les prototypes pour les sites Web de développement rapide. Ils fournissent tous des composants prêts à l'emploi, accélérant mon flux de travail. À l'exception de quelques petites différences, la plupart de leurs caractéristiques de base me semblent similaires.
Dans cet article, je présenterai la construction de base de leurs grilles. Tout d'abord, je vais vous montrer comment ils sont construits, décrire leurs principaux composants et comment ils montrent des différences à la taille des différents écrans. Je vais ensuite vous aider à ajouter des connaissances grâce à un exemple de pratique réel.
Commençons ensemble!
Comparaison 1: Comparaison des requêtes médiatiques
Avant d'analyser les structures raster de bootstrap et de fondation, jetons un coup d'œil aux points d'arrêt qu'ils fournissent pour la disposition de la réponse. C'est ce que chaque trame fournit pour définir le nombre de rasters disponibles.
Bootstrap spécifie 4 points d'arrêt de requête multimédia basés sur PX. Affiché comme suit:
La fondation contient 5 requêtes multimédias basées sur EM. Ils sont présentés dans le tableau suivant:
Pour vous donner un moyen de comprendre le fonctionnement des requêtes avec les médias, je vous suggère de consulter la démo de Bootstrap et les démos de fondations connexes. Mais si vous êtes toujours confus, la prochaine partie expliquera tout.
Remarque: le maillage de la Fondation et les écrans super grands sont désactivés par défaut. Si vous souhaitez les utiliser, vous devez "annuler" et définir les valeurs des deux variables $ include-xl-html-grid-classes et $ include-xl-html-block-groud-classes sur true. Vous pouvez trouver ces variables dans la section _settings.scss.
Comparaison 2: Structure de la grille
Bootstrap et Foundation fournissent une première grille de 12 colonnes mobile composée de lignes et de colonnes. Les colonnes sont imbriquées en rangées. La somme des colonnes dans chaque ligne est de 12 colonnes. Les lignes peuvent également être imbriquées dans des colonnes.
Ces deux cadres contiennent de nombreuses classes prédéfinies que vous pouvez utiliser pour définir la taille d'une colonne. Comme mentionné ci-dessus, Bootstrap contient 4 points d'arrêt de requête multimédia et la fondation contient 5. Pour chaque grille, ils ont des préfixes de classe différents qui peuvent être utilisés pour définir la taille de la colonne (voir les deux tables ci-dessus).
Les lignes de grille bootstrap nécessitent également des éléments encapsulés. Cela devrait avoir un conteneur ou une classe de conteneur-fluide. La classe de conteneur dans un élément a une valeur fixe, et sa valeur dépend de la fenêtre (voir le premier tableau ci-dessus), tandis que la classe de conteneur-fluide dans un élément s'étend à la largeur entière de la fenêtre du navigateur.
Comparaison 3: colonne! = 12?
Il est possible que le nombre de colonnes dans un système de grille ne soit pas égal à 12. Dans ce cas, Bootstrap flottera la dernière colonne vers la gauche, et la fondation la flottera vers la droite. Si vous souhaitez remplacer le comportement par défaut de la fondation, ajoutez la classe .end dans la dernière colonne.
Comparaison 4: classe fonctionnelle
Les deux cadres fournissent des classes supplémentaires qui vous permettent de définir leur maillage de manière très flexible.
Les classes visibles vous permettent de choisir d'afficher ou de masquer le contenu sur les écrans d'une taille spécifique. La classe de décalage vous permet de centrer des colonnes incomplètes ou de régler l'espacement entre eux. Bien sûr, il existe d'autres classes qui peuvent spécifier l'ordre des colonnes en fonction de différents appareils.
Comparaison cinq: blocs de grille
En plus de la grille par défaut, la fondation prend en charge une autre fonctionnalité raster, à savoir les blocs de grille. Il vous permet de créer des colonnes de la même taille avec la plus petite marque. Pour l'utiliser, définissez la ligne comme l'élément UL et les colonnes de la ligne comme élément Li. Spécifiez ensuite la taille de la colonne en appliquant la classe pertinente à l'élément UL (voir le deuxième tableau ci-dessus pour plus de détails).
Pour le moment, vous vous demandez peut-être quelle est la différence entre une grille ordinaire et un bloc de grille? Jetons un bref aperçu des deux différences entre elles:
Contrairement à la grille par défaut, (blocs de grille), chaque ligne a une largeur maximale appliquée, de sorte que la fenêtre entière du navigateur est toujours couverte.
Les blocs de maillage ne peuvent être utilisés que dans des projets de taille égale.
Utilisation de la grille
Maintenant que nous avons une bonne compréhension des grilles de ces deux cadres, voyons comment nous pouvons les utiliser pour créer une page bootstrap et la page de fondation correspondante.
La capture d'écran suivante montre la première mise en page que nous allons construire:
En commençant par Bootstrap, nous définissons un élément avec la classe de conteneurs. Comme indiqué précédemment, cette classe définira une largeur fixe pour cet élément en fonction de la taille de l'écran (voir le tableau dans Bootstrap pour plus de détails). Ensuite, nous ajoutons un élément avec la ligne de classe.
Nous sommes maintenant prêts à configurer nos colonnes. Pour les grands écrans, nous voulons 4 colonnes de la même taille. Nous définissons donc 4 éléments Div chacun avec la classe Col-LG-3. Cependant, pour les petits et moyens appareils de taille moyenne, nous préférons avoir deux colonnes dans chaque ligne. Pour cette raison, nous utilisons la classe Col-SM-6. Enfin, pour l'écran ultra-petit, nous voulons que les colonnes soient empilées. Il s'agit du comportement par défaut du déplacement du premier cadre, il n'est donc pas nécessaire de définir la classe Col-XS-12.
Son HTML ressemble à ceci:
<div> <div> <div> <! - Contenu -> </div> <div> <! - Contenu -> </div> <div> <! - Content -> </div> <div> <! - Content -> </div> <div> <! - Content -> </div> <div> <! - Content -> </div> </v> </div>
Continuons à regarder les fondations.
Le maillage de la fondation est très similaire au maillage de Bootstrap, mais il est un peu plus simple. Tout d'abord, nous devons définir un élément avec la classe Row, qui contiendra nos colonnes. Cette classe définit la largeur maximale de l'élément à 62.5rem (1000px). Ensuite, nous ajoutons la colonne. Pour y parvenir, nous spécifions que chaque élément div a une classe de colonnes ou de colonnes, puis utilisons la classe raster correspondante (voir le tableau dans la fondation ci-dessus pour plus de détails) pour définir leur largeur. De même, pour les petits appareils, nous n'avons pas besoin de définir la classe Small-12.
Ceci est HTML basé sur la fondation Raster :
<div> <div> <! - Content -> </div> <div> <! - Content -> </div> <div> <! - Content -> </div> <div> <! - Content -> </div> <div> <! - Content -> </div> <iv> <! - Content -> </div> </ving>
En ce moment, je pense que vous avez commencé à vous familiariser avec le système de grille de ces deux cadres. Mais peut-être qu'un autre exemple peut vous aider à comprendre plus clairement.
Dans l'exemple suivant, nous construirons le pied de page. Le diagramme suivant montre le style que nous voulons:
Ici, nous choisirons une disposition différente à comparer avec l'exemple précédent. Pour les écrans avec un écran moyen et supérieur (ou les écrans avec un petit écran et au-dessus dans la grille bootstrap), nous voulons afficher trois colonnes. Cependant, nous avons remarqué qu'il y avait une ligne imbriquée dans la dernière colonne. Cela se compose de deux colonnes. Nous allons régler leur largeur à la moitié de la largeur de la ligne dans tous les appareils. Enfin, nous ajustons la visibilité des images qui apparaissent dans les rangées imbriquées.
Voici le code en bootstrap:
<div> <div> <div> <! - Contenu -> </div> <div> <! - Contenu -> </div> <div> <div> <a href = "#"> <p> Rencontrez et discussion </p> <i> </i> </a> </div> <! - .col-xs-6 -> <div> <! - Contenu -> </div> <! </div> <! - .col-sm-4 -> </div> <! - .row -> </div> <! - .Container ->
Voici le code pour la fondation:
<div> <div> <! - Contenu -> </div> <div> <! - Contenu -> </div> <div> <ul> <li> <a href = "#"> <p> Réunions et discussion </p> <i> </i> </a> </li> <li> <! - Contenu -> </li> </ul> </v> <! -. .row ->
Remarque: Si vous souhaitez remplacer les blocs de maillage, nous pouvons utiliser le maillage par défaut de Foundation pour créer des lignes imbriquées.
en conclusion
Si vous voulez plus d'informations sur le système de grille bootstrap, vous pouvez consulter cet article: "Bootstrap doit en apprendre davantage (disposition)"
Enfin, dans cet article, je présente la structure maillée de Bootstrap et Foundation. Ensuite, nous avons vu dans un vrai projet comment utiliser leurs grilles. Comme vous pouvez le voir, toutes les grilles sont similaires et peuvent être définies davantage.
J'espère que vous aimez cet article. Vous pouvez peut-être appliquer ce que vous avez appris à votre projet. Pour plus de contenu bootstrap, veuillez suivre: "Tutoriel d'apprentissage bootstrap", merci d'avoir lu.
Si vous souhaitez toujours étudier en profondeur, vous pouvez cliquer ici pour étudier et vous attacher 3 sujets passionnants:
Tutoriel pratique de bootstrap
Tutoriel d'utilisation du plug-in bootstrap
Ce qui précède est tout le contenu de cet article. J'espère que cela sera utile à l'apprentissage de tous et j'espère que tout le monde soutiendra davantage Wulin.com.