Bootstrap - Guide rapide

Qu'est-ce que Twitter Bootstrap?

Bootstrap est une première infrastructure frontale mobile, élégante, intuitive et puissante, pour un développement Web plus rapide et plus facile. Il utilise HTML, CSS et Javascript.

L'histoire

Bootstrap a été développé par Mark Otto et Jacob Thornton sur Twitter . Il a été publié en tant que produit open source en août 2011 sur GitHub.

Pourquoi utiliser Bootstrap?

  • Mobile first approach - Bootstrap 3, le framework se compose de styles Mobile first dans toute la bibliothèque au lieu de les dans des fichiers séparés.

  • Browser Support - Il est pris en charge par tous les navigateurs courants.

  • Easy to get started- Avec juste la connaissance du HTML et du CSS, tout le monde peut démarrer avec Bootstrap. Le site officiel de Bootstrap a également une bonne documentation.

  • Responsive design- Le CSS réactif de Bootstrap s'adapte aux ordinateurs de bureau, aux tablettes et aux mobiles. Pour en savoir plus sur le responsive design, consultez le chapitre Bootstrap Responsive Design.

  • Fournit une solution propre et uniforme pour créer une interface pour les développeurs.

  • Il contient des composants intégrés beaux et fonctionnels faciles à personnaliser.

  • Il fournit également une personnalisation basée sur le Web.

  • Et le meilleur de tout, c'est une source ouverte.

Que comprend le package Bootstrap?

  • Scaffolding- Bootstrap fournit une structure de base avec le système de grille, les styles de lien et l'arrière-plan. Ceci est couvert en détail dans la sectionBootstrap Basic Structure

  • CSS- Bootstrap est livré avec la fonctionnalité de paramètres CSS globaux, des éléments HTML fondamentaux stylisés et améliorés avec des classes extensibles et un système de grille avancé. Ceci est couvert en détail dans la sectionBootstrap with CSS.

  • Components- Bootstrap contient plus d'une douzaine de composants réutilisables conçus pour fournir une iconographie, des listes déroulantes, une navigation, des alertes, des pop-overs et bien plus encore. Ceci est couvert en détail dans la sectionLayout Components.

  • JavaScript Plugins- Bootstrap contient plus d'une douzaine de plugins jQuery personnalisés. Vous pouvez facilement les inclure tous, ou un par un. Ceci est couvert en détails dans la sectionBootstrap Plugins.

  • Customize - Vous pouvez personnaliser les composants de Bootstrap, les variables LESS et les plugins jQuery pour obtenir votre propre version.

Il est très facile de configurer et de commencer à utiliser Bootstrap. Ce chapitre explique comment télécharger et configurer Bootstrap. Nous discuterons également de la structure du fichier Bootstrap et démontrerons son utilisation avec un exemple.

Télécharger Bootstrap

Vous pouvez télécharger la dernière version de Bootstrap à partir de https://getbootstrap.com/. Lorsque vous cliquez sur ce lien, vous verrez un écran comme ci-dessous -

Ici vous pouvez voir deux boutons -

  • Download Bootstrap- En cliquant dessus, vous pouvez télécharger les versions précompilées et minifiées de Bootstrap CSS, JavaScript et polices. Aucune documentation ou fichiers de code source d'origine ne sont inclus.

  • Download Source - En cliquant dessus, vous pouvez obtenir le dernier code source Bootstrap LESS et JavaScript directement depuis GitHub.

Si vous travaillez avec le code source non compilé de Bootstrap, vous devez compiler les fichiers LESS pour produire des fichiers CSS utilisables. Pour compiler les fichiers CSS dans LESS, Bootstrap soutient officiellement que Recess , qui est le Hinter CSS Twitter basé sur less.js .

Pour une meilleure compréhension et facilité d'utilisation, nous utiliserons la version précompilée de Bootstrap tout au long du tutoriel. Comme les fichiers sont respectés et minifiés, vous n'avez pas à vous soucier à chaque fois d'inclure des fichiers séparés pour des fonctionnalités individuelles. Au moment de la rédaction de ce didacticiel, la dernière version (Bootstrap 3) a été téléchargée.

Structure des fichiers

Bootstrap précompilé

Une fois que la version compilée Bootstrap est téléchargée, extrayez le fichier ZIP et vous verrez la structure de fichier / répertoire suivante -

Comme vous pouvez le voir, il existe des CSS et JS compilés (bootstrap. *), Ainsi que des CSS et JS compilés et minifiés (bootstrap.min. *). Les polices de Glyphicons sont incluses, car il s'agit du thème Bootstrap facultatif.

Code source Bootstrap

Si vous avez téléchargé le code source Bootstrap, la structure du fichier serait la suivante -

  • Les fichiers sous less / , js / et fonts / sont le code source des polices Bootstrap CSS, JS et icon (respectivement).

  • Le dossier dist / comprend tout ce qui est répertorié dans la section de téléchargement précompilée ci-dessus.

  • docs-assets / , examples / et tous les fichiers * .html sont de la documentation Bootstrap.

Modèle HTML

Un modèle HTML de base utilisant Bootstrap ressemblerait à ceci -

<!DOCTYPE html>
<html>
   
   <head>
      <title>Bootstrap 101 Template</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
      
      <!-- Bootstrap -->
      <link href = "css/bootstrap.min.css" rel = "stylesheet">
      
      <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
      <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
      
      <!--[if lt IE 9]>
      <script src = "https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src = "https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
      <![endif]-->
      
   </head>
   
   <body>
      <h1>Hello, world!</h1>

      <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
      <script src = "https://code.jquery.com/jquery.js"></script>
      
      <!-- Include all compiled plugins (below), or include individual files as needed -->
      <script src = "js/bootstrap.min.js"></script>
      
   </body>
</html>

Ici vous pouvez voir le jquery.js, bootstrap.min.js et bootstrap.min.cssfichiers inclus pour créer un fichier HTM normal dans le modèle bootstrap. Assurez-vous simplement d'inclure la bibliothèque jQuery avant d'inclure la bibliothèque Bootstrap.

Plus de détails sur chacun des éléments de ce morceau de code ci-dessus seront abordés dans le chapitre Présentation de Bootstrap CSS .

Exemple

Essayons maintenant un exemple utilisant le modèle ci-dessus. Essayez l'exemple suivant en utilisant l'option Démo en direct disponible dans le coin supérieur droit de l'exemple de code ci-dessous sur notre site Web -

<h1>Hello, world!</h1>
Dans tous les chapitres suivants, nous avons utilisé du texte factice du site https://www.lipsum.com/.

Dans ce chapitre, nous discuterons du système Bootstrap Grid.

Qu'est-ce qu'une grille?

Comme indiqué par wikepedia -

Dans la conception graphique, une grille est une structure (généralement bidimensionnelle) composée d'une série de lignes droites (verticales, horizontales) qui se croisent utilisées pour structurer le contenu. Il est largement utilisé pour concevoir la mise en page et la structure du contenu dans la conception d'impression. Dans la conception Web, c'est une méthode très efficace pour créer rapidement et efficacement une mise en page cohérente en utilisant HTML et CSS.

En termes simples, les grilles de conception Web organisent et structurent le contenu, facilitent l'analyse des sites Web et réduisent la charge cognitive des utilisateurs.

Qu'est-ce que Bootstrap Grid System?

Comme l'indique la documentation officielle de Bootstrap pour le système de grille -

Bootstrap comprend un premier système de grille fluide mobile et réactif qui s'adapte de manière appropriée jusqu'à 12 colonnes à mesure que la taille de l'appareil ou de la fenêtre augmente. Il comprend des classes prédéfinies pour des options de mise en page faciles, ainsi que des mixins puissants pour générer des mises en page plus sémantiques.

Comprenons la déclaration ci-dessus. Bootstrap 3 est d'abord mobile en ce sens que le code de Bootstrap commence maintenant par cibler des écrans plus petits comme les appareils mobiles, les tablettes, puis «étend» les composants et les grilles pour des écrans plus grands tels que les ordinateurs portables, les ordinateurs de bureau.

Stratégie Mobile First

  • Content

    • Déterminez ce qui est le plus important.
  • Layout

    • Concevez d'abord des largeurs plus petites.
    • Adresse CSS de base de l'appareil mobile en premier; adresse de requêtes multimédia pour tablette, ordinateurs de bureau.
  • Progressive Enhancement

    • Ajoutez des éléments à mesure que la taille de l'écran augmente.

Fonctionnement du système de grille Bootstrap

Les systèmes de grille sont utilisés pour créer des mises en page via une série de lignes et de colonnes qui hébergent votre contenu. Voici comment fonctionne le système de grille Bootstrap -

  • Les lignes doivent être placées dans un .container classe pour un alignement et un rembourrage corrects.

  • Utilisez des lignes pour créer des groupes horizontaux de colonnes.

  • Le contenu doit être placé dans les colonnes et seules les colonnes peuvent être les enfants immédiats des lignes.

  • Classes de grille prédéfinies comme .row and .col-xs-4sont disponibles pour créer rapidement des mises en page de grille. LESS mixins peut également être utilisé pour des mises en page plus sémantiques.

  • Les colonnes créent des gouttières (espaces entre le contenu des colonnes) via le remplissage. Ce remplissage est décalé en lignes pour la première et la dernière colonne via une marge négative sur.rows.

  • Les colonnes de la grille sont créées en spécifiant le nombre de douze colonnes disponibles que vous souhaitez couvrir. Par exemple, trois colonnes égales utiliseraient trois.col-xs-4.

Requêtes médias

La requête multimédia est un terme très sophistiqué pour «règle CSS conditionnelle». Il applique simplement du CSS, en fonction de certaines conditions énoncées. Si ces conditions sont remplies, le style est appliqué.

Les requêtes multimédias dans Bootstrap vous permettent de déplacer, d'afficher et de masquer du contenu en fonction de la taille de la fenêtre. Les requêtes multimédias suivantes sont utilisées dans les fichiers LESS pour créer les points d'arrêt clés dans le système de grille Bootstrap.

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

Parfois, ceux-ci sont étendus pour inclure un max-width pour limiter CSS à un ensemble d'appareils plus restreint.

@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }

Les requêtes multimédias comportent deux parties, une spécification de périphérique, puis une règle de taille. Dans le cas ci-dessus, la règle suivante est définie -

Considérons cette ligne -

@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }

Pour tous les appareils, quel que soit leur type avec min-width: @ screen-sm-min si la largeur de l'écran devient plus petite que @ screen-sm-max , alors faites quelque chose .

Options de grille

Le tableau suivant résume les aspects du fonctionnement du système de grille Bootstrap sur plusieurs appareils -

Appareils très petits Téléphones (<768px) Petits appareils Tablettes (≥768px) Ordinateurs de bureau moyens (≥992px) Ordinateurs de bureau de gros appareils (≥1200px)
Comportement de la grille Horizontal à tout moment Réduit au début, horizontal au-dessus des points d'arrêt Réduit au début, horizontal au-dessus des points d'arrêt Réduit au début, horizontal au-dessus des points d'arrêt
Largeur maximale du conteneur Aucun (auto) 750 px 970 px 1170px
Préfixe de classe .col-xs- .col-sm- .col-md- .col-lg-
# de colonnes 12 12 12 12
Largeur max de colonne Auto 60px 78px 95px
Largeur de gouttière

30px

