Quels sont les trois cœurs du bootstrap ?

Bootstrap rend le développement front-end plus rapide et plus facile. Tous les développeurs peuvent démarrer rapidement, tous les appareils peuvent être adaptés et tous les projets sont applicables.

Bien que vous puissiez utiliser directement la feuille de style CSS fournie par Bootstrap, n'oubliez pas que le code source de Bootstrap est développé sur la base des scripts de prétraitement CSS les plus populaires - Moins et Sass. Vous pouvez utiliser des fichiers CSS précompilés pour développer rapidement ou personnaliser les styles dont vous avez besoin à partir du code source. (Apprentissage recommandé : Tutoriel vidéo Bootstrap)

Avec l'aide de Bootstrap, votre site Web et votre application peuvent s'adapter rapidement et efficacement aux téléphones mobiles, tablettes et appareils PC via le même code, tous dont c'est le résultat de CSS Media Query.

Bootstrap fournit une documentation complète et magnifique. Vous trouverez ici toute la documentation détaillée sur les éléments HTML, les composants HTML et CSS et les plugins jQuery.

Trois composants principaux de Bootstrap

CSS de base : définissez des styles CSS globaux, les éléments HTML de base peuvent être stylisés à travers des classes et obtenir des effets améliorés et un système de grille avancé ; 🎜>

Composants : d'innombrables composants réutilisables, notamment des icônes de police, des menus déroulants, une navigation, des barres d'avertissement, des boîtes contextuelles et bien plus encore

Plug-in JS : Bootstrap Il est livré avec 13 plug-ins jQuery ; -ins, qui donnent « vie » aux composants dans Bootstrap.

Mobile-first

Mobile-first est le changement le plus important de Bootstrap 3.

Dans les versions précédentes de Bootstrap (jusqu'à la version 2.x), vous deviez référencer manuellement un autre CSS pour rendre l'ensemble du projet adapté aux mobiles.

C'est différent maintenant, le CSS par défaut de Bootstrap 3 lui-même est adapté aux mobiles.

Bootstrap 3 est conçu pour le mobile d'abord, puis pour le bureau. Il s’agit en fait d’un changement très opportun, car de plus en plus d’utilisateurs utilisent désormais des appareils mobiles.

Afin de rendre un site Web développé avec Bootstrap adapté aux mobiles et de garantir un dessin et une mise à l'échelle appropriés de l'écran tactile, la balise méta viewport doit être ajoutée à l'en-tête de la page Web.

est la suivante :

<meta name="viewport" content="width=device-width, initial-scale=1.0">

L'attribut width contrôle la largeur de l'appareil. En supposant que votre site Web sera consulté par des appareils avec des résolutions d'écran différentes, le définir sur la largeur de l'appareil garantit qu'il s'affichera correctement sur différents appareils.

initial-scale=1.0 garantit que lorsque la page Web est chargée, elle sera rendue dans un rapport 1:1 sans aucune mise à l'échelle.

Sur les navigateurs d'appareils mobiles, vous pouvez désactiver la fonction de zoom en ajoutant user-scalable=no à la balise méta de la fenêtre d'affichage

Pour plus d'articles techniques liés à Bootstrap, veuillez visiter

Apprendre dans le Colonne Tutoriel Bootstrap  !

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!