Composants de disposition de bootstrap
1. Icône de police bootstrap
(1) lien de liste d'icônes de police
http://www.runoob.com/bootstrap/bootstrap-glyphicons.html
(2) utilisation
Pour utiliser les icônes, utilisez simplement le code suivant. Veuillez garder l'espace approprié entre l'icône et le texte. Pas de CSS de Glyphicon.
<span> </span>
(3) Icône de police personnalisée
Nous avons vu comment utiliser les icônes de police, et ensuite nous verrons comment personnaliser les icônes de police.
Nous commençons par l'exemple ci-dessus et personnalisons l'icône en modifiant la taille de la police, la couleur et l'application des ombres de texte.
A. Icônes personnalisées
<Button Type = "Button"> <span> </span> Utilisateur </ Button>
B. taille de police personnalisée
En augmentant ou en diminuant la taille de la police de l'icône, vous pouvez rendre l'icône plus grande ou plus petite.
<Button Type = "Button" Style = "font-size: 60px"> <span> </span> utilisateur </utton>
C. Personnaliser la couleur de la police
<Button Type = "Button" Style = "Color: RGB (212, 106, 64);"> <span> </span> utilisateur </fut Button>
D. Appliquer des ombres de texte
<Button Type = "Button" Style = "Text-Shadow: Black 5PX 3PX 3PX;"> <span> </span> utilisateur </fut Button>
2. Menu déroulant bootstrap
(1) Le menu déroulant est commutable et est un menu contextuel qui affiche le lien au format de liste. Cela peut être réalisé grâce à l'interaction avec le plugin JavaScript du menu déroulant (Dropdown).
Pour utiliser le menu suivant, ajoutez simplement un menu déroulant en classe .Dropdown.
<v> <Button Type = "Button" id = "DropDownMenu1" Data-Toggle = "Dropdown"> Topic <span> </span> </ Button> <Ul Role = "Menu" Aria-LabelledBy = "DropdownMenu1"> <li rôle = "présentation"> <a role = "Menuitem" role = "présentation"> <a role = "menutem" tabindex = "- 1" href = "#"> Mining de données <2 role = "menutem" tabindex = "- 1" href = "#"> liens séparés </a> </li> </ul> </div>
(2) aligner
Alignez le menu déroulant directement en ajoutant la classe .Pull-droite à .dropdown-menu.
(3) titre
Vous pouvez utiliser le casse-tête de classe pour ajouter un titre à la zone d'étiquette du menu déroulant.
3. Groupe de bouton bootstrap
(1) Le groupe de boutons permet à plusieurs boutons d'être empilés sur la même ligne. Ceci est très utile lorsque vous souhaitez aligner les boutons ensemble.
(2) nidification
Vous pouvez nicher un autre groupe de bouton dans un groupe de bouton, c'est-à-dire nid un autre groupe .btn dans un groupe .btn-group. Ceci est utilisé lorsque vous utilisez le menu déroulant en combinaison avec une série de boutons.
4. Menu déroulant du bouton bootstrap
Utilisez la classe bootstrap pour ajouter un menu déroulant au bouton. Pour ajouter un menu déroulant à un bouton, placez simplement le bouton et le menu déroulant dans un groupe .btn. Vous pouvez également utiliser <span> </span> pour indiquer les boutons comme menus déroulants.
<div> <Button Type = "Button" Data-Toggle = "Dropdown"> Default <span> </span> </ bouton> <ul Role = "Menu"> <li> <a href = "#"> Fonction </a> </li> <li> <a href = "#"> Autre </a> </li> <li> <a href = "#"> Autre </a> href = "#"> Autre </a> </li> <li> </li> <li> <a href = "#"> Lien détaché </a> </li> </ul> </div>
(1) Le menu déroulant du bouton fendu
Le menu déroulant du bouton Split utilise à peu près le même style que le bouton de menu déroulant, mais ajoute des fonctionnalités d'origine au menu déroulant. Sur le côté gauche du bouton Split se trouve la fonction d'origine, et à droite est la bascule qui affiche le menu déroulant.
<v> <Button Type = "Button"> Default </ Button> <Button Type = "Button" Data-Toggle = "Dropdown"> <span> </span> <span> Communiquez le menu déroulant </span> </fonton> <ul Role = "Menu"> <li> <a href = "#"> Fonction </a> </li> <li> <a href = "# #"> autre </a> href = "#"> Autre </a> </li> <li> </li> <li> <a href = "#"> Lien désastre </a> </li> </ul> </div>
(2) Taille du menu déroulant des bouton
Vous pouvez utiliser le menu déroulant avec des boutons de différentes tailles: .btn-large, .btn-sm ou .btn-xs.
(3) Menu de traction pour les boutons
Le menu peut également être étiré vers le haut, il suffit d'ajouter simplement .dropup au conteneur du groupe .btn parent.
<div> </div>
5. Groupe de boîtes d'entrée bootstrap
Entrez le groupe Box. Le groupe de boîtes d'entrée s'étend du contrôle de formulaire. Avec les groupes de boîtes d'entrée, vous pouvez facilement ajouter du texte ou des boutons sous forme de préfixes et de suffixes dans des boîtes d'entrée de texte.
En ajoutant du contenu du préfixe et des suffixes au champ de saisie, vous pouvez ajouter des éléments communs à l'entrée utilisateur. Par exemple, vous pouvez ajouter un signe en dollars, ou ajouter @ avant le nom d'utilisateur Twitter, ou d'autres éléments publics requis par l'interface de l'application.
Les étapes pour ajouter un préfixe ou un élément de suffixe à .form-control sont les suivants:
A. Placez l'élément préfixe ou suffixe dans un <div> avec le groupe .input.
B. Ensuite, dans le même <v>, placez du contenu supplémentaire dans la <span> de la classe .input-group-addon.
C. Placez le <span> devant ou derrière l'élément <fort>.
Pour maintenir la compatibilité entre les navigateurs, évitez d'utiliser des éléments <lect>, car ils ne rendent pas entièrement l'effet dans un navigateur WebKit. De plus, n'appliquez pas la classe de groupe de boîtes d'entrée directement au groupe de formulaires, le groupe de boîtes d'entrée est un composant isolé.
<form role = "form"> <div> <span> $ </span> <input type = "text" placeholder = "twitterhandle"> <span> .00 </span> </div> </ form>
(1) Entrez la taille du groupe de boîtes
Vous pouvez modifier la taille du groupe de boîtes d'entrée en ajoutant des classes de tailles de formulaires relatives au groupe .Input (tel que .input-group-lg, entrée-groupe-sm, entrée-groupe-xs) à .input-group. Le contenu dans la zone d'entrée sera automatiquement redimensionné.
(2), cocher les cases et les plug-ins radio
Vous pouvez utiliser les cases à cocher et les plugins radio comme préfixes ou éléments de suffixe pour les groupes de boîtes d'entrée
<div> <span> <input type = "checkbox"> </span> <input type = "text"> </div>
(3) Plug-in bouton
Vous pouvez également utiliser le bouton comme un élément préfixe ou suffixe du groupe de boîtes d'entrée. À l'heure actuelle, vous n'ajoutez pas la classe .input-group-addon. Vous devez utiliser la classe .input-group-btn pour envelopper le bouton. Ceci est requis car le style de navigateur par défaut ne sera pas réécrit.
<div> <span> <bouton type = "Button"> Go! </futton> </span> <entrée type = "Text"> </div>
(4) Bouton avec menu déroulant
L'ajout d'un bouton avec un menu déroulant au groupe de boîtes d'entrée est simplement enveloppé dans une classe .input-group-btn.
<div> <div> <Button Type = "Button" Data-Toggle = "Dropdown"> Menu DropDown <span> </span> </fitton> <ul> <li> <a href = "#"> Fonction </a> </li> <li> <a href = "#"> Autre </a> </li> <li> <a href = "#"> Autre </a> href = "#"> Autre </a> </li> <li> </li> <li> <a href = "#"> Lien détaché </a> </li> </div> <input type = "text"> </div>
(5) bouton de menu déroulant diviser
Ajoutez un bouton fendu avec un menu déroulant dans le groupe de boîtes d'entrée, en utilisant à peu près le même style que le bouton de menu déroulant, mais en ajoutant les fonctionnalités principales au menu déroulant,
<div> <div> <Button Type = "Button" tabindex = "- 1"> Menu drop-down </ Button> <Button Type = "Button" Data-Toggle = "Dropdown" Tabindex = "- 1"> <span> </span> <span> Communiquez le menu déroulant </span> </ Button> <ul> <li> <a href = "#"> fonction </a> href = "#"> Autre </a> </li> <li> <a href = "#"> Autre </a> </li> <li> </li> <li> <a href = "#"> Lien détaché </a> </li> </div> <entrée Type = "Text"> </div>
6. Éléments de navigation bootstrap
Utilisez les mêmes balises et classe de base .nav. Bootstrap fournit également une classe d'assistance pour partager des balises et des états. Modifiez la classe modifiée et peut être commuté entre différents styles.
(1), Navigation ou balise du tableau
Créer un menu de navigation tagué:
A. Commencez par une liste non ordonnée avec la classe .nav.
B. Ajouter la classe .NAV-tabs.
<ul> <li> <a href = "#"> home </a> </li> <li> <a href = "#"> svn </a> </li> <li> <a href = "#"> ios </a> </li> <li> <a href = "#"> vb.net </a> </li> <li> <a href = "#"> java </a> </li> <li> <a href = "#"> php </a> </li> </ul>
(2) menu de navigation de style capsule
A. Menu de navigation de base de la capsule de base
Si vous avez besoin de changer l'étiquette en style capsule, vous n'avez qu'à utiliser des ponts .nav de classe au lieu de .nav-tabs, et les autres étapes sont les mêmes que ci-dessus.
<ul> <li> <a href = "#"> home </a> </li> <li> <a href = "#"> svn </a> </li> <li> <a href = "#"> ios </a> </li> <li> <a href = "#"> vb.net </a> </li> <li> <a href = "#"> java </a> </li> <li> <a href = "#"> php </a> </li> </ul>
B. menu de navigation de capsule verticale
Vous pouvez utiliser la classe .nav-stackée lors de l'utilisation de la classe .nav et .nav piliers pour faire la pile verticalement les capsules.
<ul> <li> <a href = "#"> home </a> </li> <li> <a href = "#"> svn </a> </li> <li> <a href = "#"> ios </a> </li> <li> <a href = "#"> vb.net </a> </li> <li> <a href = "#"> java </a> </li> <li> <a href = "#"> php </a> </li> </ul>
(3) la navigation avec les deux extrémités alignées
Vous pouvez fabriquer le menu de navigation tagué ou capsule également largement vers l'élément parent en utilisant la classe .nav-justifiée lors de l'utilisation .nav, .nav-tabs, ou .nav et .nav piliers, respectivement, lorsque la largeur de l'écran est supérieure à 768px. Sur un écran plus petit, les liens de navigation sont empilés.
<ul> <li> <a href = "#"> home </a> </li> <li> <a href = "#"> svn </a> </li> </ul> <ul> <li> <a href = "#"> home </a> </li> </ul> <li> <a href = "#"> home </a>
(4) Désactiver le lien
Pour chaque classe .nav, si une classe .Disabled est ajoutée, un lien gris est créé et que le statut de survol du lien est désactivé.
<ul> <li> <a href = "#"> home </a> </li> <li> <a href = "#"> svn </a> </li> <li> <a href = "#"> iOS (Désactiver le lien) </a> </li> </ul> <ul> <li> <a href = "#"> home </a> href = "#"> svn </a> </li> <li> <a href = "#"> vb.net (lien de désactiver) </a> </li> </ul>
(5) Menu de rupture
Le menu de navigation utilise une syntaxe similaire au menu déroulant. Par défaut, l'ancre de l'élément de liste fonctionne en conjonction avec certaines propriétés de données pour déclencher une liste non ordonnée avec la classe .dropdown-menu.
A. Tags avec menu déroulant
Les étapes pour ajouter un menu déroulant à une balise sont les suivantes:
Commencez par une liste non ordonnée avec la classe .nav.
Ajoutez une classe .nav-tabs.
Ajoutez une liste non ordonnée avec la classe .dropdown-menu.
<ul> <li> <a href = "#"> home </a> </li> <li> <a href = "#"> svn </a> </li> <li> <a data-toggle = "dropdown" href = "#"> java <span> </span> </a> <ul> <li> <a href = "#"> <li> <a href = "#"> swing </a> </li> <li> <a href = "#"> Swing </a> </li> <li> <a href = "#"> Liens séparés </a> </li> </li> </li> <li> <a href = "#"> Php </a> </li> </ul>
B. Capsules avec menu déroulant
Les étapes sont les mêmes que la création d'une balise avec un menu déroulant, sauf que vous devez modifier la classe .nav-tabs en .Nav-piliers.
7. Barbigation bootstrap
La barre de navigation est une bonne fonctionnalité et est une fonctionnalité proéminente du site Web de bootstrap. La barre de navigation sert de composant de base réactif de l'en-tête de navigation dans votre application ou votre site Web. La barre de navigation est effondrée dans la vue de l'appareil mobile et la barre de navigation se développe horizontalement à mesure que la largeur de la fenêtre disponible augmente. Dans le cœur de la barre de navigation bootstrap, la barre de navigation comprend le nom du site et les styles de définition de navigation de base.
(1) la barre de navigation par défaut
Les étapes pour créer une barre de navigation par défaut sont les suivantes:
A. Ajouter une classe .Navbar et .navbar-défault à la balise <Nav>.
B. L'ajout de rôle = "navigation" aux éléments ci-dessus aidera à augmenter l'accessibilité.
C. Ajoutez une classe de titre .Navbar-Header à l'élément <v>, qui contient l'élément <a> avec la classe Navbar-Brand. Cela rendra le texte plus grand.
D. Afin d'ajouter des liens à la barre de navigation, il vous suffit d'ajouter simplement une liste non ordonnée avec la classe .nav et .navbar-nav.
<nav role = "navigation"> <v> <a href = "#"> w3cschool </a> </div> <div> <ul> <li> <a href = "#"> ios </a> </li> <li> <a href = "#"> svn </a> </li> <li> <a href = "#"> svn </a> </li> <li> <a href = "#"> svn </a> href="#" data-toggle="dropdown"> Java <b></b> </a> <ul> <li></li> <li><a href="#">Separated link</a></li> <li></li> <li><a href="#">One separate link</a></li> </li> </li> </li> </div></nav>
(2) barre de navigation réactive
Pour ajouter des fonctionnalités réactives à la barre de navigation, le contenu que vous souhaitez effondrer doit être enveloppé dans un <v> avec des classes .Collapse, .Navbar-Collapse. La barre de navigation effondrée est en fait un bouton avec la classe .navbar-toggle et deux éléments de données. Le premier est Data-Toggle, qui indique à JavaScript quoi faire avec le bouton, et le second est le cible des données, qui indique dans quel élément à basculer. Trois <span> avec classe .Icon-bar crée le bouton soi-disant hamburger. Ceux-ci passeront aux éléments dans .nav-scoltapse <v>. Pour atteindre ces fonctions, vous devez inclure le plug-in Bootstrap Effondrement.
<NAV Role = "Navigation"> <div> <Button Type = "Button" Data-Toggle = "ENCLAPSE" Data-Target = "# Example-Navbar-Collapse"> <span> Switch Navigation </span> <span> </span> <span> </span> <span> </span> <span> </span> </sponse> <a href = "#"> w3cschool </aa> id = "Example-Navbar-Collapse"> <ul> <li> <a href = "#"> iOS </a> </li> <li> <a href = "#"> svn </a> </li> <li> <a href = "#" data-toggle = "dropdown"> java <b> </b> </a> href = "#"> JMeter </a> </li> <li> </li> <li> <a href = "#"> Lien séparé </a> </li> <li> </li> <li> <a href = "#"> Un autre lien séparé </a> </li> </li> </ul> </v> </AV> </a>
(3) Formulaires dans la barre de navigation
Le formulaire dans la barre de navigation n'utilise pas la classe par défaut mentionnée dans le chapitre du formulaire bootstrap, il utilise la classe .navbar-form. Cela garantit un alignement vertical approprié de la forme et le comportement du pliage dans une fenêtre plus étroite. Utilisez les options d'alignement (cela sera expliqué en détail dans la section d'alignement des composants) pour décider où le contenu de la barre de navigation est placé.
<Nav Role = "Navigation"> <div> <a href = "#"> w3cschool </a> </div> <div> <form rôle = "search"> <div> <input type = "text" lisholder = "search"> </sav> <bouton type = "soumettre"> soumettre </siv> </v> </AV>
(4) boutons dans la barre de navigation
Vous pouvez utiliser la classe .navbar-btn pour ajouter un bouton à l'élément <fontifié> qui n'est pas dans <form>, qui est centré verticalement sur la barre de navigation. .Navbar-btn peut être utilisé sur les éléments <a> et <fort>. N'utilisez pas .navbar-btn sur <a> Éléments à l'intérieur .navbar-nav, car ce n'est pas une classe de bouton standard.
<nav role = "Navigation"> <div> <a href = "#"> w3cschool </a> </ div> <v> <form role = "search"> <div> <input type = "text" lisholder = "search"> </ div> <Button Type = "Soumider"
(5) texte dans la barre de navigation
Si vous devez inclure des chaînes de texte dans votre navigation, utilisez la classe .navbar-text. Ceci est généralement utilisé avec des balises <p>, assurant une bonne tête et une couleur.
<nav role = "Navigation"> <div> <a href = "#"> w3cschool </a> </div> <div> <p> Signé comme Thomas </p> </div> </AV>
(6) lien de non-navette
Si vous ne souhaitez pas utiliser les liens standard dans le composant de navigation de la barre de navigation ordinaire, utilisez la classe Navbar-Link pour ajouter des couleurs appropriées aux options de barre de navigation par défaut et inversées.
<nav role = "navigation"> <div> <a href = "#"> w3cschool </a> </div> <div> <p> Signé comme <a href = "#"> thomas </a> </p> </div> </div>
(7) Alignement des composants
Vous pouvez utiliser la classe utilitaire .navbar-left ou .navbar-right pour aligner les liens, formulaires, boutons ou composants de texte de navigation dans la barre de navigation à gauche ou à droite. Les deux classes ajoutent des flotteurs CSS dans la direction spécifiée.
(8) fixé au sommet
La barre de navigation bootstrap peut être située dynamiquement. Par défaut, il s'agit d'un élément au niveau du bloc, qui est positionné en fonction de l'emplacement placé dans HTML. Avec quelques classes d'assistance, vous pouvez la placer en haut ou en bas de la page, ou vous pouvez en faire une barre de navigation statique qui défile avec la page. Si vous voulez que la barre de navigation soit épinglée en haut de la page, ajoutez la classe. NAVBAR-FIXED-TOP à la classe .navbar. L'exemple suivant le démontre: pour empêcher la barre de navigation de se entrelacer avec le haut d'autres contenus dans le corps de la page, ajoutez au moins 50 pixels de rembourrage à la balise <body>, et la valeur du rembourrage peut être définie en fonction de vos besoins.
<nav role = "navigation">
</ nav>
(9) Fixé au fond
Si vous voulez que la barre de navigation soit épinglée au bas de la page, ajoutez la classe. Navbar-Fixed-Bottom à la classe .navbar.
<nav role = "Navigation"> </ Nav>
(10), haut statique
Pour créer une barre de navigation qui défile avec la page, ajoutez .navbar-static-top. Cette classe ne nécessite pas que le rembourrage soit ajouté à <body>.
<nav role = "navigation">
</ nav>
(11), barre de navigation inversée
Pour créer une barre de navigation inversée avec du texte blanc d'arrière-plan noir, ajoutez simplement la classe .navbar-inverse à la classe .navbar, comme indiqué dans l'exemple suivant:
Pour empêcher la barre de navigation de se connecter avec le haut des autres contenus dans le corps de la page, ajoutez au moins 50 pixels de rembourrage à la balise <body>, et la valeur du rembourrage peut être définie en fonction de vos besoins.
<nav role = "Navigation"> </ Nav>
8. Bootstrap chief
Breadcumbs est une méthode d'affichage basée sur les informations au niveau du site Web. Prenons un blog à titre d'exemple, la navigation au fil du pain peut afficher une date de sortie, une catégorie ou une balise. Ils représentent l'emplacement de la page actuelle dans la hiérarchie de navigation.
La chapelure en bootstrap est une simple liste non ordonnée avec la classe .Breadcrumb. Le délimiteur sera automatiquement ajouté via la classe ci-dessous dans CSS (bootstrap.min.css):
<l>
<li> <a href = "#"> Accueil </a> </li>
<li> <a href = "#"> 2013 </a> </li>
<li> novembre </li>
</l>
9. Pagination bootstrap
(1) La pagination est une liste non ordonnée. Bootstrap gère la pagination comme d'autres éléments d'interface.
(2) Turn de page (téléavertisseur)
Si vous souhaitez créer un lien de pagination simple pour fournir une navigation pour les utilisateurs, cela peut être fait en tournant la page. Comme les liens de pagination, Page Turn est également une liste non ordonnée. Par défaut, le lien est centré. Le tableau suivant répertorie la classe qui est le tour de la page Bootstrap.
10. Tags bootstrap
Tag bootstrap. Les balises peuvent être utilisées pour compter, inviter ou autre affichage de marquage sur la page. Vous pouvez utiliser la classe de classe modifiée-Default, le label-primaire, le label-success, le label-info, le label-warning, le label-danger pour modifier l'apparence de l'étiquette.
<span> Tag par défaut </span>
<span> Tags principaux </span>
<span> Success Tag </span>
<span> Tag d'information </span>
<span> Tags d'avertissement </span>
<Span> Tag de danger </span>
11. Badges bootstrap
(1) L'insigne est similaire à l'étiquette, la principale différence est que les coins de l'insigne sont plus lisses.
Les badges sont principalement utilisés pour mettre en évidence les articles nouveaux ou non lus. Pour utiliser des badges, ajoutez simplement <span> aux liens, navigation bootstrap et autres éléments. Lorsqu'il n'y a pas d'éléments nouveaux ou non lus, le badge sera plié à travers le sélecteur vide de CSS pour indiquer qu'il n'y a pas de contenu à l'intérieur.
<a href = "#"> boîte aux lettres <span> 50 </span> </a>
(2) Activer l'état de navigation
Vous pouvez placer des badges dans la navigation par capsule et répertorier la navigation à l'état actif. Activez le lien en utilisant <span>.
<h4> État de l'activation dans la navigation capsule </h4> <ul> <li> <a href = "#"> Homepage <span> 42 </span> </a> </li> <li> <a href = "#"> Introduction </a> </li> <li> <a href = "#"> Message <span> 3 </pan> </a>
12. Bootstrap super grand écran (Jumbotron)
Super grand écran (Jumbotron). Comme son nom l'indique, ce composant peut augmenter la taille du titre et ajouter plus de marges au contenu de la page de connexion. Les étapes pour utiliser un jumbotron sont les suivantes:
A. Créez un conteneur <v> avec la classe .Jumbotron.
B. En plus du plus grand <h1>, le poids de police de la police est réduit à 200px.
<div> <div> <h1> Bienvenue pour se connecter! </h1> <p> Il s'agit d'une instance d'un jumbotron. </p> <p> <a role = "Button"> En savoir plus </a> </p> </div> </div>
Pour obtenir un énorme écran qui occupe toute la largeur sans coins arrondis, utilisez la classe .Jumbotron en dehors de toutes les classes.
13. Titre de la page Bootstrap (en-tête de page)
L'en-tête de page est une bonne fonctionnalité, ce qui ajoute un espacement approprié autour du titre de la page. La fonction de titre de page est particulièrement utile lorsqu'il y a plusieurs titres dans une page Web et qu'un certain espacement doit être ajouté entre chaque titre. Pour utiliser l'en-tête de page, placez votre titre dans un <v> avec classe .Page-Header:
<div> <h1> Exemple de titre de la page <small> sous-titre </small> </h1> </div>
14. Vignette bootstrap
(1) Vignette bootstrap. La plupart des sites doivent mettre en place des images, des vidéos, du texte, etc. dans une grille. Bootstrap offre un moyen facile de le faire avec des miniatures. Les étapes pour créer des vignettes à l'aide de bootstrap sont les suivantes:
A. Ajoutez une balise <a> avec la classe. Transmission autour de l'image.
B. Cela ajoutera un rembourrage de quatre pixels et une bordure grise.
C. Lorsque la souris plane sur l'image, le contour de l'image sera affiché.
<div> <a href = "#"> <img src = "/ wp-content / uploads / 2014/06 / kittens.jpg"> </a> </div>
(2) ajouter du contenu personnalisé
Maintenant que nous avons une miniature de base, nous pouvons ajouter divers contenus HTML à la vignette, tels que des titres, des paragraphes ou des boutons. Les étapes spécifiques sont les suivantes:
A. Modifiez la balise <a> avec la classe. Transmission en <div>.
B. Dans ce <div>, vous pouvez ajouter tout ce que vous souhaitez ajouter. Puisqu'il s'agit d'un <v>, nous pouvons utiliser les règles de dénomination basées sur la portée par défaut pour redimensionner.
C. Si vous souhaitez regrouper plusieurs images, placez-les dans une liste non ordonnée et chaque élément de liste flotte vers la gauche.
15. Avertissement de bootstrap (alertes)
Alertes et la classe fournie par bootstrap pour les avertissements. Alertes offre aux utilisateurs un moyen de définir les styles de messages. Ils fournissent des commentaires d'informations contextuelles pour les opérations utilisateur typiques. Vous pouvez ajouter un bouton Fermer en option à la boîte d'avertissement. Pour créer une boîte d'avertissement annulable en ligne, utilisez le plugin JQuery Alerts.
Vous pouvez ajouter une boîte d'avertissement de base en créant un <v> et en ajoutant une classe. Alert et quatre classes de contexte (c'est-à-dire.
<v> Succès! La soumission a été très bien faite. </div>
<div> Informations! Veuillez noter ces informations. </div>
<div> AVERTISSEMENT! Veuillez ne pas vous soumettre. </div>
<div> Erreur! Veuillez apporter quelques modifications. </div>
(1) Avertissement annuable (alertes de licenciement)
Les étapes pour créer un avertissement annule (alerte de licenciement) sont les suivantes:
A. Ajoutez une boîte d'avertissement de base en créant un <v> et en ajoutant l'une des classes de classe. Alert et quatre classes de contexte (c'est-à-dire.
B. En même temps, ajoutez un. Alert-dissalisable facultatif à la classe <div> ci-dessus.
C. Ajoutez un bouton Fermer.
<div> <Button Type = "Button" Data-Dismiss = "Alert" Aria-Hidden = "True"> × </ftont> Succès! La soumission a été très bien faite. </div>
(2) Liens en alertes
Les étapes pour créer un lien dans les alertes sont les suivantes:
A. Ajoutez une boîte d'avertissement de base en créant un <v> et en ajoutant l'une des classes de classe. Alert et quatre classes de contexte (c'est-à-dire.
B. Utilisez la classe d'entité .Alert-Link pour fournir rapidement des liens avec les couleurs correspondantes.
<div>
<a href = "#"> Succès! La soumission a été très bien faite. </a>
</div>
16. Bargot de progrès de bootstrap
Ce chapitre expliquera la barre de progression de bootstrap. Dans ce tutoriel, vous verrez comment utiliser Bootstrap pour créer des barres de progression pour le chargement, la redirection ou les états d'action.
La barre de progression de bootstrap utilise les transitions et les animations CSS3 pour obtenir cet effet. Internet Explorer 9 et les versions précédentes et les anciennes versions de Firefox ne prennent pas en charge cette fonctionnalité, et Opera 12 ne prend pas en charge les animations.
(1) la barre de progression par défaut
Les étapes pour créer une barre de progrès de base sont les suivantes:
A. Ajoutez un <v> avec la classe .Progress.
B. Ensuite, ajoutez un <div> vide avec la classe .progress-bar dans ce qui précède <v>.
C. Ajoutez un attribut de style avec une largeur représentée par le pourcentage, comme Style = "60%"; Pour indiquer que la barre de progression est à 60%.
<div> <div role = "Progressbar" aria-valuenow = "60" Aria-Valuemin = "0" aria-Valuemax = "100"> <span> 40% complet </span> </div> </div>
(2) barre de progrès en alternance
Les étapes pour créer des barres de progression de différents styles sont les suivantes:
A. Ajoutez un <v> avec la classe .Progress.
B. Ensuite, dans ce qui précède <v>, ajoutez un <div> vide avec la classe .progress-bar et la classe Progress-Bar- *. Parmi eux, * peut être le succès, les informations, l'avertissement, le danger.
C. Ajoutez un attribut de style avec une largeur représentée par le pourcentage, comme Style = "60%"; Pour indiquer que la barre de progression est à 60%.
<div> <div role = "Progressbar" aria-valuenow = "60" aria-valemin = "0" aria-valemax = "100"> <span> 90% terminé (réussi) </span> </div> </div>
(3) la barre de progression des rayures
Les étapes pour créer une barre de progression des stries sont les suivantes:
A. Ajoutez un <div> avec la classe .Progress et .progress-striped.
B. Ensuite, dans ce qui précède <v>, ajoutez un <div> vide avec la classe .progress-bar et la classe Progress-Bar- *. Parmi eux, * peut être le succès, les informations, l'avertissement, le danger.
C. Ajoutez un attribut de style avec une largeur représentée par le pourcentage, comme Style = "60%"; Pour indiquer que la barre de progression est à 60%.
<div> <div role = "Progressbar" aria-valuenow = "60" aria-valemin = "0" aria-valemax = "100"> <span> 90% terminé (réussi) </span> </div> </div>
(4) la barre de progression de l'animation
Les étapes pour créer une barre de progression d'animation sont les suivantes:
A. Ajoutez un <div> avec la classe .Progress et .progress-striped. Ajoutez également la classe .active.
B. Ensuite, ajoutez un <div> vide avec la classe .progress-bar dans ce qui précède <v>.
C. Ajoutez un attribut de style avec une largeur représentée par le pourcentage, comme Style = "60%"; Pour indiquer que la barre de progression est à 60%.
Cela donnera aux rayures un sentiment de mouvement de droite à gauche.
<div> <div role = "Progressbar" aria-valuenow = "60" Aria-Valuemin = "0" aria-Valuemax = "100"> <span> 40% complet </span> </div> </div>
(5) barre de progression empilée
Vous pouvez même empiler plusieurs barres de progrès. Vous pouvez empiler plusieurs barres de progression dans le même .Progress.
17. Objet multimédia bootstrap (objet multimédia)
Objet multimédia dans bootstrap (objet multimédia). Ces styles d'objets abstraits sont utilisés pour créer différents types de composants (tels que les commentaires de blog). Nous pouvons utiliser le mélange graphique et de texte dans les composants, et les images peuvent être alignées à gauche ou à droite. Les objets multimédias peuvent utiliser moins de code pour réaliser la disposition mixte des objets multimédias et du texte.
Le marquage léger et les propriétés faciles à évaluer des objets multimédias sont obtenus en appliquant une classe à des balises simples. Vous pouvez ajouter les deux formulaires suivants à la balise HTML pour configurer l'objet multimédia:
A. Média: Cette classe permet au multimédia (image, vidéo, audio) dans l'objet multimédia de flotter vers la gauche ou la droite du bloc de contenu.
B. Media-list: Si vous avez besoin d'une liste, chaque élément fait partie d'une liste non ordonnée, vous pouvez utiliser cette classe. Peut être utilisé pour les listes de commentaires et les listes d'articles.
<div> <a href = "#"> <img src = "/ wp-content / uploads / 2014/06/64.jpg"> </a> <v> <h4> Titre des médias </h4> Voici quelques exemples de texte. Voici quelques exemples de texte. </div> </div>
18. Groupe de liste bootstrap
Les composants de la liste sont utilisés pour rendre le contenu complexe et personnalisé sous forme de liste. Les étapes pour créer un groupe de liste de base sont les suivantes:
A. Ajouter une classe .List-group à l'élément <ul>.
B. Ajouter la classe .List-group-item à <li>.
<ul> <li> Enregistrement de nom de domaine gratuit </li> <li> Hébergement d'espace de fenêtre gratuit </li> </ul>
(1) Ajouter un badge au groupe de liste
Nous pouvons ajouter un composant de badge à n'importe quel élément de liste, qui sera automatiquement positionné vers la droite. Ajoutez simplement <span> à l'élément <li>.
<ul> <li> Enregistrement de nom de domaine gratuit </li> <li> <span> nouveau </span> 24 * 7 Support </li> </ul>
(2) Ajouter un lien au groupe de liste
En utilisant des balises d'ancrage au lieu des éléments de liste, nous pouvons ajouter des liens aux groupes lister. Nous devons utiliser <v> au lieu de l'élément <ul>.
<a href = "#"> 24 * 7 Support </a>
<a href = "#"> Hébergement d'espace de fenêtre libre </a>
(3) ajouter du contenu personnalisé au groupe de liste
Nous pouvons ajouter n'importe quel contenu HTML au groupe de liste qui a été ajouté au lien ci-dessus.
19. Panneaux bootstrap (panneaux)
Panneaux bootstrap (panneaux). L'assemblage du panneau est utilisé pour insérer l'assemblage DOM dans une boîte. Pour créer un panneau de base, ajoutez simplement la classe .panel et classe .panel-défaut à l'élément <v>,
<div> <div> Il s'agit d'un panneau de base </div> </div>
(1) Titre du panneau
Nous pouvons ajouter des titres de panneau de deux manières:
A. L'utilisation de la classe de tête de panel peut facilement ajouter un conteneur de titre au panneau.
B. Utilisez <h1> - <h6> avec la classe .panel-title pour ajouter le titre du style prédéfini.
<div> <div> Titre de la plate-forme sans titre </div> <div> Contenu de la plate-forme </div> </div>
(2) Notes de bas de page
Nous pouvons ajouter des notes de bas de page au panneau, il suffit de mettre le bouton ou le sous-texte dans le <div> avec la classe .panel-footer.
<div> <div> Il s'agit d'un panneau de base </div> <div> Note de bas de page du Panboard </div> </div>
(3) panneau avec couleur contextuelle
Utilisez les classes de contexte Panel-primaire, le succès du panneau, le panneau de panneau, le panneau de panneau et le danger de panneau pour configurer un panneau avec des couleurs contextuelles.
<div> <div> <h3> Titre de la plate-forme </h3> </div> <div> Il s'agit d'un panneau de base </div> </div>
(4) Panneau avec table
Pour créer une table sans bordure dans le panneau, nous pouvons utiliser la classe. Table dans le panneau. En supposant qu'il y ait un <div> contenant du corps., Nous pouvons ajouter des bordures supplémentaires en haut de la table pour la séparer. S'il n'y a pas de <v> contenant du corps.
<div> <div> <h3> Titre de la plate-forme </h3> </div> <div> Il s'agit d'un panneau de base </div> <pall
(5) Panneau avec groupe de liste
Nous pouvons inclure des groupes de liste dans n'importe quel panneau, créer des panneaux en ajoutant des classes .Panel et .Panel-Default dans l'élément <v> et ajouter des groupes de liste dans le panneau.
<div> <div> Titre de la plate-forme </div> <div> <p> Il s'agit d'un contenu de base de panneau. </p> </div> <ul> <li> Enregistrement de nom de domaine gratuit </li> <li> Coût de mise à jour annuel </li> </ul> </div>
20. Bootstrap bien
Eh bien est un conteneur qui provoque un effet dent ou d'illustration sur le contenu <div>. Pour créer un puits, mettez simplement le contenu dans un <v> avec une classe .well.
<div> Bonjour, je suis bien! </div>
(1) taille
Vous pouvez utiliser les classes facultatives bien-LG ou Well-SM pour modifier la taille du puits. Ces deux classes sont utilisées conjointement avec la classe .well. Ces deux classes affectent le rembourrage, et selon la classe utilisée, il semblera plus grand ou plus petit.
<div> Bonjour, je suis dans le grand puits! </div>
<div> Bonjour, je suis dans le petit puits! </div>
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.