(15px de chaque côté d'une colonne)

30px

(15px de chaque côté d'une colonne)

30px

(15px de chaque côté d'une colonne)

30px

(15px de chaque côté d'une colonne)

Emboîtable Oui Oui Oui Oui
Décalages Oui Oui Oui Oui
Ordre des colonnes Oui Oui Oui Oui

Structure de grille de base

Voici la structure de base de la grille Bootstrap -

<div class = "container">

   <div class = "row">
      <div class = "col-*-*"></div>
      <div class = "col-*-*"></div>
   </div>
   
   <div class = "row">...</div>
	
</div>

<div class = "container">
   ....
</div>

Voyons quelques exemples de grille simples -

  • Exemple - Empilé à horizontal

  • Exemple - Appareil moyen et grand

  • Exemple - Mobile, tablette, ordinateurs de bureau

Réinitialisations réactives de la colonne

Avec les quatre niveaux de grilles disponibles, vous êtes obligé de rencontrer des problèmes où, à certains points d'arrêt, les colonnes ne se dégagent pas tout à fait correctement car l'une est plus grande que l'autre. Pour résoudre ce problème, utilisez une combinaison d'une classe.clearfixet les classes d'utilitaires réactives comme indiqué dans l'exemple suivant -

<div class = "container">
   <div class = "row" >
   
      <div class = "col-xs-6 col-sm-3" style = "background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
      </div>
      
      <div class = "col-xs-6 col-sm-3" style = "background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut 
            enim ad minim veniam, quis nostrud exercitation ullamco laboris 
            nisi ut aliquip ex ea commodo consequat.</p>
         
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
            eiusmod tempor incididunt ut.</p>
      </div>

      <div class = "clearfix visible-xs"></div>
      
      <div class = "col-xs-6 col-sm-3" style = "background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         
         <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco 
            laboris nisi ut aliquip ex ea commodo consequat.</p>
      </div>
      
      <div class = "col-xs-6 col-sm-3" style = "background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut 
            enim ad minim</p>
      </div>
      
   </div>
</div>

Cela produira le résultat suivant -

Redimensionnez votre fenêtre d'affichage ou consultez-la sur votre téléphone pour obtenir le résultat souhaité de cet exemple.

Colonnes décalées

Les décalages sont une fonctionnalité utile pour les mises en page plus spécialisées. Ils peuvent être utilisés pour pousser les colonnes pour plus d'espacement, (par exemple). le.col-xs = * Les classes ne prennent pas en charge les décalages, mais elles sont facilement répliquées en utilisant une cellule vide.

Pour utiliser des décalages sur de grands écrans, utilisez le .col-md-offset-*Des classes. Ces classes augmentent la marge gauche d'une colonne de* colonnes où * plage de 1 à 11.

Dans l'exemple suivant, nous avons <div class = "col-md-6"> .. </div>, nous allons centrer cela en utilisant la classe .col-md-offset-3.

<div class = "container">

   <h1>Hello, world!</h1>

   <div class = "row" >
      <div class = "col-xs-6 col-md-offset-3" style = "background-color: #dedef8; 
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
      </div>

   </div>
	
</div>

Cela produira le résultat suivant -

Colonnes imbriquées

Pour imbriquer votre contenu avec la grille par défaut, ajoutez un nouveau .row et ensemble de .col-md-* colonnes dans un .col-md-*colonne. Les lignes imbriquées doivent inclure un ensemble de colonnes qui totalisent 12.

Dans l'exemple suivant, la mise en page comporte deux colonnes, la seconde étant divisée en quatre cases sur deux lignes.

<div class = "container">
   <h1>Hello, world!</h1>

   <div class = "row">

      <div class = "col-md-3" style = "background-color: #dedef8; 
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         
         <h4>First Column</h4>
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
      </div>

      <div class = "col-md-9" style = "background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         
         <h4>Second Column- Split into 4 boxes</h4>
         <div class = "row">
            
            <div class = "col-md-6" style = "background-color: #B18904;
               box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
               
               <p>Consectetur art party Tonx culpa semiotics. 
                  Pinterest assumenda minim organic quis.</p>
            </div>
            
            <div class = "col-md-6" style = "background-color: #B18904;
               box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
               
               <p>sed do eiusmod tempor incididunt ut labore et dolore magna 
                  aliqua. Ut enim ad minim veniam, quis nostrud exercitation 
                  ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            </div>
				
         </div>

         <div class = "row">
			
            <div class = "col-md-6" style = "background-color: #B18904;
               box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
               
               <p>quis nostrud exercitation ullamco laboris nisi ut aliquip 
                  ex ea commodo consequat.</p>
            </div>   
            
            <div class = "col-md-6" style = "background-color: #B18904;
               box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
               
               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
                  sed do eiusmod tempor incididunt ut labore et dolore magna 
                  aliqua. Ut enim ad minim.</p>
            </div>
				
         </div>

      </div>

   </div>
	
</div>

Cela produira le résultat suivant -

Ordre des colonnes

Une autre fonctionnalité intéressante du système de grille Bootstrap est que vous pouvez facilement écrire les colonnes dans un ordre et les afficher dans un autre. Vous pouvez facilement modifier l'ordre des colonnes de grille intégrées avec.col-md-push-* et .col-md-pull-* classes de modificateurs où * plage de 1 à 11.

Dans l'exemple suivant, nous avons une disposition en deux colonnes, la colonne de gauche étant la plus étroite et faisant office de barre latérale. Nous échangerons l'ordre de ces colonnes en utilisant.col-md-push-* et .col-md-pull-* Des classes.

<div class = "container">
   <h1>Hello, world!</h1>
   
   <div class = "row">
      <p>Before Ordering</p>
      
      <div class = "col-md-4" style = "background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         
         I am on left
      </div>
      
      <div class = "col-md-8" style = "background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         
         I am on right
      </div>
      
   </div>
	
   <br>
   
   <div class = "row">
      <p>After Ordering</p>
      
      <div class = "col-md-4 col-md-push-8" style = "background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         
         I was on left
      </div>
      
      <div class = "col-md-8 col-md-pull-4" style = "background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         
         I was on right
      </div>
		
   </div>

</div>

Cela produira le résultat suivant -

Ce chapitre donne un aperçu des éléments clés de l'infrastructure de Bootstrap, y compris l'approche de Bootstrap pour un développement Web meilleur, plus rapide et plus solide.

Doctype HTML5

Bootstrap utilise certains éléments HTML et propriétés CSS qui nécessitent l'utilisation du doctype HTML5. Incluez donc le morceau de code ci-dessous pour le doctype HTML5 au début de tous vos projets utilisant Bootstrap.

<!DOCTYPE html>
<html>
   ....
</html>

Mobile d'abord

Depuis le lancement de Bootstrap 3, Bootstrap est devenu mobile first. Cela signifie que les styles «mobile first» peuvent être trouvés dans toute la bibliothèque au lieu d'eux dans des fichiers séparés. Vous devez ajouter leviewport meta tag à la <head> élément, pour assurer un bon rendu et un zoom tactile sur les appareils mobiles.

<meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
  • La propriété width contrôle la largeur de l'appareil. Le définir à la largeur de l' appareil garantira qu'il est correctement rendu sur différents appareils (mobiles, ordinateurs de bureau, tablettes ...).

  • initial-scale = 1.0 garantit que, une fois chargée, votre page Web sera rendue à une échelle de 1: 1, et aucun zoom ne sera appliqué hors de la boîte.

Ajouter user-scalable = no à la contentattribut pour désactiver les capacités de zoom sur les appareils mobiles, comme indiqué ci-dessous. Les utilisateurs ne peuvent que faire défiler et ne pas zoomer avec ce changement, et votre site ressemble un peu plus à une application native.

<meta name = "viewport" content = "width = device-width, initial-scale = 1.0, maximum-scale = 1.0, user-scalable = no">

Normalement, maximum-scale = 1.0 est utilisé avec user-scalable = no . Comme mentionné ci-dessususer-scalable = no peut donner aux utilisateurs une expérience plus proche d'une application native, c'est pourquoi Bootstrap ne recommande pas l'utilisation de cet attribut.

Images réactives

Bootstrap 3 vous permet de rendre les images réactives en ajoutant une classe .img-responsive à la <img>marque. Cette classe s'appliquemax-width: 100%; et height: auto; à l'image afin qu'elle s'adapte parfaitement à l'élément parent.

<img src = "..." class = "img-responsive" alt = "Responsive image">

Typographie et liens

Bootstrap définit un affichage global de base (arrière-plan), une typographie et des styles de lien -

  • Basic Global display- Définit la couleur de fond: #fff; sur l' élément <body> .

  • Typography- Utilise les attributs @ font-family-base , @ font-size-base et @ line-height-base comme base typographique.

  • Link styles- Définit la couleur du lien global via l'attribut @ link-color et n'applique les soulignements de lien que sur : hover .

Si vous avez l'intention d'utiliser du code LESS, vous pouvez trouver tout cela dans scaffolding.less .

Normaliser

Bootstrap utilise Normaliser pour établir la cohérence entre les navigateurs.

Normalize.css est une alternative moderne et compatible HTML5 aux réinitialisations CSS. Il s'agit d'un petit fichier CSS qui offre une meilleure cohérence entre les navigateurs dans le style par défaut des éléments HTML.

Conteneurs

Utiliser la classe .container pour envelopper le contenu d'une page et centrer facilement le contenu comme indiqué ci-dessous.

<div class = "container">
   ...
</div>

Jetez un œil au .containerclasse dans le fichier bootstrap.css -

.container {
   padding-right: 15px;
   padding-left: 15px;
   margin-right: auto;
   margin-left: auto;
}

Notez qu'en raison du remplissage et des largeurs fixes, les conteneurs ne sont pas imbriqués par défaut.

Jetez un œil au fichier bootstrap.css -

@media (min-width: 768px) {
   .container {
      width: 750px;
   }
}

Ici, vous pouvez voir que CSS a des requêtes multimédias pour les conteneurs avec width. Cela aide à appliquer la réactivité et dans ceux-ci, la classe de conteneur est modifiée en conséquence pour rendre le système de grille correctement.

Bootstrap utilise Helvetica Neue, Helvetica, Arial et sans-serif dans sa pile de polices par défaut. En utilisant la fonction de typographie de Bootstrap, vous pouvez créer des en-têtes, des paragraphes, des listes et d'autres éléments en ligne. Voyons chacun d'entre eux dans les sections suivantes.

Titres

Tous les en-têtes HTML (h1 à h6) sont stylés dans Bootstrap. Un exemple est montré ci-dessous -

<h1>I'm Heading1 h1</h1>
<h2>I'm Heading2 h2</h2>
<h3>I'm Heading3 h3</h3>
<h4>I'm Heading4 h4</h4>
<h5>I'm Heading5 h5</h5>
<h6>I'm Heading6 h6</h6>

Le segment de code ci-dessus avec Bootstrap produira le résultat suivant -

Sous-titres en ligne

Pour ajouter un sous-titre en ligne à l'un des en-têtes, ajoutez simplement <small> autour de l'un des éléments ou ajoutez .small classe et vous obtiendrez un texte plus petit dans une couleur plus claire, comme indiqué dans l'exemple ci-dessous -

<h1>I'm Heading1 h1. <small>I'm secondary Heading1 h1</small></h1> 
<h2>I'm Heading2 h2. <small>I'm secondary Heading2 h2</small></h2>
<h3>I'm Heading3 h3. <small>I'm secondary Heading3 h3</small></h3>
<h4>I'm Heading4 h4. <small>I'm secondary Heading4 h4</small></h4>
<h5>I'm Heading5 h5. <small>I'm secondary Heading5 h5</small></h5>
<h6>I'm Heading6 h6. <small>I'm secondary Heading1 h6</small></h6>

Le segment de code ci-dessus avec Bootstrap produira le résultat suivant -

Copie du corps principal

Pour ajouter de l'emphase à un paragraphe, ajoutez class = "lead". Cela vous donnera une taille de police plus grande, un poids plus léger et une hauteur de ligne plus grande comme dans l'exemple suivant -

<h2>Lead Example</h2>
<p class = "lead">This is an example paragraph demonstrating 
   the use of lead body copy. This is an example paragraph 
   demonstrating the use of lead body copy.This is an example 
   paragraph demonstrating the use of lead body copy.This is an 
   example paragraph demonstrating the use of lead body copy.
   This is an example paragraph demonstrating the use of lead body copy.</p>

Accentuation

Les balises de mise en évidence par défaut de HTML telles que <small> définissent le texte à 85% de la taille du parent, <strong> accentue un texte avec un poids de police plus lourd et <em> met en évidence un texte en italique.

Bootstrap propose quelques classes qui peuvent être utilisées pour mettre l'accent sur les textes, comme le montre l'exemple suivant -

<small>This content is within tag</small><br>
<strong>This content is within tag</strong><br>
<em>This content is within tag and is rendered as italics</em><br>

<p class = "text-left">Left aligned text.</p>
<p class = "text-center">Center aligned text.</p>
<p class = "text-right">Right aligned text.</p>
<p class = "text-muted">This content is muted</p>
<p class = "text-primary">This content carries a primary class</p>
<p class = "text-success">This content carries a success class</p>
<p class = "text-info">This content carries a info class</p>
<p class = "text-warning">This content carries a warning class</p>
<p class = "text-danger">This content carries a danger class</p>

Abréviations

L'élément HTML <abbr> fournit un balisage pour les abréviations ou les acronymes, comme WWW ou HTTP. Bootstrap styles les éléments <abbr> avec une bordure en pointillé clair en bas et révèle le texte intégral au survol (à condition que vous ajoutiez ce texte à l'attribut title <abbr>). Pour obtenir une taille de police légèrement plus petite, ajoutez .initialism à <abbr>.

<abbr title = "World Wide Web">WWW</abbr><br>
<abbr title = "Real Simple Syndication" class = "initialism">RSS</abbr>

Adresses

En utilisant la balise <address>, vous pouvez afficher les informations de contact sur votre page Web. Puisque l '<adresse> affiche par défaut: block; vous devrez utiliser

Balises pour ajouter des sauts de ligne au texte d'adresse inclus.

<address>
   <strong>Some Company, Inc.</strong><br>
   007 street<br>
   Some City, State XXXXX<br>
   <abbr title = "Phone">P:</abbr> (123) 456-7890
</address>

<address>
   <strong>Full Name</strong><br>
   <a href = "mailto:#">[email protected]</a>
</address>

Blockquotes

Vous pouvez utiliser le <blockquote> par défaut autour de n'importe quel texte HTML. D'autres options incluent l'ajout d'une balise <small> pour identifier la source du devis et l'alignement à droite du blockquote à l'aide de la classe .pull-right . L'exemple suivant montre toutes ces fonctionnalités -

<blockquote>
   <p>This is a default blockquote example. This is a default 
      blockquote example. This is a default blockquote 
      example.This is a default blockquote example. This is a 
      default blockquote example.</p>
</blockquote>

<blockquote>
   This is a blockquote with a source title.
   <small>Someone famous in <cite title = "Source Title">Source Title</cite></small>
</blockquote>

<blockquote class = "pull-right">This is a blockquote aligned to the right.
   <small>Someone famous in <cite title = "Source Title">Source Title</cite></small>
</blockquote>

Listes

Bootstrap prend en charge les listes ordonnées, les listes non ordonnées et les listes de définitions.

  • Ordered lists - Une liste ordonnée est une liste qui tombe dans une sorte d'ordre séquentiel et est précédée de nombres.

  • Unordered lists- Une liste non ordonnée est une liste qui n'a pas d'ordre particulier et qui est traditionnellement stylisée avec des puces. Si vous ne souhaitez pas que les puces apparaissent, vous pouvez supprimer le style à l'aide de la classe .list-unstyled . Vous pouvez également placer tous les éléments de liste sur une seule ligne à l'aide de la classe .list-inline .

  • Definition lists- Dans ce type de liste, chaque élément de liste peut être composé à la fois des éléments <dt> et <dd>. <dt> représente le terme de définition , et comme un dictionnaire, c'est le terme (ou la phrase) qui est défini. Par la suite, le <dd> est la définition du <dt>. Vous pouvez aligner les termes et descriptions dans <dl> côte à côte en utilisant la classe dl-horizontal .

L'exemple suivant illustre chacun de ces types -

<h4>Example of Ordered List</h4>
<ol>
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
   <li>Item 4</li>
</ol>

<h4>Example of UnOrdered List</h4>

<ul>
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
   <li>Item 4</li>
</ul>

<h4>Example of Unstyled List</h4>

<ul class = "list-unstyled">
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
   <li>Item 4</li>
</ul>

<h4>Example of Inline List</h4>

<ul class = "list-inline">
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
   <li>Item 4</li>
</ul>

<h4>Example of Definition List</h4>

<dl>
   <dt>Description 1</dt>
   <dd>Item 1</dd>
   <dt>Description 2</dt>
   <dd>Item 2</dd>
</dl>

<h4>Example of Horizontal Definition List</h4>

<dl class = "dl-horizontal">
   <dt>Description 1</dt>
   <dd>Item 1</dd>
   <dt>Description 2</dt>
   <dd>Item 2</dd>
</dl>

Bootstrap vous permet d'afficher le code de deux manières différentes:

  • Le premier est la balise <code>. Si vous allez afficher du code en ligne, vous devez utiliser la balise <code>.

  • La deuxième est la balise <pre>. Si le code doit être affiché en tant qu'élément de bloc autonome ou s'il comporte plusieurs lignes, vous devez utiliser la balise <pre>.

Assurez-vous que lorsque vous utilisez les balises <pre> et <code>, vous utilisez les variantes unicode pour les balises d'ouverture et de fermeture - &lt; et &gt;.

Voyons un exemple ci-dessous -

<p><code>&lt;header&gt;</code> is wrapped as an inline element.</p>
<p>To display code as a standalone block element use &lt;pre&gt; tag as:</p>

<pre>
   &lt;article&gt;
      &lt;h1&gt;Article Heading&lt;/h1&gt;
   &lt;/article&gt;
</pre>

Bootstrap fournit une mise en page propre pour la création de tables. Certains des éléments de table pris en charge par Bootstrap sont -

Sr.No. Balise et description
1

<table>

Élément d'habillage pour afficher les données dans un format tabulaire

2

<thead>

Élément de conteneur pour les lignes d'en-tête de table (<tr>) pour étiqueter les colonnes de table.

3

<tbody>

Élément de conteneur pour les lignes de table (<tr>) dans le corps de la table.

4

<tr>

Élément de conteneur pour un ensemble de cellules de tableau (<td> ou <th>) qui apparaît sur une seule ligne.

5

<td>

Cellule de tableau par défaut.

6

<th>

Cellule de tableau spéciale pour les étiquettes de colonne (ou de ligne, selon la portée et l'emplacement). Doit être utilisé dans un <thead>

sept

<caption>

Description ou résumé de ce que contient le tableau.

Table de base

Si vous voulez un joli style de tableau basique avec juste un léger rembourrage et des séparateurs horizontaux, ajoutez la classe de base de .table à n'importe quel tableau comme indiqué dans l'exemple suivant -

<table class = "table">
   <caption>Basic Table Layout</caption>
   
   <thead>
      <tr>
         <th>Name</th>
         <th>City</th>
      </tr>
   </thead>
   
   <tbody>
      <tr>
         <td>Tanmay</td>
         <td>Bangalore</td>
      </tr>
      
      <tr>
         <td>Sachin</td>
         <td>Mumbai</td>
      </tr>
   </tbody>
</table>

Classes de table facultatives

Outre le balisage de table de base et la classe .table, il existe quelques classes supplémentaires que vous pouvez utiliser pour styliser le balisage. Les sections suivantes vous donneront un aperçu de toutes ces classes.

Table rayée

En ajoutant la classe .table-striped , vous obtiendrez des rayures sur les lignes dans le <tbody> comme indiqué dans l'exemple suivant -

<table class = "table table-striped">
   <caption>Striped Table Layout</caption>
   
   <thead>
      <tr>
         <th>Name</th>
         <th>City</th>
         <th>Pincode</th>
      </tr>
   </thead>
   
   <tbody>
      <tr>
         <td>Tanmay</td>
         <td>Bangalore</td>
         <td>560001</td>
      </tr>
      
      <tr>
         <td>Sachin</td>
         <td>Mumbai</td>
         <td>400003</td>
      </tr>
      
      <tr>
         <td>Uma</td>
         <td>Pune</td>
         <td>411027</td>
      </tr>
   </tbody>
</table>

Table bordée

En ajoutant la classe .table-bordered , vous obtiendrez des bordures entourant chaque élément et des coins arrondis autour de la table entière comme le montre l'exemple suivant -

<table class = "table table-bordered">
   <caption>Bordered Table Layout</caption>
   
   <thead>
      <tr>
         <th>Name</th>
         <th>City</th>
         <th>Pincode</th>
      </tr>
   </thead>
   
   <tbody>
      <tr>
         <td>Tanmay</td>
         <td>Bangalore</td>
         <td>560001</td>
      </tr>
      
      <tr>
         <td>Sachin</td>
         <td>Mumbai</td>
         <td>400003</td>
      </tr>
      
      <tr>
         <td>Uma</td>
         <td>Pune</td>
         <td>411027</td>
      </tr>
   </tbody>
	
</table>

Tableau de survol

En ajoutant la classe .table-hover , un arrière-plan gris clair sera ajouté aux lignes pendant que le curseur les survolera, comme le montre l'exemple suivant -

<table class = "table table-hover">
   <caption>Hover Table Layout</caption>
   
   <thead>
      <tr>
         <th>Name</th>
         <th>City</th>
         <th>Pincode</th>
      </tr>
   </thead>
   
   <tbody>
      <tr>
         <td>Tanmay</td>
         <td>Bangalore</td>
         <td>560001</td>
      </tr>
      
      <tr>
         <td>Sachin</td>
         <td>Mumbai</td>
         <td>400003</td>
      </tr>
      
      <tr>
         <td>Uma</td>
         <td>Pune</td>
         <td>411027</td>
      </tr>
   </tbody>
</table>

Tableau condensé

En ajoutant la classe .table-condensed , le remplissage des lignes est réduit de moitié pour condenser le tableau. comme le montre l'exemple suivant. Ceci est utile si vous voulez des informations plus denses.

<table class = "table table-condensed">
   <caption>Condensed Table Layout</caption>
   
   <thead>
      <tr>
         <th>Name</th>
         <th>City</th>
         <th>Pincode</th>
      </tr>
   </thead>
   
   <tbody>
      <tr>
         <td>Tanmay</td>
         <td>Bangalore</td>
         <td>560001</td>
      </tr>
      
      <tr>
         <td>Sachin</td>
         <td>Mumbai</td>
         <td>400003</td>
      </tr>
      
      <tr>
         <td>Uma</td>
         <td>Pune</td>
         <td>411027</td>
      </tr>
   </tbody>
</table>

Classes contextuelles

Les classes contextuelles présentées dans le tableau suivant vous permettront de changer la couleur d'arrière-plan de vos lignes de tableau ou de vos cellules individuelles.

Sr.No. Classe et description
1

.active

Applique la couleur de survol à une ligne ou une cellule particulière

2

.success

Indique une action réussie ou positive

3

.warning

Indique un avertissement qui pourrait nécessiter votre attention

4

.danger

Indique une action dangereuse ou potentiellement négative

Ces classes peuvent être appliquées à <tr>, <td> ou <th>.

<table class = "table">
   <caption>Contextual Table Layout</caption>
   
   <thead>
      <tr>
         <th>Product</th>
         <th>Payment Date</th>
         <th>Status</th>
      </tr>
   </thead>
   
   <tbody>
      <tr class = "active">
         <td>Product1</td>
         <td>23/11/2013</td>
         <td>Pending</td>
      </tr>
      
      <tr class = "success">
         <td>Product2</td>
         <td>10/11/2013</td>
         <td>Delivered</td>
      </tr>
      
      <tr class = "warning">
         <td>Product3</td>
         <td>20/10/2013</td>
         <td>In Call to confirm</td>
      </tr>
      
      <tr class = "danger">
         <td>Product4</td>
         <td>20/10/2013</td>
         <td>Declined</td>
      </tr>
   </tbody>
</table>

Tableaux réactifs

En enveloppant n'importe quel .table dans une classe sensible à .table , vous ferez défiler le tableau horizontalement jusqu'à de petits périphériques (moins de 768px). Lorsque vous regardez sur quelque chose de plus de 768 px de large, vous ne verrez aucune différence dans ces tableaux.

<div class = "table-responsive">
   <table class = "table">
      <caption>Responsive Table Layout</caption>
      
      <thead>
         <tr>
            <th>Product</th>
            <th>Payment Date</th>
            <th>Status</th>
         </tr>
      </thead>
      
      <tbody>
         <tr>
            <td>Product1</td>
            <td>23/11/2013</td>
            <td>Pending</td>
         </tr>
         
         <tr>
            <td>Product2</td>
            <td>10/11/2013</td>
            <td>Delivered</td>
         </tr>
         
         <tr>
            <td>Product3</td>
            <td>20/10/2013</td>
            <td>In Call to confirm</td>
         </tr>
         
         <tr>
            <td>Product4</td>
            <td>20/10/2013</td>
            <td>Declined</td>
         </tr>
      </tbody>
   </table>
</div>

Dans ce chapitre, nous étudierons comment créer facilement des formulaires à l'aide de Bootstrap. Bootstrap facilite les choses avec le balisage HTML simple et les classes étendues pour différents styles de formulaires. Dans ce chapitre, nous étudierons comment créer facilement des formulaires à l'aide de Bootstrap.

Disposition du formulaire

Bootstrap vous fournit les types suivants de dispositions de formulaire:

  • Forme verticale (par défaut)
  • Formulaire en ligne
  • Forme horizontale

Forme verticale ou de base

La structure de base du formulaire est fournie avec Bootstrap; les contrôles de formulaire individuels reçoivent automatiquement un style global. Pour créer un formulaire de base, procédez comme suit -

  • Ajoutez un formulaire de rôle à l'élément <form> parent.

  • Enveloppez les étiquettes et les contrôles dans un <div> avec la classe .form-group . Ceci est nécessaire pour un espacement optimal.

  • Ajoutez une classe de .form-control à tous les éléments textuels <input>, <textarea> et <select>.

<form role = "form">

   <div class = "form-group">
      <label for = "name">Name</label>
      <input type = "text" class = "form-control" id = "name" placeholder = "Enter Name">
   </div>
   
   <div class = "form-group">
      <label for = "inputfile">File input</label>
      <input type = "file" id = "inputfile">
      <p class = "help-block">Example block-level help text here.</p>
   </div>
   
   <div class = "checkbox">
      <label><input type = "checkbox"> Check me out</label>
   </div>
   
   <button type = "submit" class = "btn btn-default">Submit</button>
</form>

Formulaire en ligne

Pour créer un formulaire dans lequel tous les éléments sont en ligne, alignés à gauche et les étiquettes à côté, ajoutez la classe .form-inline à la balise <form>.

<form class = "form-inline" role = "form">
   
   <div class = "form-group">
      <label class = "sr-only" for = "name">Name</label>
      <input type = "text" class = "form-control" id = "name" placeholder = "Enter Name">
   </div>
   
   <div class = "form-group">
      <label class = "sr-only" for = "inputfile">File input</label>
      <input type = "file" id = "inputfile">
   </div>
   
   <div class = "checkbox">
      <label><input type = "checkbox"> Check me out</label>
   </div>
   
   <button type = "submit" class = "btn btn-default">Submit</button>
</form>
  • Par défaut, les entrées, les sélections et les zones de texte ont une largeur de 100% dans Bootstrap. Vous devez définir une largeur sur les contrôles de formulaire lors de l'utilisation du formulaire en ligne.

  • En utilisant la classe .sr-only, vous pouvez masquer les étiquettes des formulaires en ligne.

Forme horizontale

Les formes horizontales se distinguent des autres non seulement par le montant du balisage, mais également par la présentation du formulaire. Pour créer un formulaire qui utilise la disposition horizontale, procédez comme suit:

  • Ajoutez une classe de .form-horizontal à l'élément <form> parent.

  • Enveloppez les étiquettes et les contrôles dans un <div> avec la classe .form-group .

  • Ajoutez une classe de .control-label aux étiquettes.

<form class = "form-horizontal" role = "form">
   
   <div class = "form-group">
      <label for = "firstname" class = "col-sm-2 control-label">First Name</label>
		
      <div class = "col-sm-10">
         <input type = "text" class = "form-control" id = "firstname" placeholder = "Enter First Name">
      </div>
   </div>
   
   <div class = "form-group">
      <label for = "lastname" class = "col-sm-2 control-label">Last Name</label>
		
      <div class = "col-sm-10">
         <input type = "text" class = "form-control" id = "lastname" placeholder = "Enter Last Name">
      </div>
   </div>
   
   <div class = "form-group">
      <div class = "col-sm-offset-2 col-sm-10">
         <div class = "checkbox">
            <label><input type = "checkbox"> Remember me</label>
         </div>
      </div>
   </div>
   
   <div class = "form-group">
      <div class = "col-sm-offset-2 col-sm-10">
         <button type = "submit" class = "btn btn-default">Sign in</button>
      </div>
   </div>
	
</form>

Contrôles de formulaire pris en charge

Bootstrap prend en charge nativement les contrôles de formulaire les plus courants, principalement la saisie, la zone de texte, la case à cocher, la radio et la sélection.

Contributions

Le champ de texte de formulaire le plus courant est le champ de saisie. C'est là que les utilisateurs entreront la plupart des données essentielles du formulaire. Bootstrap prend en charge tous les types d'entrée HTML5 natifs: texte, mot de passe, date / heure, date / heure locale, date, mois, heure, semaine, numéro, e-mail, URL, recherche, tel et couleur . Une déclaration de type correcte est requise pour que les entrées soient entièrement stylisées.

<form role = "form">
   
   <div class = "form-group">
      <label for = "name">Label</label>
      <input type = "text" class = "form-control" placeholder = "Text input">
   </div>
  
</form>

Textarea

La zone de texte est utilisée lorsque vous avez besoin de plusieurs lignes d'entrée. Modifiez l' attribut de lignes si nécessaire (moins de lignes = boîte plus petite, plus de lignes = boîte plus grande).

<form role = "form">
   
   <div class = "form-group">
      <label for = "name">Text Area</label>
      <textarea class = "form-control" rows = "3"></textarea>
   </div>
   
</form>

Cases à cocher et boutons radio

Les cases à cocher et les boutons radio sont parfaits lorsque vous souhaitez que les utilisateurs choisissent parmi une liste d'options prédéfinies.

  • Lors de la création d'un formulaire, utilisez la case à cocher si vous souhaitez que l'utilisateur sélectionne un nombre quelconque d'options dans une liste. Utilisez la radio si vous souhaitez limiter l'utilisateur à une seule sélection.

  • Utilisez la classe .checkbox-inline ou .radio-inline pour qu'une série de cases à cocher ou de radios pour que les contrôles apparaissent sur la même ligne.

L'exemple suivant montre les deux types (par défaut et en ligne) -

<label for = "name">Example of Default Checkbox and radio button </label>

<div class = "checkbox">
   <label>
      <input type = "checkbox" value = "">Option 1
   </label>
</div>

<div class = "checkbox">
   <label>
      <input type = "checkbox" value = "">Option 2
   </label>
</div>

<div class = "radio">
   <label>
      <input type = "radio" name = "optionsRadios" id = "optionsRadios1" value = "option1" checked> Option 1
   </label>
</div>

<div class = "radio">
   <label>
      <input type = "radio" name = "optionsRadios" id = "optionsRadios2" value = "option2">
      Option 2 - selecting it will deselect option 1
   </label>
</div>

<label for = "name">Example of Inline Checkbox and radio button </label>

<div>
   <label class = "checkbox-inline">
      <input type = "checkbox" id = "inlineCheckbox1" value = "option1"> Option 1
   </label>
   
   <label class = "checkbox-inline">
      <input type = "checkbox" id = "inlineCheckbox2" value = "option2"> Option 2
   </label>
   
   <label class = "checkbox-inline">
      <input type = "checkbox" id = "inlineCheckbox3" value = "option3"> Option 3
   </label>
   
   <label class = "checkbox-inline">
      <input type = "radio" name = "optionsRadiosinline" id = "optionsRadios3" value = "option1" checked> Option 1
   </label>
   
   <label class = "checkbox-inline">
      <input type = "radio" name = "optionsRadiosinline" id = "optionsRadios4" value = "option2"> Option 2
   </label>
</div>

Sélectionne

Une sélection est utilisée lorsque vous souhaitez permettre à l'utilisateur de choisir parmi plusieurs options, mais par défaut, elle n'en autorise qu'une.

  • Utilisez <select> pour les options de liste avec lesquelles l'utilisateur est familier, telles que les états ou les nombres.

  • Utilisez multiple = "multiple" pour permettre aux utilisateurs de sélectionner plus d'une option.

L'exemple suivant montre les deux types (select et multiple) -

<form role = "form">
   
   <div class = "form-group">
      <label for = "name">Select list</label>
      
      <select class = "form-control">
         <option>1</option>
         <option>2</option>
         <option>3</option>
         <option>4</option>
         <option>5</option>
      </select>

      <label for = "name">Mutiple Select list</label>
      
      <select multiple class = "form-control">
         <option>1</option>
         <option>2</option>
         <option>3</option>
         <option>4</option>
         <option>5</option>
      </select>
      
   </div>
	
</form>

Contrôle statique

Utilisez la classe .form-control-static sur un <p>, lorsque vous devez placer du texte brut à côté d'une étiquette de formulaire dans un formulaire horizontal.

<form class = "form-horizontal" role = "form">
   <div class = "form-group">
      <label class = "col-sm-2 control-label">Email</label>
      
      <div class = "col-sm-10">
         <p class = "form-control-static">[email protected]</p>
      </div>
      
   </div>
   
   <div class = "form-group">
      <label for = "inputPassword" class = "col-sm-2 control-label">Password</label>
      
      <div class = "col-sm-10">
         <input type = "password" class = "form-control" id = "inputPassword" placeholder = "Password">
      </div>
      
   </div>
</form>

États de contrôle de formulaire

En plus de l'état : focus (c'est-à-dire qu'un utilisateur clique sur l'entrée ou les onglets dessus), Bootstrap propose un style pour les entrées désactivées et des classes pour la validation de formulaire.

Focus d'entrée

Lorsqu'une entrée reçoit : focus , le contour de l'entrée est supprimé et une boîte-ombre est appliquée.

Entrées désactivées

Si vous devez désactiver une entrée, en ajoutant simplement désactivé attribut non seulement désactiver; cela changera également le style et le curseur de la souris lorsque le curseur survolera l'élément.

Jeux de champs désactivés

Ajoutez l'attribut désactivé à un <fieldset> pour désactiver tous les contrôles dans le <fieldset> à la fois.

États de validation

Bootstrap inclut des styles de validation pour les erreurs, les avertissements et les messages de réussite. Pour l'utiliser, ajoutez simplement la classe appropriée ( .has-warning, .has-error ou .has-success ) à l'élément parent.

L'exemple suivant montre tous les états de contrôle de formulaire -

<form class = "form-horizontal" role = "form">
   <div class = "form-group">
      <label class = "col-sm-2 control-label">Focused</label>
      <div class = "col-sm-10">
         <input class = "form-control" id = "focusedInput" type = "text" value = "This is focused...">
      </div>
   </div>
   
   <div class = "form-group">
      <label for = "inputPassword" class = "col-sm-2 control-label">
         Disabled
      </label>
      <div class = "col-sm-10">
         <input class = "form-control" id = "disabledInput" type = "text" placeholder = "Disabled input here..." disabled>
      </div>
   </div>
   
   <fieldset disabled>
      <div class = "form-group">
         <label for = "disabledTextInput" class = "col-sm-2 control-label">
            Disabled input (Fieldset disabled)
         </label>
         <div class = "col-sm-10">
            <input type = "text" id = "disabledTextInput" class = "form-control" placeholder = "Disabled input">
         </div> 
      </div>
      
      <div class = "form-group">
         <label for = "disabledSelect" class = "col-sm-2 control-label"> 
            Disabled select menu (Fieldset disabled)
         </label>
         <div class = "col-sm-10">
            <select id = "disabledSelect" class = "form-control"> 
               <option>Disabled select</option>
            </select> 
         </div>
      </div> 
   </fieldset>
   
   <div class = "form-group has-success">
      <label class = "col-sm-2 control-label" for = "inputSuccess">
         Input with success
      </label>
      <div class = "col-sm-10">
         <input type = "text" class = "form-control" id = "inputSuccess">
      </div>
   </div>
   
   <div class = "form-group has-warning">
      <label class = "col-sm-2 control-label" for = "inputWarning">
         Input with warning
      </label>
      <div class = "col-sm-10">
         <input type = "text" class = "form-control" id = "inputWarning">
      </div>
   </div>
   
   <div class = "form-group has-error">
      <label class = "col-sm-2 control-label" for = "inputError">
         Input with error
      </label>
      <div class = "col-sm-10">
         <input type = "text" class = "form-control" id = "inputError">
      </div>
   </div>
</form>

Dimensionnement du contrôle de formulaire

Vous pouvez définir les hauteurs et largeurs de formulaires en utilisant respectivement des classes comme .input-lg et .col-lg- * . L'exemple suivant illustre ceci -

<form role = "form">

   <div class = "form-group">
      <input class = "form-control input-lg" type = "text" placeholder =".input-lg">
   </div>

   <div class = "form-group">
      <input class = "form-control" type = "text" placeholder = "Default input">
   </div>

   <div class = "form-group">
      <input class = "form-control input-sm" type = "text" placeholder = ".input-sm">
   </div>
   
   <div class = "form-group"></div>
   
   <div class = "form-group">
      <select class = "form-control input-lg">
         <option value = "">.input-lg</option>
      </select>
   </div>
   
   <div class = "form-group">
      <select class = "form-control">
         <option value = "">Default select</option>
      </select>
   </div>
   
   <div class = "form-group">
      <select class = "form-control input-sm">
         <option value = "">.input-sm</option>
      </select>
   </div>

   <div class = "row">
      <div class = "col-lg-2">
         <input type = "text" class = "form-control" placeholder = ".col-lg-2">
      </div>
      
      <div class = "col-lg-3">
         <input type = "text" class = "form-control" placeholder = ".col-lg-3">
      </div>
      
      <div class = "col-lg-4">
         <input type = "text" class = "form-control" placeholder = ".col-lg-4">
      </div>
      
   </div>
</form>

Texte d'aide

Les contrôles de formulaire Bootstrap peuvent avoir un texte d'aide au niveau du bloc qui accompagne les entrées. Pour ajouter un bloc de contenu pleine largeur, utilisez le bloc .help après <input>. L'exemple suivant illustre ceci -

<form role = "form">
   <span>Example of Help Text</span>
   <input class = "form-control" type = "text" placeholder = "">
   
   <span class = "help-block">
      A longer block of help text that breaks onto a new line and may extend beyond one line.
   </span>
	
</form>

Ce chapitre couvre l'âge d'utilisation du bouton Bootstrap avec des exemples. Tout ce qui reçoit une classe de.btnhéritera de l'aspect par défaut d'un bouton gris aux coins arrondis. Cependant, Bootstrap fournit certaines options pour les boutons de style, qui sont résumées dans le tableau suivant -

Sr.No. Classe et description
1

btn

Bouton par défaut / standard.

2

btn-primary

Fournit un poids visuel supplémentaire et identifie l'action principale dans un ensemble de boutons.

3

btn-success

Indique une action réussie ou positive.

4

btn-info

Bouton contextuel pour les messages d'alerte d'information.

5

btn-warning

Indique que des précautions doivent être prises avec cette action.

6

btn-danger

Indique une action dangereuse ou potentiellement négative.

sept

btn-link

Désaccentuez un bouton en le faisant ressembler à un lien tout en conservant le comportement du bouton.

L'exemple suivant montre toutes les classes de boutons ci-dessus -

<!-- Standard button -->
<button type = "button" class = "btn btn-default">Default Button</button>

<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type = "button" class = "btn btn-primary">Primary Button</button>

<!-- Indicates a successful or positive action -->
<button type = "button" class = "btn btn-success">Success Button</button>

<!-- Contextual button for informational alert messages -->
<button type = "button" class = "btn btn-info">Info Button</button>

<!-- Indicates caution should be taken with this action -->
<button type = "button" class = "btn btn-warning">Warning Button</button>

<!-- Indicates a dangerous or potentially negative action -->
<button type = "button" class = "btn btn-danger">Danger Button</button>

<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type = "button" class = "btn btn-link">Link Button</button>

Taille du bouton

Le tableau suivant résume les classes utilisées pour obtenir des boutons de différentes tailles -

Sr.No. Classe et description
1

.btn-lg

Cela rend la taille du bouton grande.

2

.btn-sm

Cela rend la taille du bouton petite.

3

.btn-xs

Cela rend la taille du bouton très petite.

4

.btn-block

Cela crée des boutons de niveau de bloc, ceux qui couvrent toute la largeur d'un parent.

L'exemple suivant illustre ceci -

<p>
   <button type = "button" class = "btn btn-primary btn-lg">
      Large Primary button
   </button>
   
   <button type = "button" class = "btn btn-default btn-lg">
      Large button
   </button>
</p>

<p>
   <button type = "button" class = "btn btn-primary">
      Default size Primary button
   </button>
   
   <button type = "button" class = "btn btn-default">
      Default size button
   </button>
</p>

<p>
   <button type = "button" class = "btn btn-primary btn-sm">
      Small Primary button
   </button>
   
   <button type = "button" class = "btn btn-default btn-sm">
      Small button
   </button>
</p>

<p>
   <button type = "button" class = "btn btn-primary btn-xs">
      Extra small Primary button
   </button>
   
   <button type = "button" class = "btn btn-default btn-xs">
      Extra small button
   </button>
</p>

<p>
   <button type = "button" class = "btn btn-primary btn-lg btn-block">
      Block level Primary button
   </button>
   
   <button type = "button" class = "btn btn-default btn-lg btn-block">
      Block level button
   </button>
</p>

État du bouton

Bootstrap fournit des classes qui vous permettent de changer l'état des boutons en tant qu'actifs, désactivés, etc. dont chacune est abordée dans les sections suivantes.

État actif

Les boutons apparaîtront enfoncés (avec un arrière-plan plus sombre, une bordure plus sombre et une ombre en médaillon) lorsqu'ils sont actifs. Le tableau suivant résume les classes utilisées pour rendre les éléments de bouton et les éléments d'ancrage actifs -

Élément Classe
Élément Button Utilisation .active class pour montrer qu'il est activé.
Élément d'ancrage Utilisation .active classe aux boutons <a> pour montrer qu'il est activé.

L'exemple suivant illustre ceci -

<p>
   <button type = "button" class = "btn btn-default btn-lg ">
      Default Button
   </button>
   
   <button type = "button" class = "btn btn-default btn-lg active">
      Active Button
   </button>
</p>

<p>
   <button type = "button" class = "btn btn-primary btn-lg">
      Primary button
   </button>
   
   <button type = "button" class = "btn btn-primary btn-lg active">
      Active Primary button
   </button>
</p>

État désactivé

Lorsque vous désactivez un bouton, sa couleur s'estompe de 50% et perd le dégradé.

Le tableau suivant résume les classes utilisées pour désactiver l'élément bouton et l'élément d'ancrage -

Élément Classe
Élément Button Ajouter le disabled attribuer aux boutons <button>.
Élément d'ancrage

Ajouter le disabled classe aux boutons <a>.

Note- Cette classe ne changera que l'apparence de <a>, pas sa fonctionnalité. Vous devez utiliser JavaScript personnalisé pour désactiver les liens ici.

L'exemple suivant illustre ceci -

<p>
   <button type = "button" class = "btn btn-default btn-lg">
      Default Button
   </button>
   
   <button type = "button" class = "btn btn-default btn-lg" disabled = "disabled">
      Disabled Button
   </button>
</p>

<p>
   <button type = "button" class = "btn btn-primary btn-lg">
      Primary button
   </button>
   
   <button type = "button" class = "btn btn-primary btn-lg" disabled = "disabled">
      Disabled Primary button
   </button>
</p>

<p>
   <a href = "#" class = "btn btn-default btn-lg" role = "button">
      Link
   </a>
   
   <a href = "#" class = "btn btn-default btn-lg disabled" role = "button">
      Disabled Link
   </a>
</p>

<p>
   <a href = "#" class = "btn btn-primary btn-lg" role = "button">
      Primary link
   </a>
   
   <a href = "#" class = "btn btn-primary btn-lg disabled" role = "button">
      Disabled Primary link
   </a>
</p>

Balises de bouton

Vous pouvez utiliser des classes de boutons avec l'élément <a>, <button> ou <input>. Mais il est recommandé de l'utiliser avec les éléments <button> principalement pour éviter les problèmes d'incohérence entre navigateurs.

L'exemple suivant illustre ceci -

<a class = "btn btn-default" href = "#" role = "button">Link</a>
<button class = "btn btn-default" type = "submit">Button</button>
<input class = "btn btn-default" type = "button" value = "Input">
<input class = "btn btn-default" type = "submit" value = "Submit">

Ce chapitre couvre la prise en charge de Bootstrap pour les images. Bootstrap fournit trois classes qui peuvent être utilisées pour appliquer des styles simples aux images -

  • .img-rounded- ajoute un rayon de bordure: 6px pour donner à l'image des coins arrondis.

  • .img-circle- rend l'image entière ronde en ajoutant un rayon de bordure: 500px .

  • .img-thumbnail - ajoute un peu de rembourrage et une bordure grise -

L'exemple suivant illustre ceci -

<img src = "/bootstrap/images/download.png" class = "img-rounded">
<img src = "/bootstrap/images/download.png" class = "img-circle">
<img src = "/bootstrap/images/download.png" class = "img-thumbnail">

Ce chapitre décrit certaines des classes d'assistance dans Bootstrap qui pourraient être utiles.

Fermer l'icône

Utilisez l'icône de fermeture générique pour ignorer le contenu comme les modaux et les alertes. Utilisez la classeclose pour obtenir l'icône de fermeture.

<p>Close Icon Example
   <button type = "button" class = "close" aria-hidden = "true">
      &times;
   </button>
</p>

Carets

Utilisez des carets pour indiquer la fonctionnalité et la direction de la liste déroulante. Pour obtenir cette fonctionnalité, utilisez la classecaret avec un élément <span>.

<p>Caret Example<span class = "caret"></span></p>

Flotteurs rapides

Vous pouvez faire flotter un élément vers la gauche ou la droite avec class pull-left ou pull-right respectivement l'exemple suivant le démontre.

<div class = "pull-left">Quick Float to left</div>
<div class = "pull-right">Quick Float to right</div>
Pour aligner les composants des barres de navigation avec les classes utilitaires, utilisez .navbar-left ou .navbar-rightau lieu. Voir le chapitre de la barre de navigation pour plus de détails.

Blocs de contenu du centre

Utiliser la classe center-block pour définir un élément au centre.

<div class = "row">
   <div class = "center-block" style = "width:200px; background-color:#ccc;">
      This is an example for center-block
   </div>
</div>

Clearfix

Pour effacer le flotteur de n'importe quel élément, utilisez le .clearfix classe.

<div class = "clearfix" style = "background: #D8D8D8;border: 1px solid #000; padding: 10px;">
   
   <div class = "pull-left" style = "background:#58D3F7;">
      Quick Float to left
   </div>
   
   <div class = "pull-right" style = "background: #DA81F5;">
      Quick Float to right
   </div>
   
</div>

Affichage et masquage du contenu

Vous pouvez forcer un élément à être affiché ou masqué (y compris pour les lecteurs d'écran) à l'aide de classes .show et .hidden.

<div class = "row" style = "padding: 91px 100px 19px 50px;">
   
   <div class = "show" style = "left-margin:10px; width:300px; background-color:#ccc;">
      This is an example for show class
   </div>
   
   <div class = "hidden" style = "width:200px; background-color:#ccc;">
      This is an example for hide class
   </div>
   
</div>

Contenu du lecteur d'écran

Vous pouvez masquer un élément sur tous les appareils sauf les lecteurs d'écran avec la classe .sr-only.

<div class = "row" style = "padding: 91px 100px 19px 50px;">
   <form class = "form-inline" role = "form">
      
      <div class = "form-group">
         <label class = "sr-only" for = "email">Email address</label>
         <input type = "email" class = "form-control" placeholder = "Enter email">
      </div>
      
      <div class = "form-group">
         <label class = "sr-only" for = "pass">Password</label>
         <input type = "password" class = "form-control" placeholder = "Password">
      </div>
      
   </form>
</div>

Ici, nous pouvons voir que l'étiquette des deux types d'entrée est affectée à la classe sr-only, par conséquent, les étiquettes ne seront visibles que par les lecteurs d'écran.

Bootstrap fournit quelques classes d'assistance, pour un développement plus rapide et compatible avec les mobiles. Ceux-ci peuvent être utilisés pour afficher et masquer le contenu par appareil via une requête multimédia, combinés avec des appareils grands, petits et moyens.

Utilisez-les avec parcimonie et évitez de créer des versions entièrement différentes du même site. Responsive utilities are currently only available for block and table toggling.

Des classes Dispositifs
.visible-xs Très petit (moins de 768 pixels) visible
.visible-sm Petit (jusqu'à 768 pixels) visible
.visible-md Moyen (768 px à 991 px) visible
.visible-lg Plus grand (992 px et plus) visible
.hidden-xs Très petit (moins de 768 pixels) masqué
.hidden-sm Petit (jusqu'à 768 px) masqué
.hidden-md Moyen (768 px à 991 px) masqué
.hidden-lg Plus grand (992 px et plus) masqué

Classes d'impression

Le tableau suivant répertorie les classes d'impression. Utilisez-les pour basculer le contenu à imprimer.

Des classes Impression
.visible-print Oui visible
.hidden-print Visible uniquement par le navigateur pour ne pas imprimer.

Exemple

L'exemple suivant illustre l'utilisation des classes d'assistance répertoriées ci-dessus. Redimensionnez votre navigateur ou chargez l'exemple sur différents appareils pour tester les classes d'utilitaires réactifs.

<div class = "container" style = "padding: 40px;">
   <div class = "row visible-on">
      
      <div class = "col-xs-6 col-sm-3" style = "background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         
         <span class = "hidden-xs">Extra small</span>
         <span class = "visible-xs">✔ Visible on x-small</span>
      </div>
      
      <div class = "col-xs-6 col-sm-3" style = "background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         
         <span class = "hidden-sm">Small</span>
         <span class = "visible-sm">✔ Visible on small</span>
      </div>
      
      <div class = "clearfix visible-xs"></div>
      
      <div class = "col-xs-6 col-sm-3" style = "background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         
         <span class = "hidden-md">Medium</span>
         <span class = "visible-md">✔ Visible on medium</span>
      </div>
      
      <div class = "col-xs-6 col-sm-3" style = "background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         
         <span class = "hidden-lg">Large</span>
         <span class = "visible-lg">✔ Visible on large</span>
      </div>
      
   </div>  
</div>

Checkmarks indique que l'élément est visible dans votre fenêtre actuelle.

Ce chapitre traitera de Glyphicons, de son utilisation et de quelques exemples. Bootstrap regroupe 200 glyphes au format de police. Comprenons maintenant ce que sont les glyphicons.

Que sont les glyphicons?

Les glyphicons sont des polices d'icônes que vous pouvez utiliser dans vos projets Web. Les Halflings Glyphicons ne sont pas gratuits et nécessitent une licence, mais leur créateur les a mis gratuitement à disposition pour les projets Bootstrap.

"Il est recommandé, en guise de remerciement, nous vous demandons d'inclure un lien facultatif vers GLYPHICONS chaque fois que cela est possible". - Documentation Bootstrap

Où trouver les glyphicons?

Maintenant que nous avons téléchargé la version Bootstrap 3.x et que nous comprenons sa structure de répertoire dans le chapitre Configuration de l'environnement , les glyphicons se trouvent dans le dossier des polices . Celui-ci contient les fichiers suivants -

  • glyphicons-halflings-regular.eot
  • glyphicons-halflings-regular.svg
  • glyphicons-halflings-regular.ttf
  • glyphicons-halflings-regular.woff

Les règles CSS associées sont présentes dans les fichiers bootstrap.css et bootstrap-min.css dans le dossier css du dossier dist . Vous pouvez voir les glyphicons disponibles sur ce lien GLYPHICONS .

Usage

Pour utiliser les icônes, utilisez simplement le code suivant à peu près n'importe où dans votre code. Laissez un espace entre l'icône et le texte pour un remplissage correct.

<span class = "glyphicon glyphicon-search"></span>

L'exemple suivant illustre ceci -

<p>
   <button type = "button" class = "btn btn-default">
      <span class = "glyphicon glyphicon-sort-by-attributes"></span>
   </button>
   
   <button type = "button" class = "btn btn-default">
      <span class = "glyphicon glyphicon-sort-by-attributes-alt"></span>
   </button>
   
   <button type = "button" class = "btn btn-default">
      <span class = "glyphicon glyphicon-sort-by-order"></span>
   </button>
   
   <button type = "button" class = "btn btn-default">
      <span class = "glyphicon glyphicon-sort-by-order-alt"></span>
   </button>
</p>

<button type = "button" class = "btn btn-default btn-lg">
   <span class = "glyphicon glyphicon-user"></span>
   
   User
</button>

<button type = "button" class = "btn btn-default btn-sm">
   <span class = "glyphicon glyphicon-user"></span> 
   
   User
</button>

<button type ="button" class = "btn btn-default btn-xs">
   <span class = "glyphicon glyphicon-user"></span> 
   
   User
</button>

Ce chapitre met en évidence les menus déroulants Bootstrap. Les menus déroulants sont des menus contextuels basculants pour afficher les liens dans un format de liste. Cela peut être rendu interactif avec le plugin JavaScript déroulant .

Pour utiliser le menu déroulant, enveloppez simplement le menu déroulant dans la classe .dropdownL'exemple suivant montre un menu déroulant de base -

<div class = "dropdown">
   
   <button type = "button" class = "btn dropdown-toggle" id = "dropdownMenu1" data-toggle = "dropdown">
      Topics
      <span class = "caret"></span>
   </button>
   
   <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dropdownMenu1">
      <li role = "presentation">
         <a role = "menuitem" tabindex = "-1" href = "#">Java</a>
      </li>
      
      <li role = "presentation">
         <a role = "menuitem" tabindex = "-1" href = "#">Data Mining</a>
      </li>
      
      <li role = "presentation">
         <a role = "menuitem" tabindex = "-1" href = "#">
            Data Communication/Networking
         </a>
      </li>
      
      <li role = "presentation" class = "divider"></li>
      
      <li role = "presentation">
         <a role = "menuitem" tabindex = "-1" href = "#">Separated link</a>
      </li>
   </ul>
   
</div>

Options

Alignement

Alignez le menu déroulant à droite en ajoutant la classe .pull-right à .dropdown-menu. L'exemple suivant illustre ceci -

<div class = "dropdown">
   
   <button type = "button" class = "btn dropdown-toggle" id = "dropdownMenu1" data-toggle = "dropdown">
      Topics
      <span class = "caret"></span>
   </button>
   
   <ul class = "dropdown-menu pull-right" role = "menu" aria-labelledby = "dropdownMenu1">
      <li role = "presentation">
         <a role = "menuitem" tabindex = "-1" href = "#">Java</a>
      </li>
      
      <li role = "presentation">
         <a role = "menuitem" tabindex = "-1" href = "#">Data Mining</a>
      </li>
      
      <li role = "presentation">
         <a role = "menuitem" tabindex = "-1" href = "#">
            Data Communication/Networking
         </a>
      </li>
      
      <li role = "presentation" class = "divider"></li>
      
      <li role = "presentation">
         <a role = "menuitem" tabindex = "-1" href = "#">Separated link</a>
      </li>
   </ul>
   
</div>

En-têtes

Vous pouvez ajouter un en-tête pour étiqueter des sections d'actions dans n'importe quel menu déroulant en utilisant la classe dropdown-header. L'exemple suivant illustre ceci -

<div class = "dropdown">
   
   <button type = "button" class = "btn dropdown-toggle" id = "dropdownMenu1" data-toggle = "dropdown">
      Topics
      <span class = "caret"></span>
   </button>
   
   <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dropdownMenu1">
      <li role = "presentation" class = "dropdown-header">Dropdown header</li>
      
      <li role = "presentation" >
         <a role = "menuitem" tabindex = "-1" href = "#">Java</a>
      </li>
      
      <li role = "presentation">
         <a role = "menuitem" tabindex = "-1" href = "#">Data Mining</a>
      </li>
      
      <li role = "presentation">
         <a role = "menuitem" tabindex = "-1" href = "#">
            Data Communication/Networking
         </a>
      </li>
      
      <li role = "presentation" class = "divider"></li>
      <li role = "presentation" class = "dropdown-header">Dropdown header</li>
      
      <li role = "presentation">
         <a role = "menuitem" tabindex = "-1" href = "#">Separated link</a>
      </li>
   </ul>
   
</div>

Les groupes de boutons permettent d'empiler plusieurs boutons sur une seule ligne. Ceci est utile lorsque vous souhaitez placer ensemble des éléments tels que des boutons d'alignement. Vous pouvez ajouter une radio JavaScript facultative et un comportement de style de case à cocher avec Bootstrap Button Plugin .

Le tableau suivant résume les classes importantes fournies par Bootstrap pour utiliser les groupes de boutons -

Classe La description Exemple de code
.btn-groupe Cette classe est utilisée pour un groupe de boutons de base. Enveloppez une série de boutons avec classe.btn dans .btn-group.
<div class = "btn-group">
   <button type = "button" class = "btn btn-default">Button1</button>
   <button type = "button" class = "btn btn-default">Button2</button>
</div>
barre d'outils .btn Cela permet de combiner des ensembles de <div class = "btn-group"> dans une <div class = "btn-toolbar"> pour des composants plus complexes.
<div class = "btn-toolbar" role = "toolbar">
   <div class = "btn-group">...</div>
   <div class = "btn-group">...</div>
</div>
.btn-group-lg, .btn-group-sm, .btn-group-xs Ces classes peuvent être appliquées à un groupe de boutons au lieu de redimensionner chaque bouton.
<div class = "btn-group btn-group-lg">...</div>
<div class = "btn-group btn-group-sm">...</div>
<div class = "btn-group btn-group-xs">...</div>
.btn-group-vertical Cette classe fait apparaître un ensemble de boutons empilés verticalement plutôt qu'horizontalement.
<div class = "btn-group-vertical">
   ...
</div>

Groupe de boutons de base

L'exemple suivant montre l'utilisation de la classe .btn-group discuté dans le tableau ci-dessus -

<div class = "btn-group">
   
   <button type = "button" class = "btn btn-default">Button 1</button>
   <button type = "button" class = "btn btn-default">Button 2</button>
   <button type = "button" class = "btn btn-default">Button 3</button>
   
</div>

Barre d'outils des boutons

L'exemple suivant montre l'utilisation de la classe .btn-toolbar discuté dans le tableau ci-dessus -

<div class = "btn-toolbar" role = "toolbar">
   
   <div class = "btn-group">
      <button type = "button" class = "btn btn-default">Button 1</button>
      <button type = "button" class = "btn btn-default">Button 2</button>
      <button type = "button" class = "btn btn-default">Button 3</button>
   </div>
   
   <div class = "btn-group">
      <button type = "button" class = "btn btn-default">Button 4</button>
      <button type = "button" class = "btn btn-default">Button 5</button>
      <button type = "button" class = "btn btn-default">Button 6</button>
   </div>
   
   <div class = "btn-group">
      <button type = "button" class = "btn btn-default">Button 7</button>
      <button type = "button" class = "btn btn-default">Button 8</button>
      <button type = "button" class = "btn btn-default">Button 9</button>
   </div>
   
</div>

Taille du bouton

L'exemple suivant montre l'utilisation de la classe .btn-group-* discuté dans le tableau ci-dessus -

<div class = "btn-group btn-group-lg">
   <button type = "button" class = "btn btn-default">Button 1</button>
   <button type = "button" class = "btn btn-default">Button 2</button>
   <button type = "button" class = "btn btn-default">Button 3</button>
</div>

<div class = "btn-group btn-group-sm">
   <button type = "button" class = "btn btn-default">Button 4</button>
   <button type = "button" class = "btn btn-default">Button 5</button>
   <button type = "button" class = "btn btn-default">Button 6</button>
</div>

<div class = "btn-group btn-group-xs">
   <button type = "button" class = "btn btn-default">Button 7</button>
   <button type = "button" class = "btn btn-default">Button 8</button>
   <button type = "button" class = "btn btn-default">Button 9</button>
</div>

Nesting

Vous pouvez imbriquer des groupes de boutons dans un autre groupe de boutons, c'est-à-dire placer un .btn-group dans un autre .btn-group . Ceci est fait lorsque vous voulez des menus déroulants mélangés avec une série de boutons.

<div class = "btn-group">
   <button type = "button" class = "btn btn-default">Button 1</button>
   <button type = "button" class = "btn btn-default">Button 2</button>
   
   <div class = "btn-group">
      <button type = "button" class = "btn btn-default dropdown-toggle" data-toggle = "dropdown">
         Dropdown
         <span class = "caret"></span>
      </button>
      
      <ul class = "dropdown-menu">
         <li><a href = "#">Dropdown link 1</a></li>
         <li><a href = "#">Dropdown link 2</a></li>
      </ul>
   </div>
  
</div>

Buttongroup vertical

L'exemple suivant montre l'utilisation de la classe .btn-group-vertical discuté dans le tableau ci-dessus -

<div class = "btn-group-vertical">
   <button type = "button" class = "btn btn-default">Button 1</button>
   <button type = "button" class = "btn btn-default">Button 2</button>
   
   <div class = "btn-group-vertical">
      <button type = "button" class = "btn btn-default dropdown-toggle" data-toggle = "dropdown">
         Dropdown
         <span class = "caret"></span>
      </button>
      
      <ul class = "dropdown-menu">
         <li><a href = "#">Dropdown link 1</a></li>
         <li><a href = "#">Dropdown link 2</a></li>
      </ul>
   </div>
  
</div>

Ce chapitre explique comment ajouter un menu déroulant aux boutons à l'aide des classes Bootstrap. Pour ajouter une liste déroulante à un bouton, enveloppez simplement le bouton et le menu déroulant dans un.btn-group. Vous pouvez également utiliser <span class = "caret"> </span> pour indiquer que le bouton est une liste déroulante.

L'exemple suivant montre une liste déroulante de base à un seul bouton -

<div class = "btn-group">
   
   <button type = "button" class = "btn btn-default dropdown-toggle" data-toggle = "dropdown">
      Default 
      <span class = "caret"></span>
   </button>
   
   <ul class = "dropdown-menu" role = "menu">
      <li><a href = "#">Action</a></li>
      <li><a href = "#">Another action</a></li>
      <li><a href = "#">Something else here</a></li>
      
      <li class = "divider"></li>
      <li><a href = "#">Separated link</a></li>
   </ul>
</div>

<div class = "btn-group">
   <button type = "button" class = "btn btn-primary dropdown-toggle" data-toggle = "dropdown">
      Primary 
      <span class = "caret"></span>
   </button>
   
   <ul class = "dropdown-menu" role = "menu">
      <li><a href = "#">Action</a></li>
      <li><a href = "#">Another action</a></li>
      <li><a href = "#">Something else here</a></li>
      
      <li class = "divider"></li>
      <li><a href = "#">Separated link</a></li>
   </ul>
   
</div>

Liste déroulante des boutons de fractionnement

Les listes déroulantes des boutons de fractionnement utilisent le même style général que le bouton déroulant mais ajoutent une action principale avec la liste déroulante. Les boutons de fractionnement ont l'action principale sur la gauche et une bascule sur la droite qui affiche la liste déroulante.

<div class = "btn-group">
   <button type = "button" class = "btn btn-default">Default</button>
   
   <button type = "button" class = "btn btn-default dropdown-toggle" data-toggle = "dropdown">
      <span class = "caret"></span>
      <span class = "sr-only">Toggle Dropdown</span>
   </button>
   
   <ul class = "dropdown-menu" role = "menu">
      <li><a href = "#">Action</a></li>
      <li><a href = "#">Another action</a></li>
      <li><a href = "#">Something else here</a></li>
      
      <li class = "divider"></li>
      <li><a href = "#">Separated link</a></li>
   </ul>
</div>

<div class = "btn-group">
   <button type = "button" class = "btn btn-primary">Primary</button>
   
   <button type = "button" class = "btn btn-primary dropdown-toggle" data-toggle = "dropdown">
      <span class = "caret"></span>
      <span class = "sr-only">Toggle Dropdown</span>
   </button>
   
   <ul class = "dropdown-menu" role = "menu">
      <li><a href = "#">Action</a></li>
      <li><a href = "#">Another action</a></li>
      <li><a href = "#">Something else here</a></li>
      
      <li class = "divider"></li>
      <li><a href = "#">Separated link</a></li>
   </ul>
</div>

Taille de la liste déroulante du bouton

Vous pouvez utiliser les listes déroulantes avec n'importe quelle taille de bouton - .btn-large, .btn-sm, ou .btn-xs.

<div class = "btn-group">
   
   <button type = "button" class = "btn btn-default dropdown-toggle btn-lg" data-toggle = "dropdown">
      Default
      <span class = "caret"></span>
   </button>
   
   <ul class = "dropdown-menu" role = "menu">
      <li><a href = "#">Action</a></li>
      <li><a href = "#">Another action</a></li>
      <li><a href = "#">Something else here</a></li>
      
      <li class = "divider"></li>
      <li><a href = "#">Separated link</a></li>
   </ul>
</div>

<div class = "btn-group">
   <button type = "button" class = "btn btn-primary dropdown-toggle btn-sm" data-toggle = "dropdown">
      Primary
      <span class = "caret"></span>
   </button>
   
   <ul class = "dropdown-menu" role = "menu">
      <li><a href = "#">Action</a></li>
      <li><a href = "#">Another action</a></li>
      <li><a href = "#">Something else here</a></li>
      
      <li class = "divider"></li>
      <li><a href = "#">Separated link</a></li>
   </ul>
</div>

<div class = "btn-group">
   <button type = "button" class = "btn btn-success dropdown-toggle btn-xs" data-toggle = "dropdown">
      Success
      <span class = "caret"></span>
   </button>
   
   <ul class = "dropdown-menu" role = "menu">
      <li><a href = "#">Action</a></li>
      <li><a href = "#">Another action</a></li>
      <li><a href = "#">Something else here</a></li>
      
      <li class = "divider"></li>
      <li><a href = "#">Separated link</a></li>
   </ul>
   
</div>

Variation Dropup

Les menus peuvent également être construits pour se dérouler vers le haut plutôt que vers le bas. Pour y parvenir, ajoutez simplement.dropup au parent .btn-group récipient.

<div class = "row" style = "margin-left:50px; margin-top:200px">
   
   <div class = "btn-group dropup">
      <button type = "button" class = "btn btn-default dropdown-toggle" data-toggle = "dropdown">
         Default
         <span class = "caret"></span>
      </button>
      
      <ul class = "dropdown-menu" role = "menu">
         <li><a href = "#">Action</a></li>
         <li><a href = "#">Another action</a></li>
         <li><a href = "#">Something else here</a></li>
         
         <li class = "divider"></li>
         <li><a href = "#">Separated link</a></li>
      </ul>
   </div>
   
   <div class = "btn-group dropup">
      <button type = "button" class = "btn btn-primary dropdown-toggle" data-toggle = "dropdown">
         Primary
         <span class = "caret"></span>
      </button>
      
      <ul class = "dropdown-menu" role = "menu">
         <li><a href = "#">Action</a></li>
         <li><a href = "#">Another action</a></li>
         <li><a href = "#">Something else here</a></li>
         
         <li class = "divider"></li>
         <li><a href = "#">Separated link</a></li>
      </ul>
   </div>
   
</div>

Ce chapitre explique une autre fonctionnalité prise en charge par Bootstrap, les groupes d'entrée. Les groupes d'entrée sont des contrôles de formulaire étendus . En utilisant des groupes de saisie, vous pouvez facilement ajouter du texte ou des boutons aux entrées textuelles.

En ajoutant du contenu ajouté et ajouté à un champ de saisie, vous pouvez ajouter des éléments communs à l'entrée de l'utilisateur. Par exemple, vous pouvez ajouter le symbole du dollar, le @ pour un nom d'utilisateur Twitter ou tout autre élément qui pourrait être commun à l'interface de votre application.

Pour ajouter ou ajouter des éléments à un .form-control-

  • Enveloppez-le dans un <div> avec classe .input-group

  • Comme étape suivante, dans ce même <div>, placez votre contenu supplémentaire dans un <span> avec classe .input-group-addon.

  • Placez maintenant ce <span> avant ou après l'élément <input>.

Pour la compatibilité entre navigateurs, évitez d'utiliser les éléments <select> ici car ils ne peuvent pas être entièrement stylisés dans les navigateurs WebKit. N'appliquez pas non plus les classes de groupe d'entrée directement pour former des groupes. Un groupe d'entrée est un composant isolé.

Groupe d'entrée de base

L'exemple suivant illustre le groupe d'entrée de base -

<div style = "padding: 100px 100px 10px;">
   
   <form class = "bs-example bs-example-form" role = "form">
      <div class = "input-group">
         <span class = "input-group-addon">@</span>
         <input type = "text" class = "form-control" placeholder = "twitterhandle">
      </div>
		
      <br>

      <div class = "input-group">
         <input type = "text" class = "form-control">
         <span class = "input-group-addon">.00</span>
      </div>
		
      <br>
      
      <div class = "input-group">
         <span class = "input-group-addon">$</span>
         <input type = "text" class =" form-control">
         <span class = "input-group-addon">.00</span>
      </div>
   </form>
   
</div>

Dimensionnement du groupe d'entrée

Vous pouvez modifier la taille des groupes d'entrée, en ajoutant les classes de dimensionnement de formulaire relatives comme .input-group-lg, input-group-sm, input-group-xs à la .input-grouplui-même. Le contenu à l'intérieur sera automatiquement redimensionné.

Les exemples suivants le démontrent -

<div style = "padding: 100px 100px 10px;">
   
   <form class = "bs-example bs-example-form" role = "form">
      <div class = "input-group input-group-lg">
         <span class = "input-group-addon">@</span>
         <input type = "text" class = "form-control" placeholder = "Twitterhandle">
      </div>
		
      <br>

      <div class = "input-group">
         <span class = "input-group-addon">@</span>
         <input type = "text" class = "form-control" placeholder = "Twitterhandle">
      </div>
		
      <br>

      <div class = "input-group input-group-sm">
         <span class = "input-group-addon">@</span>
         <input type = "text" class = "form-control" placeholder = "Twitterhandle">
      </div>
   </form>
   
</div>

Cases à cocher et modules complémentaires radio

Vous pouvez pré-ajouter ou ajouter des boutons radio et des cases à cocher au lieu de texte comme illustré dans l'exemple suivant -

<div style = "padding: 100px 100px 10px;">
   
   <form class = "bs-example bs-example-form" role = "form">
      <div class = "row">
         
         <div class = "col-lg-6">
            <div class = "input-group">
               
               <span class = "input-group-addon">
                  <input type = "checkbox">
               </span>
               
               <input type = "text" class = "form-control">
            </div><!-- /input-group -->
         </div><!-- /.col-lg-6 --><br>
         
         <div class = "col-lg-6">
            <div class = "input-group">
               
               <span class = "input-group-addon">
                  <input type = "radio">
               </span>
               
               <input type = "text" class = "form-control">
            </div><!-- /input-group -->
         </div><!-- /.col-lg-6 -->
         
      </div><!-- /.row -->
   </form>
   
</div>

Addons de bouton

Vous pouvez même pré-ajouter ou ajouter des boutons dans des groupes d'entrée. Au lieu de.input-group-addon classe, vous devrez utiliser la classe .input-group-btnpour envelopper les boutons. Cela est nécessaire en raison des styles de navigateur par défaut qui ne peuvent pas être remplacés. Les exemples suivants le démontrent -

<div style = "padding: 100px 100px 10px;">
   
   <form class = "bs-example bs-example-form" role = "form">
      <div class = "row">
         
         <div class = "col-lg-6">
            <div class = "input-group">
               
               <span class = "input-group-btn">
                  <button class = "btn btn-default" type = "button">
                     Go!
                  </button>
               </span>
					
               <input type = "text" class = "form-control">
               
            </div><!-- /input-group -->
         </div><!-- /.col-lg-6 --><br>
         
         <div class = "col-lg-6">
            <div class = "input-group">
               <input type = "text" class = "form-control">
               
               <span class = "input-group-btn">
                  <button class = "btn btn-default" type = "button">
                     Go!
                  </button>
               </span>
               
            </div><!-- /input-group -->
         </div><!-- /.col-lg-6 -->
         
      </div><!-- /.row -->
   </form>
   
</div>

Boutons avec listes déroulantes

L'ajout de boutons avec des menus déroulants dans des groupes d'entrée peut être fait en enveloppant simplement le bouton et le menu déroulant dans un .input-group-btn classe comme illustré dans l'exemple suivant -

<div style = "padding: 100px 100px 10px;">
   
   <form class = "bs-example bs-example-form" role = "form">
      <div class = "row">
         
         <div class = "col-lg-6">
            <div class = "input-group">
               
               <div class = "input-group-btn">
                  <button type = "button" class = "btn btn-default dropdown-toggle" 
                     data-toggle = "dropdown">
                     DropdownMenu 
                     <span class = "caret"></span>
                  </button>
                  
                  <ul class = "dropdown-menu">
                     <li><a href = "#">Action</a></li>
                     <li><a href = "#">Another action</a></li>
                     <li><a href = "#">Something else here</a></li>
                     
                     <li class = "divider"></li>
                     <li><a href = "#">Separated link</a></li>
                  </ul>
               </div><!-- /btn-group -->
               
               <input type = "text" class = "form-control">
            </div><!-- /input-group -->
         </div><!-- /.col-lg-6 --><br>
         
         <div class = "col-lg-6">
            <div class = "input-group">
               
               <input type = "text" class = "form-control">
               <div class = "input-group-btn">
                  
                  <button type = "button" class = "btn btn-default dropdown-toggle" 
                     data-toggle = "dropdown">
                     DropdownMenu 
                     <span class = "caret"></span>
                  </button>
                  
                  <ul class = "dropdown-menu pull-right">
                     <li><a href = "#">Action</a></li>
                     <li><a href = "#">Another action</a></li>
                     <li><a href = "#">Something else here</a></li>
                     
                     <li class = "divider"></li>
                     <li><a href = "#">Separated link</a></li>
                  </ul>
               </div><!-- /btn-group -->
               
            </div><!-- /input-group -->
         </div><!-- /.col-lg-6 -->
         
      </div><!-- /.row -->
   </form>
   
</div>

Boutons segmentés

Pour segmenter les listes déroulantes de boutons dans des groupes d'entrée, utilisez le même style général que le bouton déroulant, mais ajoutez une action principale avec la liste déroulante comme le montre l'exemple suivant -

<div style = "padding: 100px 100px 10px;">
   
   <form class = "bs-example bs-example-form" role = "form">
      <div class = "row">
         
         <div class = "col-lg-6">
            <div class = "input-group">
               
               <div class = "input-group-btn">
                  <button type = "button" class = "btn btn-default" 
                     tabindex = "-1">Dropdown Menu</button>
                  
                  <button type = "button" class = "btn btn-default dropdown-toggle" 
                     data-toggle = "dropdown" tabindex = "-1">
                     <span class = "caret"></span>
                     <span class = "sr-only">Toggle Dropdown</span>
                  </button>
                  
                  <ul class = "dropdown-menu">
                     <li><a href = "#">Action</a></li>
                     <li><a href ="#">Another action</a></li>
                     <li><a href = "#">Something else here</a></li>
                     
                     <li class = "divider"></li>
                     <li><a href = "#">Separated link</a></li>
                  </ul>
                  
               </div><!-- /btn-group -->
               <input type = "text" class = "form-control">
               
            </div><!-- /input-group -->
         </div><!-- /.col-lg-6 --><br>
         
         <div class = "col-lg-6">
            <div class = "input-group">
               <input type = "text" class = "form-control">
               <div class = "input-group-btn">
                  
                  <button type = "button" class = "btn btn-default" tabindex = "-1">
                     Dropdown Menu
                  </button>
                  
                  <button type = "button" class = "btn btn-default dropdown-toggle" 
                     data-toggle = "dropdown" tabindex = "-1">
                     
                     <span class = "caret"></span>
                     <span class = "sr-only">Toggle Dropdown</span>
                  </button>
                  
                  <ul class = "dropdown-menu pull-right">
                     <li><a href = "#">Action</a></li>
                     <li><a href = "#">Another action</a></li>
                     <li><a href = "#">Something else here</a></li>
                     
                     <li class = "divider"></li>
                     <li><a href = "#">Separated link</a></li>
                  </ul>
               
               </div><!-- /btn-group -->
            </div><!-- /input-group -->
         </div><!-- /.col-lg-6 -->
         
      </div><!-- /.row -->
   </form>
   
</div>

Bootstrap fournit quelques options différentes pour styliser les éléments de navigation. Tous partagent le même balisage et la même classe de base,.nav. Bootstrap fournit également une classe d'assistance, pour partager le balisage et les états. Échangez les classes de modificateurs pour basculer entre chaque style.

Navigation tabulaire ou onglets

Pour créer un menu de navigation à onglets -

  • Commencez par une liste non ordonnée de base avec la classe de base de .nav

  • Ajouter une classe .nav-tabs.

L'exemple suivant illustre ceci -

<p>Tabs Example</p>

<ul class = "nav nav-tabs">
   <li class = "active"><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>

Navigation de pilules

Pilules de base

Pour transformer les onglets en pilules, suivez les mêmes étapes que ci-dessus, utilisez la classe .nav-pills au lieu de .nav-tabs.

L'exemple suivant illustre ceci -

<p>Pills Example</p>

<ul class = "nav nav-pills">
   <li class = "active"><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>

Pilules verticales

Vous pouvez empiler les pilules verticalement en utilisant la classe .nav-stacked avec les classes - .nav, .nav-pills.

L'exemple suivant illustre ceci -

<p>Vertical Pills Example</p>

<ul class = "nav nav-pills nav-stacked">
   <li class = "active"><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>

Nav justifié

Vous pouvez créer des onglets ou des pilules de largeur égale à celle de leur parent sur des écrans plus larges que 768 px en utilisant la classe .nav-justified de même que .nav, .nav-tabs ou .nav, .nav-pillsrespectivement. Sur les écrans plus petits, les liens de navigation sont empilés.

L'exemple suivant illustre ceci -

<p>Justified Nav Elements Example</p>

<ul class = "nav nav-pills nav-justified">
   <li class = "active"><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>

<br>
<br>
<br>

<ul class = "nav nav-tabs nav-justified">
   <li class = "active"><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>

Liens désactivés

Pour chacun des .nav classes, si vous ajoutez le .disabled classe, cela créera un lien gris qui désactive également le :hover état comme indiqué dans l'exemple suivant -

<p>Disabled Link Example</p>

<ul class = "nav nav-pills">
   <li class = "active"><a href = "#">Home</a></li>
   <li><a href = "#">SVN</a></li>
   
   <li class = "disabled"><a href = "#">iOS(disabled link)</a></li>
   <li><a href = "#">VB.Net</a></li>
   <li><a href = "#">Java</a></li>
   <li><a href = "#">PHP</a></li>
</ul>

<br>
<br>

<ul class = "nav nav-tabs">
   <li class = "active"><a href = "#">Home</a></li>
   <li><a href = "#">SVN</a></li>
   <li><a href = "#">iOS</a></li>
   
   <li class = "disabled"><a href = "#">VB.Net(disabled link)</a></li>
   <li><a href = "#">Java</a></li>
   <li><a href = "#">PHP</a></li>
</ul>
Cette classe ne changera que l'apparence de <a>, pas sa fonctionnalité. Utilisez JavaScript personnalisé pour désactiver les liens ici.

Listes déroulantes

Les menus de navigation partagent une syntaxe similaire avec les menus déroulants. Par défaut, vous avez un élément de liste qui a une ancre fonctionnant en conjonction avec certains attributs de données pour déclencher une liste non ordonnée avec un.dropdown-menu classe.

Onglets avec listes déroulantes

Pour ajouter des listes déroulantes à l'onglet -

  • Commencez par une liste non ordonnée de base avec la classe de base de .nav

  • Ajouter la classe .nav-tabs.

  • Maintenant, ajoutez une liste non ordonnée avec un .dropdown-menu classe.

<p>Tabs With Dropdown Example</p>

<ul class = "nav nav-tabs">
   <li class = "active"><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 class = "dropdown">
      <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#">
         Java 
         <span class = "caret"></span>
      </a>
      
      <ul class = "dropdown-menu">
         <li><a href = "#">Swing</a></li>
         <li><a href = "#">jMeter</a></li>
         <li><a href = "#">EJB</a></li>
         <li class = "divider"></li>
         <li><a href = "#">Separated link</a></li>
      </ul>
      
   </li>
	
   <li><a href = "#">PHP</a></li>
</ul>

Pilules avec listes déroulantes

Pour faire la même chose avec les pilules, remplacez simplement le .nav-tabs classe avec .nav-pills comme indiqué dans l'exemple suivant.

<p>Pills With Dropdown Example</p>

<ul class = "nav nav-pills">
   <li class = "active"><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 class = "dropdown">
      <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#">
         Java <span class = "caret"></span>
      </a>
      
      <ul class = "dropdown-menu">
         <li><a href = "#">Swing</a></li>
         <li><a href = "#">jMeter</a></li>
         <li><a href = "#">EJB</a></li>
         
         <li class = "divider"></li>
         <li><a href = "#">Separated link</a></li>
      </ul>
      
   </li>
	
   <li><a href = "#">PHP</a></li>
</ul>

La barre de navigation est l'une des principales fonctionnalités des sites Bootstrap. Les navbars sont des composants «méta» réactifs qui servent d'en-têtes de navigation pour votre application ou votre site. Les barres de navigation se réduisent dans les vues mobiles et deviennent horizontales à mesure que la largeur de la fenêtre disponible augmente. À la base, la barre de navigation comprend le style des noms de site et la navigation de base.

Barre de navigation par défaut

Pour créer une barre de navigation par défaut -

  • Ajouter les classes .navbar, .navbar-default à la balise <nav>.

  • Ajouter role = "navigation" à l'élément ci-dessus, pour faciliter l'accessibilité.

  • Ajouter une classe d'en-tête .navbar-headerà l'élément <div>. Inclure un élément <a> avec la classenavbar-brand. Cela donnera au texte une taille légèrement plus grande.

  • Pour ajouter des liens à la barre de navigation, ajoutez simplement une liste non ordonnée avec les classes de .nav, .navbar-nav.

L'exemple suivant illustre ceci -

<nav class = "navbar navbar-default" role = "navigation">

   <div class = "navbar-header">
      <a class = "navbar-brand" href = "#">TutorialsPoint</a>
   </div>
   
   <div>
      <ul class = "nav navbar-nav">
         <li class = "active"><a href = "#">iOS</a></li>
         <li><a href = "#">SVN</a></li>
			
         <li class = "dropdown">
            <a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">
               Java 
               <b class = "caret"></b>
            </a>
            
            <ul class = "dropdown-menu">
               <li><a href = "#">jmeter</a></li>
               <li><a href = "#">EJB</a></li>
               <li><a href = "#">Jasper Report</a></li>
               
               <li class = "divider"></li>
               <li><a href = "#">Separated link</a></li>
               
               <li class = "divider"></li>
               <li><a href = "#">One more separated link</a></li>
            </ul>
         </li>
      </ul>
   </div>
</nav>

Barre de navigation réactive

Pour ajouter des fonctionnalités réactives à la barre de navigation, le contenu que vous souhaitez réduire doit être enveloppé dans un <div> avec des classes .collapse, .navbar-collapse. La nature de l'effondrement est déclenchée par un bouton qui a la classe de.navbar-toggleet comporte ensuite deux éléments de données. La première,data-toggle, est utilisé pour indiquer au JavaScript quoi faire avec le bouton, et le second, data-target, indique quel élément basculer. ensuite avec une classe .icon-barcréer ce que nous aimons appeler le bouton hamburger. Cela fera basculer les éléments qui sont dans le .nav-collapse<div>. Pour que cette fonctionnalité fonctionne, vous devez inclure le plugin Bootstrap Collapse .

L'exemple suivant illustre ceci -

<nav class = "navbar navbar-default" role = "navigation">
   
   <div class = "navbar-header">
      <button type = "button" class = "navbar-toggle" 
         data-toggle = "collapse" data-target = "#example-navbar-collapse">
         <span class = "sr-only">Toggle navigation</span>
         <span class = "icon-bar"></span>
         <span class = "icon-bar"></span>
         <span class = "icon-bar"></span>
      </button>
		
      <a class = "navbar-brand" href = "#">TutorialsPoint</a>
   </div>
   
   <div class = "collapse navbar-collapse" id = "example-navbar-collapse">
	
      <ul class = "nav navbar-nav">
         <li class = "active"><a href = "#">iOS</a></li>
         <li><a href = "#">SVN</a></li>
			
         <li class = "dropdown">
            <a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">
               Java 
               <b class = "caret"></b>
            </a>
            
            <ul class = "dropdown-menu">
               <li><a href = "#">jmeter</a></li>
               <li><a href = "#">EJB</a></li>
               <li><a href = "#">Jasper Report</a></li>
               
               <li class = "divider"></li>
               <li><a href = "#">Separated link</a></li>
               
               <li class = "divider"></li>
               <li><a href = "#">One more separated link</a></li>
            </ul>
         </li>
      </ul>
   </div>
</nav>

Formulaires dans la barre de navigation

Au lieu d'utiliser les formulaires basés sur les classes par défaut des formulaires Chapter Bootstrap , formulaires qui se trouvent dans la barre de navigation, utilisez le.navbar-formclasse. Cela garantit l'alignement vertical correct du formulaire et le comportement réduit dans les fenêtres étroites. Utilisez les options d'alignement (expliquées dans la section Alignement des composants) pour décider de leur emplacement dans le contenu de la barre de navigation.

L'exemple suivant illustre ceci -

<nav class = "navbar navbar-default" role = "navigation">
   
   <div class = "navbar-header">
      <a class = "navbar-brand" href = "#">TutorialsPoint</a>
   </div>
   
   <div>
      <form class = "navbar-form navbar-left" role = "search">
         
         <div class = "form-group">
            <input type = "text" class = "form-control" placeholder = "Search">
         </div>
         <button type = "submit" class = "btn btn-default">Submit</button>
         
      </form>    
   </div>
   
</nav>

Boutons dans la barre de navigation

Vous pouvez ajouter des boutons en utilisant la classe .navbar-btn aux éléments <button> ne résidant pas dans un <form> pour les centrer verticalement dans la barre de navigation. .navbar-btn peut être utilisé sur les éléments <a> et <input>.

Ne pas utiliser .navbar-btnni les classes de boutons standard sur les éléments <a> dans .navbar-nav.

L'exemple suivant illustre ceci -

<nav class = "navbar navbar-default" role = "navigation">
   
   <div class = "navbar-header">
      <a class = "navbar-brand" href = "#">TutorialsPoint</a>
   </div>
   
   <div>
      <form class = "navbar-form navbar-left" role = "search">
         <div class = "form-group">
            <input type = "text" class = "form-control" placeholder = "Search">
         </div>
			
         <button type = "submit" class = "btn btn-default">Submit Button</button>
      </form>  
		
      <button type = "button" class = "btn btn-default navbar-btn">Navbar Button</button>
   </div>
</nav>

Texte dans la barre de navigation

Pour envelopper des chaînes de texte dans un élément, utilisez la classe .navbar-text. Ceci est généralement utilisé avec la balise <p> pour un interligne et une couleur appropriés. L'exemple suivant illustre ceci -

<nav class = "navbar navbar-default" role = "navigation">
   <div class = "navbar-header">
      <a class = "navbar-brand" href = "#">TutorialsPoint</a>
   </div>
   
   <div>
      <p class = "navbar-text">Signed in as Thomas</p>
   </div>
</nav>

Liens non-nav

Si vous souhaitez utiliser les liens standard qui ne figurent pas dans le composant de navigation normal de la barre de navigation, utilisez la classe navbar-link pour ajouter des couleurs appropriées pour les options par défaut et inverse de la barre de navigation, comme indiqué dans l'exemple suivant -

<nav class = "navbar navbar-default" role = "navigation">
   <div class = "navbar-header">
      <a class = "navbar-brand" href = "#">TutorialsPoint</a>
   </div>
   
   <div>
      <p class = "navbar-text navbar-right">
         Signed in as 
         <a href = "#" class = "navbar-link">Thomas</a>
      </p>
   </div>
</nav>

Alignement des composants

Vous pouvez aligner les composants tels que les liens de navigation, les formulaires, les boutons ou le texte à gauche ou à droite dans une barre de navigation à l'aide des classes utilitaires.navbar-left ou .navbar-right. Les deux classes ajouteront un flottant CSS dans la direction spécifiée. L'exemple suivant illustre ceci -

<nav class = "navbar navbar-default" role = "navigation">
   
   <div class = "navbar-header">
      <a class = "navbar-brand" href = "#">TutorialsPoint</a>
   </div>
   
   <div>
      
      <!--Left Align-->
      <ul class = "nav navbar-nav navbar-left">
         <li class = "dropdown">
            <a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">
               Java 
               <b class = "caret"></b>
            </a>
            
            <ul class = "dropdown-menu">
               <li><a href = "#">jmeter</a></li>
               <li><a href = "#">EJB</a></li>
               <li><a href = "#">Jasper Report</a></li>
               
               <li class = "divider"></li>
               <li><a href = "#">Separated link</a></li>
               
               <li class = "divider"></li>
               <li><a href = "#">One more separated link</a></li>
            </ul>
            
         </li>
      </ul>
      
      <form class = "navbar-form navbar-left" role = "search">
         <button type = "submit" class = "btn btn-default">Left align-Submit Button</button>
      </form> 
      
      <p class = "navbar-text navbar-left">Left align-Text</p>
      
      <!--Right Align-->
      <ul class = "nav navbar-nav navbar-right">
         <li class = "dropdown">
            <a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">
               Java 
               <b class = "caret"></b>
            </a>
            
            <ul class = "dropdown-menu">
               <li><a href = "#">jmeter</a></li>
               <li><a href = "#">EJB</a></li>
               <li><a href = "#">Jasper Report</a></li>
               
               <li class = "divider"></li>
               <li><a href = "#">Separated link</a></li>
               
               <li class = "divider"></li>
               <li><a href = "#">One more separated link</a></li>
            </ul>
            
         </li>
      </ul>
      
      <form class = "navbar-form navbar-right" role = "search">
         <button type = "submit" class = "btn btn-default">
            Right align-Submit Button
         </button>
      </form> 
		
      <p class = "navbar-text navbar-right">Right align-Text</p>
      
   </div>
</nav>

Fixé en haut

La barre de navigation Bootstrap peut être dynamique dans son positionnement. Par défaut, il s'agit d'un élément de niveau bloc qui prend son positionnement en fonction de son placement dans le HTML. Avec quelques classes d'aide, vous pouvez le placer en haut ou en bas de la page, ou vous pouvez le faire défiler de manière statique avec la page.

Si vous voulez que la barre de navigation soit fixée en haut, ajoutez une classe .navbar-fixed-top à la .navbar class. L'exemple suivant illustre ceci -

Pour éviter que la barre de navigation ne se trouve au-dessus d'un autre contenu dans le corps de la page, ajoutez au moins 50 pixels de remplissage à la balise <body> ou essayez vos propres valeurs.
<nav class = "navbar navbar-default navbar-fixed-top" role = "navigation">
   
   <div class = "navbar-header">
      <a class = "navbar-brand" href = "#">TutorialsPoint</a>
   </div>
   
   <div>
      <ul class = "nav navbar-nav">
         <li class = "active"><a href = "#">iOS</a></li>
         <li><a href = "#">SVN</a></li>
         
         <li class = "dropdown">
            <a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">
               Java
               <b class = "caret"></b>
            </a>
            
            <ul class = "dropdown-menu">
               <li><a href = "#">jmeter</a></li>
               <li><a href = "#">EJB</a></li>
               <li><a href = "#">Jasper Report</a></li>
               
               <li class = "divider"></li>
               <li><a href = "#">Separated link</a></li>
               
               <li class = "divider"></li>
               <li><a href = "#">One more separated link</a></li>
            </ul>
            
         </li>
      </ul>
   </div>
   
</nav>

Fixé en bas

Si vous voulez que la barre de navigation soit fixée au bas de la page, ajoutez une classe .navbar-fixed-bottom à la .navbar class. L'exemple suivant illustre ceci -

<nav class = "navbar navbar-default navbar-fixed-bottom" role = "navigation">
   
   <div class = "navbar-header">
      <a class = "navbar-brand" href = "#">TutorialsPoint</a>
   </div>
   
   <div>
      <ul class = "nav navbar-nav">
         <li class = "active"><a href = "#">iOS</a></li>
         <li><a href="#">SVN</a></li>
         
         <li class = "dropdown">
            <a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">
               Java
               <b class ="caret"></b>
            </a>
            
            <ul class = "dropdown-menu">
               <li><a href = "#">jmeter</a></li>
               <li><a href = "#">EJB</a></li>
               <li><a href = "#">Jasper Report</a></li>
               
               <li class = "divider"></li>
               <li><a href = "#">Separated link</a></li>
               
               <li class = "divider"></li>
               <li><a href = "#">One more separated link</a></li>
            </ul>
            
         </li>
      </ul>
   </div>
</nav>

Top statique

Pour créer une barre de navigation qui défile avec la page, ajoutez le .navbar-static-topclasse. Cette classe ne nécessite pas d'ajouter le remplissage au <body>.

<nav class = "navbar navbar-default navbar-static-top" role = "navigation">
   
   <div class = "navbar-header">
      <a class = "navbar-brand" href = "#">TutorialsPoint</a>
   </div>
   
   <div>
      <ul class = "nav navbar-nav">
         <li class = "active"><a href = "#">iOS</a></li>
         <li><a href = "#">SVN</a></li>
         
         <li class = "dropdown">
            <a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">
               Java
               <b class = "caret"></b>
            </a>
				
            <ul class = "dropdown-menu">
               <li><a href = "#">jmeter</a></li>
               <li><a href = "#">EJB</a></li>
               <li><a href = "#">Jasper Report</a></li>
               
               <li class = "divider"></li>
               <li><a href = "#">Separated link</a></li>
               
               <li class = "divider"></li>
               <li><a href = "#">One more separated link</a></li>
            </ul>
            
         </li>
      </ul>
   </div>
</nav>

Barre de navigation inversée

Pour créer une barre de navigation inversée avec un fond noir et du texte blanc, ajoutez simplement le .navbar-inverse classe à la .navbar classe comme illustré dans l'exemple suivant -

Pour éviter que la barre de navigation ne se trouve au-dessus d'un autre contenu dans le corps de la page, ajoutez au moins 50 pixels de remplissage à la balise <body> ou essayez vos propres valeurs.
<nav class = "navbar navbar-inverse" role = "navigation">
   
   <div class = "navbar-header">
      <a class = "navbar-brand" href = "#">TutorialsPoint</a>
   </div>
   
   <div>
      <ul class = "nav navbar-nav">
         <li class = "active"><a href = "#">iOS</a></li>
         <li><a href = "#">SVN</a></li>
         <li class = "dropdown">
            <a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">
               Java
               <b class = "caret"></b>
            </a>
            
            <ul class = "dropdown-menu">
               <li><a href = "#">jmeter</a></li>
               <li><a href = "#">EJB</a></li>
               <li><a href = "#">Jasper Report</a></li>
               
               <li class = "divider"></li>
               <li><a href = "#">Separated link</a></li>
               
               <li class = "divider"></li>
               <li><a href = "#">One more separated link</a></li>
            </ul>
            
         </li>
      </ul>
   </div>
</nav>

Les fil d'Ariane sont un excellent moyen d'afficher des informations hiérarchiques pour un site. Dans le cas des blogs, le fil d'Ariane peut afficher les dates de publication, les catégories ou les balises. Ils indiquent l'emplacement de la page actuelle dans une hiérarchie de navigation.

Un fil d'Ariane dans Bootstrap est simplement une liste non ordonnée avec une classe de .breadcrumb. Le séparateur est automatiquement ajouté par CSS (bootstrap.min.css) via la classe suivante -

.breadcrumb > li + li:before {
   color: #CCCCCC;
   content: "/ ";
   padding: 0 5px;
}

L'exemple suivant illustre le fil d'Ariane -

<ol class = "breadcrumb">
   <li><a href = "#">Home</a></li>
   <li><a href = "#">2013</a></li>
   <li class = "active">November</li>
</ol>

Ce chapitre traite de la fonction de pagination prise en charge par Bootstrap. Pagination, une liste non ordonnée est gérée par Bootstrap comme beaucoup d'autres éléments d'interface.

Pagination

Le tableau suivant répertorie les classes fournies par Bootstrap pour gérer la pagination.

Classe La description Exemple de code
.pagination Ajoutez cette classe pour obtenir la pagination sur votre page.
<ul class = "pagination">
   <li><a href = "#">&laquo;</a></li>
   <li><a href = "#">1</a></li>
   .......
</ul>
.disabled, .active Vous pouvez personnaliser les liens en utilisant .disabled pour les liens non cliquables et .active pour indiquer la page en cours.
<ul class = "pagination">
   <li class = "disabled"><a href = "#">&laquo;</a></li>
   <li class = "active"><a href = "#">1<span class = "sr-only">(current)</span></a></li>
   .......
</ul>
.pagination-lg, .pagination-sm Utilisez ces classes pour obtenir des articles de différentes tailles.
<ul class = "pagination pagination-lg">...</ul>
<ul class = "pagination">...</ul>
<ul class = "pagination pagination-sm">...</ul>

Pagination par défaut

L'exemple suivant montre l'utilisation de la classe .pagination discuté dans le tableau ci-dessus -

<ul class = "pagination">
   <li><a href = "#">&laquo;</a></li>
   <li><a href = "#">1</a></li>
   <li><a href = "#">2</a></li>
   <li><a href = "#">3</a></li>
   <li><a href = "#">4</a></li>
   <li><a href = "#">5</a></li>
   <li><a href = "#">&raquo;</a></li>
</ul>

États

L'exemple suivant montre l'utilisation de la classe .disabled, .active discuté dans le tableau ci-dessus -

<ul class = "pagination">
   <li><a href = "#">&laquo;</a></li>
   <li class = "active"><a href = "#">1</a></li>
   <li class = "disabled"><a href = "#">2</a></li>
   <li><a href = "#">3</a></li>
   <li><a href = "#">4</a></li>
   <li><a href = "#">5</a></li>
   <li><a href = "#">&raquo;</a></li>
</ul>

Dimensionnement

L'exemple suivant montre l'utilisation de classes pour le dimensionnement, .pagination-* discuté dans le tableau ci-dessus -

<ul class = "pagination pagination-lg">
   <li><a href = "#">&laquo;</a></li>
   <li><a href = "#">1</a></li>
   <li><a href = "#">2</a></li>
   <li><a href = "#">3</a></li>
   <li><a href = "#">4</a></li>
   <li><a href = "#">5</a></li>
   <li><a href = "#">&raquo;</a></li>
</ul>

<br>

<ul class = "pagination">
   <li><a href = "#">&laquo;</a></li>
   <li><a href = "#">1</a></li>
   <li><a href = "#">2</a></li>
   <li><a href = "#">3</a></li>
   <li><a href = "#">4</a></li>
   <li><a href = "#">5</a></li>
   <li><a href = "#">&raquo;</a></li>
</ul>

<br>

<ul class = "pagination pagination-sm">
   <li><a href = "#">&laquo;</a></li>
   <li><a href = "#">1</a></li>
   <li><a href = "#">2</a></li>
   <li><a href = "#">3</a></li>
   <li><a href = "#">4</a></li>
   <li><a href = "#">5</a></li>
   <li><a href = "#">&raquo;</a></li>
</ul>

Téléavertisseur

Si vous avez besoin de créer des liens de pagination simples qui vont au-delà du texte, le pager peut très bien fonctionner. Comme les liens de pagination, le pager est une liste non ordonnée. Par défaut, les liens sont centrés. Le tableau suivant répertorie les classes fournies par Bootstrap pour le pager.

Classe La description Exemple de code
.pager Ajoutez cette classe pour obtenir les liens du pager.
<ul class = "pager">
   <li><a href = "#">Previous</a></li>
   <li><a href = "#">Next</a></li>
</ul>
.Précédent Suivant Utiliser la classe .previous pour aligner à gauche et .next pour aligner les liens à droite.
<ul class = "pager">
   <li class = "previous"><a href = "#">&larr; Older</a></li>
   <li class = "next"><a href = "#">Newer &rarr;</a></li>
</ul>
.désactivée Ajoutez cette classe pour obtenir un look silencieux.
<ul class = "pager">
   <li class = "previous disabled"><a href = "#">&larr; Older</a></li>
   <li class = "next"><a href = "#">Newer &rarr;</a></li>
</ul>

Téléavertisseur par défaut

L'exemple suivant montre l'utilisation de la classe .pager discuté dans le tableau ci-dessus -

<ul class = "pager">
   <li><a href = "#">Previous</a></li>
   <li><a href = "#">Next</a></li>
</ul>

Liens alignés

L'exemple suivant montre l'utilisation de classes pour l'alignement, .previous, .next discuté dans le tableau ci-dessus -

<ul class = "pager">
   <li class = "previous"><a href = "#">&larr; Older</a></li>
   <li class = "next"><a href = "#">Newer &rarr;</a></li>
</ul>

États

L'exemple suivant montre l'utilisation de la classe .disabled discuté dans le tableau ci-dessus -

<ul class = "pager">
   <li class = "previous disabled"><a href = "#">&larr; Older</a></li>
   <li class = "next"><a href = "#">Newer &rarr;</a></li>
</ul>

Ce chapitre couvre les étiquettes Bootstrap. Les libellés sont parfaits pour offrir des décomptes, des conseils ou d'autres balisages pour les pages. Utiliser la classe.label pour afficher les étiquettes comme indiqué dans l'exemple suivant -

<h1>Example Heading <span class = "label label-default">Label</span></h1>
<h2>Example Heading <span class =" label label-default">Label</span></h2>
<h3>Example Heading <span class = "label label-default">Label</span></h3>
<h4>Example Heading <span class = "label label-default">Label</span></h4>

Vous pouvez modifier l'apparence des étiquettes à l'aide des classes de modificateurs telles que, label-default, label-primary, label-success, label-info, label-warning, label-danger comme indiqué dans l'exemple suivant -

<span class = "label label-default">Default Label</span>
<span class = "label label-primary">Primary Label</span>
<span class = "label label-success">Success Label</span>
<span class = "label label-info">Info Label</span>
<span class = "label label-warning">Warning Label</span>
<span class = "label label-danger">Danger Label</span>

Ce chapitre traite des badges Bootstrap. Les badges sont similaires aux étiquettes; la principale différence est que les coins sont plus arrondis.

Les badges sont principalement utilisés pour mettre en évidence des éléments nouveaux ou non lus. Pour utiliser des badges, ajoutez simplement<span class = "badge"> aux liens, aux navs Bootstrap, etc.

L'exemple suivant illustre ceci -

<a href = "#">Mailbox <span class = "badge">50</span></a>

Lorsqu'il n'y a pas d'éléments nouveaux ou non lus, les badges s'effondreront simplement via CSS :empty sélecteur, à condition qu'aucun contenu n'existe à l'intérieur.

États de navigation actifs

Vous pouvez placer des badges dans les états actifs des navigations de pilules et de listes. Vous pouvez y parvenir en plaçant<span class = "badge"> aux liens actifs, comme illustré dans l'exemple suivant -

<h4>Example for Active State in Pill </h4>

<ul class = "nav nav-pills">
   <li class = "active"><a href = "#">Home <span class ="badge">42</span></a></li>
   <li><a href = "#">Profile</a></li>
   <li><a href = "#">Messages <span class = "badge">3</span></a></li>
</ul>

<br>

<h4>Example for Active State in navigations</h4>

<ul class = "nav nav-pills nav-stacked" style = "max-width: 260px;">
   <li class = "active">
      <a href = "#">
         <span class = "badge pull-right">42</span>
         Home
      </a>
   </li>
	
   <li><a href = "#">Profile</a></li>
	
   <li>
      <a href = "#">
         <span class = "badge pull-right">3</span>
         Messages
      </a>
   </li>
</ul>

Ce chapitre abordera une autre fonctionnalité prise en charge par Bootstrap, le Jumbotron. Comme son nom l'indique, ce composant peut éventuellement augmenter la taille des en-têtes et ajouter beaucoup de marge pour le contenu de la page de destination. Pour utiliser le Jumbotron -

  • Créez un conteneur <div> avec la classe de .jumbotron.

  • En plus d'un <h1> plus grand, l' épaisseur de la police est réduite à 200px.

L'exemple suivant illustre ceci -

<div class = "container">

   <div class = "jumbotron">
      <h1>Welcome to landing page!</h1>
      <p>This is an example for jumbotron.</p>
      
      <p>
         <a class = "btn btn-primary btn-lg" role = "button">Learn more</a>
      </p>
   </div>
   
</div>

Pour obtenir un jumbotron de pleine largeur et sans coins arrondis, utilisez le .jumbotron classe en dehors de tout .container classes et ajoutez à la place un .container dans, comme indiqué dans l'exemple suivant -

<div class = "jumbotron">
   
   <div class = "container">
      <h1>Welcome to landing page!</h1>
      <p>This is an example for jumbotron.</p>
      
      <p>
         <a class = "btn btn-primary btn-lg" role = "button">Learn more</a>
      </p>
   </div>
   
</div>

L'en-tête de page est une petite fonctionnalité intéressante pour ajouter un espacement approprié autour des en-têtes d'une page. Ceci est particulièrement utile sur une page Web où vous pouvez avoir plusieurs titres de publication et avoir besoin d'un moyen d'ajouter une distinction à chacun d'entre eux. Pour utiliser un en-tête de page, enveloppez votre titre dans un <div> avec une classe de.page-header -

<div class = "page-header">
   <h1>
      Example page header 
      <small>Subtext for header</small>
   </h1>
</div>

<p>This is a sample text.This is a sample text.This is a sample text. This is a sample text.</p>

Ce chapitre traite des miniatures Bootstrap. De nombreux sites ont besoin d'un moyen de mettre en page des images, des vidéos, du texte, etc. dans une grille, et Bootstrap dispose d'un moyen simple de le faire avec des miniatures. Pour créer des miniatures à l'aide de Bootstrap -

  • Ajoutez une balise <a> avec la classe de .thumbnail autour d'une image.

  • Cela ajoute quatre pixels de remplissage et une bordure grise.

  • En survol, une lueur animée décrit l'image.

L'exemple suivant montre une miniature par défaut -

<div class = "row">
   <div class = "col-sm-6 col-md-3">
      <a href = "#" class = "thumbnail">
         <img src = "/bootstrap/images/kittens.jpg" alt = "Generic placeholder thumbnail">
      </a>
   </div>
   
   <div class = "col-sm-6 col-md-3">
      <a href = "#" class = "thumbnail">
         <img src = "/bootstrap/images/kittens.jpg" alt = "Generic placeholder thumbnail">
      </a>
   </div>
   
   <div class = "col-sm-6 col-md-3">
      <a href = "#" class = "thumbnail">
         <img src = "/bootstrap/images/kittens.jpg" alt = "Generic placeholder thumbnail">
      </a>
   </div>
   
   <div class = "col-sm-6 col-md-3">
      <a href = "#" class = "thumbnail">
         <img src = "/bootstrap/images/kittens.jpg" alt = "Generic placeholder thumbnail">
      </a>
   </div>
</div>

Ajout de contenu personnalisé

Maintenant que nous avons une miniature de base, il est possible d'ajouter n'importe quel type de contenu HTML comme des en-têtes, des paragraphes ou des boutons dans les miniatures. Suivez les étapes ci-dessous -

  • Modifiez la balise <a> qui a une classe de .thumbnail à un <div>.

  • À l'intérieur de cette <div>, vous pouvez ajouter tout ce dont vous avez besoin. Comme il s'agit d'un <div>, nous pouvons utiliser la convention de dénomination par défaut basée sur l'étendue pour le dimensionnement.

  • Si vous souhaitez regrouper plusieurs images, placez-les dans une liste non ordonnée, et chaque élément de la liste sera déplacé vers la gauche.

L'exemple suivant illustre ceci -

<div class = "row">
   <div class = "col-sm-6 col-md-3">
      <div class = "thumbnail">
         <img src = "/bootstrap/images/kittens.jpg" alt = "Generic placeholder thumbnail">
      </div>
      
      <div class = "caption">
         <h3>Thumbnail label</h3>
         <p>Some sample text. Some sample text.</p>
         
         <p>
            <a href = "#" class = "btn btn-primary" role = "button">
               Button
            </a> 
            
            <a href = "#" class = "btn btn-default" role = "button">
               Button
            </a>
         </p>
      </div>
   </div>
   
   <div class = "col-sm-6 col-md-3">
      <div class = "thumbnail">
         <img src = "/bootstrap/images/kittens.jpg" alt = "Generic placeholder thumbnail">
      </div>
      
      <div class = "caption">
         <h3>Thumbnail label</h3>
         <p>Some sample text. Some sample text.</p>
         
         <p>
            <a href = "#" class = "btn btn-primary" role = "button">
               Button
            </a> 
            
            <a href = "#" class = "btn btn-default" role = "button">
               Button
            </a>
         </p>
      </div>
   </div>
   
   <div class = "col-sm-6 col-md-3">
      <div class = "thumbnail">
         <img src = "/bootstrap/images/kittens.jpg" alt = "Generic placeholder thumbnail">
      </div>
      
      <div class = "caption">
         <h3>Thumbnail label</h3>
         <p>Some sample text. Some sample text.</p>
         
         <p>
            <a href = "#" class = "btn btn-primary" role = "button">
               Button
            </a> 
            
            <a href = "#" class = "btn btn-default" role =" button">
               Button
            </a>
         </p>
      </div>
   </div>
   
   <div class = "col-sm-6 col-md-3">
      <div class = "thumbnail">
         <img src = "/bootstrap/images/kittens.jpg" alt = "Generic placeholder thumbnail">
      </div>
      
      <div class = "caption">
         <h3>Thumbnail label</h3>
         <p>Some sample text. Some sample text.</p>
         
         <p>
            <a href = "#" class = "btn btn-primary" role = "button">
               Button
            </a> 
            
            <a href = "#" class = "btn btn-default" role = "button">
               Button
            </a>
         </p>
      </div>
   </div>
</div>

Ce chapitre abordera les alertes et les classes fournies par Bootstrap pour les alertes. Les alertes fournissent un moyen de styliser les messages à l'utilisateur. Ils fournissent des messages de retour contextuels pour les actions typiques des utilisateurs.

Vous pouvez ajouter une icône de fermeture facultative pour alerter. Pour le licenciement en ligne, utilisez le plugin Alerts jQuery .

Vous pouvez ajouter une alerte de base en créant un wrapper <div> et en ajoutant une classe de .alert et l'une des quatre classes contextuelles (par exemple, .alert-success, .alert-info, .alert-warning, .alert-danger). L'exemple suivant illustre ceci -

<div class = "alert alert-success">Success! Well done its submitted.</div>
<div class = "alert alert-info">Info! take this info.</div>
<div class = "alert alert-warning">Warning ! Dont submit this.</div>
<div class = "alert alert-danger">Error ! Change few things.</div>

Alertes de rejet

Pour créer une alerte de licenciement -

  • Ajoutez une alerte de base en créant un wrapper <div> et en ajoutant une classe de .alert et l'une des quatre classes contextuelles (par exemple, .alert-success, .alert-info, .alert-warning, .alert-danger)

  • Ajoutez également facultatif .alert-dismissable à la classe <div> ci-dessus.

  • Ajoutez un bouton de fermeture.

L'exemple suivant illustre ceci -

<div class = "alert alert-success alert-dismissable">
   <button type = "button" class = "close" data-dismiss = "alert" aria-hidden = "true">
      &times;
   </button>
	
   Success! Well done its submitted.
</div>

<div class = "alert alert-info alert-dismissable">
   <button type = "button" class = "close" data-dismiss = "alert" aria-hidden = "true">
      &times;
   </button>
	
   Info! take this info.
</div>

<div class = "alert alert-warning alert-dismissable">
   <button type = "button" class = "close" data-dismiss = "alert" aria-hidden = "true">
      &times;
   </button>
	
   Warning ! Dont submit this.
</div>

<div class = "alert alert-danger alert-dismissable">
   <button type = "button" class = "close" data-dismiss = "alert" aria-hidden = "true">
      &times;
   </button>
	
   Error ! Change few things.
</div>
Veillez à utiliser l'élément <button> avec l' attribut de données data-licenciement = "alert" .

Liens dans les alertes

Pour obtenir des liens dans les alertes -

  • Ajoutez une alerte de base en créant un wrapper <div> et en ajoutant une classe de .alert et l'une des quatre classes contextuelles (par exemple, .alert-success, .alert-info, .alert-warning, .alert-danger)

  • Utilisez le .alert-link classe utilitaire pour fournir rapidement des liens colorés correspondants dans n'importe quelle alerte.

<div class = "alert alert-success">
   <a href = "#" class = "alert-link">Success! Well done its submitted.</a>
</div>

<div class = "alert alert-info">
   <a href = "#" class = "alert-link">Info! take this info.</a>
</div>

<div class = "alert alert-warning">
   <a href = "#" class = "alert-link">Warning ! Dont submit this.</a>
</div>

<div class = "alert alert-danger">
   <a href = "#" class = "alert-link">Error ! Change few things.</a>
</div>

Ce chapitre traite des barres de progression Bootstrap. Le but des barres de progression est de montrer que les éléments sont en cours de chargement, en cours ou qu'une action est en cours concernant les éléments de la page.

Les barres de progression utilisent des transitions et des animations CSS3 pour obtenir certains de leurs effets. Ces fonctionnalités ne sont pas prises en charge dans Internet Explorer 9 et versions antérieures ou antérieures de Firefox. Opera 12 ne prend pas en charge les animations.

Barre de progression par défaut

Pour créer une barre de progression de base -

  • Ajoutez un <div> avec une classe de .progress.

  • Ensuite, à l'intérieur du <div> ci-dessus, ajoutez un <div> vide avec une classe de .progress-bar.

  • Ajoutez un attribut de style dont la largeur est exprimée en pourcentage. Dites par exemple, style = "60%"; indique que la barre de progression était à 60%.

Voyons un exemple ci-dessous -

<div class = "progress">
   <div class = "progress-bar" role = "progressbar" aria-valuenow = "60" 
      aria-valuemin = "0" aria-valuemax = "100" style = "width: 40%;">
      
      <span class = "sr-only">40% Complete</span>
   </div>
</div>

Barre de progression alternative

To create a progress bar with different styles −

  • Add a <div> with a class of .progress.

  • Next, inside the above <div>, add an empty <div> with a class of .progress-bar and class progress-bar-* where * could be success, info, warning, danger.

  • Add a style attribute with the width expressed as a percentage. Say for example, style = "60%"; indicates that the progress bar was at 60%.

Let us see an example below −

<div class = "progress">
   <div class = "progress-bar progress-bar-success" role = "progressbar" 
      aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 90%;">
      
      <span class = "sr-only">90% Complete (Sucess)</span>
   </div>
</div>

<div class = "progress">
   <div class = "progress-bar progress-bar-info" role = "progressbar" 
      aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 30%;">
      
      <span class = "sr-only">30% Complete (info)</span>
   </div>
</div>

<div class = "progress">
   <div class = "progress-bar progress-bar-warning" role = "progressbar" 
      aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 20%;">
      
      <span class = "sr-only">20%Complete (warning)</span>
   </div>
</div>

<div class = "progress">
   <div class = "progress-bar progress-bar-danger" role = "progressbar" 
      aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 10%;">
      
      <span class = "sr-only">10% Complete (danger)</span>
   </div>
</div>

Striped Progress Bar

To create a striped progress bar −

  • Add a <div> with a class of .progress and .progress-striped.

  • Next, inside the above <div>, add an empty <div> with a class of .progress-bar and class progress-bar-* where * could be success, info, warning, danger.

  • Add a style attribute with the width expressed as a percentage. Say for example, style = "60%"; indicates that the progress bar was at 60%.

Let us see an example below −

<div class = "progress progress-striped">
   <div class = "progress-bar progress-bar-success" role = "progressbar" 
      aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 90%;">
      
      <span class = "sr-only">90% Complete (Sucess)</span>
   </div>
</div>

<div class = "progress progress-striped">
   <div class = "progress-bar progress-bar-info" role = "progressbar"
      aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 30%;">
      
      <span class = "sr-only">30% Complete (info)</span>
   </div>
</div>

<div class = "progress progress-striped">
   <div class = "progress-bar progress-bar-warning" role = "progressbar" 
      aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style="width: 20%;">
      
      <span class = "sr-only">20%Complete (warning)</span>
   </div>
</div>

<div class = "progress progress-striped">
   <div class = "progress-bar progress-bar-danger" role = "progressbar" 
      aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 10%;">
      
      <span class = "sr-only">10% Complete (danger)</span>
   </div>
</div>

Animated Progress Bar

To create an animated progress bar −

  • Add a <div> with a class of .progress and .progress-striped. Also add class .active to .progress-striped.

  • Next, inside the above <div>, add an empty <div> with a class of .progress-bar.

  • Add a style attribute with the width expressed as a percentage. Say for example, style = "60%"; indicates that the progress bar was at 60%.

This will animate the stripes right to left.

Let us see an example below −

<div class = "progress progress-striped active">
   <div class = "progress-bar progress-bar-success" role = "progressbar" 
      aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 40%;">
      
      <span class = "sr-only">40% Complete</span>
   </div>
</div>

Stacked Progress Bar

You can even stack multiple progress bars. Place the multiple progress bars into the same .progress to stack them as seen in the following example −

<div class = "progress">
   
   <div class = "progress-bar progress-bar-success" role = "progressbar" 
      aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 40%;">
      
      <span class = "sr-only">40% Complete</span>
   </div>
   
   <div class = "progress-bar progress-bar-info" role = "progressbar" 
      aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 30%;">
      
      <span class = "sr-only">30% Complete (info)</span>
   </div>
   
   <div class = "progress-bar progress-bar-warning" role = "progressbar" 
      aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 20%;">
      
      <span class = "sr-only">20%Complete (warning)</span>
   </div>
   
</div>

This chapter discusses about Media object. These are abstract object styles for building various types of components (like blog comments, Tweets, etc.) that feature a left-aligned or right-aligned image alongside the textual content. The goal of the media object is to make the code for developing these blocks of information drastically shorter.

The goal of media objects (light markup, easy extendability) is achieved by applying classes to some of the simple markup. There are two forms to the media object −

  • .media − This class allows to float a media object (images, video, and audio) to the left or right of a content block.

  • .media-list − If you are preparing a list where the items will be part of an unordered list, use a class. useful for comment threads or articles lists.

Let us see an example below of default media object −

<div class = "media">
   <a class = "pull-left" href = "#">
      <img class = "media-object" src = "/bootstrap/images/64.jpg" alt = "Media Object">
   </a>
   
   <div class = "media-body">
      <h4 class = "media-heading">Media heading</h4>
      This is some sample text. This is some sample text. 
      This is some sample text. This is some sample text.
      This is some sample text. This is some sample text. 
      This is some sample text. This is some sample text.
   </div>
</div>

<div class = "media">
   <a class = "pull-left" href = "#">
      <img class = "media-object" src = "/bootstrap/images/64.jpg" alt = "Media Object">
   </a>
   
   <div class = "media-body">
      <h4 class = "media-heading">Media heading</h4>
      This is some sample text. This is some sample text. 
      This is some sample text. This is some sample text.
      This is some sample text. This is some sample text. 
      This is some sample text. This is some sample text.
      
      <div class = "media">
         <a class = "pull-left" href = "#">
            <img class = "media-object" src = "/bootstrap/images/64.jpg" alt = "Media Object">
         </a>
         
         <div class = "media-body">
            <h4 class = "media-heading">Media heading</h4>
            This is some sample text. This is some sample text. 
            This is some sample text. This is some sample text.
            This is some sample text. This is some sample text. 
            This is some sample text. This is some sample text.
         </div>
      </div>
   </div>
</div>

Let us see an example of media list −

<ul class = "media-list">
   <li class = "media">
      <a class = "pull-left" href = "#">
         <img class = "media-object" src = "/bootstrap/images/64.jpg" alt = "Generic placeholder image">
      </a>
      
      <div class = "media-body">
         <h4 class = "media-heading">Media heading</h4>
			
         <p>
            This is some sample text. This is some sample text. 
            This is some sample text. This is some sample text.
            This is some sample text. This is some sample text. 
            This is some sample text. This is some sample text.
         </p>
         
         <!-- Nested media object -->
         <div class = "media">
            <a class = "pull-left" href = "#">
               <img class = "media-object" src = "/bootstrap/images/64.jpg" 
                  alt = "Generic placeholder image">
            </a>
            
            <div class = "media-body">
               <h4 class = "media-heading">Nested media heading</h4>
               This is some sample text. This is some sample text. 
               This is some sample text. This is some sample text.
               This is some sample text. This is some sample text. 
               This is some sample text. This is some sample text.
               
               <!-- Nested media object -->
               <div class = "media">
                  <a class = "pull-left" href = "#">
                     <img class = "media-object" src = "/bootstrap/images/64.jpg" 
                        alt = "Generic placeholder image">
                  </a>
                  
                  <div class = "media-body">
                     <h4 class = "media-heading">Nested media heading</h4>
                     This is some sample text. This is some sample text. 
                     This is some sample text. This is some sample text.
                     This is some sample text. This is some sample text. 
                     This is some sample text. This is some sample text.
                  </div>
               </div>
            </div>
         </div>
         
         <!-- Nested media object -->
         <div class = "media">
            <a class = "pull-left" href = "#">
               <img class = "media-object" src = "/bootstrap/images/64.jpg"
                  alt = "Generic placeholder image">
            </a>
            
            <div class = "media-body">
               <h4 class = "media-heading">Nested media heading</h4>
               This is some sample text. This is some sample text. 
               This is some sample text. This is some sample text.
               This is some sample text. This is some sample text. 
               This is some sample text. This is some sample text.
            </div>
         </div>
      </div>
   </li>
   
   <li class = "media">
      <a class = "pull-right" href = "#">
         <img class = "media-object" src = "/bootstrap/images/64.jpg" 
            alt = "Generic placeholder image">
      </a>
      
      <div class = "media-body">
         <h4 class = "media-heading">Media heading</h4>
         This is some sample text. This is some sample text. 
         This is some sample text. This is some sample text.
         This is some sample text. This is some sample text. 
         This is some sample text. This is some sample text.
      </div>
   </li>
</ul>

The purpose of list group component is to render complex and customized content in lists. To get a basic list group −

  • Add the class .list-group to element <ul>.

  • Add class .list-group-item to <li>.

The following example demonstrates this −

<ul class = "list-group">
   <li class = "list-group-item">Free Domain Name Registration</li>
   <li class = "list-group-item">Free Window Space hosting</li>
   <li class = "list-group-item">Number of Images</li>
   <li class = "list-group-item">24*7 support</li>
   <li class = "list-group-item">Renewal cost per year</li>
</ul>

Adding Badges to List Group

We can add the badges component to any list group item and it will automatically be positioned on the right. Just add <span class = "badge"> within the <li> element. The following example demonstrates this −

<ul class = "list-group">
   <li class = "list-group-item">Free Domain Name Registration</li>
   <li class = "list-group-item">Free Window Space hosting</li>
   <li class = "list-group-item">Number of Images</li>
   
   <li class = "list-group-item">
      <span class = "badge">New</span>
      24*7 support
   </li>
   
   <li class = "list-group-item">Renewal cost per year</li>
   
   <li class = "list-group-item">
      <span class = "badge">New</span>
      Disocunt Offer
   </li>
</ul>

Linking List Group Items

By using the anchor tags instead of list items, we can link the list groups. We need to use <div> instead of <ul> element. The following example demonstrates this −

<a href = "#" class = "list-group-item active">
   Free Domain Name Registration
</a>

<a href = "#" class = "list-group-item">24*7 support</a>
<a href = "#" class = "list-group-item">Free Window Space hosting</a>
<a href = "#" class = "list-group-item">Number of Images</a>
<a href = "#" class = "list-group-item">Renewal cost per year</a>

Add Custom Content to List Group

We can add any HTML content to the above linked list groups. The following example demonstrates this −

<div class = "list-group">
   <a href = "#" class = "list-group-item active">
      <h4 class = "list-group-item-heading">
         Starter Website Package
      </h4>
   </a>
   
   <a href = "#" class = "list-group-item">
      <h4 class = "list-group-item-heading">
         Free Domain Name Registration
      </h4>
      
      <p class = "list-group-item-text">
         You will get a free domain registration with website pages.
      </p>
   </a>
   
   <a href = "#" class = "list-group-item">
      <h4 class = "list-group-item-heading">
         24*7 support
      </h4>
      
      <p class = "list-group-item-text">
         We provide 24*7 support.
      </p>
   </a>
</div>

<div class = "list-group">
   <a href = "#" class = "list-group-item active">
      <h4 class = "list-group-item-heading">
         Business Website Package
      </h4>
   </a>
   
   <a href = "#" class="list-group-item">
      <h4 class = "list-group-item-heading">
         Free Domain Name Registration
      </h4>
      
      <p class = "list-group-item-text">
         You will get a free domain registration with website pages.
      </p>
   </a>
   
   <a href = "#" class = "list-group-item">
      <h4 class = "list-group-item-heading">24*7 support</h4>
      <p class = "list-group-item-text">We provide 24*7 support.</p>
   </a>
</div>

This chapter will discuss about Bootstrap panels. Panel components are used when you want to put your DOM component in a box. To get a basic panel, just add class .panel to the <div> element. Also add class .panel-default to this element as shown in the following example −

<div class = "panel panel-default">
   <div class = "panel-body">
      This is a Basic panel
   </div>
</div>

Panel with Heading

There are two ways to add panel heading −

  • Use .panel-heading class to easily add a heading container to your panel.

  • Use any <h1>-<h6> with a .panel-title class to add a pre-styled heading.

The following example demonstrates both the ways −

<div class = "panel panel-default">
   <div class = "panel-heading">
      Panel heading without title
   </div>
   
   <div class = "panel-body">
      Panel content
   </div>
</div>

<div class = "panel panel-default">
   <div class = "panel-heading">
      <h3 class = "panel-title">
         Panel With title
      </h3>
   </div>
   
   <div class = "panel-body">
      Panel content
   </div>
</div>

Panneau avec pied de page

Vous pouvez ajouter des pieds de page aux panneaux, en enveloppant des boutons ou du texte secondaire dans une classe contenant <div> .panel-footer. L'exemple suivant illustre cela.

<div class = "panel panel-default">
   <div class = "panel-body">
      This is a Basic panel
   </div>
   
   <div class = "panel-footer">Panel footer</div>
</div>
Les pieds de page de panneau n'héritent pas des couleurs et des bordures lors de l'utilisation de variations contextuelles car ils ne sont pas censés être au premier plan.

Alternatives contextuelles du panneau

Utilisez des classes d'état contextuelles telles que, panel-primary, panel-success, panel-info, panel-warning, panel-danger, pour rendre un panel plus significatif dans un contexte particulier.

<div class = "panel panel-primary">
   <div class = "panel-heading">
      <h3 class = "panel-title">Panel title</h3>
   </div>
   
   <div class = "panel-body">
      This is a Basic panel
   </div>
</div>

<div class = "panel panel-success">
   <div class = "panel-heading">
      <h3 class = "panel-title">Panel title</h3>
   </div>
   
   <div class = "panel-body">
      This is a Basic panel
   </div>
</div>

<div class = "panel panel-info">
   <div class = "panel-heading">
      <h3 class = "panel-title">Panel title</h3>
   </div>
   
   <div class = "panel-body">
      This is a Basic panel
   </div>
</div>

<div class = "panel panel-warning">
   <div class = "panel-heading">
      <h3 class = "panel-title">Panel title</h3>
   </div>
   
   <div class = "panel-body">
      This is a Basic panel
   </div>
</div>

<div class = "panel panel-danger">
   <div class = "panel-heading">
      <h3 class = "panel-title">Panel title</h3>
   </div>
   
   <div class = "panel-body">
      This is a Basic panel
   </div>
</div>

Panneau avec tables

Pour obtenir une table non bordée dans un panneau, utilisez la classe .tabledans le panneau. Supposons qu'il y ait un <div> contenant.panel-body, nous ajoutons une bordure supplémentaire en haut du tableau pour la séparation. S'il n'y a pas de <div> contenant.panel-body, puis le composant passe de l'en-tête du panneau au tableau sans interruption.

L'exemple suivant illustre ceci -

<div class = "panel panel-default">
   <div class = "panel-heading">
      <h3 class = "panel-title">Panel title</h3>
   </div>
   
   <div class = "panel-body">
      This is a Basic panel
   </div>
   
   <table class = "table">
      <tr>
         <th>Product</th>
         <th>Price </th>
      </tr>
      
      <tr>
         <td>Product A</td>
         <td>200</td>
      </tr>
      
      <tr>
         <td>Product B</td>
         <td>400</td>
      </tr>
   </table>
</div>

<div class = "panel panel-default">
   <div class = "panel-heading">Panel Heading</div>
   
   <table class = "table">
      <tr>
         <th>Product</th>
         <th>Price </th>
      </tr>
      
      <tr>
         <td>Product A</td>
         <td>200</td>
      </tr>
      
      <tr>
         <td>Product B</td>
         <td>400</td>
      </tr>
   </table>
</div>

Panneau avec groupes de listes

Vous pouvez inclure des groupes de listes dans n'importe quel panneau. Créer un panneau en ajoutant une classe.panelà l'élément <div>. Ajouter également une classe.panel-defaultà cet élément. Maintenant, dans ce panneau, incluez vos groupes de listes. Vous pouvez apprendre à créer un groupe de listes à partir du chapitre Groupes de listes .

<div class = "panel panel-default">
   <div class ="panel-heading">Panel heading</div>
   
   <div class = "panel-body">
      <p>This is a Basic panel content. This is a Basic panel content.
         This is a Basic panel content. This is a Basic panel content.
         This is a Basic panel content. This is a Basic panel content.
         This is a Basic panel content.</p>
   </div>
   
   <ul class = "list-group">
      <li class = "list-group-item">Free Domain Name Registration</li>
      <li class = "list-group-item">Free Window Space hosting</li>
      <li class = "list-group-item">Number of Images</li>
      <li class = "list-group-item">24*7 support</li>
      <li class = "list-group-item">Renewal cost per year</li>
   </ul>
</div>

Un puits est un conteneur dans <div> qui fait apparaître le contenu enfoncé ou un effet d'insertion sur la page. Pour créer un puits, enveloppez simplement le contenu que vous souhaitez voir apparaître dans le puits avec un <div> contenant la classe de.well. L'exemple suivant montre un puits par défaut -

<div class = "well">Hi, am in well !!</div>

Dimensionnement

Vous pouvez modifier la taille du puits en utilisant les classes facultatives telles que, well-lg ou well-lg. Ces classes sont utilisées en conjonction avec.wellclasse. Ceux-ci affectent le rembourrage, rendant le puits plus grand ou plus petit selon la classe.

<div class = "well well-lg">Hi, am in large well !!</div>
<div class = "well well-sm">Hi, am in small well !!</div>

Les composants abordés dans les chapitres précédents sous Layout Componentsne sont que le début. Bootstrap est livré avec 12 plugins jQuery qui étendent les fonctionnalités et peuvent ajouter plus d'interaction à votre site. Pour commencer avec les plugins JavaScript de Bootstrap, vous n'avez pas besoin d'être un développeur JavaScript avancé. En utilisant l'API Bootstrap Data, la plupart des plugins peuvent être déclenchés sans écrire une seule ligne de code.

Les plugins Bootstrap peuvent être inclus sur votre site sous deux formes -

  • Individually- Utilisation des fichiers * .js individuels de Bootstrap . Certains plugins et composants CSS dépendent d'autres plugins. Si vous incluez des plugins individuellement, assurez-vous de vérifier ces dépendances dans la documentation.

  • Ou compiled (all at once)- Utilisation de bootstrap.js ou du minified bootstrap.min.js . N'essayez pas d'inclure les deux, car bootstrap.js et bootstrap.min.js contiennent tous les plugins dans un seul fichier.

Tous les plugins dépendent de jQuery. Donc jQuery doit être inclus avant les fichiers du plugin. Vérifiez bower.json pour voir quelles versions de jQuery sont prises en charge.

Attributs de données

  • Tous les plugins Bootstrap sont accessibles à l'aide de l'API Data incluse. Par conséquent, vous n'avez pas besoin d'inclure une seule ligne de JavaScript pour appeler l'une des fonctionnalités du plugin.

  • Dans certaines situations, il peut être souhaitable de désactiver cette fonctionnalité de Data API. Si vous devez désactiver l'API de données, vous pouvez dissocier les attributs en ajoutant la ligne suivante de JavaScript -

$(document).off('.data-api')
  • Pour désactiver un plugin spécifique / unique, incluez simplement le nom du plugin en tant qu'espace de noms avec l'espace de noms data-api comme ceci -

$(document).off('.alert.data-api')

API programmatique

Les développeurs de Bootstrap estiment que vous devriez pouvoir utiliser tous les plugins uniquement via l'API JavaScript. Toutes les API publiques sont des méthodes uniques, chaînables, et renvoient la collection sur laquelle agit, par exemple -

$(".btn.danger").button("toggle").addClass("fat")

Toutes les méthodes acceptent un objet d'options optionnel, une chaîne qui cible une méthode particulière, ou rien (qui lance un plugin avec un comportement par défaut) comme indiqué ci-dessous -

// initialized with defaults
$("#myModal").modal() // initialized with no keyboard $("#myModal").modal({ keyboard: false })  

// initializes and invokes show immediately
$("#myModal").modal('show')

Chaque plugin expose également son constructeur brut sur un Constructorpropriété: $ .fn.popover.Constructor . Si vous souhaitez obtenir une instance de plugin particulière, récupérez-la directement à partir d'un élément -

$('[rel = popover]').data('popover').

Pas de conflit

Les plugins Bootstrap peuvent parfois être utilisés avec d'autres frameworks d'interface utilisateur. Dans ces circonstances, des collisions d'espace de noms peuvent parfois se produire. Pour surmonter cet appel.noConflict sur le plugin dont vous souhaitez rétablir la valeur.

// return $.fn.button to previously assigned value
var bootstrapButton = $.fn.button.noConflict() // give $().bootstrapBtn the Bootstrap functionality
$.fn.bootstrapBtn = bootstrapButton

Événements

Bootstrap fournit des événements personnalisés pour la plupart des actions uniques du plugin. Généralement, ces événements se présentent sous deux formes -

  • Infinitive form- Ceci est déclenché au début d'un événement. Par exemple, montrer . Les événements infinitifs fournissent la fonctionnalité preventDefault . Cela offre la possibilité d'arrêter l'exécution d'une action avant qu'elle ne démarre.

$('#myModal').on('show.bs.modal', function (e) {
   // stops modal from being shown
   if (!data) return e.preventDefault() 
})
  • Past participle form- Ceci est déclenché à la fin d'une action. Par exemple montré.

Le plugin de transition fournit des effets de transition simples.

Si vous souhaitez inclure cette fonctionnalité de plugin individuellement, vous aurez besoin transition.jsune fois aux côtés des autres fichiers JS. Sinon, comme mentionné dans le chapitre Présentation des plugins Bootstrap , vous pouvez inclure bootstrap.js ou le bootstrap.min.js minifié .

Transition.js est un assistant de base pour les événements transitionEnd ainsi qu'un émulateur de transition CSS. Il est utilisé par les autres plugins pour vérifier la prise en charge des transitions CSS et pour détecter les transitions en suspens.

Cas d'utilisation

Quelques exemples du plugin de transition sont -

  • Glissement ou décoloration dans les modaux. Vous pouvez trouver un exemple dans le chapitre Plugin Modal Bootstrap .

  • Onglets en fondu. Vous pouvez trouver un exemple dans le chapitre Plugin de l'onglet Bootstrap .

  • Les alertes disparaissent. Vous pouvez trouver un exemple dans le chapitre Alertes d'amorçage .

  • Volets de carrousel coulissants. Vous pouvez trouver un exemple dans le chapitre Plugin Bootstrap Carousel .

Un modal est une fenêtre enfant superposée à sa fenêtre parent. En règle générale, le but est d'afficher le contenu d'une source distincte qui peut avoir une certaine interaction sans quitter la fenêtre parente. Les fenêtres enfants peuvent fournir des informations, des interactions ou plus.

Si vous souhaitez inclure cette fonctionnalité de plugin individuellement, vous aurez besoin modal.js. Sinon, comme mentionné dans le chapitre Présentation des plugins Bootstrap , vous pouvez inclure bootstrap.js ou le bootstrap.min.js minifié .

Usage

Vous pouvez basculer le contenu caché du plugin modal -

  • Via data attributes - Définir l'attribut data-toggle = "modal" sur un élément de contrôleur, comme un bouton ou un lien, avec un data-target = "#identifier" ou href = "#identifier" pour cibler un modal spécifique (avec l'id = "identifiant") à basculer.

  • Via JavaScript - En utilisant cette technique, vous pouvez appeler un modal avec id = "identifiant" avec une seule ligne de JavaScript -

$('#identifier').modal(options)

Exemple

Un exemple de fenêtre modale statique est illustré dans l'exemple suivant -

<h2>Example of creating Modals with Twitter Bootstrap</h2>

<!-- Button trigger modal -->
<button class = "btn btn-primary btn-lg" data-toggle = "modal" data-target = "#myModal">
   Launch demo modal
</button>

<!-- Modal -->
<div class = "modal fade" id = "myModal" tabindex = "-1" role = "dialog" 
   aria-labelledby = "myModalLabel" aria-hidden = "true">
   
   <div class = "modal-dialog">
      <div class = "modal-content">
         
         <div class = "modal-header">
            <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true">
                  &times;
            </button>
            
            <h4 class = "modal-title" id = "myModalLabel">
               This Modal title
            </h4>
         </div>
         
         <div class = "modal-body">
            Add some text here
         </div>
         
         <div class = "modal-footer">
            <button type = "button" class = "btn btn-default" data-dismiss = "modal">
               Close
            </button>
            
            <button type = "button" class = "btn btn-primary">
               Submit changes
            </button>
         </div>
         
      </div><!-- /.modal-content -->
   </div><!-- /.modal-dialog -->
  
</div><!-- /.modal -->

Details of the preceding code −

  • Pour appeler la fenêtre modale, vous devez avoir une sorte de déclencheur. Vous pouvez utiliser un bouton ou un lien. Ici, nous avons utilisé un bouton.

  • Si vous regardez dans le code ci-dessus, vous verrez que dans la balise <button>, le data-target = "#myModal"est la cible du modal que vous souhaitez charger sur la page. Ce code vous permet de créer plusieurs modaux sur la page, puis d'avoir des déclencheurs différents pour chacun d'eux. Maintenant, pour être clair, vous ne chargez pas plusieurs modaux en même temps, mais vous pouvez en créer plusieurs sur les pages à charger à des moments différents.

  • Il y a deux classes à prendre en compte dans le modal -

    • Le premier est .modal, qui identifie simplement le contenu de <div> en tant que modal.

    • Et le deuxième est le .fadeclasse. Lorsque le modal est basculé, cela entraînera un fondu d'entrée et de sortie du contenu.

  • aria-labelledby = "myModalLabel", attribut référence le titre modal.

  • L'attribut aria-hidden = "true" est utilisé pour garder la fenêtre modale invisible jusqu'à ce qu'un déclencheur survienne (comme un clic sur le bouton associé).

  • <div class = "modal-header">, modal-header est la classe pour définir le style de l'en-tête de la fenêtre modale.

  • class = "close", est une classe CSS close qui définit le style du bouton Fermer de la fenêtre modale.

  • data-dismiss = "modal", est un attribut de données HTML5 personnalisé. Ici, il est utilisé pour fermer la fenêtre modale.

  • class = "modal-body", est une classe CSS de Bootstrap CSS pour définir le style du corps de la fenêtre modale.

  • class = "modal-footer", est une classe CSS de Bootstrap CSS pour définir le style du pied de page de la fenêtre modale.

  • data-toggle = "modal", Le basculement de données d'attribut de données personnalisé HTML5 est utilisé pour ouvrir la fenêtre modale.

Options

Certaines options peuvent être transmises via les attributs de données ou JavaScript pour personnaliser l'apparence de la fenêtre modale. Le tableau suivant répertorie les options -

Nom de l'option Type / Valeur par défaut Nom d'attribut de données La description
toile de fond booléen ou la chaîne 'static' Par défaut: true toile de fond de données Spécifiez statique pour un arrière-plan, si vous ne souhaitez pas que le modal soit fermé lorsque l'utilisateur clique en dehors du modal.
clavier booléen Valeur par défaut: true clavier de données Ferme le modal lorsque la touche d'échappement est enfoncée; mis à false pour désactiver.
spectacle booléen Valeur par défaut: true exposition des données Affiche le modal une fois initialisé.
éloigné chemin Par défaut: faux data-remote

À l'aide de la méthode jQuery .load , injectez du contenu dans le corps modal. Si un href avec une URL valide est ajouté, il chargera ce contenu. Un exemple de ceci est montré ci-dessous -

<a data-toggle = "modal" href = "remote.html" data-target = "#modal">Click me</a>

Méthodes

Voici quelques méthodes utiles qui peuvent être utilisées avec modal ().

Méthode La description Exemple
Options - .modal (options) Active votre contenu en tant que modal. Accepte un objet d'options facultatif.
$('#identifier').modal({
   keyboard: false
})
Toggle - .modal ('bascule') Bascule manuellement un modal.
$('#identifier').modal('toggle')
Show - .modal ('afficher') Ouvre manuellement un modal.
$('#identifier').modal('show')
Hide - .modal ('cacher') Cache manuellement un modal.
$('#identifier').modal('hide')

Exemple

L'exemple suivant montre l'utilisation des méthodes -

<h2>Example of using methods of Modal Plugin</h2>

<!-- Button trigger modal -->
<button class = "btn btn-primary btn-lg" data-toggle = "modal" data-target = "#myModal">
   Launch demo modal
</button>

<!-- Modal -->
<div class = "modal fade" id = "myModal" tabindex = "-1" role = "dialog" 
   aria-labelledby = "myModalLabel" aria-hidden = "true">
   
   <div class = "modal-dialog">
      <div class = "modal-content">
         
         <div class = "modal-header">
            <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true">
               ×
            </button>
            
            <h4 class = "modal-title" id = "myModalLabel">
               This Modal title
            </h4>
         </div>
         
         <div class = "modal-body">
            Press ESC button to exit.
         </div>
         
         <div class = "modal-footer">
            <button type = "button" class = "btn btn-default" data-dismiss = "modal">
               Close
            </button>
            
            <button type = "button" class = "btn btn-primary">
               Submit changes
            </button>
         </div>
         
      </div><!-- /.modal-content -->
   </div><!-- /.modal-dialog -->
   
</div><!-- /.modal -->

<script>
   $(function () { $('#myModal').modal({
      keyboard: true
   })});
</script>

Cliquez simplement sur le bouton Echap et la fenêtre modale se ferme.

Événements

Le tableau suivant répertorie les événements à utiliser avec modal. Ces événements peuvent être utilisés pour se connecter à la fonction.

un événement La description Exemple
show.bs.modal Lancé après l'appel de la méthode show.
$('#identifier').on('show.bs.modal', function () {
   // do something…
})
montré.bs.modal Lancé lorsque le modal a été rendu visible à l'utilisateur (attendra la fin des transitions CSS).
$('#identifier').on('shown.bs.modal', function () {
   // do something…
})
hide.bs.modal Lancé lorsque la méthode d'instance hide a été appelée.
$('#identifier').on('hide.bs.modal', function () {
   // do something…
})
hidden.bs.modal Lancé lorsque le modal a fini d'être caché à l'utilisateur.
$('#identifier').on('hidden.bs.modal', function () {
   // do something…
})

Exemple

L'exemple suivant montre l'utilisation des événements -

<h2>Example of using events of Modal Plugin</h2>

<!-- Button trigger modal -->
<button class = "btn btn-primary btn-lg" data-toggle = "modal" data-target = "#myModal">
   Launch demo modal
</button>

<!-- Modal -->
<div class = "modal fade" id = "myModal" tabindex = "-1" role = "dialog" 
   aria-labelledby = "myModalLabel" aria-hidden = "true">
   
   <div class = "modal-dialog">
      <div class = "modal-content">
         
         <div class = "modal-header">
            <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true">
               ×
            </button>
            
            <h4 class = "modal-title" id = "myModalLabel">
               This Modal title
            </h4>
         </div>
         
         <div class = "modal-body">
            Click on close button to check Event functionality.
         </div>
         
         <div class = "modal-footer">
            <button type = "button" class = "btn btn-default" data-dismiss = "modal">
               Close
            </button>
            
            <button type = "button" class = "btn btn-primary">
               Submit changes
            </button>
         </div>
         
      </div><!-- /.modal-content -->
   </div><!-- /.modal-dialog -->
   
</div><!-- /.modal -->

<script>
   $(function () { $('#myModal').modal('hide')})}); </script> <script> $(function () { $('#myModal').on('hide.bs.modal', function () {
      alert('Hey, I heard you like modals...');})
   });
</script>

Comme le montre l'écran ci-dessus, si vous cliquez sur le bouton Fermer, c'est-à-dire masquer l' événement, un message d'alerte s'affiche.

En utilisant le plugin Dropdown, vous pouvez ajouter des menus déroulants à tous les composants tels que les barres de navigation, les onglets, les pilules et les boutons.

Si vous souhaitez inclure cette fonctionnalité de plugin individuellement, vous aurez besoin dropdown.js. Sinon, comme mentionné dans le chapitre Présentation des plugins Bootstrap , vous pouvez inclure bootstrap.js ou le bootstrap.min.js minifié .

Usage

Vous pouvez basculer le contenu caché du plugin déroulant -

  • Via data attributes - Ajouter data-toggle = "dropdown" vers un lien ou un bouton pour basculer vers un menu déroulant comme indiqué ci-dessous -

<div class = "dropdown">
   <a data-toggle = "dropdown" href = "#">Dropdown trigger</a>
   
   <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel">
      ...
   </ul>
	
</div>
  • Si vous devez conserver les liens intacts (ce qui est utile si le navigateur n'active pas JavaScript), utilisez le data-target attribut au lieu de href = "#"-

<div class = "dropdown">
   <a id = "dLabel" role = "button" data-toggle = "dropdown" data-target = "#" href = "/page.html">
      Dropdown 
      <span class = "caret"></span>
   </a>
   
   <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel">
      ...
   </ul>
	
</div>
  • Via JavaScript - Pour appeler la bascule déroulante via JavaScript, utilisez la méthode suivante -

$('.dropdown-toggle').dropdown()

Exemple

Within Navbar

L'exemple suivant montre l'utilisation du menu déroulant dans une barre de navigation -

<nav class = "navbar navbar-default" role = "navigation">

   <div class = "navbar-header">
      <a class = "navbar-brand" href = "#">TutorialsPoint</a>
   </div>
   
   <div>
      <ul class = "nav navbar-nav">
         <li class = "active"><a href = "#">iOS</a></li>
         <li><a href = "#">SVN</a></li>
         
         <li class = "dropdown">
            <a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">
               Java 
               <b class="caret"></b>
            </a>
            
            <ul class = "dropdown-menu">
               <li><a href = "#">jmeter</a></li>
               <li><a href = "#">EJB</a></li>
               <li><a href = "#">Jasper Report</a></li>
               
               <li class = "divider"></li>
               <li><a href = "#">Separated link</a></li>
               
               <li class = "divider"></li>
               <li><a href = "#">One more separated link</a></li>
            </ul>
            
         </li>
      </ul>
   </div>
   
</nav>

Within Tabs

L'exemple suivant montre l'utilisation du menu déroulant dans les onglets -

<p>Tabs With Dropdown Example</p>

<ul class = "nav nav-tabs">
   <li class = "active"><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 class = "dropdown">
      <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#">
         Java 
         <span class = "caret"></span>
      </a>
      
      <ul class = "dropdown-menu">
         <li><a href = "#">Swing</a></li>
         <li><a href = "#">jMeter</a></li>
         <li><a href = "#">EJB</a></li>
         
         <li class = "divider"></li>
         <li><a href = "#">Separated link</a></li>
      </ul>
      
   </li>
	
   <li><a href = "#">PHP</a></li>
</ul>

Options

Il n'y a pas d'options.

Méthodes

La bascule de la liste déroulante a une méthode simple pour afficher ou masquer la liste déroulante.

$().dropdown('toggle')

Exemple

L'exemple suivant montre l'utilisation de la méthode du plugin dropdown.

<nav class = "navbar navbar-default" role = "navigation">
   <div class = "navbar-header">
      <a class = "navbar-brand" href = "#">TutorialsPoint</a>
   </div>

   <div id = "myexample">
      <ul class = "nav navbar-nav">
         <li class = "active"><a href = "#">iOS</a></li>
         <li><a href = "#">SVN</a></li>
			
         <li class = "dropdown">
            <a href = "#" class = "dropdown-toggle">Java <b class = "caret"></b></a>
            
            <ul class = "dropdown-menu">
               <li><a id = "action-1" href = "#">jmeter</a></li>
               <li><a href = "#">EJB</a></li>
               <li><a href = "#">Jasper Report</a></li>
               
               <li class = "divider"></li>
               <li><a href = "#">Separated link</a></li>
               
               <li class = "divider"></li>
               <li><a href = "#">One more separated link</a></li>
            </ul>
            
         </li>
			
      </ul>
   </div>
   
</nav>

<script>
   $(function(){
      $(".dropdown-toggle").dropdown('toggle');
   }); 
</script>

Le plugin Scroll spy (auto update nav) vous permet de cibler des sections de la page en fonction de la position de défilement. Dans son implémentation de base, au fur et à mesure que vous faites défiler, vous pouvez ajouter.active classes à la barre de navigation en fonction de la position de défilement.

Si vous souhaitez inclure cette fonctionnalité de plugin individuellement, vous aurez besoin scrollspy.js. Sinon, comme mentionné dans le chapitre Présentation des plugins Bootstrap , vous pouvez inclure bootstrap.js ou le bootstrap.min.js minifié .

Usage

Vous pouvez ajouter un comportement scrollspy à votre navigation dans la barre supérieure -

  • Via data attributes - ajouter data-spy = "scroll"à l'élément que vous souhaitez espionner (généralement le corps). Puis ajoutez l'attributdata-target avec l'ID ou la classe de l'élément parent de tout Bootstrap .navcomposant. Pour que cela fonctionne, vous devez avoir des éléments dans le corps de la page qui ont les ID correspondants des liens que vous espionnez.

<body data-spy = "scroll" data-target = ".navbar-example">
   ...
   <div class = "navbar-example">
      <ul class = "nav nav-tabs">
         ...
      </ul>
   </div>
   ...
</body>
  • Via JavaScript - Vous pouvez appeler le scrollspy avec JavaScript au lieu d'utiliser les attributs de données, en sélectionnant l'élément à espionner, puis en invoquant le .scrollspy() fonction -

$('body').scrollspy({ target: '.navbar-example' })

Exemple

L'exemple suivant montre l'utilisation du plugin scrollspy via des attributs de données -

<nav id = "navbar-example" class = "navbar navbar-default navbar-static" role = "navigation">
   
   <div class = "navbar-header">
      <button class = "navbar-toggle" type = "button" data-toggle = "collapse" 
         data-target = ".bs-js-navbar-scrollspy">
         <span class = "sr-only">Toggle navigation</span>
         <span class = "icon-bar"></span>
         <span class = "icon-bar"></span>
         <span class = "icon-bar"></span>
      </button>
		
      <a class = "navbar-brand" href = "#">Tutorial Name</a>
   </div>
   
   <div class = "collapse navbar-collapse bs-js-navbar-scrollspy">
      <ul class = "nav navbar-nav">
         <li><a href = "#ios">iOS</a></li>
         <li><a href = "#svn">SVN</a></li>
         
         <li class = "dropdown">
            <a href = "#" id = "navbarDrop1" class = "dropdown-toggle" data-toggle = "dropdown">
               Java
               <b class = "caret"></b>
            </a>
            
            <ul class = "dropdown-menu" role = "menu" aria-labelledby = "navbarDrop1">
               <li><a href = "#jmeter" tabindex = "-1">jmeter</a></li>
               <li><a href = "#ejb" tabindex = "-1">ejb</a></li>
               
               <li class = "divider"></li>
               <li><a href = "#spring" tabindex = "-1">spring</a></li>
            </ul>
            
         </li>
      </ul>
   </div>
   
</nav>

<div data-spy = "scroll" data-target = "#navbar-example" data-offset = "0" 
   style = "height:200px; overflow:auto; position: relative;">
   <h4 id = "ios">iOS</h4>
	
   <p>iOS is a mobile operating system developed and distributed by Apple 
      Inc. Originally released in 2007 for the iPhone, iPod Touch, and Apple 
      TV. iOS is derived from OS X, with which it shares the Darwin 
      foundation. iOS is Apple's mobile version of the OS X operating system 
      used on Apple computers.</p>
   
   <h4 id = "svn">SVN</h4>
   
   <p>Apache Subversion which is often abbreviated as SVN, is a software 
      versioning and revision control system distributed under an open source 
      license. Subversion was created by CollabNet Inc. in 2000, but now it 
      is developed as a project of the Apache Software Foundation, and as 
      such is part of a rich community of developers and users.</p>
   
   <h4 id = "jmeter">jMeter</h4>
   
   <p>jMeter is an Open Source testing software. It is 100% pure Java 
      application for load and performance testing.</p>
   
   <h4 id = "ejb">EJB</h4>
   
   <p>Enterprise Java Beans (EJB) is a development architecture for building 
      highly scalable and robust enterprise level applications to be deployed 
      on J2EE compliant Application Server such as JBOSS, Web Logic etc.</p>
   
   <h4 id = "spring">Spring</h4>
   
   <p>Spring framework is an open source Java platform that provides 
      comprehensive infrastructure support for developing robust Java 
      applications very easily and very rapidly.</p>
   
   <p>Spring framework was initially written by Rod Johnson and was first 
      released under the Apache 2.0 license in June 2003.</p>
   
</div>

Options

Les options peuvent être transmises via des attributs de données ou JavaScript. Le tableau suivant répertorie les options -

Nom de l'option Type / Valeur par défaut Nom d'attribut de données La description
décalage nombre Par défaut: 10 décalage de données Pixels à décaler par rapport au haut lors du calcul de la position du défilement.

Méthodes

.scrollspy('refresh') - Lorsque vous appelez le scrollspy via la méthode JavaScript, vous devez appeler le .refreshméthode pour mettre à jour le DOM. Ceci est utile si des éléments du DOM ont changé, c'est-à-dire si vous avez ajouté ou supprimé certains éléments. Voici la syntaxe pour utiliser cette méthode.

$('[data-spy = "scroll"]').each(function () { var $spy = $(this).scrollspy('refresh')
})

Exemple

L'exemple suivant montre l'utilisation de .scrollspy('refresh') méthode -

<nav id = "myScrollspy" class = "navbar navbar-default navbar-static" role = "navigation">
   
   <div class = "navbar-header">
      <button class = "navbar-toggle" type = "button" data-toggle = "collapse" 
         data-target = ".bs-js-navbar-scrollspy">
         <span class = "sr-only">Toggle navigation</span>
         <span class = "icon-bar"></span>
         <span class = "icon-bar"></span>
         <span class = "icon-bar"></span>
      </button>
		
      <a class = "navbar-brand" href = "#">Tutorial Name</a>
   </div>
   
   <div class = "collapse navbar-collapse bs-js-navbar-scrollspy">
      <ul class = "nav navbar-nav">
         <li class = "active"><a href = "#ios">iOS</a></li>
         <li><a href = "#svn">SVN</a></li>
         
         <li class = "dropdown">
            <a href = "#" id = "navbarDrop1" class = "dropdown-toggle" data-toggle  = "dropdown">
               Java 
               <b class = "caret"></b>
            </a>
            
            <ul class = "dropdown-menu" role = "menu" aria-labelledby = "navbarDrop1">
               <li><a href = "#jmeter" tabindex = "-1">jmeter</a></li>
               <li><a href = "#ejb" tabindex = "-1">ejb</a></li>
               
               <li class = "divider"></li>
               <li><a href = "#spring" tabindex = "-1">spring</a></li>
            </ul>
            
         </li>
      </ul>
   </div>
   
</nav>

<div data-spy = "scroll" data-target = "#myScrollspy" data-offset = "0"  
   style = "height:200px; overflow:auto; position: relative;">
   
   <div class = "section">
      <h4 id = "ios">iOS<small><a href = "#" onclick = "removeSection(this);">
         &times; Remove this section</a></small>
      </h4>
      
      <p>iOS is a mobile operating system developed and distributed by 
         Apple Inc. Originally released in 2007 for the iPhone, iPod Touch, and 
         Apple TV. iOS is derived from OS X, with which it shares the Darwin 
         foundation. iOS is Apple's mobile version of the OS X operating system
         used on Apple computers.</p>
   </div>
   
   <div class = "section">
      <h4 id = "svn">SVN<small></small></h4>
      <p>Apache Subversion which is often abbreviated as SVN, is a software 
         versioning and revision control system distributed under an open source 
         license. Subversion was created by CollabNet Inc. in 2000, but 
         now it is developed as a project of the Apache Software Foundation, 
         and as such is part of a rich community of developers and users.</p>
   </div>
   
   <div class = "section">
      <h4 id = "jmeter">jMeter<small><a href = "#" onclick = "removeSection(this);">
         &times; Remove this section</a></small>
      </h4>
      
      <p>jMeter is an Open Source testing software. It is 100% pure Java 
         application for load and performance testing.</p>
   </div>
   
   <div class = "section">
      <h4 id = "ejb">EJB</h4>
      
      <p>Enterprise Java Beans (EJB) is a development architecture for 
         building highly scalable and robust enterprise level applications 
         to be deployed on J2EE compliant Application Server such as 
         JBOSS, Web Logic etc.</p>
   </div>
	
   <div class = "section">
      <h4 id = "spring">Spring</h4>
      
      <p>Spring framework is an open source Java platform that provides 
         comprehensive infrastructure support for developing robust Java 
         applications very easily and very rapidly.</p>
      
      <p>Spring framework was initially written by Rod Johnson and was first 
         released under the Apache 2.0 license in June 2003.</p>
   </div>
   
</div>

<script type = "text/javascript">
   $(function(){
      removeSection = function(e) {
         $(e).parents(".section").remove(); $('[data-spy = "scroll"]').each(function () {
            var $spy = $(this).scrollspy('refresh')
         });
      }
      $("#myScrollspy").scrollspy();
   });
</script>

Événements

Le tableau suivant répertorie les événements à utiliser avec scrollspy. Cet événement peut être utilisé pour se connecter à la fonction.

un événement La description Exemple
activate.bs.scrollspy Cet événement se déclenche chaque fois qu'un nouvel élément est activé par le scrollspy.
$('#myScrollspy').on('activate.bs.scrollspy', function () {
   // do something…
})

Exemple

L'exemple suivant montre l'utilisation de activate.bs.scrollspy événement -

<html>
   <head>
      <link rel = "stylesheet" href = "bootstrap/css/bootstrap.min.css">
      <script src = "bootstrap/scripts/jquery.min.js"></script>
      <script src = "bootstrap/js/bootstrap.min.js"></script>
      
      <script>
         $(document).ready(function(){ removeSection = function(e) { $(e).parents(".subject").remove();
            
               $('[data-spy="scroll"]').each(function () { var $spy = $(this).scrollspy('refresh') }); } $("#Navexample").scrollspy();
         
            // The event is fired when an item gets actived with the scrollspy
            $("#Navexample").on('activate.bs.scrollspy', function () { var currentSection = $(".nav li.active > a").text();
               $("#spyevent").html("Current Item being viewed >> " + currentSection);
            })
				
         });
      </script>
   
      <style>
         .scroll-box {
            height: 250px;
            position: relative;
            overflow: auto;
            font-size:2em;
         }
      </style>
   </head>
   
   <body>
      <div class = "container">
         <nav id = "Navexample" class = "navbar navbar-default" role = "navigation">
      
            <!-- Nav Bar -->
            <div class = "navbar-header">
               <button type = "button" class = "navbar-toggle" 
                  data-toggle = "collapse" data-target = "#navbarCollapse">
               
                  <span class = "sr-only">Toggle navigation</span>
                  <span class = "icon-bar"></span>
                  <span class = "icon-bar"></span>
                  <span class = "icon-bar"></span>
               </button>
					
               <a class = "navbar-brand" href = "#">Tutorials Point</a>
            </div>
            
            <!-- Links and Sublinks -->
            <div class = "collapse navbar-collapse" id = "navbarCollapse">
               <ul class = "nav navbar-nav">
                  <li class = "active"><a href = "#subject-1">Subject 1</a></li>
                  <li><a href = "#subject-2">Subject 2</a></li>
               
                  <li class = "dropdown"><a href = "#" class = "dropdown-toggle" 
                     data-toggle = "dropdown">Subject 3<b class = "caret"></b></a>
                     
                     <ul class = "dropdown-menu">
                        <li><a href = "#subject-3-1">Subject 3.1</a></li>
                        <li><a href = "#subject-3-2">Subject 3.2</a></li>
                        <li><a href = "#subject-3-3">Subject 3.3</a></li>
                     </ul>
                     
                  </li>
						
                  <li><a href = "#subject-4">Subject 4</a></li>
               </ul>
            </div>
            
         </nav>
         
         <div class = "scroll-box" data-spy = "scroll" data-offset = "0">
            <div class = "subject">
            
               <h3 id = "subject-1">Subject 1 
                  <small><a href = "#" onclick = "removeSubject(this);">Remove Subject ×</a></small>
               </h3>
            
               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                  sed do eiusmod tempor incididunt ut labore et dolore magna
                  aliqua. Ut enim ad minim veniam, quis nostrud exercitation
                  ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            </div>
				
            <hr>
         
            <div class = "subject">
               <h3 id = "subject-2">Subject 2 
                  <small><a href = "#" onclick = "removeSubject(this);">Remove Subject ×</a></small>
               </h3>
            
               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                  sed do eiusmod tempor incididunt ut labore et dolore magna
                  aliqua. Ut enim ad minim veniam, quis nostrud exercitation
                  ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            </div>
				
            <hr>
         
            <div class = "subject">
               <h3 id = "subject-3">Subject 3 
                  <small><a href = "#" onclick = "removeSubject(this);"> Remove Subject ×</a></small>
               </h3>
            
               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                  sed do eiusmod tempor incididunt ut labore et dolore magna
                  aliqua. Ut enim ad minim veniam, quis nostrud exercitation
                  ullamco laboris nisi ut aliquip ex ea commodo consequat.</p><
            </div>
				
            <hr>
            
            <div class = "subject">
               <h4 id = "subject-3-1">Subject 3.1
                  <small><a href = "#" onclick = "removeSubject(this);"> Remove Subject ×</a></small>
               </h4>
               
               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                  sed do eiusmod tempor incididunt ut labore et dolore magna
                  aliqua. Ut enim ad minim veniam, quis nostrud exercitation
                  ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            </div>
            
            <div class = "subject">
               <h4 id = "subject-3-2">Subject 3.2
                  <small><a href = "#" onclick = "removeSubject(this);"> Remove Subject ×</a></small>
               </h4>
               
               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                  sed do eiusmod tempor incididunt ut labore et dolore magna
                  aliqua. Ut enim ad minim veniam, quis nostrud exercitation
                  ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            </div>
            
            <div class = "subject">
               <h4 id = "subject-3-3">Subject 3.3 
                  <small><a href = "#" onclick = "removeSubject(this);">Remove Subject ×</a></small>
               </h4>
               
               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                  sed do eiusmod tempor incididunt ut labore et dolore magna
                  aliqua. Ut enim ad minim veniam, quis nostrud exercitation
                  ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            </div>
				
            <hr>
            
            <div class = "subject">
               <h3 id = "subject-4">Subject 4 
                  <small><a href = "#" onclick = "removeSubject(this);">Remove Subject ×</a></small>
               </h3>
               
               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                  sed do eiusmod tempor incididunt ut labore et dolore magna
                  aliqua. Ut enim ad minim veniam, quis nostrud exercitation
                  ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            </div>
            
         </div>
         <hr>
         
         <h4 id = "spyevent" class = "text-info"></h4>
      </div>
   </body>
</html>

Les onglets ont été introduits dans le chapitre Éléments de navigation Bootstrap . En combinant quelques attributs de données, vous pouvez facilement créer une interface à onglets. Avec ce plug-in, vous pouvez passer à travers des volets de contenu local dans des onglets ou des pilules, même via des menus déroulants.

Si vous souhaitez inclure cette fonctionnalité de plugin individuellement, vous aurez besoin tab.js. Sinon, comme mentionné dans le chapitre Présentation des plugins Bootstrap , vous pouvez inclure bootstrap.js ou le bootstrap.min.js minifié .

Usage

Vous pouvez activer les onglets des deux manières suivantes:

  • Via data attributes - vous devez ajouter data-toggle = "tab" ou data-toggle = "pill" aux ancres.

    Ajout du nav et nav-tabs classes à l'onglet ulappliquera le style de l'onglet Bootstrap , tout en ajoutant lenav et nav-pillsles classes appliqueront le style de la pilule .

<ul class = "nav nav-tabs">
   <li><a href = "#identifier" data-toggle = "tab">Home</a></li>
   ...
</ul>
  • Via JavaScript - vous pouvez activer les onglets en utilisant Javscript comme ci-dessous -

$('#myTab a').click(function (e) {
   e.preventDefault()
   $(this).tab('show')
})
  • Voici un exemple de différentes façons d'activer des onglets individuels -

// Select tab by name
$('#myTab a[href = "#profile"]').tab('show')
 
// Select first tab
$('#myTab a:first').tab('show') // Select last tab $('#myTab a:last').tab('show') 

// Select third tab (0-indexed)
$('#myTab li:eq(2) a').tab('show')

Effet de fondu

Pour obtenir un effet de fondu pour les onglets, ajoutez .fade pour chaque .tab-pane. Le premier volet d'onglet doit également avoir.in pour bien fondre le contenu initial -

<div class = "tab-content">
   <div class = "tab-pane fade in active" id = "home">...</div>
   <div class = "tab-pane fade" id = "svn">...</div>
   <div class = "tab-pane fade" id = "ios">...</div>
   <div class = "tab-pane fade" id = "java">...</div>
</div>

Exemple

Un exemple de plugin d'onglet utilisant des attributs de données et un effet de fondu est illustré dans l'exemple suivant -

<ul id = "myTab" class = "nav nav-tabs">
   <li class = "active">
      <a href = "#home" data-toggle = "tab">
         Tutorial Point Home
      </a>
   </li>
   
   <li><a href = "#ios" data-toggle = "tab">iOS</a></li>
	
   <li class = "dropdown">
      <a href = "#" id = "myTabDrop1" class = "dropdown-toggle" data-toggle = "dropdown">
         Java 
         <b class = "caret"></b>
      </a>
      
      <ul class = "dropdown-menu" role = "menu" aria-labelledby = "myTabDrop1">
         <li><a href = "#jmeter" tabindex = "-1" data-toggle = "tab">jmeter</a></li>
         <li><a href = "#ejb" tabindex = "-1" data-toggle = "tab">ejb</a></li>
      </ul>
   </li>
</ul>

<div id = "myTabContent" class = "tab-content">

   <div class = "tab-pane fade in active" id = "home">
      <p>Tutorials Point is a place for beginners in all technical areas.
         This website covers most of the latest technologies and explains each of
         the technology with simple examples.</p>
   </div>
   
   <div class = "tab-pane fade" id = "ios">
      <p>iOS is a mobile operating system developed and distributed 
         by Apple Inc. Originally released in 2007 for the iPhone, iPod Touch,
         and Apple TV. iOS is derived from OS X, with which it shares the 
         Darwin foundation. iOS is Apple's mobile version of the OS X 
         operating system used on Apple computers.</p>
   </div>
   
   <div class = "tab-pane fade" id = "jmeter">
      <p>jMeter is an Open Source testing software. It is 100% pure Java 
         application for load and performance testing.</p>
   </div>
   
   <div class = "tab-pane fade" id = "ejb">
      <p>Enterprise Java Beans (EJB) is a development architecture for 
         building highly scalable and robust enterprise level applications to be 
         deployed on J2EE compliant Application Server such as JBOSS, Web Logic etc.</p>
   </div>
   
</div>

Méthodes

.$().tab- Cette méthode active un élément d'onglet et un conteneur de contenu. L'onglet doit avoir undata-target ou un href ciblant un nœud de conteneur dans le DOM.

<ul class = "nav nav-tabs" id = "myTab">
   <li class = "active"><a href = "#identifier" data-toggle = "tab">Home</a></li>
   .....
</ul>

<div class = "tab-content">
   <div class = "tab-pane active" id = "home">...</div>
   .....
</div>

<script>
   $(function () { $('#myTab a:last').tab('show')
   })
</script>

Exemple

L'exemple suivant montre l'utilisation de la méthode du plugin tab .tab. Ici, dans l'exemple, le deuxième onglet iOS est activé -

<ul id = "myTab" class = "nav nav-tabs">
   <li class = "active">
      <a href = "#home" data-toggle = "tab">
         Tutorial Point Home
      </a>
   </li>
   
   <li><a href = "#ios" data-toggle = "tab">iOS</a></li>
	
   <li class = "dropdown">
	
      <a href = "#" id = "myTabDrop1" class = "dropdown-toggle" data-toggle = "dropdown">
         Java 
         <b class = "caret"></b>
      </a>
      
      <ul class = "dropdown-menu" role = "menu" aria-labelledby = "myTabDrop1">
         <li>
            <a href = "#jmeter" tabindex = "-1" data-toggle = "tab">
               jmeter
            </a>
         </li>
         
         <li>
            <a href = "#ejb" tabindex = "-1" data-toggle = "tab">
               ejb
            </a>
         </li>
      </ul>
   </li>
</ul>

<div id = "myTabContent" class = "tab-content">

   <div class = "tab-pane fade in active" id = "home">
      <p>Tutorials Point is a place for beginners in all technical areas. 
         This website covers most of the latest technologies and explains each of 
         the technology with simple examples.</p>
   </div>
   
   <div class = "tab-pane fade" id = "ios">
      <p>iOS is a mobile operating system developed and distributed by 
         Apple Inc. Originally released in 2007 for the iPhone, iPod Touch, and 
         Apple TV. iOS is derived from OS X, with which it shares the Darwin 
         foundation. iOS is Apple's mobile version of the OS X operating system 
         used on Apple computers.</p>
   </div>
   
   <div class = "tab-pane fade" id = "jmeter">
      <p>jMeter is an Open Source testing software. It is 100% pure Java 
         application for load and performance testing.</p>
   </div>
   
   <div class = "tab-pane fade" id = "ejb">
      <p>Enterprise Java Beans (EJB) is a development architecture for 
         building highly scalable and robust enterprise level applications to be 
         deployed on J2EE compliant Application Server such as JBOSS, 
         Web Logic etc.</p>
   </div>
   
</div>

<script>
   $(function () { $('#myTab li:eq(1) a').tab('show');
   });
</script>

Événements

Le tableau suivant répertorie les événements à utiliser avec le plugin d'onglet. Cet événement peut être utilisé pour se connecter à la fonction.

un événement La description Exemple
show.bs.tab Cet événement se déclenche lors de l'affichage des onglets, mais avant que le nouvel onglet ne soit affiché. Utilisationevent.target et event.relatedTarget pour cibler respectivement l'onglet actif et l'onglet actif précédent (si disponible).
$('a[data-toggle = "tab"]').on('show.bs.tab', function (e) {
   e.target // activated tab
   e.relatedTarget // previous tab
})
montré.bs.tab Cet événement se déclenche sur l'affichage des onglets après l'affichage d'un onglet. Utilisationevent.target et event.relatedTarget pour cibler respectivement l'onglet actif et l'onglet actif précédent (si disponible).
$('a[data-toggle = "tab"]').on('shown.bs.tab', function (e) {
   e.target // activated tab
   e.relatedTarget // previous tab
})

Exemple

L'exemple suivant montre l'utilisation d'événements de plug-in d'onglet. Ici, dans l'exemple, nous afficherons les onglets visités actuels et précédents -

<hr>
<p class = "active-tab"><strong>Active Tab</strong>: <span></span></p>
<p class = "previous-tab"><strong>Previous Tab</strong>: <span></span></p>
<hr>

<ul id = "myTab" class = "nav nav-tabs">
   <li class = "active">
      <a href = "#home" data-toggle = "tab">
         Tutorial Point Home
      </a>
   </li>
   
   <li><a href = "#ios" data-toggle = "tab">iOS</a></li>
	
   <li class = "dropdown">
      <a href = "#" id = "myTabDrop1" class = "dropdown-toggle" data-toggle = "dropdown">
         Java 
         <b class = "caret"></b>
      </a>
      
      <ul class = "dropdown-menu" role = "menu" aria-labelledby = "myTabDrop1">
         <li>
            <a href = "#jmeter" tabindex = "-1" data-toggle = "tab">jmeter</a>
         </li>
         
         <li>
            <a href = "#ejb" tabindex = "-1" data-toggle = "tab">ejb</a>
         </li>
      </ul>
   </li>
</ul>

<div id = "myTabContent" class = "tab-content">

   <div class = "tab-pane fade in active" id = "home">
      <p>Tutorials Point is a place for beginners in all technical areas.
         This website covers most of the latest technologies and explains each of 
         the technology with simple examples.</p>
   </div>
   
   <div class = "tab-pane fade" id = "ios">
      <p>iOS is a mobile operating system developed and distributed by 
         Apple Inc. Originally released in 2007 for the iPhone, iPod Touch, and 
         Apple TV. iOS is derived from OS X, with which it shares the Darwin
         foundation. iOS is Apple's mobile version of the OS X operating system
         used on Apple computers.</p>
   </div>
   
   <div class = "tab-pane fade" id = "jmeter">
      <p>jMeter is an Open Source testing software. It is 100% pure Java 
         application for load and performance testing.</p>
   </div>
   
   <div class = "tab-pane fade" id = "ejb">
      <p>Enterprise Java Beans (EJB) is a development architecture for
         building highly scalable and robust enterprise level applications to be 
         deployed on J2EE compliant Application Server such as JBOSS, Web Logic etc.</p>
   </div>
</div>

<script>
   $(function(){ $('a[data-toggle = "tab"]').on('shown.bs.tab', function (e) {
         // Get the name of active tab
         var activeTab = $(e.target).text(); // Get the name of previous tab var previousTab = $(e.relatedTarget).text(); 
         
         $(".active-tab span").html(activeTab); $(".previous-tab span").html(previousTab);
      });
   });
</script>

Les info-bulles sont utiles lorsque vous devez décrire un lien. Le plugin a été inspiré par le plugin jQuery.tipsy écrit par Jason Frame . Les info-bulles ont depuis été mises à jour pour fonctionner sans images, s'animer avec une animation CSS et des attributs de données pour le stockage local des titres.

Si vous souhaitez inclure cette fonctionnalité de plugin individuellement, vous aurez besoin tooltip.js. Sinon, comme mentionné dans le chapitre Présentation des plugins Bootstrap , vous pouvez inclure bootstrap.js ou le bootstrap.min.js minifié .

Usage

Le plugin tooltip génère du contenu et du balisage à la demande et place par défaut des info-bulles après leur élément déclencheur. Vous pouvez ajouter des info-bulles des deux manières suivantes:

  • Via data attributes - Pour ajouter une info-bulle, ajoutez data-toggle = "tooltip"à une balise d'ancrage. Le titre de l'ancre sera le texte d'une info-bulle. Par défaut, l'info-bulle est placée en haut par le plugin.

<a href = "#" data-toggle = "tooltip" title = "Example tooltip">Hover over me</a>
  • Via JavaScript - Déclenchez l'info-bulle via JavaScript -

$('#identifier').tooltip(options)

Le plugin Tooltip n'est PAS seulement des plugins css comme dropdown ou d'autres plugins discutés dans les chapitres précédents. Pour utiliser ce plugin, vous DEVEZ l'activer en utilisant jquery (lire javascript). Pour activer toutes les info-bulles sur votre page, utilisez simplement ce script -

$(function () { $("[data-toggle = 'tooltip']").tooltip(); });

Exemple

L'exemple suivant illustre l'utilisation du plugin d'info-bulle via des attributs de données.

<h4>Tooltip examples for anchors</h4>

This is a <a href = "#" class = "tooltip-test" data-toggle = "tooltip" 
   title = "Tooltip on left"> Default Tooltip</a>.

This is a <a href = "#" class = "tooltip-test" data-toggle = "tooltip" 
   data-placement = "left" title = "Tooltip on left">Tooltip on Left</a>.

This is a <a href = "#" data-toggle = "tooltip" data-placement = "top" 
   title = "Tooltip on top">Tooltip on Top</a>.

This is a <a href = "#" data-toggle = "tooltip" data-placement = "bottom"
   title = "Tooltip on bottom">Tooltip on Bottom</a>.

This is a <a href = "#" data-toggle = "tooltip" data-placement = "right" 
   title = "Tooltip on right">Tooltip on Right</a>
	
<br>

<h4>Tooltip examples for buttons</h4>

<button type = "button" class = "btn btn-default" data-toggle = "tooltip" title = "Tooltip on left">
   Default Tooltip
</button>

<button type = "button" class = "btn btn-default" data-toggle = "tooltip" 
   data-placement = "left" title = "Tooltip on left">
	
   Tooltip on left
</button>

<button type = "button" class = "btn btn-default" data-toggle = "tooltip" 
   data-placement = "top" title = "Tooltip on top">
   
   Tooltip on top
</button>

<button type = "button" class = "btn btn-default" data-toggle = "tooltip" 
   data-placement = "bottom" title = "Tooltip on bottom">
   
   Tooltip on bottom
</button>

<button type = " button" class = " btn btn-default" data-toggle = "tooltip" 
   data-placement = "right" title = "Tooltip on right">
   
   Tooltip on right
</button>

<script>
   $(function () { $("[data-toggle = 'tooltip']").tooltip(); });
</script>

Options

Certaines options peuvent être ajoutées via l'API Bootstrap Data ou appelées via JavaScript. Le tableau suivant répertorie les options -

Nom de l'option Type / Valeur par défaut Nom d'attribut de données La description
animation booléen Valeur par défaut: true animation de données Applique une transition de fondu CSS à l'info-bulle.
html booléen Valeur par défaut: false données-html Insère du HTML dans l'info-bulle. Si false, la méthode text de jQuery sera utilisée pour insérer du contenu dans le dom. Utilisez du texte si vous vous inquiétez des attaques XSS.
placement chaîne | fonction Par défaut: haut placement de données

Spécifie comment positionner l'info-bulle (c'est-à-dire, haut | bas | gauche | droite | auto).

Lorsque auto est spécifié, il réoriente dynamiquement l'info-bulle. Par exemple, si le placement est "auto gauche", l'info-bulle s'affichera à gauche lorsque cela est possible, sinon elle s'affichera à droite.

sélecteur chaîne Par défaut: faux sélecteur de données Si un sélecteur est fourni, les objets d'info-bulle seront délégués aux cibles spécifiées.
Titre chaîne | fonction Par défaut: " titre-données L'option title est la valeur de titre par défaut si l' attribut title n'est pas présent.
déclencheur string Par défaut: 'hover focus' déclencheur de données Définit la manière dont l'info-bulle est déclenchée: click| hover | focus | manual. Vous pouvez passer plusieurs déclencheurs; séparez-les par un espace.
contenu chaîne | fonction Par défaut: '' contenu de données Valeur de contenu par défaut si l' attribut de contenu de données n'est pas présent
retard nombre | objet Par défaut: 0 délai de données

Retards d'affichage et de masquage de l'info-bulle en ms - ne s'applique pas au type de déclenchement manuel. Si un nombre est fourni, un délai est appliqué aux deux masquer / afficher. La structure de l'objet est -

delay: { show: 500, hide: 100 }
récipient chaîne | false Par défaut: false conteneur de données Ajoute l'info-bulle à un élément spécifique. Exemple: container: 'body'

Méthodes

Voici quelques méthodes utiles pour les info-bulles -

Méthode La description Exemple

Options - .tooltip (options)

Attache un gestionnaire d'info-bulles à une collection d'éléments.
$().tooltip(options)

Toggle - .tooltip ('bascule')

Active / désactive l'info-bulle d'un élément.
$('#element').tooltip('toggle')

Show - .tooltip ('afficher')

Révèle l'info-bulle d'un élément.
$('#element').tooltip('show')

Hide - .tooltip ('cacher')

Masque l'info-bulle d'un élément.
$('#element').tooltip('hide')

Destroy - .tooltip ('détruire')

Masque et détruit l'info-bulle d'un élément.
$('#element').tooltip('destroy')

Exemple

L'exemple suivant illustre l'utilisation du plugin d'info-bulle via des attributs de données.

<div style = "padding: 100px 100px 10px;">
   This is a <a href = "#" class = "tooltip-show" data-toggle = "tooltip" 
      title = "show">Tooltip on method show</a>.

   This is a <a href = "#" class = "tooltip-hide" data-toggle = "tooltip" 
      data-placement = "left" title = "hide">Tooltip on method hide</a>.

   This is a <a href = "#" class = "tooltip-destroy" data-toggle = "tooltip" 
      data-placement = "top" title = "destroy">Tooltip on method destroy</a>.

   This is a <a href = "#" class = "tooltip-toggle" data-toggle = "tooltip" 
      data-placement = "bottom" title = "toggle">Tooltip on method toggle</a>.
   
   <br><br><br><br><br><br>
   
   <p class = "tooltip-options" >
      This is a <a href = "#" data-toggle = "tooltip" title = "<h2>'am Header2
         </h2>">Tooltip on method options</a>.
   </p>

   <script>
      $(function () { $('.tooltip-show').tooltip('show');});
      $(function () { $('.tooltip-hide').tooltip('hide');});
      $(function () { $('.tooltip-destroy').tooltip('destroy');});
      $(function () { $('.tooltip-toggle').tooltip('toggle');});
      $(function () { $(".tooltip-options a").tooltip({html : true });});
   </script>
</div>

Événements

Le tableau suivant répertorie les événements à utiliser avec le plugin tooltip. Cet événement peut être utilisé pour se connecter à la fonction.

un événement La description Exemple
show.bs.tooltip Cet événement se déclenche immédiatement lorsque la méthode show instance est appelée.
$('#myTooltip').on('show.bs.tooltip', function () {
   // do something
})
montré.bs.tooltip Cet événement est déclenché lorsque l'info-bulle a été rendue visible à l'utilisateur (attendra la fin des transitions CSS).
$('#myTooltip').on('shown.bs.tooltip', function () {
   // do something
})
hide.bs.tooltip Cet événement est déclenché immédiatement lorsque la méthode d'instance hide a été appelée.
$('#myTooltip').on('hide.bs.tooltip', function () {
   // do something
})
hidden.bs.tooltip Cet événement est déclenché lorsque l'info-bulle a fini d'être cachée à l'utilisateur (attendra la fin des transitions CSS).
$('#myTooltip').on('hidden.bs.tooltip', function () {
   // do something
})

Exemple

L'exemple suivant illustre l'utilisation du plugin d'info-bulle via des attributs de données.

<h4>Tooltip examples for anchors</h4>

This is a <a href = "#" class = "tooltip-show" data-toggle = "tooltip" 
   title = "Default Tooltip">Default Tooltip</a>.

<script>
   $(function () { $('.tooltip-show').tooltip('show');});
   
   $(function () { $('.tooltip-show').on('show.bs.tooltip', function () {
      alert("Alert message on show");
   })});
</script>

Le popover est similaire à l'info-bulle, offrant une vue étendue avec un titre. Pour que le popover s'active, il suffit à l'utilisateur de placer le curseur sur l'élément. Le contenu du popover peut être entièrement rempli à l'aide de l'API Bootstrap Data. Cette méthode nécessite une info-bulle.

Si vous souhaitez inclure cette fonctionnalité de plugin individuellement, vous aurez besoin du popover.jset il a une dépendance du plugin tooltip . Sinon, comme mentionné dans le chapitre Présentation des plugins Bootstrap , vous pouvez inclure bootstrap.js ou le bootstrap.min.js minifié .

Usage

Le plugin popover génère du contenu et du balisage à la demande, et place par défaut le popover après leur élément déclencheur. Vous pouvez ajouter un popover des deux manières suivantes:

  • Via data attributes - Pour ajouter un popover, ajoutez data-toggle = "popover"à une balise d'ancrage / bouton. Le titre de l'ancre sera le texte d'un popover. Par défaut, le popover est placé en haut par le plugin.

<a href = "#" data-toggle = "popover" title = "Example popover">
   Hover over me
</a>
  • Via JavaScript - Activez les popovers via JavaScript en utilisant la syntaxe suivante -

$('#identifier').popover(options)

Le plugin Popover n'est PAS seulement des plugins css comme dropdown ou d'autres plugins discutés dans les chapitres précédents. Pour utiliser ce plugin, vous DEVEZ l'activer en utilisant jquery (lire javascript). Pour activer tous les popovers sur votre page, utilisez simplement ce script -

$(function () { $("[data-toggle = 'popover']").popover(); });

Exemple

L'exemple suivant montre l'utilisation du plugin popover via des attributs de données.

<div class = "container" style = "padding: 100px 50px 10px;" >
   <button type = "button" class = "btn btn-default" title = "Popover title"  
      data-container = "body" data-toggle = "popover" data-placement = "left" 
      data-content = "Some content in Popover on left">
      
      Popover on left
   </button>
   
   <button type = "button" class = "btn btn-primary" title = "Popover title"  
      data-container = "body" data-toggle = "popover" data-placement = "top" 
      data-content = "Some content in Popover on top">
      
      Popover on top
   </button>
   
   <button type = "button" class = "btn btn-success" title = "Popover title"  
      data-container = "body" data-toggle = "popover" data-placement = "bottom" 
      data-content = "Some content in Popover on bottom">
      
      Popover on bottom
   </button>
   
   <button type = "button" class = "btn btn-warning" title = "Popover title"  
      data-container = "body" data-toggle = "popover" data-placement = "right" 
      data-content = "Some content in Popover on right">
      
      Popover on right
   </button>
   
</div>

<script>
   $(function (){
      $("[data-toggle = 'popover']").popover();
   });
</script>

Options

Certaines options peuvent être ajoutées via l'API Bootstrap Data ou appelées via JavaScript. Le tableau suivant répertorie les options -

Nom de l'option Type / Valeur par défaut Nom d'attribut de données La description
animation Valeur booléenne par défaut - true animation de données Applique une transition de fondu CSS au popover.
html Valeur booléenne par défaut - false données-html Insère du HTML dans le popover. Si false, la méthode text de jQuery sera utilisée pour insérer du contenu dans le dom. Utilisez du texte si vous vous inquiétez des attaques XSS.
placement chaîne | fonction Par défaut - haut placement de données Spécifie comment positionner le popover (c'est-à-dire, haut | bas | gauche | droite | auto). Lorsque auto est spécifié, il réoriente dynamiquement le popover. Par exemple, si le placement est "auto gauche", le popover s'affichera à gauche si possible, sinon il s'affichera à droite.
sélecteur chaîne Par défaut - faux sélecteur de données Si un sélecteur est fourni, les objets popover seront délégués aux cibles spécifiées.
Titre chaîne | fonction Par défaut - " titre-données L'option title est la valeur de titre par défaut si l' attribut title n'est pas présent.
déclencheur string Par défaut - 'hover focus' déclencheur de données Définit comment le popover est déclenché - click| hover | focus | manual. Vous pouvez passer plusieurs déclencheurs; séparez-les par un espace.
retard nombre | objet Par défaut - 0 délai de données

Retards d'affichage et de masquage du popover en ms - ne s'applique pas au type de déclenchement manuel. Si un nombre est fourni, un délai est appliqué aux deux masquer / afficher. La structure de l'objet est -

delay: { show: 500, hide: 100 }
récipient chaîne | false Par défaut - false conteneur de données Ajoute le popover à un élément spécifique. Exemple: container: 'body'

Méthodes

Voici quelques méthodes utiles pour le popover -

Méthode La description Exemple

Options - .popover (options)

Attache un gestionnaire de popover à une collection d'éléments.
$().popover(options)

Toggle - .popover ('bascule')

Active ou désactive le popover d'un élément.
$('#element').popover('toggle')

Show - .popover ('afficher')

Révèle le popover d'un élément.
$('#element').popover('show')

Hide - .popover ('cacher')

Masque le popover d'un élément.
$('#element').popover('hide')

Destroy - .popover ('détruire')

Cache et détruit le popover d'un élément.
$('#element').popover('destroy')

Exemple

L'exemple suivant montre les méthodes du plugin popover -

<div class = "container" style = "padding: 100px 50px 10px;" >
   <button type = "button" class = "btn btn-default popover-show" 
      title = "Popover title" data-container = "body" 
      data-toggle = "popover" data-placement = "left" 
      data-content = "Some content in Popover with show method">
      
      Popover on left
   </button>
   
   <button type = "button" class = "btn btn-primary popover-hide" 
      title = "Popover title" data-container = "body" 
      data-toggle = "popover" data-placement = "top" 
      data-content = "Some content in Popover-hide method">
      
      Popover on top
   </button>
   
   <button type = "button" class = "btn btn-success popover-destroy" 
      title = "Popover title" data-container = "body" 
      data-toggle = "popover" data-placement = "bottom" 
      data-content = "Some content in Popover-destroy method">
      
      Popover on bottom
   </button>
   
   <button type = "button" class = "btn btn-warning popover-toggle" 
      title = "Popover title" data-container = "body" 
      data-toggle = "popover" data-placement = "top" 
      data-content = "Some content in Popover-toggle method">
      
      Popover on right
   </button>
	
   <br><br><br><br><br><br>
   
   <p class = "popover-options">
      <a href = "#" type = "button" class = "btn btn-warning" 
         title = "<h2>Title</h2>" data-container = "body" 
         data-toggle = "popover" data-content = "
         <h4>Some content in Popover-options method</h4>">
         
         Popover
      </a>
   </p>
   
   <script>
      $(function () { $('.popover-show').popover('show');});
      $(function () { $('.popover-hide').popover('hide');});
      $(function () { $('.popover-destroy').popover('destroy');});
      $(function () { $('.popover-toggle').popover('toggle');});
      $(function () { $(".popover-options a").popover({html : true });});
   </script>
	
</div>

Événements

Le tableau suivant répertorie les événements à utiliser avec le plugin popover. Cet événement peut être utilisé pour se connecter à la fonction.

un événement La description Exemple
show.bs.popover Cet événement se déclenche immédiatement lorsque la méthode show instance est appelée.
$('#mypopover').on('show.bs.popover', function () {
   // do something
})
montré.bs.popover Cet événement est déclenché lorsque le popover a été rendu visible à l'utilisateur (attendra la fin des transitions CSS).
$('#mypopover').on('shown.bs.popover', function () {
   // do something
})
hide.bs.popover Cet événement est déclenché immédiatement lorsque la méthode d'instance hide a été appelée.
$('#mypopover').on('hide.bs.popover', function () {
   // do something
})
hidden.bs.popover Cet événement est déclenché lorsque le popover a fini d'être caché à l'utilisateur (attendra la fin des transitions CSS).
$('#mypopover').on('hidden.bs.popover', function () {
   // do something
})

Exemple

L'exemple suivant montre les événements du plugin Popover -

<div clas = "container" style = "padding: 100px 50px 10px;" >
   <button type = "button" class = "btn btn-primary popover-show" 
      title = "Popover title" data-container = "body" data-toggle = "popover" 
      data-content = "Some content in Popover with show method">
      
      Popover on left
   </button>
   
</div>

<script>
   $(function () { $('.popover-show').popover('show');});
   
   $(function () { $('.popover-show').on('shown.bs.popover', function () {
      alert("Alert message on show");
   })});
</script>

Les messages d'alerte sont principalement utilisés pour afficher des informations telles que des messages d'avertissement ou de confirmation aux utilisateurs finaux. En utilisant le plugin de message d'alerte, vous pouvez ajouter une fonctionnalité de rejet à tous les messages d'alerte.

Si vous souhaitez inclure cette fonctionnalité de plugin individuellement, vous aurez besoin du alert.js. Sinon, comme mentionné dans le chapitre Présentation des plugins de démarrage , vous pouvez inclure le fichier bootstrap.js ou le fichier bootstrap.min.js minifié .

Usage

Vous pouvez activer le rejet d'une alerte de deux manières:

  • Via data attributes - Pour ignorer via l'API de données, ajoutez simplement data-dismiss = "alert" sur votre bouton de fermeture pour donner automatiquement une fonctionnalité de fermeture d'alerte.

<a class = "close" data-dismiss = "alert" href = "#" aria-hidden = "true">
   &times;
</a>
  • Via JavaScript - Pour ignorer via JavaScript, utilisez la syntaxe suivante -

$(".alert").alert()

Exemple

L'exemple suivant illustre l'utilisation du plug-in d'alerte via des attributs de données.

<div class = "alert alert-success">
   <a href = "#" class = "close" data-dismiss = "alert">
      &times;
   </a>
   
   <strong>Warning!</strong> There was a problem with your network connection.
</div>

Options

Il n'y a pas d'options ici.

Méthodes

Voici quelques méthodes utiles pour le plugin d'alerte -

Méthode La description Exemple
.alerte() Cette méthode encapsule toutes les alertes avec une fonctionnalité de fermeture.
$('#identifier').alert();

Close Method .alert ('fermer')

Pour permettre la fermeture de toutes les alertes, ajoutez cette méthode.
$('#identifier').alert('close');
Pour permettre aux alertes de s'animer lorsqu'elles sont fermées, assurez-vous qu'elles .fade et .in classe déjà appliquée à eux.

Exemple

L'exemple suivant montre l'utilisation de .alert() méthode -

<h3>Alert messages to demonstrate alert() method </h3>

<div id = "myAlert" class = "alert alert-success">
   <a href = "#" class = "close" data-dismiss = "alert">&times;</a>
   <strong>Success!</strong> the result is successful.
</div>

<div id = "myAlert" class = "alert alert-warning">
   <a href = "#" class = "close" data-dismiss = "alert">&times;</a>
   <strong>Warning!</strong> There was a problem with your network connection.
</div>

<script type = "text/javascript">
   $(function(){
      $(".close").click(function(){ $("#myAlert").alert();
      });
   });  
</script>

L'exemple suivant montre l'utilisation de .alert('close') méthode -

<h3>Alert messages to demonstrate alert('close') method </h3>

<div id = "myAlert" class = "alert alert-success">
   <a href = "#" class = "close" data-dismiss = "alert">&times;</a>
   <strong>Success!</strong> the result is successful.
</div>

<div id = "myAlert" class = "alert alert-warning">
   <a href = "#" class = "close" data-dismiss = "alert">&times;</a>
   <strong>Warning!</strong> There was a problem with your network connection.
</div>

<script type = "text/javascript">
   $(function(){ $(".close").click(function(){
         $("#myAlert").alert('close');
      });
   });  
</script>

Essayez ce code en utilisant le Try itéditeur. Vous pouvez voir que la fonctionnalité de fermeture est appliquée à tous les messages d'alerte, c'est-à-dire ferme tout message d'alerte, le reste des messages d'alerte est également fermé.

Événements

Le tableau suivant répertorie les événements à utiliser avec le plugin d'alerte. Cet événement peut être utilisé pour se connecter à la fonction d'alerte.

un événement La description Exemple
close.bs.alert Cet événement se déclenche immédiatement lorsque la méthode d'instance close est appelée.
$('#myalert').bind('close.bs.alert', function () {
   // do something
})
fermé.bs.alert Cet événement est déclenché lorsque l'alerte a été fermée (attendra la fin des transitions CSS).
$('#myalert').bind('closed.bs.alert', function () {
   // do something
})

Exemple

L'exemple suivant montre les événements du plug-in d'alerte -

<div id = "myAlert" class = "alert alert-success">
   <a href = "#" class = "close" data-dismiss = "alert">&times;</a>
   <strong>Success!</strong> the result is successful.
</div>

<script type = "text/javascript">
   $(function(){
      $("#myAlert").bind('closed.bs.alert', function () {
         alert("Alert message box is closed.");
      });
   });
</script>

Les boutons ont été expliqués dans le chapitre Boutons Bootstrap . Avec ce plugin, vous pouvez ajouter des interactions telles que les états des boutons de contrôle ou créer des groupes de boutons pour plus de composants tels que des barres d'outils.

Si vous souhaitez inclure cette fonctionnalité de plugin individuellement, vous aurez besoin du button.js. Sinon, comme mentionné dans le chapitre Présentation des plugins d'amorçage , vous pouvez inclure le fichier bootstrap.js ou le fichier minifié bootstrap.min.js .

État de chargement

Pour ajouter un état de chargement à un bouton, ajoutez simplement le data-loading-text = "Loading..." en tant qu'attribut de l'élément bouton, comme indiqué dans l'exemple suivant -

<button id = "fat-btn" class = "btn btn-primary" data-loading-text = "Loading..." type = "button"> 
   Loading state 
</button>

<script>
   $(function() { 
      $(".btn").click(function(){ $(this).button('loading').delay(1000).queue(function() {
            // $(this).button('reset');
         });        
      });
   });  
</script>

Lorsque vous cliquez sur le bouton, la sortie sera comme le montre l'image suivante -

Bascule simple

Pour activer le basculement (c'est-à-dire changer l'état normal d'un bouton en état de poussée et vice versa) sur un seul bouton, ajoutez le data-toggle = "button" en tant qu'attribut de l'élément bouton, comme indiqué dans l'exemple suivant -

<button type = "button" class = "btn btn-primary" data-toggle = "button">
   Single toggle
</button>

Case à cocher

Vous pouvez créer un groupe de cases à cocher et y ajouter un basculement en ajoutant simplement l'attribut de données data-toggle = "buttons" à la btn-group.

<div class = "btn-group" data-toggle = "buttons">
   <label class = "btn btn-primary">
      <input type = "checkbox"> Option 1
   </label>
   
   <label class = "btn btn-primary">
      <input type = "checkbox"> Option 2
   </label>
   
   <label class = "btn btn-primary">
      <input type = "checkbox"> Option 3
   </label>
</div>

Radio

De même, vous pouvez créer un groupe d'entrées radio et y ajouter un basculement en ajoutant simplement l'attribut data data-toggle = "buttons" à la btn-group.

<div class = "btn-group" data-toggle = "buttons">
   <label class = "btn btn-primary">
      <input type = "radio" name =" options" id = "option1"> Option 1
   </label>
   
   <label class = "btn btn-primary">
      <input type = "radio" name = "options" id = "option2"> Option 2
   </label>
   
   <label class = "btn btn-primary">
      <input type = "radio" name = "options" id = "option3"> Option 3
   </label>
</div>

Usage

Vous pouvez activer le plugin des boutons via JavaScript comme indiqué ci-dessous -

$('.btn').button()

Options

Il n'y a pas d'options.

Méthodes

Voici quelques-unes des méthodes utiles pour le plugin de boutons -

Méthode La description Exemple

bouton ('toggle')

Active / désactive l'état push. Donne au bouton l'apparence qu'il a été activé. Vous pouvez également activer le basculement automatique d'un bouton en utilisant ledata-toggle attribut.

$().button('toggle')

.button ('chargement')

Lors du chargement, le bouton est désactivé et le texte est remplacé par l'option de la data-loading-text attribut de l'élément bouton

$().button('loading')

.button ('réinitialiser')

Réinitialise l'état du bouton, ramenant le contenu d'origine au texte. Cette méthode est utile lorsque vous devez ramener le bouton à l'état principal

$().button('reset')

.button (chaîne)

La chaîne dans cette méthode fait référence à toute chaîne déclarée par l'utilisateur. Pour réinitialiser l'état du bouton et introduire un nouveau contenu, utilisez cette méthode.

$().button(string)

Exemple

L'exemple suivant illustre l'utilisation des méthodes ci-dessus -

<h2>Click on each of the buttons to see the effects of methods</h2>
<h4>Example to demonstrate .button('toggle') method</h4>

<div id = "myButtons1" class = "bs-example">
   <button type = "button" class = "btn btn-primary">Primary</button>
</div>

<h4>Example to demonstrate  .button('loading') method</h4>

<div id = "myButtons2" class = "bs-example">
   <button type = "button" class = "btn btn-primary" data-loading-text = "Loading...">
      Primary
   </button>
</div>

<h4>Example to demonstrate .button('reset') method</h4>

<div id = "myButtons3" class = "bs-example">
   <button type = "button" class = "btn btn-primary" data-loading-text = "Loading...">
      Primary
   </button>
</div>

<h4>Example to demonstrate  .button(string) method</h4>

<button type = "button" class = "btn btn-primary" id = "myButton4" 
   data-complete-text = "Loading finished">
   Click Me
</button>

<script type = "text/javascript">
   $(function () { $("#myButtons1 .btn").click(function(){
         $(this).button('toggle'); }); }); $(function() { 
      $("#myButtons2 .btn").click(function(){ $(this).button('loading').delay(1000).queue(function() {
         });        
      });
   });   
   
   $(function() { $("#myButtons3 .btn").click(function(){
         $(this).button('loading').delay(1000).queue(function() { $(this).button('reset');
         });        
      });
   });  
   
   $(function() { $("#myButton4").click(function(){
         $(this).button('loading').delay(1000).queue(function() { $(this).button('complete');
         });        
      });
   }); 
</script>

Le plugin de réduction facilite la création de divisions de réduction de la page. Que vous l'utilisiez pour créer une navigation en accordéon ou des zones de contenu, il permet de nombreuses options de contenu.

Si vous souhaitez inclure cette fonctionnalité de plugin individuellement, vous aurez besoin du collapse.js. Cela nécessite également que le plugin Transition soit inclus dans votre version de Bootstrap. Sinon, comme mentionné dans le chapitre Présentation des plugins de démarrage , vous pouvez inclure le fichier bootstrap.js ou le fichier bootstrap.min.js minifié .

Vous pouvez utiliser le plugin de réduction -

  • To create collapsible groups or accordion. Cela peut être créé comme dans l'exemple ci-dessous -

<div class = "panel-group" id = "accordion">
   <div class = "panel panel-default">
      
      <div class = "panel-heading">
         <h4 class = "panel-title">
            <a data-toggle = "collapse" data-parent = "#accordion" href = "#collapseOne">
               Click me to expand. Click me again to collapse.Section 1
            </a>
         </h4>
      </div>
      
      <div id = "collapseOne" class = "panel-collapse collapse in">
         <div class = "panel-body">
            Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred 
               nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo.
         </div>
      </div>
      
   </div>
   
   <div class = "panel panel-default">
      <div class = "panel-heading">
         <h4 class = "panel-title">
            <a data-toggle = "collapse" data-parent = "#accordion" href = "#collapseTwo">
               Click me to expand. Click me again to collapse.Section 2
            </a>
         </h4>
      </div>

      <div id = "collapseTwo" class = "panel-collapse collapse">
         <div class = "panel-body">
            Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt 
               sapiente ea proident. Ad vegan excepteur butcher vice lomo.
         </div>
      </div>
      
   </div>
   
   <div class = "panel panel-default">
      <div class = "panel-heading">
         <h4 class = "panel-title">
            <a data-toggle = "collapse" data-parent = "#accordion" href = "#collapseThree">
               Click me to expand. Click me again to collapse.Section 3
            </a>
         </h4>
      </div>
     
      <div id = "collapseThree" class = "panel-collapse collapse">
         <div class = "panel-body">
            Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt 
               sapiente ea proident. Ad vegan excepteur butcher vice lomo.
         </div>
      </div>
     
   </div>
</div>
  • data-toggle = "collapse" est ajouté au lien sur lequel vous cliquez pour développer ou réduire le composant.

  • href ou un data-targetL'attribut est ajouté au composant parent, dont la valeur est id du composant enfant.

  • data-parent L'attribut est ajouté pour créer l'effet accordéon.

  • Pour créer un simple pliable sans le balisage d'accordéon - Cela peut être créé comme dans l'exemple d'exemple ci-dessous -

<button type = "button" class = "btn btn-primary" data-toggle = "collapse" data-target = "#demo">
   simple collapsible
</button>

<div id = "demo" class = "collapse in">
   Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
      sapiente ea proident. Ad vegan excepteur butcher vice lomo.
</div>

Comme vous pouvez le voir dans l'exemple, nous avons créé un simple composant pliable, contrairement à l'accordéon, nous n'avons pas ajouté l'attribut data-parent.

Usage

Le tableau suivant répertorie les classes que le plugin de réduction utilise pour gérer le gros du travail -

Sr.No. Classe et description
1

.collapse

Cache le contenu.

2

.collapse.in

Affiche le contenu.

3

.collapsing

Est ajouté au début de la transition et supprimé à la fin.

Vous pouvez utiliser le plugin de réduction de deux manières -

  • Via data attributes - Ajouter data-toggle = "collapse" et un data-targetà l'élément pour attribuer automatiquement le contrôle d'un élément réductible. ledata-targetL'attribut acceptera un sélecteur CSS auquel appliquer la réduction. Assurez-vous d'ajouter la classe.collapseà l'élément pliable. Si vous souhaitez qu'il s'ouvre par défaut, incluez la classe supplémentaire.in.

    Pour ajouter une gestion de groupe de type accordéon à un contrôle réductible, ajoutez l'attribut data data-parent = "#selector".

  • Via JavaScript - La méthode de réduction peut être activée avec JavaScript comme indiqué ci-dessous -

$('.collapse').collapse()

Options

Certaines options peuvent être transmises via des attributs de données ou JavaScript sont répertoriées dans le tableau suivant -

Nom de l'option Type / Valeur par défaut Nom d'attribut de données La description
parent sélecteur Par défaut - faux parent de données Si selector est faux, alors tous les éléments réductibles sous le parent spécifié seront fermés (similaire au comportement d'accordéon traditionnel - cela dépend de la classe du groupe d'accordéon).
basculer Valeur booléenne par défaut - true bascule de données Active / désactive l'élément réductible lors de l'appel.

Méthodes

Voici une liste de quelques méthodes utiles utilisées avec des éléments réductibles.

Méthode La description Exemple

Options - .collapse (options)

Active votre contenu en tant qu'élément pliable. Accepte un objet d'options facultatif.
$('#identifier').collapse({
   toggle: false
})

Toggle - .collapse ('basculer')

Bascule un élément réductible sur affiché ou masqué.
$('#identifier').collapse('toggle')

Show - .collapse ('afficher')

Affiche un élément pliable.
$('#identifier').collapse('show')

Hide - .collapse ('cacher')

Masque un élément pliable.
$('#identifier').collapse('hide')

Exemple

L'exemple suivant montre l'utilisation des méthodes -

<div class = "panel-group" id = "accordion">
   <div class = "panel panel-default">
      
      <div class = "panel-heading">
         <h4 class = "panel-title">
            <a data-toggle = "collapse" data-parent = "#accordion" href = "#collapseOne">
               Click me to expand. Click me again to collapse. Section 1--hide method
            </a>
         </h4>
      </div>
      
      <div id = "collapseOne" class = "panel-collapse collapse in">
         <div class = "panel-body">
            Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt 
               sapiente ea proident. Ad vegan excepteur butcher vice lomo.
         </div>
      </div>
      
   </div>
   
   <div class = "panel panel-success">
      <div class = "panel-heading">
         <h4 class = "panel-title">
            <a data-toggle = "collapse" data-parent = "#accordion" href = "#collapseTwo">
               Click me to expand. Click me again to collapse. Section 2--show method
            </a>
         </h4>
      </div>
      
      <div id = "collapseTwo" class = "panel-collapse collapse">
         <div class = "panel-body">
            Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt 
               sapiente ea proident. Ad vegan excepteur butcher vice lomo.
         </div>
      </div>
      
   </div>
   
   <div class = "panel panel-info">
      <div class = "panel-heading">
         <h4 class = "panel-title">
            <a data-toggle = "collapse" data-parent = "#accordion" href = "#collapseThree">
               Click me to expand. Click me again to collapse. Section 3--toggle method
            </a>
         </h4>
      </div>
      
      <div id = "collapseThree" class = "panel-collapse collapse">
         <div class = "panel-body">
            Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt 
               sapiente ea proident. Ad vegan excepteur butcher vice lomo.
         </div>
      </div>
   </div>
   
   <div class = "panel panel-warning">
      <div class = "panel-heading">
         <h4 class = "panel-title">
            <a data-toggle = "collapse" data-parent = "#accordion" href = "#collapseFour">
               Click me to expand. Click me again to collapse. Section 4--options method
            </a>
         </h4>
      </div>
      
      <div id = "collapseFour" class = "panel-collapse collapse">
         <div class = "panel-body">
            Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt 
               sapiente ea proident. Ad vegan excepteur butcher vice lomo.
         </div>
      </div>
      
   </div>
</div>

<script type = "text/javascript">
   $(function () { $('#collapseFour').collapse({ toggle: false })}); $(function () { $('#collapseTwo').collapse('show')}); $(function () { $('#collapseThree').collapse('toggle')}); $(function () { $('#collapseOne').collapse('hide')});
</script>

Événements

Le tableau suivant répertorie quelques événements pouvant être utilisés avec la fonctionnalité de réduction.

un événement La description Exemple
show.bs.collapse Lancé après l'appel de la méthode show.
$('#identifier').on('show.bs.collapse', function () {
   // do something
})
montré.bs.collapse Cet événement est déclenché lorsqu'un élément de réduction a été rendu visible par l'utilisateur (attendra la fin des transitions CSS).
$('#identifier').on('shown.bs.collapse', function () {
   // do something
})
hide.bs.collapse Lancé lorsque la méthode d'instance hide a été appelée.
$('#identifier').on('hide.bs.collapse', function () {
   // do something
})
hidden.bs.collapse Cet événement est déclenché lorsqu'un élément de réduction a été caché à l'utilisateur (attendra la fin des transitions CSS).
$('#identifier').on('hidden.bs.collapse', function () {
   // do something
})

Exemple

L'exemple suivant montre l'utilisation des événements -

<div class = "panel-group" id = "accordion">
   <div class = "panel panel-info">
   
      <div class = "panel-heading">
         <h4 class = "panel-title">
            <a data-toggle = "collapse" data-parent = "#accordion" href = "#collapseexample">
               Click me to expand. Click me again to collapse. Section --shown event
            </a>
         </h4>
      </div>
      
      <div id = "collapseexample" class = "panel-collapse collapse">
         <div class = "panel-body">
            Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
               sapiente ea proident. Ad vegan excepteur butcher vice lomo.
         </div>
      </div>
      
   </div>
</div>

<script type = "text/javascript">
   $(function () { 
      $('#collapseexample').on('show.bs.collapse', function () {
         alert('Hey, this alert shows up when you expand it');
      })
   });
</script>

Le carrousel Bootstrap est un moyen flexible et réactif d'ajouter un curseur à votre site. En plus d'être réactif, le contenu est suffisamment flexible pour autoriser des images, des iframes, des vidéos ou à peu près tout type de contenu que vous pourriez souhaiter.

Si vous souhaitez inclure cette fonctionnalité de plugin individuellement, vous aurez besoin du carousel.js. Sinon, comme mentionné dans le chapitre Présentation des plugins de démarrage , vous pouvez inclure le fichier bootstrap.js ou le fichier bootstrap.min.js minifié .

Exemple

Un simple diaporama ci-dessous montre un composant générique permettant de parcourir les éléments comme un carrousel, en utilisant le plugin de carrousel Bootstrap. Pour implémenter le carrousel, il vous suffit d'ajouter le code avec le balisage. Il n'y a pas besoin d'attributs de données, juste un simple développement basé sur les classes.

<div id = "myCarousel" class = "carousel slide">
   
   <!-- Carousel indicators -->
   <ol class = "carousel-indicators">
      <li data-target = "#myCarousel" data-slide-to = "0" class = "active"></li>
      <li data-target = "#myCarousel" data-slide-to = "1"></li>
      <li data-target = "#myCarousel" data-slide-to = "2"></li>
   </ol>   
   
   <!-- Carousel items -->
   <div class = "carousel-inner">
      <div class = "item active">
         <img src = "/bootstrap/images/slide1.png" alt = "First slide">
      </div>
      
      <div class = "item">
         <img src = "/bootstrap/images/slide2.png" alt = "Second slide">
      </div>
      
      <div class = "item">
         <img src = "/bootstrap/images/slide3.png" alt = "Third slide">
      </div>
   </div>
   
   <!-- Carousel nav -->
   <a class = "carousel-control left" href = "#myCarousel" data-slide = "prev">&lsaquo;</a>
   <a class = "carousel-control right" href = "#myCarousel" data-slide = "next">&rsaquo;</a>
   
</div>

Légendes facultatives

Vous pouvez facilement ajouter des légendes à vos diapositives avec le .carousel-caption élément dans tout .item. Placez-y à peu près n'importe quel code HTML facultatif et il sera automatiquement aligné et formaté. L'exemple suivant illustre ceci -

<div id = "myCarousel" class = "carousel slide">
   
   <!-- Carousel indicators -->
   <ol class = "carousel-indicators">
      <li data-target = "#myCarousel" data-slide-to = "0" class = "active"></li>
      <li data-target = "#myCarousel" data-slide-to = "1"></li>
      <li data-target = "#myCarousel" data-slide-to = "2"></li>
   </ol>   
   
   <!-- Carousel items -->
   <div class = "carousel-inner">
      <div class = "item active">
         <img src = "/bootstrap/images/slide1.png" alt = "First slide">
         <div class = "carousel-caption">This Caption 1</div>
      </div>
      
      <div class = "item">
         <img src = "/bootstrap/images/slide2.png" alt = "Second slide">
         <div class = "carousel-caption">This Caption 2</div>
      </div>
      
      <div class = "item">
         <img src = "/bootstrap/images/slide3.png" alt = "Third slide">
         <div class = "carousel-caption">This Caption 3</div>
      </div>
   </div>
   
   <!-- Carousel nav --> 
   <a class = "carousel-control left" href = "#myCarousel" data-slide = "prev">&lsaquo;</a>
   <a class = "carousel-control right" href = "#myCarousel" data-slide = "next">&rsaquo;</a>+
</div>

Usage

  • Via data attributes - Utilisez les attributs de données pour contrôler facilement la position du carrousel.

    • Attribut data-slideaccepte les mots-clés précédent ou suivant , qui modifie la position de la diapositive par rapport à sa position actuelle.

    • Utilisation data-slide-to pour passer un index de diapositive brut au carrousel data-slide-to = "2", qui décale la position de la diapositive vers un index particulier commençant par 0.

    • le data-ride = "carousel" L'attribut est utilisé pour marquer un carrousel comme une animation à partir du chargement de la page.

  • Via JavaScript - Le carrousel peut être appelé manuellement avec JavaScript comme ci-dessous -

$('.carousel').carousel()

Options

Il existe certaines options qui peuvent être transmises via des attributs de données ou JavaScript sont répertoriées dans le tableau suivant -

Nom de l'option Type / Valeur par défaut Nom d'attribut de données La description
intervalle nombre Par défaut - 5000 intervalle de données Délai entre le cycle automatique d'un élément. Si faux, le carrousel ne fonctionnera pas automatiquement.
pause string Default - "hover" pause de données Interrompt le cycle du carrousel sur mouseenter et reprend le cycle du carrousel sur souris.
emballage Valeur booléenne par défaut - true enveloppe de données Si le carrousel doit fonctionner en continu ou avoir des arrêts durs.

Méthodes

Voici une liste de méthodes utiles qui peuvent être utilisées avec du code carrousel.

Méthode La description Exemple
.carousel (options) Initialise le carrousel avec un objet d'options facultatif et commence à parcourir les éléments.
$('#identifier').carousel({
   interval: 2000
})
.carousel ('cycle') Fait défiler les éléments du carrousel de gauche à droite.
$('#identifier').carousel('cycle')
.carousel ('pause') Empêche le carrousel de parcourir les éléments.
$('#identifier')..carousel('pause')
.carousel (nombre) Fait passer le carrousel à une image particulière (basée sur 0, similaire à un tableau).
$('#identifier').carousel(number)
.carousel ('précédent') Passe à l'élément précédent.
$('#identifier').carousel('prev')
.carousel ('suivant') Passe à l'élément suivant.
$('#identifier').carousel('next')

Exemple

L'exemple suivant montre l'utilisation des méthodes -

<div id = "myCarousel" class = "carousel slide">
   
   <!-- Carousel indicators -->
   <ol class = "carousel-indicators">
      <li data-target = "#myCarousel" data-slide-to = "0" class = "active"></li>
      <li data-target = "#myCarousel" data-slide-to = "1"></li>
      <li data-target = "#myCarousel" data-slide-to = "2"></li>
   </ol>   
   
   <!-- Carousel items -->
   <div class = "carousel-inner">
      <div class = "item active">
         <img src = "/bootstrap/images/slide1.png" alt = "First slide">
      </div>
      
      <div class = "item">
         <img src = "/bootstrap/images/slide2.png" alt = "Second slide">
      </div>
      
      <div class = "item">
         <img src = "/bootstrap/images/slide3.png" alt = "Third slide">
      </div>
   </div>
   
   <!-- Carousel nav -->
   <a class = "carousel-control left" href = "#myCarousel" data-slide = "prev">&lsaquo;</a>
   <a class = "carousel-control right" href = "#myCarousel" data-slide = "next">&rsaquo;</a>
   
   <!-- Controls buttons -->
   <div style = "text-align:center;">
      <input type = "button" class = "btn prev-slide" value = "Previous Slide">
      <input type = "button" class = "btn next-slide" value = "Next Slide">
      <input type = "button" class = "btn slide-one" value = "Slide 1">
      <input type = "button" class = "btn slide-two" value = "Slide 2">            
      <input type = "button" class = "btn slide-three" value = "Slide 3">
   </div>
	
</div> 

<script>
   $(function() { // Cycles to the previous item $(".prev-slide").click(function() {
         $("#myCarousel").carousel('prev'); }); // Cycles to the next item $(".next-slide").click(function() {
         $("#myCarousel").carousel('next'); }); // Cycles the carousel to a particular frame $(".slide-one").click(function() {
         $("#myCarousel").carousel(0); }); $(".slide-two").click(function() {
         $("#myCarousel").carousel(1); }); $(".slide-three").click(function() {
         $("#myCarousel").carousel(2);
      });
   });
