Le débat des cadres CSS Grid Disposeout vs CSS

Points de base

• La disposition de la grille CSS et les cadres CSS tels que Bootstrap sont utilisés différemment dans le développement Web. Les grilles CSS permettent aux développeurs de créer des dispositions de page complexes en utilisant le code CSS natif, tandis que Bootstrap fournit des composants pré-conçus pour créer rapidement et efficacement des pages Web.
• Bien que le maillage CSS offre une flexibilité et une indépendance, Bootstrap reste pertinent dans le développement frontal avec ses composants prêts à l'emploi, sa facilité de personnalisation et la praticité en tant qu'outil prototype. Il est particulièrement utile pour les développeurs de sites Web hérités construits avec Bootstrap.
• Le choix de la disposition de la grille CSS et du cadre CSS dépend des exigences spécifiques du projet. Le maillage CSS est idéal pour les conceptions complexes basées sur un maillage, et Bootstrap économise du temps et des efforts avec des composants et des styles pré-conçus. Ils peuvent également être utilisés ensemble pour profiter des deux outils.

Le codage des dispositions Web n'est plus aussi douloureux à l'aide de normes CSS de pointe comme les dispositions de grille CSS et Flexbox. Si la prise en charge du navigateur pour Grid et Flexbox est assez bonne, alors une question se pose inévitablement: pourquoi devrais-je envisager d'apprendre et d'utiliser des cadres CSS dans mon travail de développement?

Dans cet article, je me concentrerai sur Bootstrap, car il est sans doute le plus populaire de toutes les bibliothèques CSS disponibles.

À mon avis, même aujourd'hui, il y a encore de nombreuses raisons d'apprendre et d'utiliser Bootstrap.

Voici quelques raisons.

Qu'est-ce qu'une grille CSS?

Rachel Andrew (un orateur et écrivain bien connu dans CSS Grid) le définit comme suit:

La grille est un système de grille. Il vous permet de définir des colonnes et des lignes en CSS sans les définir dans des balises. Vous n'avez pas besoin d'un outil pour vous aider à faire ressembler à une grille, vous avez en fait une grille!

L'implémentation de cette norme CSS fournit aux développeurs la capacité indispensable de créer des dispositions de page en utilisant le code CSS natif, qui ne s'appuie pas sur les balises HTML, sauf en tant qu'élément de wrapper contenant une grille. Imaginez la flexibilité et le potentiel de créativité dans la conception Web!

Par exemple, vous n'avez pas besoin d'une classe personnalisée ou d'une ligne supplémentaire dans la balise pour créer cette mise en page simple:

Le code HTML est le suivant:

<code class="language-html"><div class="grid">
  <header>页眉内容</header>
  <main>主要内容</main>
  <aside>侧边栏</aside>
  <footer>页脚</footer>
</div></code>

Quant à CSS, vous construirez votre disposition visuelle ici. Dans cet exemple simple, seules quelques lignes de code sont nécessaires:

<code class="language-css">.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: 50px 150px 50px;
}

header, footer {
  grid-column: span 12;
}

main {
  grid-column: span 8;
}

aside {
  grid-column: span 4;
}</code>

c'est tout, tu as fini! pas mal.

Qu'est-ce que Bootstrap?

Au moment de la rédaction du moment de la rédaction, 3,6% de l'ensemble de l'Internet utilise Bootstrap:

Sur le site Bootstrap, vous trouverez les définitions suivantes:

Bootstrap est une boîte à outils open source développée à l'aide de HTML, CSS et JS. Utilisez nos variables SASS et nos mixins, un système de maillage réactif, un grand nombre de composants prédéfinis et de puissants plug-ins basés sur JQuery pour prototyper rapidement vos idées ou créer toute votre application.

En d'autres termes, Bootstrap fournit des composants prêts à l'emploi qui vous permettent de créer de belles pages Web en un rien de temps.

Écrivez simplement la balise correspondante et votre application aura fière allure immédiatement.

Bootstrap facilite également la personnalisation de son apparence et de son style et vous permet de sélectionner et de sélectionner les composants souhaités pour votre projet.

Pourquoi avez-vous encore besoin d'utiliser Bootstrap lorsque vous avez une grille?

