Différence entre la grille CSS et Bootstrap

La plupart du temps, nous utilisons CSS Grid lorsque nous avons besoin d'exigences de mise en page strictes et que nous souhaitons que le contenu circule sur la page conformément à ces exigences.

Le système de grille de Bootstrap est basé sur le système de mise en page CSS Flexbox, et CSS Grid est influencé par les identifiants basés sur l'impression. Bootstrap est un concurrent direct de CSS Grid, et des comparaisons importantes peuvent être faites entre les systèmes de disposition de grille des deux frameworks.

Si nous voulons contrôler la disposition dans le sens des lignes ou des colonnes, nous devons utiliser la grille basée sur Flexbox fournie par Bootstrap. D'un autre côté, si vous souhaitez contrôler la disposition des lignes et des colonnes, CSS Grid doit être utilisé comme solution.

Qu'est-ce que la grille CSS ?

Une série de lignes verticales et horizontales qui se croisent est comprise comme une grille. CSS3 peut utiliser la disposition en grille pour diviser la page en différentes parties.

La propriété grid fournit un système de disposition de grille basé sur des lignes et des colonnes. Il élimine le besoin de disposition des éléments et de flottement dans la conception Web. La disposition en grille permet de créer une structure de grille en utilisant CSS au lieu de HTML.

La disposition en grille CSS est particulièrement efficace pour diviser une page en sections clés ou pour établir la taille, la position et les relations hiérarchiques entre de nombreux composants HTML basés sur des contrôles primitifs.

Veuillez consulter l'exemple−

<div class="grid_container">
   <div class="grid_items">01</div>
   <div class="grid_items">02</div>
   <div class="grid_items">03</div>
   <div class="grid_items">04</div>
   <div class="grid_items">05</div>
   <div class="grid_items">06</div>
   <div class="grid_items">07</div>
   <div class="grid_items">08</div>
   <div class="grid_items">09</div>
</div>

Il fonctionne d'une manière similaire à celle d'un tableau dans la mesure où il permet à l'utilisateur d'organiser les éléments en lignes et en colonnes. Cependant, contrairement aux tableaux, la grille CSS. rend la conception d'une mise en page vraiment simple En utilisant les attributs grid-template-rows et grid-template-columns, nous sommes en mesure de spécifier les colonnes et les lignes qui apparaissent sur la grille.

Qu'est-ce que Bootstrap ?

Quand il s'agit de. Concevoir un site Web réactif et convivial sur les appareils mobiles, le framework HTML, CSS et JavaScript connu sous le nom de Bootstrap est de loin l'option la plus populaire. Le téléchargement ou l'utilisation de l'outil ne coûte rien. cadre frontal qui rend le processus de développement de sites Web plus simple et plus efficace.

Il contient des modèles de conception basés sur HTML et CSS pour la typographie, les formulaires, les boutons, les tableaux, la navigation, les modaux, les carrousels d'images et bien d'autres choses. En plus de cela, il prend en charge les plug-ins écrits en JavaScript. Cela vous permet de créer plus facilement des conceptions réactives.

Qu'est-ce que Bootstrap Grid ?

La structure de grille utilisée par Bootstrap est réactive, ce qui signifie que les colonnes se réorganiseront en fonction de la taille de l'écran. - Si le matériel est structuré en trois colonnes, il peut apparaître mieux sur un grand écran, mais si les éléments de contenu sont empilés les uns sur les autres, il peut être meilleur sur un petit écran ; écran .

Il existe quatre classes incluses dans le système de grille Bootstrap −

• xs (pour les téléphones − écrans de moins de 768 px de large)

• sm (pour les tablettes − écrans égaux ou supérieurs à 768 px large) )

• md (pour les petits ordinateurs portables − écrans égaux ou supérieurs à 992 px de large)

• lg (pour ordinateurs portables et de bureau − écrans égaux ou supérieurs à 1 200 px de large)

Jetez un œil à l'exemple suivant −

<div class="row">
   <div class="col-xs-9 col-md-7">col-xs-9 and col-md-7</div>
   <div class="col-xs-3 col-md-5">col-xs-3 and col-md-5</div>
</div>

<div class="row">
   <div class="col-xs-6 col-md-10">col-xs-6 and col-md-10</div>
   <div class="col-xs-6 col-md-2">col-xs-6 and col-md-2</div>
</div>

<div class="row">
   <div class="col-xs-6">col-xs-6</div>
   <div class="col-xs-6">col-xs-6</div>
</div>

• Pour un alignement et un remplissage corrects, les lignes doivent être contenues dans un ".container" (largeur fixe) ou ".container-fluid" (pleine largeur).

• Créez des groupes de colonnes horizontaux en utilisant des lignes.

• Seules les colonnes peuvent être transitoires, le contenu doit être placé à l'intérieur de la colonne.

• Vous pouvez créer rapidement des dispositions de grille à l'aide de classes prédéfinies telles que ".row" et ".col-sm-4".

• Le remplissage entre les colonnes crée des espaces (espaces entre les colonnes). Utilisez des marges négatives sur ".rows" pour compenser le remplissage de la première et de la dernière colonne.

• Créez des colonnes de grille en définissant le nombre de colonnes à étendre (12 options disponibles). Par exemple, trois colonnes de même largeur peuvent être représentées par trois « .col-sm-4 ».

• Les largeurs de colonnes étant exprimées en pourcentages, elles sont toujours flexibles et proportionnelles à leur élément parent.

Différences entre CSS Grid et Bootstrap

Le tableau ci-dessous met en évidence les principales différences entre CSS Grid et Bootstrap -

Compare Basics	CSS Grid	Bootstrap
Markup	Il a un balisage plus propre et plus lisible. La mise en page de la grille ne se fait pas en HTML, mais en CSS.	Pour créer la mise en page, vous avez besoin d'une balise div pour chaque ligne et définissez la hiérarchie des classes au sein de chaque élément div. Cela rend le code plus long.
Responsive	Même si le HTML ne change pas, ajoutez simplement diverses requêtes multimédias et décrivez la disposition en grille de chaque élément HTML pour modifier le CSS.	En utilisant la hiérarchie de classes établie, vous pouvez concevoir indépendamment des dispositions de zones de contenu pour différentes tailles d'appareils. Cependant, à mesure que le nombre de classes augmente, l’étiquetage devient plus fastidieux.
La vitesse de chargement des pages	est fortement prise en charge par la grande majorité des navigateurs et des versions. Il n’est pas nécessaire de télécharger quoi que ce soit et le site Web se charge plus rapidement.	Le site Web se charge lentement en raison de la nécessité de télécharger les fichiers joints de la feuille de style.
Limite de colonnes	Il offre une mise en page flexible sans limite sur le nombre de colonnes. Il n'est donc pas difficile d'avoir un certain nombre de colonnes.	La grille étant divisée en 12 colonnes, il n'est pas possible de mettre en place une disposition qui ne totalise pas 12.

Conclusion

L'utilisation de Bootstrap nécessite d'écrire plus de HTML, tandis que l'utilisation de CSS Grid nécessite d'écrire plus de CSS.

Selon les exigences de conception, l'utilisation de Bootstrap peut ne pas être une option. Pour des mises en page plus simples, Bootstrap est un choix simple qui peut vous permettre de démarrer dans un délai raisonnable.

N'oubliez pas que Bootstrap est plus qu'un simple système de grille ; c'est une boîte à outils frontale complète de classes prédéfinies pour les modaux, les info-bulles, les fenêtres contextuelles, les barres de progression, etc. Pour obtenir les mêmes résultats avec CSS Grid, vous devez écrire le fichier en utilisant JS ou JQuery.

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!