</script>

Événements

La classe carrousel de Bootstrap expose deux événements pour le raccordement à la fonctionnalité de carrousel qui sont répertoriés dans le tableau suivant.

un événement La description Exemple
slide.bs.carousel Cet événement se déclenche immédiatement lorsque la méthode d'instance de diapositive est appelée.
$('#identifier').on('slide.bs.carousel', function () {
   // do something
})
slid.bs.carousel Cet événement est déclenché lorsque le carrousel a terminé sa transition de diapositive.
$('#identifier').on('slid.bs.carousel', function () {
   // do something
})

Exemple

L'exemple suivant montre l'utilisation des événements -

<div id = "myCarousel" class = "carousel slide">
   
   <!-- Carousel indicators -->
   <ol class = "carousel-indicators">
      <li data-target = "#myCarousel" data-slide-to = "0" class = "active"></li>
      <li data-target = "#myCarousel" data-slide-to = "1"></li>
      <li data-target = "#myCarousel" data-slide-to = "2"></li>
   </ol>   
   
   <!-- Carousel items -->
   <div class = "carousel-inner">
      <div class = "item active">
         <img src = "/bootstrap/images/slide1.png" alt = "First slide">
      </div>
      
      <div class = "item">
         <img src = "/bootstrap/images/slide2.png" alt = "Second slide">
      </div>
      
      <div class = "item">
         <img src = "/bootstrap/images/slide3.png" alt = "Third slide">
      </div>
   </div>
   
   <!-- Carousel nav -->
   <a class = "carousel-control left" href = "#myCarousel" data-slide = "prev">&lsaquo;</a>
   <a class = "carousel-control right" href = "#myCarousel" data-slide = "next">&rsaquo;</a>
	
