Introduction à Bootstrap
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.
Composant miniature
Les miniatures les plus couramment utilisées sur les sites Web sont la page de liste de produits, qui affiche plusieurs images en une seule ligne, et certains ont des titres, des description du contenu, des boutons et d'autres informations sous les images.
Le framework Bootstrap sépare cette partie en composant de module et est implémenté via le nom de classe. Transmission et système de grille bootstrap. Vous trouverez ci-dessous les fichiers de code source de différentes versions du composant miniature de bootstrap:
Moins: tbumbnails.less
Sass: _tbumbnails.scss
Principe de mise en œuvre:
L'implémentation de la mise en page repose principalement sur le système de grille du framework bootstrap. Ce qui suit est le style correspondant à la miniature
. Transmission {Affichage: bloc; rembourrage: 4px; marge-fond: 20px; ligne de ligne: 1.42857143; fond-couleur: #fff; bordure: 1px solide #ddd; border-radius: 4px; -webkit-transition: all .2s facilite-in-out; transition: all .2s facilite-in-out;}. IMG {margin-droite: auto; margin-left: auto;} a.Tumbnail: hover, a.thumbnail: focus, a.thumbnail.active {border-color: # 428bca;}. ThumbNail .Caption {padding: 9px; couleur: # 333;}.Jetons un coup d'œil à un exemple:
<div> <div> <a herf = "#"> <img src = "img / 1.jpg" style = "height: 180px; width: 100%; display: block"> </a> </div> <v> <a herf = "#"> <img src = "img / 2.jpg" style = "height: 180px; width: 100%; affiche: affichage:" Block "> </a> </div> <div> <a herf =" # "> <img src =" img / 3.jpg "style =" height: 180px; width: 100%; affiche: block "> </a> </v> <v> <a herf =" # "> <img src =" img / 4.jpg "style =" height: 180px; width: 100%; Block "> </a> </div> </div>
Les effets sont les suivants:
Vous pouvez le voir à l'aide de la vue de conception réactive de Firefox
Sur la base des seuls miniatures, ajoutez un conteneur div avec nom de classe .Caption et placez d'autres contenus dans ce conteneur, tels que: titre, description du texte, boutons, etc.
<div> <div> <div> <a href = "#"> <img src = "img / 1.jpg" style = "height: 180px; width: 100%; affiche: block"> </a> <v> <h3> Voici le titre graphique 1111 </h3> <p> Voici le contenu description ici est le contenu description Voici le contenu description Voici le contenu description ici est le contenu description </p> <a href = "#"> Commencez à apprendre </a> </div> <v> <a href = "#"> <img src = "img / 2.jpg" style = "hauteur: 180px; largeur: 100%; 2222 </h3> <p> Voici le contenu description 2222Here est le contenu description 2222Here est le contenu description 2222Here est le contenu description 2222Here est le contenu description 2222Here est le contenu description 2222 </p> <a href = "#"> commencer à apprendre </a> </v> <v> <a href = "#"> <img src = "img / 3.jpg" style = "Height: 180px; largeur: 100%; affichage: bloc"> </a> <v> <h3> Voici le titre graphique 3333 </h3> <p> Voici le contenu description 3333 voici la description du contenu 3333 Voici la description du contenu 3333 Voici la description du contenu 222 voici Apprendre </a> </div> <v> <a href = "#"> <img src = "img / 4.jpg" style = "height: 180px; width: 100%; affiche: block"> </a> <v> <h3> Voici le titre graphique 4444 </h3> <p> Voici la description du contenu 4444Here est la description du contenu 44444. 4444e est la description du contenu 4444.El est la description du contenu 4444Here est le contenu description 4444 </p> <a href = "#"> Commencer à apprendre </a> <a href = "#"> Étude </a> </div> </div> </div>
Composant d'alerte
Le framework Bootstrap utilise un style. Par défaut, Bootstrap fournit quatre effets de boîte d'avertissement différents:
1. Boîte d'avertissement de succès: invite l'utilisateur à réussir dans l'opération, ajoutez le style.
2. Boîte d'avertissement d'information: fournir aux utilisateurs des informations rapides et ajouter un style.
3. Avertissement Boîte d'avertissement: Fournir des informations d'avertissement et ajouter un style d'avertissement alert sur la base de. Alert;
4. Boîte d'avertissement d'erreur: invite l'utilisateur pour les erreurs de fonctionnement et ajouter le style. Alert-danger sur la base de .Alert;
Parmi eux, le style. Alert définit principalement la couleur d'arrière-plan, la bordure, le coin arrondi et la couleur du texte de la boîte d'avertissement. De plus, le traitement de style est effectué sur H4, P, UL et .Alert-Link. Ce qui suit est le code source CSS:
.Alert {rembourrage: 15px; marge-fond: 20px; bordure: 1px solide transparent; border-radius: 4px;}. alert h4 {margin-top: 0; couleur: héritage;}. alert .Alert-link {Font-weight: bold;}. Alert> p, .Alert> ul {margin-bottom: 0;}. {margin-top: 5px;}. Alert-Success {Color: # 3C763d; background-Color: # dff0d8; border-color: # d6e9c6;}. alert-success hr {border-top-color: # C9e2b3;}. alert-suce. # 2B542C;}. Alert-Info {Color: # 31708F; Background-Color: # D9EDF7; Border-Color: # BCE8F1;}. # 8A6D3B; Background-Color: # fcf8e3; Border-Color: #faeBcc;}. Alert-Warning HR {Border-Top-Color: # F7E1B5;}. Alert-Danger {Color: # a94442; Background-Color: # f2dede; border-color: # ebccd1;}. alert-danger hr {border-top-color: # e4b9c0;}. alert-danger. alert-link {couleur: # 843534;}Par exemple:
<div role = "alert"> Félicitations pour votre opération réussie! </div> <div role = "alert"> Veuillez saisir le mot de passe correct </div> <div role = "alert"> Vous avez échoué deux fois, et il y a une autre dernière chance </div> <div role = "alert"> Désolé, votre mot de passe a été incorrectement entré! </div>
Fermeture d'alerte
1. Ajouter un nom de classe .Alert-Dismissable dans le conteneur de la boîte d'avertissement par défaut.
2. Ajouter. Closez à l'étiquette de bouton pour implémenter le bouton de clôture de la boîte d'avertissement
3. Assurez-vous que l'attribut personnalisé Data-Dismiss = "Alert" est défini sur l'élément de bouton de fermeture (la fermeture du boîtier d'alerte nécessite que JS détecte l'attribut, contrôlant ainsi la fermeture de la boîte d'alerte)
exemple:
<div role = "alert"> <Button Type = "Button" Data-Dismiss = "Alert"> × </ftont> Félicitations pour votre fonctionnement réussi! </div> <divrole = "alert"> <Button Type = "Button" Data-Dismiss = "Alert"> × </ Button> Veuillez saisir le mot de passe correct </div> <div role = "Alert"> <Button Type = "Button" Data-Dismiss = "Alert"> × </ Button> Vous avez échoué l'opération deux fois, et il y a une dernière chance </ div> <div role = "Alert" ALERT " Data-Dismiss = "Alert"> × </futton> Désolé, votre mot de passe a été incorrectement entré! </div>
Lien vers la boîte à alerte
Parfois, vous devez ajouter un lien à la boîte d'avertissement pour dire à l'utilisateur de passer à une nouvelle page. Le lien vers la boîte d'avertissement est mis en évidence dans le framework bootstrap. Ajoutez un nom de classe comme .Alert-link au lien ajouté à la boîte d'avertissement. Vous trouverez ci-dessous le style CSS de la liaison alerte
.Alert .Alert-Link {Font-Weight: Bold;} / * La couleur du texte du lien dans différents types de boîtes d'avertissement * /. # 66512C;}. Alert-Danger .Alert-Link {Color: # 843534;}exemple:
<div role = "alert"> <strong> bravo! </strong> Vous lisez avec succès <a href = "#"> Ce message d'alerte important </a> </div> <div role = "alert"> <strong> bien fait! </strong> Vous avez lu avec succès <a href = "#"> <strong> Ce message d'alerte important </a> </v> <div role = "alert"> </srofe> </div> <div role = "alert"> </strong! Lire <a href = "#"> Ce message d'alerte important </a> </div> <div role = "alert"> <strong> bien fait! </strong> Vous lisez avec succès <a href = "#"> Ce message d'alerte important </a> </v> <div role = "alert"> <strong> bien fait! </strong> role = "alert"> <strong> bien fait! </strong> Vous lisez avec succès <a href = "#"> Cet important message d'alerte </a> </div>
Je présenterai tellement sur le composant miniature de Bootstrap et le composant d'avertissement que cet article vous présente. J'espère que cela vous sera utile!