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>

L'effet est le suivant :

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>

L'effet est le suivant :

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>

L'effet est le suivant :

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 :

. 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!