Bootstrap, de Twitter, est actuellement le cadre frontal le plus populaire. Bootstrap est basé sur HTML, CSS et JavaScript. Il est simple et flexible, ce qui rend le développement Web plus rapide.
Points clés pour l'apprentissage:
1. Groupe auxiliaire
2. Outils réactifs
Dans cette leçon, nous apprenons principalement les classes de groupe auxiliaires de bootstrap et les outils réactifs. La classe auxiliaire fournit un ensemble de classes pour aider à la conception de pages de groupe, tandis que les outils réactifs utilisent des requêtes multimédias pour afficher ou masquer certains contenus.
un. Auxiliaire
Bootstrap fournit quelques petits styles de groupe auxiliaires en termes de disposition, qui sont utilisés pour définir les couleurs du texte et les couleurs d'arrière-plan, afficher des icônes proches, etc.
1. Couleur du texte situationnel
Liste de style Nom de style Description Texte de texte doux gris doux-primaire principal Bleu texte-succès Succès en vert Tutoriel </p> <p> Bootstrap Video Tutorial </p> <p> Bootstrap Video Tutorial </p> <p> Bootstrap Video Tutorial </p> <p> Bootstrap Video Tutorial </p>
2. Couleur de fond de situation
Liste de style Nom de style Description BG-Primaire Main Blue Bg-Success Succès Green Bg-Info Informations BL BG-WARNING AVERTISSEMENT BG-DANGER DANGEREUX ROUGE // Arrière-plans de divers tons <p> Bootstrap Video Tutorial </p> <p> Bootstrap Video Tutorial Tutoriel </p> <p> Bootstrap Video Tutorial </p> <p> Bootstrap Video Tutorial </p> <p> Bootstrap Video Tutorial </p>
3. Bouton Fermer
<Button Type = "Button"> × </ Button>
4. Symboles triangulaires
<span> </span>
5. flotter rapidement
<div> gauche </div> <v> droite </div>
Remarque: Ce flotteur est en fait un flotteur, mais il est utilisé! Important a amélioré la priorité.
6. Niveau de bloc
<div> Centre </div>
Remarque: c'est la marge: x auto; et affichage: bloc; est défini.
7. Nettoyez le flotteur
<div> </div>
Remarque: Ce div peut être placé devant le bloc flottant qui doit être nettoyé.
8. Afficher et se cacher
<div> Show </div> <div> Hidden </div>
deux. Outils réactifs
Lors de la recherche de supports, un contenu doit parfois être affiché et caché pour différentes tailles d'écran. La classe d'outils réactifs fournit cette solution.
// Affichage d'activation super petit écran <div> bootstrap </div> // Super petit écran Mide <div> bootstrap </div>
Remarque: Il existe trois variantes pour le contenu affiché, à savoir: bloc, bloc en ligne et en ligne.
Ce qui précède est le contenu pertinent des classes de groupe auxiliaires du composant bootstrap et des outils réactifs que l'éditeur vous a présentés. J'espère que cela vous sera utile!