La plus grande plainte concernant le bootstrap a toujours été le ballonnement de code. La raison en est qu'il contient du code CSS supplémentaire qui n'est pas utilisé dans de nombreux projets. La deuxième plus grande plainte est que le style du composant bootstrap est très détaillé, ce qui peut causer certains problèmes lors de l'écrasement de certaines règles CSS.

Sur la base de la dernière version de cette populaire bibliothèque de composants frontaux, aucune de ces critiques n'est tenable: Bootstrap est complètement modulaire, vous n'avez donc qu'à inclure les pièces dont vous avez besoin. De plus, la structure du fichier SASS rend très pratique de personnaliser le style d'origine en fonction de vos besoins.

La principale raison de l'opposition Bootstrap est que l'utilisation de maillage CSS, CSS a son propre système de maillage, qui n'a pas de dépendances externes, et une fois appris, il permet aux développeurs de créer facilement diverses dispositions.

Bien que je sois fan de la grille CSS, je pense que Bootstrap a toujours une place dans le développement frontal et le sera toujours pour un certain temps à venir.

Les éléments suivants sont au moins trois raisons.

Bootstrap n'est pas seulement son système de grille

Oui, la principale raison de l'utilisation de bootstrap est le système de grille pratique, ce qui rend la construction de pages Web réactives un jeu d'enfant. Cependant, Bootstrap possède également d'excellents composants, tels que le composant de cartes nouveaux polyvalents, que vous pouvez utiliser pour afficher divers types de contenu tels que le texte, les images et les vidéos, et une barre de navigation réactive hors de la boîte. Vous pouvez également choisir votre schéma de couleurs prédéfini préféré pour la plupart des composants.

Qu'en est-il de beaucoup de ces composants? À l'aide de Bootstrap, en ajoutant des info-bulleurs dynamiques, des carrousels ou des boutons déroulants, écrivez simplement le balisage correspondant. Si vos compétences JavaScript ne sont pas votre point fort, vous pouvez toujours profiter de ces composants sans écrire une seule ligne de code JavaScript.

De plus, si vous n'êtes pas un expert CSS, vous pouvez toujours utiliser la puissance de Bootstrap pour la conception Web lors de l'apprentissage des techniques.

Bootstrap est un excellent prototype outil

Parfois, il vous suffit de fournir au client un prototype disponible. Bootstrap vous permet de le faire immédiatement et nécessite peu de code personnalisé. Cela s'applique non seulement aux systèmes de grille, mais aussi à tous les composants standard qu'il fournit.

Ajoutez simplement une petite quantité de marques et votre prototype aura une barre de navigation réactive élégante ou une belle boîte d'alarme.

Traitement des sites Web hérités construits avec bootstrap

Une tâche commune pour les développeurs est de traiter les sites Web existants écrits par d'autres développeurs. Il est indéniable qu'un grand nombre de sites Web reposent sur Bootstrap pour construire leurs frontaux. Si vous devez refacter et entretenir la base de code, il sera très pratique de savoir comment utiliser le cadre. Ce n'est pas par hasard que de nombreuses informations sur l'emploi incluent Bootstrap dans leur liste de compétences requises.

Conclusion

Dans l'ensemble, Bootstrap ne disparaîtra pas à court terme. La dernière version a été considérablement améliorée des versions précédentes, de l'habitude à l'aide de Sass Mixin et de la cartographie pour une personnalisation facile, à l'introduction de nouveaux composants, de classes de services publics et d'architectures plus modulaires.

combiné à une excellente documentation et à une facilité d'utilisation, Bootstrap reste un solide concurrent dans l'écosystème frontal.

Que pensez-vous? Votre prochain projet sera-t-il construit à l'aide de la grille Bootstrap ou CSS?

Si vous avez entendu parler de bootstrap mais que vous avez retardé l'apprentissage parce qu'il semble trop compliqué, alors apprenez notre cours d'introduction bootstrap 4 pour apprendre rapidement et facilement la puissance de Bootstrap.

FAQ sur la disposition de la grille CSS et les cadres CSS

Quelles sont les principales différences entre la disposition de la grille CSS et les cadres CSS?