</div> 

<script>
   $(function() {
      $('#myCarousel').on('slide.bs.carousel', function () {
         alert("This event fires immediately when the slide instance method" +"is invoked.");
      });
   });
</script>

Le plugin affixe permet à un <div> d'être apposé à un emplacement sur la page. Vous pouvez également activer et désactiver l'épinglage à l'aide de ce plugin. Les icônes sociales en sont un exemple courant. Ils commenceront à un endroit, mais lorsque la page atteindra une certaine marque, la <div> sera verrouillée en place et cessera de défiler avec le reste de la page.

Si vous souhaitez inclure cette fonctionnalité de plugin individuellement, vous aurez besoin du affix.js. Sinon, comme mentionné dans le chapitre Présentation des plugins de démarrage , vous pouvez inclure le fichier bootstrap.js ou le fichier bootstrap.min.js minifié .

Usage

Vous pouvez utiliser le plugin affixe via des attributs de données ou manuellement avec votre propre JavaScript comme indiqué ci-dessous.

  • Via data attributes - Pour ajouter facilement un comportement d'affixe à n'importe quel élément, il suffit d'ajouter data-spy = "affix"à l'élément que vous souhaitez espionner. Utilisez les décalages pour définir quand basculer l'épinglage d'un élément.

Exemple

