Aujourd'hui, nous allons examiner les effets de la composante CSS et des classes les plus importantes. Ces classes ne sont pas difficiles. La clé est de les maîtriser avec compétence, de les utiliser en combinaison et de les utiliser de manière flexible. Pour les articles sur le style et la mise en page CSS dans les deux premiers articles, vous pouvez les lire dans les articles précédents.
1. Composants de navigation
J'ai fait une navigation moi-même. Actuellement, il n'y a qu'un menu de premier niveau. Dans le prochain article, un menu de deuxième niveau sera donné, impliquant des plug-ins JS, donc je ne le décrirai pas ici.
<! Doctype html> <html lang = "zh-cn"> <éadf> <meta charset = "utf-8"> <meta http-equiv = "x-ua-compatible" contenu = "ie = edge"> <meta name = "Viewport" contenu = "width = device-width, premier, et 1"> <! - Le bilan de device ci-dessus? Tout autre contenu * doit * les suivre! -> <itTitle> Menu de deuxième niveau </title> <style> .sidebar-menu {margin: 20px auto; width: 180px;} / * réécrivez le style du glissement de la souris * /. Nav-pills li a: hover {background-Color: # 337ab7; Couleur: #fff;} </ style> <link href = "css / bootstrap.css" rel = "Stylesheet"> <link href = "css / bootstrap.min.css" rel = "Stylesheet"> <link href = "css / style.css" rel = "Stylesheet"> <script src = "http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"> </ script> <script src = "http://cdn.bootcss.com/bootstrap/3.3.4/js/bootsstrap.min.js"> </dcript> Menu -> <div> <ul> <li role = "présentation"> <a href = "#"> <span> </ span> home </a> </li> <li role = "présentation"> <a href = "#"> <pan> </span> à propos de moi </a> </ li> <li role = "présentation"> <a href = "#"> <pan> role = "présentation"> <a href = "#"> <span> </span> manquant </a> </li> <li role = "présentation"> <a href = "#"> <span> </span> babillard </a> </li> <li role = "présentation"> <a href = "#"> <pander> </pan> Mots émotionnels </a> </ li> </ul> </div> </ body> </html>Les effets sont les suivants:
Les points suivants doivent être notés en navigation:
1: Le composant de navigation dépend de la classe NAV. (C'est-à-dire que lorsque vous utilisez d'autres classes, vous devez écrire ce cours)
2: Assurer l'accessibilité des composants de navigation (Ajouter un attribut de rôle)
3: Les classes impliquées comprennent des tabs de navigation, des montants de navigation (fabriquer des capsules de navigation), empressées par le Nav (faire de la navigation horizontale dans la navigation verticale), justifiée par la navigation (disposition de la largeur égale de navigation)
4: Pour la classe désactivée, lors de l'ajout de liens dans la page de navigation (y compris les onglets et les pages de navigation), il est simplement désactivé sur la surface (la couleur devient grisée, la forme de la souris change), et la fonction réelle existe toujours.
5: Utilisez la navigation avec le menu déroulant.
Regardons le paragraphe suivant: Vous pouvez coller du code et le tester vous-même et ne plus prendre de captures d'écran.
<! - La navigation dépend de la classe NAV Classe Nav-tabs Classe NAV -> <ul> <li role = "présentation"> <a href = "#"> home </a> </li> --- Veuillez ajouter un attribut de rôle <li role = "présentation"> <a href = "#"> Profil </a> </li> <li role = "présentation"> <a href = "#"> </ul> <! - Onglet Capsule Arrangis d'achat de navigation en navigation de navigation -> <ul> <li role = "présentation"> <a href = "#"> home </a> </li> <li role = "présentation"> <a href = "#"> Profil </a> </li> <li role = "présentation"> <a href = "#"> <! - Alignation de la navigation aux deux extrémités, justifiée par la navigation pour atteindre l'alignement de la colonne de navigation -> <ul> <li role = "présentation"> <a href = "#"> home </a> </li> <li role = "présentation"> <a href = "#"> Profil </a> </li> <li role = "présentation"> <a href = "#" <br> <br>
Jetons un coup d'œil à l'état de navigation avec le menu déroulant:
<ul> <li role = "présentation"> <a data-toggle = "dropdown" href = "#" role = "bouton" aria-haspopup = "true" aria-expanded = "false"> dropdown <span> </span> </a> <ul> <li> <a href = "#"> Action </a> </li> <li> <a href = "#> action 11111 <li> <a href = "#"> Action 222 </a> </li> <li> <a href = "#"> Action 333 </a> </li> </li> </li> <li> <a href = "#"> Action 333 </a> </ li> Diviseurs, généralement en utilisant du Li vide ou de la portée. <li role = "présentation"> <a href = "#"> Profil </a> </li> <li role = "présentation"> <a href = "#"> messages </a> </li> </ul>
En fait, pour utiliser la classe déroulante de la classe de menu déroulant, le format de base est comme celui ci-dessus, ou si vous transformez le lien A en bouton, etc., vous pouvez l'utiliser de manière flexible.
2. Composant de la barre de navigation
Note:
1: La barre de navigation doit organiser tous les composants horizontalement et envelopper les composants, similaires à la navigation horizontale
2: Assurer l'accessibilité. Utilisez la balise <Nav> ou <div role = "Navigation">
3: Les classes impliquées dans les barres de navigation comprennent: Navbar-inverse (pour implémenter la couleur d'arrière-plan en noir et blanc texte), Navbar-Fixed-top | Navbar FixEd-Bottom (barres de navigation fixe en haut et en bas)
Navbar-left | Navbar-droite (ajoutez généralement Navbar-droite au dernier élément), Navbar-Text, Navbar-Link (définissez la couleur de connexion), Navbar-BTN (pour les boutons non inclus dans le formulaire, vous pouvez
Utilisez cette classe pour réaliser l'effet du centrage vertical), de la forme navale (pour obtenir l'alignement vertical), Navber-Brand (Icône de marque Set), Navbar-Collapse (Effondrement)
Jetons un coup d'œil à l'effet du pliage de Collapse Navbar, le code est le suivant:
<! - Bar de navigation effondré signifie pliage -> <Anav> <div> <div> - Navigation Bar enière <Button Type = "Button" Data-Toggle = "ENCLAPPEM </futton> <a href = "#"> marque </a> </div> <div id = "bs-example-navbar-Collapse-1"> - Colonne de repliage <ul> <li> <a href = "#"> Link <span> Current </span> </a> </li> <li> <a href = "#"> Link </a> data-toggle = "dropdown" role = "bouton" aria-haspopup = "true" aria-expande Ici </a> </li> <li> <a href = "#"> lien séparé </a> </li> <li role = "séparateur"> </li> <li> <a href = "#"> Un lien de plus séparé </a> </li> </li> </li> </ul> <formulaire de la recherche "> </vr> <v> <entrée =" Type = "Soumider"> Soumider </ Button> </ Form> <ul> <li> <a href = "#"> lien </a> </li> <li> <a href = "#" data-toggle = "dropdown" role = "Button" aria-haspopup = "true" aria-expanded = "false"> dropdown <spande> </pan> </a> href = "#"> Action </a> </li> <li> <a href = "#"> Une autre action </a> </li> <li> <a href = "#"> autre chose ici </a> </li> <li> <a href = "#"> Lien séparé </a> </li> </li> </li> </v> <! type = "Button" data-toggle = "effondrement" data-target = "# bs-example-navbar-colapse-1" aria-expanded = "false"> <span> basculer la navigation </span> <span> </span> <span> </span> <span> </ span> <span> </span> </sponse> <a href = "# #"> marque </a>
L'effet est le suivant:
Autrement dit, lorsque mon écran de navigateur se rétrécit, les composants d'origine deviendront des lignes pliées (trois lignes horizontales) sur le côté droit de la ligne de marque. Cliquez sur le bouton Horizontal et le composant s'affiche.
3. Composants de pagination
Note:
1: Utilisez la pagination de la classe (ajoutez la classe Pagination-LG pour l'agrandir)
2: Atteindre la page Tourner l'alignement et implémenter l'alignement de virage de la page (l'avant et vers l'arrière sont situés respectivement aux deux extrémités).
Le code est le suivant:
<! - Catégorie de pagination -> <av> <ul> <li> <a href = "#" aria -label = "précédent"> <span aria-hidden = "true"> «</span> </a> </li> <li> <a href =" # "> 1 </a> </li> <li> <a href =" # "> 2 </a> href = "#"> 3 </a> </li> <li> <a href = "#"> 4 </a> </li> <li> <a href = "#"> 5 </a> </li> <li> <a href = "#"> 5 </a> </li> <li> <a href = "#" arria-label = "Next"> <pander aria-hidden = "true"> »» </span> </a> </li> </ul> </AV>
Si vous implémentez la pagination, ajoutez simplement <ul>.
L'effet de virage de page est le suivant: utilisez principalement la classe de téléavertisseur
<! - Flip-up -> <Av> <ul> <li> <a href = "#"> Précédent </a> </li> <li> <a href = "#"> Next </a> </li> </ul> </AV> <! - Le lien d'alignement a ajouté des classes précédentes et suivantes aux deux extrémités -> <av> <ul> <li> <a href = "#"> <spanes aria-hidden = "true"> ← </span> plus âgé </a> </li> <li> <a href = "#"> NOURNER <span aria-hidden = "true"> → </span> </a> </li> </ul> </AV>
Les effets des deux ci-dessus sont les suivants:
4. Badge
Fonction: Présentez les informations en nombres accrocheurs.
<! - Badge -> <a href = "#"> Boîte de réception <span> 42 </span> </a> <Button Type = "Button"> Message <span> 4 </span> </ Button>
Les effets sont les suivants:
L'ajout de ce type de classe de badge peut également être utilisé avec la navigation, etc.
5. Composant miniature
Utilisez-le avec le système raster et la classe miniature. Le code est le suivant: peut être testé par vous-même
<! - Thumbnail Thumbnail -> <div> <div> <div> <img src = "111.png"> <div> <h3> Label Thumbnail </h3> <p> <a href = "#" role = "Button"> Button </a> </p> </v> </v> </v> <! - Second -> </v> <Img> src = "111.png"> <div> <h3> Label Thumbnail </h3> <p> <a href = "#" role = "Button"> Button </a> </p> </ div> </ div> <! - tiers -> <div> <v> <img src = "111.png"> <v> <h3> href = "#" role = "Button"> Button </a> </p> </div> </ div> <! - Third -> <div> <div> <img src = "111.png"> <v> <h3> Label ThumbNail </ h3> <p> <a href = "#" Role = "Button"> bouton </a> </p> </div> </div> </div> </div> </div> </div>
6. Boîte d'avertissement closable
Utiliser la classe: alerte-dissmisable et un bouton est affiché comme suit:
<! - Fournissez un bouton de fermeture pour la boîte d'avertissement -> <div role = "alert"> <Button type = "Button" Data-Dismiss = "Alert" aria-Label = "Close"> <span Aria-Hidden = "true"> × </span> - Aadd Aria-Hidden Attribute </ Button> <strong> AVERTISSEM Assurer un comportement correct sur tous les appareils ->
En ce qui concerne la scène, vous pouvez le remplacer vous-même. Plus de description. Définissez Alert-Link pour définir la couleur qui correspond à la boîte d'avertissement actuelle.
7. Bar de progression
Utiliser la classe: barre de progrès et de progrès pour implémenter l'animation
<! - Progress Bar -> <div> <div role = "Progressbar" Aria-Valuenow = "60" Aria-ValuMax = "100" Aria-Valumin = "0"> 60% </div> </div> <! - Définit la largeur minimale -> <div> <div Roleemin = "Progressbar" Aria-ValueNow = "80" Aria-valueMuemin = "0" 0 "0" 0 "0" 0 "0" 0 "0" 0 "0" 0 "0" 0 "0" 0 "0" 0 "0" 0 "0" 0 » aria-valuemax = "100"> 80% </div> </div> <div> <div role = "ProgressBar" Aria-Valuenow = "2" Aria-Valuemin = "0" Aria-Valuemax = "100" style = "Min-Width: 2EM;"> 2% </v> </div>
Pour réaliser la barre de progression de l'effet d'animation, utilisez des rayures de progression pour réaliser l'effet d'animation et ajoutez actif. Le code est le suivant: Plus de captures d'écran
<! - Utilisez Progress-Bar-Striped dans la classe Stripe -> <div> <div role = "ProgressBar" aria-Valuenow = "100" Aria-Valuemin = "0" Aria-Valuemax = "100"> <pan> 40% complet </span> 100% </v> </v>
Vous pouvez également modifier la couleur des rayures de la barre de progression en combinaison avec la couleur de la scène.
8. Groupe de liste, composants du groupe d'entrée
Examinons d'abord le groupe de liste, utilisant principalement la classe de groupe de liste, et deuxièmement, les éléments de liste sont écrits avec List-Groupe-Item. Le code est le suivant:
<! - List Group -> <ul> <li> <span> 3 </span> 1111 </li> <li> <span> 5 </span> 2222 </li> <li> 3333 </li> <li> 4444 </li> <li> 5555 </li> </ul> <! - Les liens peuvent également ajouter des classes de scénarios en tant que groupe de liste -> <Av> href = "#"> 2222 </a> <a href = "#"> 33333 </a> <a href = "#"> 44444 </a> <Un bouton href = "#"> 55555 </a> </ div> <! - Button comme groupe de liste, "Bouton" Button "Button </ / bouton> <btn ->> <v> <v> Type = "Button"> 2222 </ Button> <Button Type = "Button"> 3333 </ Button> <Button Type = "Button"> 4444 </ Button> <! - List Group Item -> <div> <a href = "#"> <h4> List Group Item </h4> <p> 11111 </p> </a> <a href = "# #> <h4> <p> 22222 </p> </a> </div>
Jetons un coup d'œil au groupe d'entrée, utilisez la classe de groupe d'entrée pour envelopper les composants ensemble. Le code est le suivant:
<! - Group d'entrée -> <div> - Les composants sont inclus dans le groupe inout <span> <bouton type = "Button"> Go </futton> </span> <entrée type = "Text" aria-Label = "Text"> </div>
9. Intégrer le contenu des fonctionnalités réactives
Vous comprenez ce que cela signifie et quel est le contenu intégré? Comment l'intégrer? Alors comment répondre?
Embed: c'est-à-dire utiliser des balises telles que <frame>, <embed>, <video> et <objet> pour introduire du contenu de fichier externe. Je crois que tout le monde connaît les nouveaux attributs dans HTML5. Vidéo, radio, etc.
Réponse: Créez automatiquement une échelle fixe basée sur la largeur du conteneur externe qui est intégré, permettant au navigateur de déterminer automatiquement la taille de la vidéo ou du contenu, et peut évoluer sur divers appareils.
Si vous voulez que le style final corresponde à d'autres propriétés, vous pouvez également utiliser explicitement une classe de renonciation.
Le code est le suivant:
<div> <iframe src = "..."> </ iframe> </div> <div> <iframe src = "..."> </iframe> </div>
Jetons un coup d'œil à ce que l'intégration de l'intégration-16BY9 et de l'intégration ne répond pas respectivement respectivement.
Jetons un coup d'œil à la console:
.embed-sensive-4by3 {--- 4 représente horizontale, 3 représente verticale, c'est-à-dire un rapport de mise à l'échelle, c'est-à-dire une échelle de 4: 3 padding-boot: 75%;} .. insembed-sensive-16by9 {padding-bottom: 56,25%;}Gardez le rapport d'aspect, si la largeur est calculée à 100%, elle est à 100% * 3/4 = 75%. À l'heure actuelle, définissez son ratio d'aspect en définissant son padding-botom. Lorsque vous zoomez sur le navigateur,
Enfin, gardez ce rapport de mise à l'échelle pour la mise à l'échelle.
Si vous souhaitez toujours étudier en profondeur, vous pouvez cliquer ici pour étudier et vous attacher 3 sujets passionnants:
Tutoriel d'apprentissage bootstrap
Tutoriel pratique de bootstrap
Tutoriel d'utilisation du plug-in bootstrap
Ce qui précède est tout le contenu de cet article. J'espère que cela sera utile à l'apprentissage de tous et j'espère que tout le monde soutiendra davantage Wulin.com.