La disposition de la grille CSS et les cadres CSS tels que Bootstrap sont de puissants outils de conception Web, mais ils ont des objectifs différents. La disposition de la grille CSS est un module CSS qui vous permet de créer des dispositions Web complexes à l'aide de lignes et de colonnes. Il s'agit d'une fonctionnalité native de CSS, ce qui signifie qu'il ne nécessite pas de bibliothèques ou de plugins supplémentaires pour fonctionner. D'un autre côté, le cadre CSS est une bibliothèque préparée conçue pour simplifier le processus de conception Web. Ils sont livrés avec des composants pré-conçus tels que des boutons, des formulaires et des barres de navigation qui peuvent être facilement personnalisées et réutilisées.

La disposition de la grille CSS est-elle meilleure que les cadres CSS?

si la disposition de la grille CSS est "meilleure" que le cadre CSS dépend des besoins spécifiques du projet. La disposition de la grille CSS offre plus de flexibilité et de contrôle sur la disposition du Web, ce qui en fait un excellent choix pour les conceptions complexes basées sur la grille. Cependant, les cadres CSS comme Bootstrap peuvent vous faire gagner du temps et des efforts en fournissant des composants et des styles pré-conçus. Si vous travaillez sur un grand projet ou si vous devez démarrer un site Web rapidement, un cadre CSS peut être un meilleur choix.

La disposition de la grille CSS et le cadre CSS peuvent être utilisés ensemble?

Oui, la disposition de la grille CSS et le cadre CSS peuvent être utilisés ensemble. En fait, de nombreux développeurs utilisent les dispositions de grille CSS pour créer la disposition globale des pages Web, puis utilisent le cadre CSS pour créer des composants individuels dans ces pages. Cette approche vous permet de profiter des deux outils.

Quelles sont les alternatives à la disposition de la grille CSS et aux cadres CSS?

Il existe de nombreuses alternatives à la disposition de la grille CSS et aux cadres CSS. Certaines alternatives populaires aux dispositions de grille CSS incluent les dispositions multi-colonnes Flexbox et CSS. Ce sont également des modules CSS natifs qui permettent la création de dispositions flexibles. Certaines alternatives populaires au cadre CSS comprennent la fondation, Bulma et le vent arrière CSS. Ce sont d'autres cadres CSS qui offrent différentes fonctions et styles.

Comment choisir entre une disposition de grille CSS et un cadre CSS?

Lors du choix entre une disposition de grille CSS et un cadre CSS, considérez les besoins du projet et vos compétences et préférences en tant que développeur. Si vous avez besoin de beaucoup de contrôle sur la disposition et que vous préférez utiliser CSS, vous préférez peut-être la disposition de la grille CSS. Si vous préférez utiliser des composants pré-conçus et que vous souhaitez lancer rapidement un site Web, un cadre CSS peut être une meilleure option.

Bootstrap est-il un cadre CSS?

Oui, Bootstrap est un framework CSS. C'est l'un des cadres CSS les plus populaires disponibles aujourd'hui, connu pour sa conception réactive, ses composants pré-conçus et un large éventail de documents.

Quels sont les avantages de l'utilisation de la disposition de la grille CSS?

La disposition de la grille CSS offre certains avantages. Il permet de créer des dispositions complexes avec des lignes et des colonnes, c'est une fonctionnalité native de CSS, ce qui signifie qu'il ne nécessite pas de bibliothèques ou de plugins supplémentaires, et il offre beaucoup de flexibilité et de contrôle sur la disposition Web.

Quels sont les avantages de l'utilisation de cadres CSS?

Le cadre CSS offre certains avantages. Ils peuvent vous faire économiser du temps et des efforts en fournissant des composants et des styles pré-conçus, ils sont souvent bien documentés et soutenus par la communauté des développeurs, et ils peuvent aider à garantir que votre site Web est réactif et sur tous les appareils.

Comment démarrer avec la disposition de la grille CSS?

Pour commencer avec la disposition de la grille CSS, vous devez comprendre les bases de HTML et CSS. À partir de là, vous pouvez en savoir plus sur la disposition du réseau CSS via des tutoriels, de la documentation et des pratiques en ligne.

Comment démarrer avec les frameworks CSS?

Pour commencer avec le cadre CSS, vous devez également comprendre les bases de HTML et CSS. De là, vous pouvez choisir un cadre CSS qui convient à vos besoins, le télécharger et commencer à explorer sa documentation et ses fonctionnalités.

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!