Quels sont les éléments constitutifs du bootstrap ?

Les composants Bootstrap peuvent être largement divisés en cadre de mise en page, mise en page, composants de base, plug-in jQuery et variables compilées LESS.

Ce qui suit est une brève introduction aux fonctions de chaque module dans Bootstrap. (Apprentissage recommandé : Tutoriel vidéo Bootstrap)

(1) Mise en page

La mise en page est essentielle pour chaque projet. Bootstrap a étendu une excellente disposition de grille basée sur le système de grille 960 et dispose de fonctions plus puissantes dans la disposition réactive, permettant à la disposition de la grille de s'adapter à divers appareils. Cette disposition en grille est également assez simple à utiliser. Il vous suffit de l'appliquer selon le modèle HTML pour créer facilement l'effet de mise en page souhaité.

De plus, changer le nom de la classe dans le modèle peut obtenir différents styles de mise en page. Par exemple, pour implémenter une mise en page fixe commune, il vous suffit d'ajouter le nom de la classe conteneur au HTML ; pour implémenter une mise en page fluide, il vous suffit d'ajouter le nom de la classe conteneur-fluide au HTML.

Bootstrap a également conçu Responsive pour les développeurs afin d'améliorer encore le cadre de mise en page. Les développeurs peuvent remplacer n'importe quel style sur cette base pour obtenir le design réactif idéal.

(2) Mise en page

La qualité de la mise en page affecte directement le style du produit, c'est-à-dire si la conception de la page est belle. Dans Bootstrap, la mise en page est basée sur un concept global et les formats tels que le corps du texte, le texte du paragraphe, le texte d'accentuation, les titres, les styles de code, les boutons, les formulaires, les tableaux, etc. sont personnalisés.

Bootstrap utilise la technologie Sprites dans la partie Icône et prépare des centaines d'applications Icône couramment utilisées pour les utilisateurs.

Il est nécessaire de recommander le projet Font Awesome aux lecteurs. Il s'agit d'un thème d'icônes étendu par Dave Gandy basé sur Bootstrap. La plus grande caractéristique est qu'aucune image n'est utilisée dans l'ensemble des icônes. Le projet Font Awesome utilise principalement le @font-face et les pseudo-éléments de CSS3 pour l'implémenter.

(3) Composants de base

Les composants de base sont l'une des essences de Bootstrap, et ce sont tous des composants interactifs que les développeurs doivent généralement utiliser. Par exemple, la navigation sur le site Web, les onglets, les barres d'outils, le fil d'Ariane, la barre de pagination, les étiquettes d'invite, l'affichage du produit, les blocs d'informations d'invite et les barres de progression, etc. Ces composants sont équipés de plug-ins jQuery. Leur utilisation peut grandement améliorer l'expérience interactive de l'utilisateur et rendre le produit plus ennuyeux et peu attrayant.

(4) Plug-in jQuery

Le plug-in jQuery dans Bootstrap est principalement utilisé pour aider les développeurs à réaliser la fonction d'interaction avec les utilisateurs. Bootstrap 1 en fournit 6. plug-ins courants.

Comment utiliser le plug-in jQuery dans Bootstrap 2 nécessite une analyse détaillée de problèmes spécifiques basée sur la documentation fournie par Bootstrap et les paramètres de chaque plug-in. Ce n’est qu’en le comprenant parfaitement que nous pourrons l’utiliser de manière flexible.

(5) Langage de style dynamique LESS

LESS est un langage CSS dynamique Il étend dynamiquement le CSS traditionnel basé sur le moteur JavaScript ou côté serveur, et possède des fonctionnalités plus puissantes. .fonctionnalité et meilleure flexibilité. Basé sur LESS, éditer du CSS peut revenir à utiliser un langage de programmation, définir des variables, des déclarations intégrées, des modes mixtes, des opérations, etc.

Il existe un ensemble de framework LESS édité dans Bootstrap. Les développeurs peuvent l'appliquer à leurs propres projets ou éditer des fichiers LESS via des méthodes telles que less.js, Less.app ou Node.js. Une fois le fichier LESS compilé, le framework Bootstrap ne contient que des styles CSS, ce qui signifie qu'il n'y a pas d'images, Flash et autres éléments redondants.

Pour des articles plus techniques liés à Bootstrap, veuillez visiter la colonne Tutoriel Bootstrap pour apprendre !

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!