L'exemple suivant illustre l'utilisation via les attributs de données -

<div class = "container">
   <div class = "jumbotron">
      <h1>Bootstrap Affix Plugin example</h1>
   </div>
   
   <div id = "myNav"  data-spy = "affix" data-offset-top = "60" data-offset-bottom = "200">
	
      <div class = "col-md-3">
         <ul class = "nav nav-tabs nav-stacked affix" data-spy = "affix" data-offset-top = "190">
            <li class = "active"><a href = "#one">Tutorial One</a></li>
            <li><a href = "#two">Tutorial Two</a></li>
            <li><a href = "#three">Tutorial Three</a></li>
         </ul>
      </div>
      
      <div class = "col-md-9">
         <h2 id = "one">Tutorial One</h2>
         
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
            Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus,
            dapibus nec turpis vel, semper malesuada ante. Vestibulum 
            id metus ac nisl bibendum scelerisque non non purus. Suspendisse 
            varius nibh non aliquet sagittis. In tincidunt orci sit amet 
            elementum vestibulum. Vivamus fermentum in arcu in aliquam. Quisque 
            aliquam porta odio in fringilla. Vivamus nisl leo, blandit at bibendum 
            eu, tristique eget risus. Integer aliquet quam ut elit suscipit, 
            id interdum neque porttitor. Integer faucibus ligula.</p>
				
         <p>Vestibulum quis quam ut magna consequat faucibus. 
            Pellentesque eget nisi a mi suscipit tincidunt. Ut tempus dictum 
            risus. Pellentesque viverra sagittis quam at mattis. Suspendisse
            potenti. Aliquam sit amet gravida nibh, facilisis gravida odio.
            Phasellus auctor velit at lacus blandit, commodo iaculis justo
            viverra. Etiam vitae est arcu. Mauris vel congue dolor. Aliquam eget
            mi mi. Fusce quam tortor, commodo ac dui quis, bibendum viverra erat.
            Maecenas mattis lectus enim, quis tincidunt dui molestie euismod.
            Curabitur et diam tristique, accumsan nunc eu, hendrerit tellus.</p>
				
         <hr>
         
         <h2 id = "two">Tutorial Two</h2>
			
         <p>Nullam hendrerit justo non leo aliquet imperdiet. Etiam in 
            sagittis lectus. Suspendisse ultrices placerat accumsan. Mauris quis 
            dapibus orci. In dapibus velit blandit pharetra tincidunt. 
            Quisque non sapien nec lacus condimentum facilisis ut iaculis enim.
            Sed viverra interdum bibendum. Donec ac sollicitudin dolor. Sed 
            fringilla vitae lacus at rutrum. Phasellus congue vestibulum ligula sed consequat.</p>
				
         <p>Vestibulum consectetur scelerisque lacus, ac fermentum lorem 
            convallis sed. Nam odio tortor, dictum quis malesuada at, 
            pellentesque vitae orci. Vivamus elementum, felis eu auctor lobortis,
            diam velit egestas lacus, quis fermentum metus ante quis urna. Sed at 
            facilisis libero. Cum sociis natoque penatibus et magnis dis
            parturient montes, nascetur ridiculus mus. Vestibulum bibendum 
            blandit dolor. Nunc orci dolor, molestie nec nibh in, hendrerit
            tincidunt ante. Vivamus sem augue, hendrerit non sapien in, 
            mollis ornare augue.</p>
				
         <hr>
         
         <h2 id = "three">Tutorial Three</h2>
			
         <p>Integer pulvinar leo id risus pellentesque vestibulum. 
            Sed diam libero, sodales eget sapien vel, porttitor bibendum enim. 
            Donec sed nibh vitae lorem porttitor blandit in nec ante. 
            Pellentesque vitae metus ipsum. Phasellus sed nunc ac sem malesuada 
            condimentum. Etiam in aliquam lectus. Nam vel sapien diam. Donec
            pharetra id arcu eget blandit. Proin imperdiet mattis augue in
            porttitor. Quisque tempus enim id lobortis feugiat. Suspendisse 
            tincidunt risus quis dolor fringilla blandit. Ut sed sapien at purus
            lacinia porttitor. Nullam iaculis, felis a pretium ornare, dolor nisl
            semper tortor, vel sagittis lacus est consequat eros. Sed id pretium
            nisl. Curabitur dolor nisl, laoreet vitae aliquam id, tincidunt sit 
            amet mauris. </p>
				
         <p>Phasellus vitae suscipit justo. Mauris pharetra feugiat ante 
            id lacinia. Etiam faucibus mauris id tempor egestas. Duis luctus
            turpis at accumsan tincidunt. Phasellus risus risus,
            volutpat vel tellus ac, tincidunt fringilla massa. Etiam hendrerit 
            dolor eget ante rutrum adipiscing. Cras interdum ipsum mattis, 
            tempus mauris vel, semper ipsum. Duis sed dolor ut enim lobortis 
            pellentesque ultricies ac ligula. Pellentesque convallis  elit nisi, id 
            vulputate ipsum ullamcorper ut. Cras ac pulvinar purus, ac viverra est. Suspendisse 
            potenti. Integer pellentesque neque et elementum tempus. 
            Curabitur bibendum in ligula ut rhoncus.</p>
				
         <p>Quisque pharetra velit id velit iaculis pretium. Nullam a justo 
            sed ligula porta semper eu quis enim. Pellentesque pellentesque,
            metus at facilisis hendrerit, lectus velit facilisis leo, quis
            volutpat turpis arcu quis enim. Nulla viverra lorem elementum
            interdum ultricies. Suspendisse accumsan quam nec ante mollis tempus.
            Morbi vel accumsan diam, eget convallis tellus. Suspendisse potenti.</p>
      </div>
      
   </div>
