2. Center Text avec Bootstrap utilise : Créer du texte"/> 2. Center Text avec Bootstrap utilise : Créer du texte">
Maison > Article > interface Web > Partager une connaissance détaillée de Bootstrap
1. Rendre les images adaptées aux mobiles
Utilisation : Adaptez les images à la largeur de votre page.
Opération : Ajouter l'attribut de classe .img-responsive à l'image.
<img src="/images/cat.jpg" class="img-responsive">
2. Centrer le texte avec Bootstrap
Utilisation : Centrer le texte .
Opération : Ajouter l'attribut de classe center-text au texte.
<p class="text-center">Hi, I'm Yamei.</p>
Supplément : .text-right, .text-left, .text-primary (le contenu du texte a un class), .text-success, .text-muted (affaibli), .text-info, .text-warning, .text-danger
Créer un bouton Bootstrap
Utilisation : Créez un bouton de style Bootstrap.
Opération : Ajouter l'attribut de classe btn au texte.
<button class="btn">Like</button>
4. Bouton d'amorçage de l'élément
Utilisation : Bouton au niveau du bloc (étiré à 100 % de la largeur de l'élément parent). Créez un bouton au niveau du bloc. Le bouton s'étirera pour remplir la page et tous les éléments après le bloc flotteront automatiquement vers la ligne suivante (retour à la ligne).
Le principe est le suivant (photo de fcc) :Fonctionnement : Conserver le .btn attribut de classe, Join .btn-block.
<button class="btn btn-block">Like</button>
5. Button Color Rainbow
Utilisation : Ajoutez un bouton original (bleu) avec la classe .btn-primary.
Opération : Garder .btn .btn-bloquer attribut de classe, ajoutez .btn-primary.
<button class="btn btn-block btn-primary">Like</button>
Supplémentaire : .btn-danger, .btn-warning (bouton pour fonctionner avec prudence), .btn-info (bouton pour afficher des informations), .btn-default, .btn-link (faire ressembler le bouton à un lien, tout en conservant le comportement du bouton), .btn-success
.btn-lg, .btn-sm, .btn-xs, respectivement grand, petit et extra petit .disabled Désactiver le bouton .active Présente le bouton tel qu'il est cliqué(.rendu actif)
*Ce ci-dessus sont les notes que j'ai compilées lors de mon étude FCC. Je suis novice S'il y a des erreurs, veuillez laisser un message~[Recommandations vidéo associées :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!