</div>
  • Via JavaScript - Vous pouvez apposer un élément manuellement avec JavaScript comme indiqué ci-dessous

$('#myAffix').affix({
   offset: {
      top: 100, bottom: function () {
         return (this.bottom = $('.bs-footer').outerHeight(true))
      }
   }
})

Exemple

L'exemple suivant illustre l'utilisation via les attributs de données -

<div class = "container">
   <div class = "jumbotron">
      <h1>Bootstrap Affix Plugin example</h1>
   </div>
   
   <div>
	
      <div class = "col-md-3">
         <ul class = "nav nav-tabs nav-stacked affix" id = "myNav">
            <li class = "active"><a href = "#one">Tutorial One</a></li>
            <li><a href = "#two">Tutorial Two</a></li>
            <li><a href = "#three">Tutorial Three</a></li>
         </ul>
      </div>
      
      <div class = "col-md-9">
         <h2 id = "one">Tutorial One</h2>
			
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
            Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus, 
            dapibus nec turpis vel, semper malesuada ante. Vestibulum id metus
            ac nisl bibendum scelerisque non non purus. Suspendisse varius nibh 
            non aliquet sagittis. In tincidunt orci sit amet elementum vestibulum. 
            Vivamus fermentum in arcu in aliquam. Quisque aliquam porta odio 
            in fringilla. Vivamus nisl leo, blandit at bibendum eu, tristique 
            eget risus. Integer aliquet quam ut elit suscipit, id interdum 
            neque porttitor. Integer faucibus ligula.</p>
				
         <p>Vestibulum quis quam ut magna consequat faucibus. 
            Pellentesque eget nisi a mi suscipit tincidunt. Ut tempus dictum
            risus. Pellentesque viverra sagittis quam at mattis. Suspendisse
            potenti. Aliquam sit amet gravida nibh, facilisis gravida odio.
            Phasellus auctor velit at lacus blandit, commodo iaculis justo
            viverra. Etiam vitae est arcu. Mauris vel congue dolor. 
            Aliquam eget mi mi. Fusce quam tortor, commodo ac dui quis,
            bibendum viverra erat. Maecenas mattis lectus enim, quis tincidunt
            dui molestie euismod. Curabitur et diam tristique, accumsan nunc eu,
            hendrerit tellus.</p>
				
         <hr>
         
         <h2 id = "two">Tutorial Two</h2>
			
         <p>Nullam hendrerit justo non leo aliquet imperdiet. Etiam in
            sagittis lectus. Suspendisse ultrices placerat accumsan. Mauris 
            quis dapibus orci. In dapibus velit blandit pharetra tincidunt.
            Quisque non sapien nec lacus condimentum facilisis ut iaculis enim.
            Sed viverra interdum bibendum. Donec ac sollicitudin dolor. 
            Sed fringilla vitae lacus at rutrum. Phasellus congue vestibulum 
            ligula sed consequat.</p>
				
         <p>Vestibulum consectetur scelerisque lacus, ac fermentum lorem 
            convallis sed. Nam odio tortor, dictum quis malesuada at, 
            pellentesque vitae orci. Vivamus elementum, felis eu auctor lobortis,
            diam velit egestas lacus, quis fermentum metus ante quis urna. 
            Sed at facilisis libero. Cum sociis natoque penatibus et magnis dis 
            parturient montes, nascetur ridiculus mus. Vestibulum bibendum 
            blandit dolor. Nunc orci dolor, molestie nec nibh in, hendrerit
            tincidunt ante. Vivamus sem augue, hendrerit non sapien in, 
            mollis ornare augue.</p>
				
         <hr>
         
         <h2 id = "three">Tutorial Three</h2>
			
         <p>Integer pulvinar leo id risus pellentesque vestibulum. 
            Sed diam libero, sodales eget sapien vel, porttitor bibendum enim. 
            Donec sed nibh vitae lorem porttitor blandit in nec ante. 
            Pellentesque vitae metus ipsum. Phasellus sed nunc ac sem malesuada
            condimentum. Etiam in aliquam lectus. Nam vel sapien diam. 
            Donec pharetra id arcu eget blandit. Proin imperdiet mattis augue in 
            porttitor. Quisque tempus enim id lobortis feugiat. Suspendisse 
            tincidunt risus quis dolor fringilla blandit. Ut sed sapien at
            purus lacinia porttitor. Nullam iaculis, felis a pretium ornare,
            dolor nisl semper tortor, vel sagittis lacus est consequat eros. 
            Sed id pretium nisl. Curabitur dolor nisl, laoreet vitae aliquam id, 
            tincidunt sit amet mauris.</p>
				
         <p>Phasellus vitae suscipit justo. Mauris pharetra feugiat ante id
            lacinia. Etiam faucibus mauris id tempor egestas. Duis luctus turpis
            at accumsan tincidunt. Phasellus risus risus, volutpat vel tellus ac,
            tincidunt fringilla massa. Etiam hendrerit dolor eget ante 
            rutrum adipiscing. Cras interdum ipsum mattis, tempus mauris vel,
            semper ipsum. Duis sed dolor ut enim lobortis pellentesque ultricies
            ac ligula. Pellentesque convallis  elit nisi, id vulputate ipsum
            ullamcorper ut. Cras ac pulvinar purus, ac viverra est. Suspendisse 
            potenti. Integer pellentesque neque et elementum tempus. 
            Curabitur bibendum in ligula ut rhoncus.</p>
				
         <p>Quisque pharetra velit id velit iaculis pretium. Nullam a justo
            sed ligula porta semper eu quis enim. Pellentesque pellentesque,
            metus at facilisis hendrerit, lectus velit facilisis leo, quis 
            volutpat turpis arcu quis enim. Nulla viverra lorem elementum 
            interdum ultricies. Suspendisse accumsan quam nec ante mollis tempus.
            Morbi vel accumsan diam, eget convallis tellus. Suspendisse potenti.</p>
      </div>
      
   </div>
</div>

<script type = "text/javascript">
   $(function () {
      $('#myNav').affix({
         offset: {
            top: 60  
         }
      });
   });
</script>

Positionnement via CSS

Dans les deux situations ci-dessus, vous devez fournir du CSS pour le positionnement de votre contenu. Le plugin affix bascule entre trois classes, chacune représentant un état particulier - .affix, .affix-top et .affix-bottom . Suivez les étapes ci-dessous pour définir votre CSS pour l'une des options d'utilisation ci-dessus.

  • Pour commencer, le plugin ajoute .affix-toppour indiquer que l'élément est dans sa position la plus haute. À ce stade, aucun positionnement CSS n'est requis.

  • Faire défiler au-delà de l'élément que vous souhaitez apposer devrait déclencher l'apposition réelle. C'est ici que.affix remplace .affix-top et ensembles position: fixed; (fourni par le code CSS de Bootstrap).

  • Si un décalage inférieur est défini, le défilement au-delà doit remplacer .affix avec .affix-bottom. Étant donné que les décalages sont facultatifs, en définir un vous oblige à définir le CSS approprié. Dans ce cas, ajoutezposition: absolute; quand c'est nécessaire.

Options

Certaines options peuvent être transmises via des attributs de données ou JavaScript, comme indiqué dans le tableau suivant -

Nom de l'option Type / Valeur par défaut Nom d'attribut de données La description
décalage nombre | fonction | objet Par défaut: 10 décalage de données Pixels à décaler de l'écran lors du calcul de la position du défilement. Si un seul nombre est fourni, le décalage sera appliqué à la fois dans les directions supérieure et inférieure. Pour fournir un décalage unique, inférieur et supérieur, fournissez simplement un décalage d'objet: {top: 10} ou offset: {top: 10, bottom: 5}. Utilisez une fonction lorsque vous devez calculer dynamiquement un décalage.

Qu'est-ce qu'une grille?

Dans la conception graphique, une grille est une structure (généralement bidimensionnelle) composée d'une série de lignes droites (verticales, horizontales) qui se croisent utilisées pour structurer le contenu. Il est largement utilisé pour concevoir la mise en page et la structure du contenu dans la conception d'impression. Dans la conception Web, c'est une méthode très efficace pour créer rapidement et efficacement une mise en page cohérente en utilisant HTML et CSS.

Fonctionnement du système de grille Bootstrap

Les systèmes de grille sont utilisés pour créer des mises en page via une série de lignes et de colonnes qui hébergent votre contenu. Voici comment fonctionne le système de grille Bootstrap -

  • Les lignes doivent être placées dans un .container classe pour un alignement et un rembourrage corrects.

  • Utilisez des lignes pour créer des groupes horizontaux de colonnes.

  • Le contenu doit être placé dans les colonnes et seules les colonnes peuvent être les enfants immédiats des lignes.

  • Classes de grille prédéfinies comme .row and .col-xs-4sont disponibles pour créer rapidement des mises en page de grille. LESS mixins peut également être utilisé pour des mises en page plus sémantiques.

  • Les colonnes créent des gouttières (espaces entre le contenu des colonnes) via le remplissage. Ce remplissage est décalé en lignes pour la première et la dernière colonne via une marge négative sur.rows.

  • Les colonnes de la grille sont créées en spécifiant le nombre de douze colonnes disponibles que vous souhaitez couvrir. Par exemple, trois colonnes égales utiliseraient trois.col-xs-4.

Exemple La description Lien de téléchargement
Grilles Cet exemple indique la structure de la grille dans Bootstrap. Télécharger

Bootstrap fournit une mise en page propre pour la création de tables. Certains des éléments de table pris en charge par Bootstrap sont -

Sr.No. Balise et description
1

<table>

Élément d'habillage pour afficher les données dans un format tabulaire

2

<thead>

Élément de conteneur pour les lignes d'en-tête de table (<tr>) pour étiqueter les colonnes de table.

3

<tbody>

Élément de conteneur pour les lignes de table (<tr>) dans le corps de la table.

4

<tr>

Élément de conteneur pour un ensemble de cellules de tableau (<td> ou <th>) qui apparaît sur une seule ligne.

5

<td>

Cellule de tableau par défaut.

6

<th>

Cellule de tableau spéciale pour les étiquettes de colonne (ou de ligne, selon la portée et l'emplacement). Doit être utilisé dans un <thead>

sept

<caption>

Description ou résumé de ce que contient le tableau.

Exemple La description Lien de téléchargement
Acheter une table Cet exemple indique la structure de la table d'achat dans Bootstrap. Télécharger
Table de planification Cet exemple indique la structure de la table Plan dans Bootstrap. Télécharger
Table avec galerie Cet exemple indique la structure de la table de la galerie dans Bootstrap. Télécharger

Disposition du formulaire

Bootstrap vous fournit les types suivants de dispositions de formulaire:

  • Forme verticale (par défaut)
  • Formulaire en ligne
  • Forme horizontale

Forme verticale ou de base

La structure de base du formulaire est fournie avec Bootstrap; les contrôles de formulaire individuels reçoivent automatiquement un style global. Pour créer un formulaire de base, procédez comme suit -

  • Ajoutez un formulaire de rôle à l'élément <form> parent.

  • Enveloppez les étiquettes et les contrôles dans un <div> avec la classe .form-group . Ceci est nécessaire pour un espacement optimal.

  • Ajoutez une classe de .form-control à tous les éléments textuels <input>, <textarea> et <select>.

Formulaire en ligne

Pour créer un formulaire dans lequel tous les éléments sont en ligne, alignés à gauche et les étiquettes à côté, ajoutez la classe .form-inline à la balise <form>.

Forme horizontale

Horizontal forms stands apart from the others not only in the amount of markup, but also in the presentation of the form. To create a form that uses the horizontal layout, do the following −

  • Add a class of .form-horizontal to the parent <form> element.

  • Wrap labels and controls in a <div> with class .form-group.

  • Add a class of .control-label to the labels.

Example Description Download link
Login Page This example indicates about login page structure in Bootstrap Download
Contact page This example indicates about Contact page structure in Bootstrap Download
Sign Up page This example indicates about Sign Up page structure in Bootstrap Download

Bootstrap provides some options to style buttons, which are summarized in the following table −

Sr.No. Class & Description
1

btn

Default/ Standard button.

2

btn-primary

Provides extra visual weight and identifies the primary action in a set of buttons.

3

btn-success

Indicates a successful or positive action.

4

btn-info

Contextual button for informational alert messages.

5

btn-warning

Indicates caution should be taken with this action.

6

btn-danger

Indicates a dangerous or potentially negative action.

7

btn-link

Deemphasize a button by making it look like a link while maintaining button behavior.

Example Description Download link
IOS Buttons This example indicates about button structure in Bootstrap Download
Image Buttons This example indicates about Image button structure in Bootstrap Download
Shadow Buttons This example indicates about Shadow button structure in Bootstrap Download
Sign up Buttons This example indicates about Sign Up button structure in Bootstrap Download

Bootstrap provides three classes that can be used to apply some simple styles to images −

  • .img-rounded − adds border-radius:6px to give the image rounded corners.

  • .img-circle − makes the entire image round by adding border-radius:500px.

  • .img-thumbnail − adds a bit of padding and a gray border:

Example Description Download link
Image Gallery This example indicates about image gallery structure in Bootstrap Download
Image zoom This example indicates about Image Zoom structure in Bootstrap Download
Team Image gallery This example indicates about grid image structure in Bootstrap Download
Background image This example indicates about Background Image structure in Bootstrap Download
Image in panel This example indicates about image structure in Bootstrap Download

Bootstrap provides some handful helper classes, for faster mobile-friendly development. These can be used for showing and hiding content by device via media query, combined with large, small, and medium devices.

Use these sparingly and avoid creating entirely different versions of the same site. Responsive utilities are currently only available for block and table toggling.

Classes Devices
.visible-xs Extra small (less than 768px) visible
.visible-sm Small (up to 768 px) visible
.visible-md Medium (768 px to 991 px) visible
.visible-lg Larger (992 px and above) visible
.hidden-xs Extra small (less than 768px) hidden
.hidden-sm Small (up to 768 px) hidden
.hidden-md Medium (768 px to 991 px) hidden
.hidden-lg Larger (992 px and above) hidden
Example Description Download link
Card Responsive This example indicates about Card structure in Bootstrap Download
simple Testimonials This example indicates about Testimonials structure in Bootstrap Download
Video grid This example indicates about Grid Video structure in Bootstrap Download
Banner image This example indicates about Banner Image structure in Bootstrap Download
Carousel with face indicators This example indicates about Carousel with face indicators structure in Bootstrap Download

Bootstrap provides a few different options for styling navigation elements. All of them share the same markup and base class, .nav. Bootstrap also provides a helper class, to share mark up and states. Swap modifier classes to switch between each style.

Example Description Download link
Navigation Demo This example indicates about navigation structure in Bootstrap Download
Image Navigation bar This example indicates about Image Navigation Bar structure in Bootstrap Download
Findcon Buttons This example indicates about findcon Button structure in Bootstrap Download
Tiny Navbar This example indicates about Tiny Navbar structure in Bootstrap Download

Bootstrap fournit quelques options différentes pour styliser les blogs. Certains éléments du blog sont comme la boîte de commentaire, l'article de blog, le pied de page du blog, etc.

Exemple La description Lien de téléchargement
Démo de la boîte de commentaires Cet exemple indique la structure de la boîte de commentaires dans Bootstrap Télécharger
Articles de blog avec images Cet exemple indique la structure des éléments Articles de blog avec images dans Bootstrap Télécharger
Pied de page du blog Cet exemple indique la structure du pied de page du blog dans Bootstrap Télécharger
Vignettes Cet exemple indique la structure des vignettes dans Bootstrap Télécharger

Qu'est-ce qu'une conception matérielle

La conception des matériaux est un guide complet pour la conception visuelle, de mouvement et d'interaction sur les plates-formes
Exemple La description Lien de téléchargement
Démo de la boîte de matériel Cet exemple indique la structure des cartes de matériel dans Bootstrap. Télécharger
Cartes de matériel Cet exemple indique la structure des cartes de matériel dans Bootstrap. Télécharger
Navigation matérielle Cet exemple indique la structure de navigation du matériel dans Bootstrap. Télécharger
Navigation dans la boîte de réception Cet exemple indique la structure de navigation de la boîte de réception dans Bootstrap. Télécharger

Bootstrap fournit quelques options différentes pour styliser le curseur de navigation. Certains exemples sont indiqués ci-dessous -

Exemple La description Lien de téléchargement
Faites glisser le menu dessus Cet exemple indique la structure du menu Slider dans Bootstrap Télécharger
Sous-menu Cet exemple indique la structure du sous-menu Slider dans Bootstrap Télécharger
Barre latérale avec onglets Cet exemple indique la structure Slider With Tabs dans Bootstrap Télécharger
Onglets Cet exemple indique la structure des onglets dans Bootstrap Télécharger

Bootstrap fournit quelques options différentes pour le style de la ligne de temps.

Exemple La description Lien de téléchargement
Démo de la chronologie Cet exemple indique la structure de la ligne de temps dans Bootstrap Télécharger
Chronologie à colonne unique en pointillé Cet exemple indique la structure en pointillés de la chronologie à colonne unique dans Bootstrap Télécharger
Colonne unique TimeLine Cet exemple indique la structure de colonne unique TimeLine dans Bootstrap Télécharger
Chronologie - pointillé Cet exemple indique à propos de Timeline - structure en pointillés dans Bootstrap Télécharger

Les alertes fournissent un moyen de styliser les messages à l'utilisateur. Ils fournissent des messages de retour contextuels pour les actions typiques des utilisateurs. Quelques exemples d'alerte comme indiqué ci-dessous -

Exemple La description Lien de téléchargement
Alertes de page Cet exemple indique la structure d'alerte de page dans Bootstrap Télécharger
Messages d'alerte Cet exemple indique la structure des messages d'alerte dans Bootstrap Télécharger
Petites offres avec couleurs et rayon Cet exemple indique les petites offres avec des couleurs et une structure de rayon dans Bootstrap Télécharger
Boîtes d'état Cet exemple indique la structure de la boîte d'état dans Bootstrap Télécharger

Bootstrap fournit quelques options différentes pour styliser l'interface d'administration. Certaines des interfaces d'administration comme indiqué ci-dessous -

Exemple La description Lien de téléchargement
Boîte de réception et rédaction responsive Cet exemple indique la structure de la boîte de réception et de la composition dans Bootstrap. Télécharger
Administrateur simple Cet exemple indique la structure de l'interface d'administration simple dans Bootstrap Télécharger
Bootstrap pour Datatable Cet exemple indique à propos de Bootstrap pour la structure Datatable dans Bootstrap Télécharger
Interface de messagerie Cet exemple indique la structure de l'interface de messagerie dans Bootstrap Télécharger

Ajax est utilisé pour communiquer avec les pages Web et les serveurs Web. Quelques exemples basés sur ajax et bootstrap, comme indiqué ci-dessous -

Exemple La description Lien de téléchargement
Formulaire de paiement Cet exemple indique le formulaire de paiement Ajax dans Bootstrap Télécharger
Assistant AJAX / DIV Cet exemple indique à propos de l'assistant Ajax AJAX / DIV dans Bootstrap Télécharger

Bootstrap fournit quelques options différentes pour le curseur. Curseur à onglets comme indiqué ci-dessous -

Exemple La description Lien de téléchargement
Curseur à onglets Cet exemple indique le curseur à onglets dans Bootstrap Télécharger

Bootstrap fournit quelques options différentes pour les légendes. Effet de survol de légende de vignette comme indiqué ci-dessous -

Exemple La description Lien de téléchargement
Survol de la légende Cet exemple indique la légende sur les images dans Bootstrap Télécharger

Bootstrap fournit quelques options différentes pour la carte. un exemple de carte est comme indiqué ci-dessous -

Exemple La description Lien de téléchargement
Plans Cet exemple indique à propos de Map dans Bootstrap Télécharger

Bootstrap fournit quelques options différentes pour les calendriers. un exemple de calendrier est illustré ci-dessous -

Exemple La description Lien de téléchargement
Paginateur de date réactif Cet exemple indique le calendrier dans Bootstrap Télécharger
Ordre du jour Cet exemple indique l'agenda du calendrier dans Bootstrap Télécharger
Datepicker simple Cet exemple indique à propos du sélecteur de date dans Bootstrap Télécharger
Calendrier Cet exemple indique le calendrier dans Bootstrap Télécharger

Bootstrap fournit quelques options différentes pour les icônes sociales. Des exemples d'icônes sociales sont présentés ci-dessous -

Exemple La description Lien de téléchargement
Icônes sociales en rotation Cet exemple indique la structure Spinning Social Icons dans Bootstrap Télécharger
Icônes sociales avec FontAwesome Cet exemple indique une icône sociale avec la police Awesome dans Bootstrap Télécharger
Animation de survol d'icône sociale de zoom Cet exemple indique à propos de l'animation de survol de l'icône sociale Zoom dans Bootstrap Télécharger
Bouton Partager Cet exemple indique le bouton Partager dans Bootstrap Télécharger

Bootstrap fournit quelques options différentes pour les icônes en tant que polices. des exemples d'icônes sont présentés ci-dessous -

Exemple La description Lien de téléchargement
Badges d'icônes rondes Cet exemple indique les badges à icône ronde dans Bootstrap Télécharger
Rotation et retournement Cet exemple indique les icônes avec animation dans Bootstrap Télécharger
Ui-Kit-Metro comme Nav Cet exemple indique les icônes avec une animation d'interface utilisateur dans Bootstrap Télécharger
Bouton bleu gras et plat Cet exemple indique le bouton bleu gras et plat dans Bootstrap Télécharger

Bootstrap fournit quelques options différentes pour styliser les éléments Bootstrap.Certains des éléments bootstrap comme indiqué ci-dessous -

Exemple La description Lien de téléchargement
Commutateur de conception matérielle Cet exemple indique la structure du commutateur de conception de matériaux dans Bootstrap Télécharger
Windows 8 Bootstrap modal Cet exemple indique la structure modale Bootstrap de Windows 8 dans Bootstrap Télécharger
Boutons du ruban Cet exemple indique la structure des boutons du ruban dans Bootstrap Télécharger
Légendes - Appel à l'action Cet exemple indique à propos des légendes - Structure d'appel à l'action dans Bootstrap Télécharger
Rapportez une erreur Cet exemple indique la structure de rapport de bogue dans Bootstrap Télécharger
Carrousel avec légendes de survol Cet exemple indique la structure du carrousel avec les légendes de survol dans Bootstrap Télécharger
Mur Facebook Cet exemple indique la structure du mur Facebook dans Bootstrap Télécharger
Alerte mobile Cet exemple indique la structure d'alerte mobile dans Bootstrap Télécharger
Pagination arrondie Cet exemple indique la pagination arrondie dans Bootstrap Télécharger
Miniatures de la liste des vidéos Cet exemple indique les vignettes de la liste de vidéos dans Bootstrap Télécharger
Boutons de contrôle multimédia Cet exemple indique les boutons de contrôle multimédia dans Bootstrap Télécharger
Onglet vertical simple Cet exemple indique un onglet vertical simple dans Bootstrap Télécharger