Glyphicônes

Glyphes disponibles

Inclut 200 glyphes au format police provenant du jeu de Glyphicon Halfings. Normalement, les Glyphicônes Halflings ne sont pas gratuits, mais leur créateur a choisi de les mettre à disposition dans Bootstrap sans frais. En guise de remerciements, nous vous demandons simplement d'inclure un lien renvoyant à Glyphicons chaque fois que cela est possible.

  • glyphicon glyphicon-asterisk
  • glyphicon glyphicon-plus
  • glyphicon glyphicon-euro
  • glyphicon glyphicon-minus
  • glyphicon glyphicon-cloud
  • glyphicon glyphicon-envelope
  • glyphicon glyphicon-pencil
  • glyphicon glyphicon-glass
  • glyphicon glyphicon-music
  • glyphicon glyphicon-search
  • glyphicon glyphicon-heart
  • glyphicon glyphicon-star
  • glyphicon glyphicon-star-empty
  • glyphicon glyphicon-user
  • glyphicon glyphicon-film
  • glyphicon glyphicon-th-large
  • glyphicon glyphicon-th
  • glyphicon glyphicon-th-list
  • glyphicon glyphicon-ok
  • glyphicon glyphicon-remove
  • glyphicon glyphicon-zoom-in
  • glyphicon glyphicon-zoom-out
  • glyphicon glyphicon-off
  • glyphicon glyphicon-signal
  • glyphicon glyphicon-cog
  • glyphicon glyphicon-trash
  • glyphicon glyphicon-home
  • glyphicon glyphicon-file
  • glyphicon glyphicon-time
  • glyphicon glyphicon-road
  • glyphicon glyphicon-download-alt
  • glyphicon glyphicon-download
  • glyphicon glyphicon-upload
  • glyphicon glyphicon-inbox
  • glyphicon glyphicon-play-circle
  • glyphicon glyphicon-repeat
  • glyphicon glyphicon-refresh
  • glyphicon glyphicon-list-alt
  • glyphicon glyphicon-lock
  • glyphicon glyphicon-flag
  • glyphicon glyphicon-headphones
  • glyphicon glyphicon-volume-off
  • glyphicon glyphicon-volume-down
  • glyphicon glyphicon-volume-up
  • glyphicon glyphicon-qrcode
  • glyphicon glyphicon-barcode
  • glyphicon glyphicon-tag
  • glyphicon glyphicon-tags
  • glyphicon glyphicon-book
  • glyphicon glyphicon-bookmark
  • glyphicon glyphicon-print
  • glyphicon glyphicon-camera
  • glyphicon glyphicon-font
  • glyphicon glyphicon-bold
  • glyphicon glyphicon-italic
  • glyphicon glyphicon-text-height
  • glyphicon glyphicon-text-width
  • glyphicon glyphicon-align-left
  • glyphicon glyphicon-align-center
  • glyphicon glyphicon-align-right
  • glyphicon glyphicon-align-justify
  • glyphicon glyphicon-list
  • glyphicon glyphicon-indent-left
  • glyphicon glyphicon-indent-right
  • glyphicon glyphicon-facetime-video
  • glyphicon glyphicon-picture
  • glyphicon glyphicon-map-marker
  • glyphicon glyphicon-adjust
  • glyphicon glyphicon-tint
  • glyphicon glyphicon-edit
  • glyphicon glyphicon-share
  • glyphicon glyphicon-check
  • glyphicon glyphicon-move
  • glyphicon glyphicon-step-backward
  • glyphicon glyphicon-fast-backward
  • glyphicon glyphicon-backward
  • glyphicon glyphicon-play
  • glyphicon glyphicon-pause
  • glyphicon glyphicon-stop
  • glyphicon glyphicon-forward
  • glyphicon glyphicon-fast-forward
  • glyphicon glyphicon-step-forward
  • glyphicon glyphicon-eject
  • glyphicon glyphicon-chevron-left
  • glyphicon glyphicon-chevron-right
  • glyphicon glyphicon-plus-sign
  • glyphicon glyphicon-minus-sign
  • glyphicon glyphicon-remove-sign
  • glyphicon glyphicon-ok-sign
  • glyphicon glyphicon-question-sign
  • glyphicon glyphicon-info-sign
  • glyphicon glyphicon-screenshot
  • glyphicon glyphicon-remove-circle
  • glyphicon glyphicon-ok-circle
  • glyphicon glyphicon-ban-circle
  • glyphicon glyphicon-arrow-left
  • glyphicon glyphicon-arrow-right
  • glyphicon glyphicon-arrow-up
  • glyphicon glyphicon-arrow-down
  • glyphicon glyphicon-share-alt
  • glyphicon glyphicon-resize-full
  • glyphicon glyphicon-resize-small
  • glyphicon glyphicon-exclamation-sign
  • glyphicon glyphicon-gift
  • glyphicon glyphicon-leaf
  • glyphicon glyphicon-fire
  • glyphicon glyphicon-eye-open
  • glyphicon glyphicon-eye-close
  • glyphicon glyphicon-warning-sign
  • glyphicon glyphicon-plane
  • glyphicon glyphicon-calendar
  • glyphicon glyphicon-random
  • glyphicon glyphicon-comment
  • glyphicon glyphicon-magnet
  • glyphicon glyphicon-chevron-up
  • glyphicon glyphicon-chevron-down
  • glyphicon glyphicon-retweet
  • glyphicon glyphicon-shopping-cart
  • glyphicon glyphicon-folder-close
  • glyphicon glyphicon-folder-open
  • glyphicon glyphicon-resize-vertical
  • glyphicon glyphicon-resize-horizontal
  • glyphicon glyphicon-hdd
  • glyphicon glyphicon-bullhorn
  • glyphicon glyphicon-bell
  • glyphicon glyphicon-certificate
  • glyphicon glyphicon-thumbs-up
  • glyphicon glyphicon-thumbs-down
  • glyphicon glyphicon-hand-right
  • glyphicon glyphicon-hand-left
  • glyphicon glyphicon-hand-up
  • glyphicon glyphicon-hand-down
  • glyphicon glyphicon-circle-arrow-right
  • glyphicon glyphicon-circle-arrow-left
  • glyphicon glyphicon-circle-arrow-up
  • glyphicon glyphicon-circle-arrow-down
  • glyphicon glyphicon-globe
  • glyphicon glyphicon-wrench
  • glyphicon glyphicon-tasks
  • glyphicon glyphicon-filter
  • glyphicon glyphicon-briefcase
  • glyphicon glyphicon-fullscreen
  • glyphicon glyphicon-dashboard
  • glyphicon glyphicon-paperclip
  • glyphicon glyphicon-heart-empty
  • glyphicon glyphicon-link
  • glyphicon glyphicon-phone
  • glyphicon glyphicon-pushpin
  • glyphicon glyphicon-usd
  • glyphicon glyphicon-gbp
  • glyphicon glyphicon-sort
  • glyphicon glyphicon-sort-by-alphabet
  • glyphicon glyphicon-sort-by-alphabet-alt
  • glyphicon glyphicon-sort-by-order
  • glyphicon glyphicon-sort-by-order-alt
  • glyphicon glyphicon-sort-by-attributes
  • glyphicon glyphicon-sort-by-attributes-alt
  • glyphicon glyphicon-unchecked
  • glyphicon glyphicon-expand
  • glyphicon glyphicon-collapse-down
  • glyphicon glyphicon-collapse-up
  • glyphicon glyphicon-log-in
  • glyphicon glyphicon-flash
  • glyphicon glyphicon-log-out
  • glyphicon glyphicon-new-window
  • glyphicon glyphicon-record
  • glyphicon glyphicon-save
  • glyphicon glyphicon-open
  • glyphicon glyphicon-saved
  • glyphicon glyphicon-import
  • glyphicon glyphicon-export
  • glyphicon glyphicon-send
  • glyphicon glyphicon-floppy-disk
  • glyphicon glyphicon-floppy-saved
  • glyphicon glyphicon-floppy-remove
  • glyphicon glyphicon-floppy-save
  • glyphicon glyphicon-floppy-open
  • glyphicon glyphicon-credit-card
  • glyphicon glyphicon-transfer
  • glyphicon glyphicon-cutlery
  • glyphicon glyphicon-header
  • glyphicon glyphicon-compressed
  • glyphicon glyphicon-earphone
  • glyphicon glyphicon-phone-alt
  • glyphicon glyphicon-tower
  • glyphicon glyphicon-stats
  • glyphicon glyphicon-sd-video
  • glyphicon glyphicon-hd-video
  • glyphicon glyphicon-subtitles
  • glyphicon glyphicon-sound-stereo
  • glyphicon glyphicon-sound-dolby
  • glyphicon glyphicon-sound-5-1
  • glyphicon glyphicon-sound-6-1
  • glyphicon glyphicon-sound-7-1
  • glyphicon glyphicon-copyright-mark
  • glyphicon glyphicon-registration-mark
  • glyphicon glyphicon-cloud-download
  • glyphicon glyphicon-cloud-upload
  • glyphicon glyphicon-tree-conifer
  • glyphicon glyphicon-tree-deciduous

Utilisation

Pour des raisons de performance, toutes les icônes requièrent une classe de base et une classe d'icône individuelle. Pour les utiliser, placez le code suivant où vous le souhaitez. Veillez à laisser une espace entre l'icône et le texte pour que l'espacement soit correct.

Ne mélangez pas avec d'autres composants

Les classes d'icône ne peuvent pas être combinées directement avec d'autres composants. Elles ne devraient pas être utilisées avec d'autres classes sur le même élément. Ajoutez plutôt un <span> imbriqué et appliquez les classes d'icône au <span>.

Only for use on empty elements

Icon classes should only be used on elements that contain no text content and have no child elements.

Changing the icon font location

Bootstrap assumes icon font files will be located in the ../fonts/ directory, relative to the compiled CSS files. Moving or renaming those font files means updating the CSS in one of three ways:

  • Change the @icon-font-path and/or @icon-font-name variables in the source Less files.
  • Utilize the relative URLs option provided by the Less compiler.
  • Change the url() paths in the compiled CSS.

Use whatever option best suits your specific development setup.

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

Exemples

Utilisez-les dans des boutons, groupes de boutons pour une barre d'outils, des éléments de navigation ou de des entrées préalables de formulaire.

<button type="button" class="btn btn-default btn-lg">
  <span class="glyphicon glyphicon-star"></span> Star
</button>

Menus déroulants

Toggleable, contextual menu for displaying lists of links. Made interactive with the dropdown JavaScript plugin.

Englobez le déclencheur du menu déroulant et le menu déroulant lui-même dans .dropdown ou dans un autre élément qui déclare position: relative;. Puis ajoutez le code HTML du menu.

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
    <li role="presentation" class="divider"></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
  </ul>
</div>

Par défaut, un menu déroulant est automatiquement positionné à 100% du haut et du situé du côté gauche de son parent. Ajoutez .dropdown-menu-right à .dropdown-menu pour aligner le menu déroulant à droite.

Peut nécessiter un positionnement supplémentaire

Les menus déroulants sont automatiquement positionnés via CSS dans le flux normal du document. Cela signifie que les menus déroulants pourraient être rognés par les parents ayant certaines propriétés overflow ou avoir l'air de sortir des limites du viewport. Traitez ces problèmes par vos propres moyens lorsqu'ils surgissent.

Alignement .pull-right obsolète

Depuis la version 3.1.0, nous avons rendu obsolète le .pull-right sur les menus déroulants. Pour aligner un menu à droite, utilisez .dropdown-menu-right. Les composants de navigation alignés à droite dans la barre de navigation utilisent une version mixin de cette classe pour aligner le menu automatiquement. Pour l'outrepasser, utilisez .dropdown-menu-left.

<ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="dLabel">
  ...
</ul>

Ajoutez un en-tête aux sections de libellé des actions dans tout menu déroulant.

<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu2">
  <li role="presentation" class="dropdown-header">Dropdown header</li>
  ...
  <li role="presentation" class="divider"></li>
  <li role="presentation" class="dropdown-header">Dropdown header</li>
  ...
</ul>

Ajoutez .disabled à un <li> dans le menu déroulant pour désactiver le lien.

<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu3">
  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Regular link</a></li>
  <li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">Disabled link</a></li>
  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another link</a></li>
</ul>

Groupes de boutons

Group a series of buttons together on a single line with the button group. Add on optional JavaScript radio and checkbox style behavior with our buttons plugin.

Les infobulles et popovers dans les groupes de boutons requièrent des paramètres particuliers

Lorsque vous utilisez des infobulles ou des popovers sur des éléments dans un .btn-group, vous allez devoir spécifier l'option container: 'body' pour éviter les effets secondaires indésirables (par exemple, élargissement de l'élément ou perte des coins arrondis lorsque l'infobulle ou le popover sont déclenchés).

Exemple simple

Englobez une série de boutons avec .btn dans .btn-group.

<div class="btn-group">
  <button type="button" class="btn btn-default">Left</button>
  <button type="button" class="btn btn-default">Middle</button>
  <button type="button" class="btn btn-default">Right</button>
</div>

Barre d'outils de boutons

Combinez des jeux 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 class="btn-group">...</div>
</div>

Dimensionnement

Au lieu d'appliquer les classes de dimensionnement de boutons à chaque bouton d'un groupe, ajoutez simplement .btn-group-* au .btn-group.

<div class="btn-group btn-group-lg">...</div>
<div class="btn-group">...</div>
<div class="btn-group btn-group-sm">...</div>
<div class="btn-group btn-group-xs">...</div>

Intégration

Placez un .btn-group dans un autre .btn-group lorsque vous souhaitez mélanger des menus déroulants et une série de boutons.

<div class="btn-group">
  <button type="button" class="btn btn-default">1</button>
  <button type="button" class="btn btn-default">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" role="menu">
      <li><a href="#">Dropdown link</a></li>
      <li><a href="#">Dropdown link</a></li>
    </ul>
  </div>
</div>

Variation verticale

Faites un jeu de boutons s'afficher verticalement plutôt qu'horizontalement. Les menus déroulants à boutons séparés ne sont pas pris en charge ici.

<div class="btn-group-vertical">
  ...
</div>

Groupes de boutons justifiés

Faites un jeu de bouton s'étirer à la même taille pour recouvrir la largeur complète de son parent. Cela fonctionne également avec les menus déroulants à boutons dans les le groupe de boutons.

Gestions des bordures

Vu la nature spécifique du code HTML et CSS utilisé pour justifier les boutons (à savoir display: table-cell), les bordures entre eux sont doublées. Dans les groupes de boutons normaux, margin-left: -1px est utilisée pour empiler les bordures au lieu de les retirer. Cependant, margin ne fonctionne pas avec display: table-cell. Par conséquent, vous voudriez peut-être retirer ou recolorer les bordures selon vos personnalisations de Bootstrap.

IE8 and borders

Internet Explorer 8 doesn't render borders on buttons in a justified button group, whether it's on <a> or <button> elements. To get around that, wrap each button in another .btn-group.

See #12476 for more information.

Avec les éléments <a>

Englobez simplement une série de .btns dans .btn-group.btn-group-justified.

<div class="btn-group btn-group-justified">
  ...
</div>

Avec les éléments <button>

Pour utiliser les groupes de boutons justifiés avec les éléments <button>, vous devez englober chaque bouton par un groupe de bouton. La plupart des navigateurs n'appliquent pas correctement notre CSS pour la justification des éléments <button>, mais vu que nous prenons en charge les menus déroulants à boutons, nous pouvons outrepasser cela.

<div class="btn-group btn-group-justified">
  <div class="btn-group">
    <button type="button" class="btn btn-default">Left</button>
  </div>
  <div class="btn-group">
    <button type="button" class="btn btn-default">Middle</button>
  </div>
  <div class="btn-group">
    <button type="button" class="btn btn-default">Right</button>
  </div>
</div>

Menus déroulants à boutons

Utilisez n'importe quel bouton pour déclencher un menu déroulant en le plaçant dans un .btn-group et en fournissant le bon marquage de menu.

Dépendance des plugins

Button dropdowns require the dropdown plugin to be included in your version of Bootstrap.

Menus déroulants à bouton unique

Transformez un bouton en élément de menu déroulant avec des modifications de marquage simples.

<!-- Single button -->
<div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
    Action <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>

Menus déroulants à boutons séparés

De la même façon, créez des menus déroulants à boutons séparés avec les mêmes modifications de marquage, avec un bouton séparé uniquement.

<!-- Split button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger">Action</button>
  <button type="button" class="btn btn-danger 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>

Dimensionnement

Les menus déroulants à boutons fonctionnent avec des boutons de toutes tailles.

<!-- Large button group -->
<div class="btn-group">
  <button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown">
    Large button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu">
    ...
  </ul>
</div>

<!-- Small button group -->
<div class="btn-group">
  <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown">
    Small button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu">
    ...
  </ul>
</div>

<!-- Extra small button group -->
<div class="btn-group">
  <button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown">
    Extra small button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu">
    ...
  </ul>
</div>

Variation de menu déroulant vers le haut

Déclenchez des menus déroulants au-dessus des éléments en ajoutant .dropup au parent.

<div class="btn-group dropup">
  <button type="button" class="btn btn-default">Dropup</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">
    <!-- Dropdown menu links -->
  </ul>
</div>

Groupes de saisie

Étendez les commandes du formulaire en ajoutant du texte ou des boutons avant, après ou sur les deux côtés de toute entrée textuelle. Utilisez .input-group avec un .input-group-addon pour ajouter des éléments avant ou après un .form-control.

Compatibilité sur les différents navigateurs

Évitez d'utiliser les éléments <select> ici, car ils ne peuvent pas être mis en forme complètement dans les navigateurs WebKit.

Les infobulles et popovers dans les groupes de saisie requièrent des paramètres particuliers

Lorsque vous utilisez des infobulles ou popovers sur des éléments dans un .input-group, vous devrez spécifier l'option container: 'body' pour éviter les effets secondaires indésirables (élargissement de l'élément et/ou perte des coins arrondis lorsque l'infobulle ou le popover sont déclenchés).

Ne mélangez pas avec d'autres composants

Ne mélangez les groupes de formulaires ou les classes de colonnes de grille directement avec les groupes de saisie. Imbriquez plutôt le groupe de saisie dans le groupe de formulaire ou l'élément de grille.

Exemple simple

Veuillez ajouter une extension ou un bouton à un des côtés d'une saisie. Vous pouvez aussi en placer sur les deux côtés d'une saisie.

Nous ne prenons pas en charge de multiples extensions sur un seul côté.

Nous ne prenons pas en charge de multiples commandes de formulaire dans un seul groupe de saisie.

@

.00

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

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

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

Dimensionnement

Add the relative form sizing classes to the .input-group itself and contents within will automatically resize—no need for repeating the form control size classes on each element.

@

@

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

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

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

Extensions de cases à cocher et de boutons

Placez toute option de bouton radio ou de case à cocher dans l'extension d'un groupe de saisie au lieu du texte.

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

Addons de boutons

Les boutons dans les groupes de saisie sont légèrement différents et nécessitent un niveau supplémentaire d'imbrication. Au lieu de .input-group-addon, vous devrez utiliser .input-group-btn pour englober les boutons. Cela est nécessaire vu qu’il est impossible de remplacer les styles par défaut des navigateurs.

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

Boutons avec menu déroulant

<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">Action <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><!-- /btn-group -->
      <input type="text" class="form-control">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <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">Action <span class="caret"></span></button>
        <ul class="dropdown-menu dropdown-menu-right" 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><!-- /btn-group -->
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

Boutons segmentés

<div class="input-group">
  <div class="input-group-btn">
    <!-- Button and dropdown menu -->
  </div>
  <input type="text" class="form-control">
</div>

<div class="input-group">
  <input type="text" class="form-control">
  <div class="input-group-btn">
    <!-- Button and dropdown menu -->
  </div>
</div>

Navigation

Les navigations disponibles dans Bootstrap possèdent un marquage partagé, qui commence avec la classe de base .nav, ainsi que des états partagés. Échangez les classes de modificateur pour passer d’un style à l’autre.

Notez bien que la classe .nav-tabs nécessite la classe de base .nav.

<ul class="nav nav-tabs" role="tablist">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">Profile</a></li>
  <li><a href="#">Messages</a></li>
</ul>

Requiert le plugin des onglets de Javascript

For tabs with tabbable areas, you must use the tabs JavaScript plugin.

Prenez le même code HTML, mais utilisez plutôt .nav-pills :

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

Les pilules peuvent également être empilées à la verticale. Ajoutez simplement .nav-stacked.

<ul class="nav nav-pills nav-stacked">
  ...
</ul>

Rendez facilement la largeur des onglets ou pilules égale à celle de leur parent sur les écrans plus larges que 768px avec .nav-justified. Sur les écrans plus petits, les liens de navigation sont empilés.

Safari et les navigations justifiées réactives

As of v7.0.1, Safari exhibits a bug in which resizing your browser horizontally causes rendering errors in the justified nav that are cleared upon refreshing. This bug is also shown in the justified nav example.

<ul class="nav nav-tabs nav-justified" role="tablist">
  ...
</ul>
<ul class="nav nav-pills nav-justified">
  ...
</ul>

Pour n'importe que composant de navigation (onglet ou pilule), ajoutez .disabled pour obtenir des liens gris et éliminer tout effet de survol de souris.

Fonctionnalité du lien non affectée

Cette classe ne modifie que l'aspect du <a>, et non pas sa fonctionnalité. Utilisez du JavaScript personnalisé pour désactiver les liens ici.

<ul class="nav nav-pills">
  ...
  <li class="disabled"><a href="#">Disabled link</a></li>
  ...
</ul>

Add dropdown menus with a little extra HTML and the dropdowns JavaScript plugin.

Onglets avec menus déroulants

<ul class="nav nav-tabs" role="tablist">
  ...
  <li class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#">
      Dropdown <span class="caret"></span>
    </a>
    <ul class="dropdown-menu" role="menu">
      ...
    </ul>
  </li>
  ...
</ul>

Pilules avec menus déroulants

<ul class="nav nav-pills">
  ...
  <li class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#">
      Dropdown <span class="caret"></span>
    </a>
    <ul class="dropdown-menu" role="menu">
      ...
    </ul>
  </li>
  ...
</ul>

Barre de navigation

Les barres de navigation sont des composants méta réactifs servant d'en-têtes de navigation pour votre site ou application. Elles sont d'abord réduites (et activables) sur les vues mobiles et deviennent horizontales lorsque la largeur de la zone d'affichage augmente.

Contenu débordant

Vu que Bootstrap ne sait pas de combien a besoin le contenu dans votre barre de navigation, vous pourriez rencontrer des problèmes avec l'encadrement du contenu dans une deuxième colonne. Pour résoudre ceci, vous pouvez :

  1. Réduire le nombre ou la largeur des éléments de la barre de navigation.
  2. Hide certain navbar items at certain screen sizes using responsive utility classes.
  3. Changer le point sur lequel votre barre de navigation bascule entre les modes réduit et horizontal. Personnalisez la variable @grid-float-breakpoint ou ajoutez votre propre media query.

Nécessite JavaScript

Si JavaScript est désactivé et le viewport est réduit de telle sorte que la barre de navigation soit réduite, il sera impossible d'étendre la barre de navigation et d'afficher le contenu dans le .navbar-collapse.

Changing the collapsed mobile navbar breakpoint

The navbar collapses into its vertical mobile view when the viewport is narrower than @grid-float-breakpoint, and expands into its horizontal non-mobile view when the viewport is at least @grid-float-breakpoint in width. Adjust this variable in the Less source to control when the navbar collapses/expands. The default value is 768px (the smallest "small" or "tablet" screen).

<nav class="navbar navbar-default" role="navigation">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <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="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
          <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>
            <li class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <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>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
          <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>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

Dépendance des plugins

The responsive navbar requires the collapse plugin to be included in your version of Bootstrap.

Rendre les barres de navigation accessibles

Veillez à ajouter un role="navigation" à chaque barre de navigation pour faciliter l'accessibilité.

Placez du contenu dans .navbar-form pour un alignement vertical correct et un comportement réduit dans les viewports réduits. Utilisez les options d'alignement pour décider de son emplacement dans le contenu de la barre de navigation.

Comme avertissement, sachez que .navbar-form partage une grande partie de son code avec .form-inline via mixin. Certaines commandes de formulaire, comme les groupes de saisie, pourraient nécessiter des largeurs fixes pour s'afficher correctement dans une barre de navigation.

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

Mises en gardes pour les appareils mobiles

There are some caveats regarding using form controls within fixed elements on mobile devices. See our browser support docs for details.

Toujours ajouter des libellés

Les lecteurs d'écran auront des difficultés avec vos formulaires si vous n'incluez pas un libellé pour chaque saisie. Pour ces formulaires de barre de navigation sur une ligne, vous pouvez masquer les libellés en utilisant la classe .sr-only.

Ajoutez la classe .navbar-btn aux éléments <button> qui ne se trouvent pas dans un <form> pour les centrer verticalement dans la barre de navigation.

<button type="button" class="btn btn-default navbar-btn">Sign in</button>

Utilisation spécifique au contexte

Like the standard button classes, .navbar-btn can be used on <a> and <input> elements. However, neither .navbar-btn nor the standard button classes should be used on <a> elements within .navbar-nav.

Englobez les chaînes de texte d'un élément avec .navbar-text généralement sur une balise <p> pour une couleur et un alignement corrects.

<p class="navbar-text">Signed in as Mark Otto</p>

Pour ceux qui utilisent des liens standards qui ne se trouvent pas dans le composant de la barre de navigation normale, utilisez la classe .navbar-link pour ajouter les bonnes couleurs pour les options de barre de navigation par défaut et inversée.

<p class="navbar-text navbar-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>

Alignez les liens de navigation, formulaires, boutons ou textes avec les classes d'utilitaires .navbar-left ou .navbar-right. Les deux classes ajouteront un float CSS dans la direction spécifiée. Par exemple, pour aligner des liens de navigation, placez-les dans un <ul> séparé en appliquant leurs classes d'utilitaires respectives.

Ces classes sont des versions mixin de .pull-left et .pull-right, mais leur portée se résume aux media queries pour une gestion plus simple des composants de la barre de navigation sur les appareils de tailles différentes.

Right aligning multiple components

Navbars currently have a limitation with multiple .navbar-right classes. To properly space content, we use negative margin on the last .navbar-right element. When there are multiple elements using that class, these margins don't work as intended.

We'll revisit this when we can rewrite that component in v4.

Ajoutez .navbar-fixed-top et ajoutez un .container ou un .container-fluid pour centrer et décaler le contenu de la barre de navigation.

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="container">
    ...
  </div>
</nav>

Décalage du corps requis

La barre de navigation fixe s'affichera au-dessus des autres contenus, à moins que vous n'ajoutiez padding au sommet du <body>. Essayez vos propres valeurs ou utilisez notre extrait de code ci-dessous. Astuce : par défaut, la barre de navigation possède une hauteur de 50px.

body { padding-top: 70px; }

Veillez à inclure ceci après le noyau CSS de Bootstrap.

Ajoutez .navbar-fixed-bottom et ajoutez un .container ou un .container-fluid pour centrer et décaler le contenu de la barre de navigation.

<nav class="navbar navbar-default navbar-fixed-bottom" role="navigation">
  <div class="container">
    ...
  </div>
</nav>

Décalage du corps requis

La barre de navigation fixe s'affichera au-dessus des autres contenus, à moins que vous n'ajoutiez padding en bas de <body>. Essayez vos propres valeurs ou utilisez notre extrait de code ci-dessous. Astuce : par défaut, la barre de navigation possède une hauteur de 50px.

body { padding-bottom: 70px; }

Veillez à inclure ceci après le noyau CSS de Bootstrap.

Créez une barre de navigation de largeur maximale qui défile avec la page en ajoutant .navbar-static-top, ajoutez également un .container ou un .container-fluid pour centrer et décaler le contenu de votre barre de navigation.

Contrairement aux classes .navbar-fixed-*, vous n'avez pas besoin de modifier le décalage sur le body.

<nav class="navbar navbar-default navbar-static-top" role="navigation">
  <div class="container">
    ...
  </div>
</nav>

Modifiez l'aspect de la barre de navigation en ajoutant .navbar-inverse.

<nav class="navbar navbar-inverse" role="navigation">
  ...
</nav>

Fils d'Ariane

Indique l'emplacement actuel de la page au sein de la hiérarchie de navigation.

Les séparateurs sont automatiquement ajoutés dans le CSS via :before et content.

<ol class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Library</a></li>
  <li class="active">Data</li>
</ol>

Pagination

Proposez des liens de pagination pour votre site ou application avec le composant de pagination multipage, ou le pager, plus simple.

Pagination par défaut

Une pagination simple inspirée par Rdio, idéale pour les applications et résultats de recherche. Le grand bloc est difficile à manquer, facilement extensible et propose de grandes zones cliquables.

<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 désactivé et actif

Les liens sont personnalisables selon les circonstances. Utilisez .disabled pour les liens non cliquables et .active pour indiquer la page actuelle.

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

Vous avez la possibilité, si vous le souhaitez, de modifier les ancres actives ou désactivées pour <span> afin de supprimer la fonctionnalité de clic tout en conservant les styles souhaités.

<ul class="pagination">
  <li class="disabled"><span>&laquo;</span></li>
  <li class="active"><span>1 <span class="sr-only">(current)</span></span></li>
  ...
</ul>

Dimensionnement

Vous aimez les paginations plus grandes ou petites ? Ajoutez .pagination-lg ou .pagination-sm pour des tailles supplémentaires.

<ul class="pagination pagination-lg">...</ul>
<ul class="pagination">...</ul>
<ul class="pagination pagination-sm">...</ul>

Pager

Des liens Précédent et Suivant rapides pour des implémentations de pagination simples avec un marquage et des styles légers. Idéal pour les sites simples, comme les blogs ou les magazines.

Exemple par défaut

Par défaut, le pager centre les liens.

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

Liens alignés

De façon alternative, vous pouvez aligner chaque lien sur les côtés :

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

État désactivé optionnel

Les liens du pager utilisent également la classe d'utilitaires .disabled générale à partir de la pagination.

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

Libellés

Exemple

Exemple d'en-tête Nouveau

Exemple d'en-tête Nouveau

Exemple d'en-tête Nouveau

Exemple d'en-tête Nouveau

Exemple d'en-tête Nouveau
Exemple d'en-tête Nouveau
<h3>Example heading <span class="label label-default">New</span></h3>

Variations disponibles

Ajoutez l'une des classes de modificateur mentionnées ci-dessous pour modifier l'apparence d'un libellé.

Par défaut Principal Succès Informations Avertissement Danger
<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>

Have tons of labels?

Rendering problems can arise when you have dozens of inline labels within a narrow container, each containing its own inline-block element (like an icon). The way around this is setting display: inline-block;. For context and an example, see #13219.

Badges

Mettez facilement en avant les éléments nouveaux ou non lus en ajoutant un <span class="badge"> aux liens, navigations Bootstrap et autres.

<a href="#">Inbox <span class="badge">42</span></a>

Réduction automatique

Lorsqu'il n'y a plus d'éléments nouveaux ou non lus, les badges se réduisent tout simplement (via le sélecteur CSS :empty), si aucun contenu ne se trouve à l'intérieur.

Compatibilité sur les différents navigateurs

Les badges ne se réduiront pas automatiquement dans Internet Explorer 8, qui ne prend pas en charge le sélecteur :empty.

S'adapte aux états de navigation actifs

Des styles intégrés inclus pour placer des badges dans des états actifs dans les navigations par pilules.

<ul class="nav nav-pills nav-stacked">
  <li class="active">
    <a href="#">
      <span class="badge pull-right">42</span>
      Home
    </a>
  </li>
  ...
</ul>

Jumbotron

Un composant léger et flexible pouvant, de façon optionnelle, étendre le viewport entier pour afficher le contenu essentiel de votre site.

Hello, world!

Ceci est un simple hero unit, un composant simple de type jumbotron utilisé pour attirer l'attention sur du contenu ou des information mis en valeur.

En savoir plus

<div class="jumbotron">
  <h1>Hello, world!</h1>
  <p>...</p>
  <p><a class="btn btn-primary btn-lg" role="button">Learn more</a></p>
</div>

Pour étendre le jumbotron à la largeur maximale, et sans coins arrondis, placez-le hors de tout .container et ajoutez plutôt un .container à l'intérieur.

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

En-tête de page

Un conteneur simple pour un h1 afin d'espacer et de segmenter correctement des sections de contenu sur une page. Il peut utiliser l'élément par défaut small de h1, ainsi que la plupart des autres composants (avec des styles supplémentaires).

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

Miniatures

Extend Bootstrap's grid system with the thumbnail component to easily display grids of images, videos, text, and more.

Exemple par défaut

Par défaut, les miniatures de Bootstrap sont conçues pour présenter des images liées avec un marquage minimal.

<div class="row">
  <div class="col-xs-6 col-md-3">
    <a href="#" class="thumbnail">
      <img data-src="holder.js/100%x180" alt="...">
    </a>
  </div>
  ...
</div>

Contenu personnalisé

Avec un peu de marquage supplémentaire, il est possible d'ajouter tout type de contenu HTML comme des en-têtes, des paragraphes ou des boutons dans des miniatures.

Generic placeholder thumbnail

Libellé de miniature

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Bouton Bouton

Generic placeholder thumbnail

Libellé de miniature

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Bouton Bouton

Generic placeholder thumbnail

Libellé de miniature

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Bouton Bouton

<div class="row">
  <div class="col-sm-6 col-md-4">
    <div class="thumbnail">
      <img data-src="holder.js/300x300" alt="...">
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>...</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>
</div>

Alertes

Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages. For inline dismissal, use the alerts jQuery plugin.

Exemples

Englobez tout texte et un bouton de révocation optionnel dans .alert et l'une des quatre classes contextuelles (par exemple, .alert-success pour les messages d'alerte de base).

Aucune classe par défaut

Les alertes ne disposent pas de classes par défaut, uniquement de classes de base et d'un modificateur. Une alerte grisée par défaut ne semble pas logique, vous devez donc indiquer un type via une classe contextuelle. Choisissez parmi succès, informations, avertissement ou danger.

<div class="alert alert-success" role="alert">...</div>
<div class="alert alert-info" role="alert">...</div>
<div class="alert alert-warning" role="alert">...</div>
<div class="alert alert-danger" role="alert">...</div>

Dismissible alerts

Build on any alert by adding an optional .alert-dismissible and close button.

<div class="alert alert-warning alert-dismissible" role="alert">
  <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
  <strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>

Assure un comportement correct sur tous les appareils

Veillez à utiliser l'élément <button> avec l'attribut de données data-dismiss="alert".

Utilisez la classe d'utilitaires .alert-link pour proposer rapidement des liens colorés correspondants dans n’importe quelle alerte.

<div class="alert alert-success" role="alert">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-info" role="alert">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-warning" role="alert">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-danger" role="alert">
  <a href="#" class="alert-link">...</a>
</div>

Barres de progression

Proposez un retour actualisé sur la progression d'un workflow ou d'une action avec des barres de progression simples et flexibles.

Compatibilité sur les différents navigateurs

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

Exemple simple

Barre de progression par défaut

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

Avec libellé

Retirez la classe .sr-only de la barre de progression pour afficher un pourcentage visible. Pour les faibles pourcentages, pensez à ajouter un min-width pour garantir que le texte du libellé soit complètement visible.

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

Low percentages

Progress bars representing low single digit percentages, as well as 0%, include a min-width: 20px; for legibility.

0%
2%
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
    0%
  </div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100" style="width: 2%;">
    2%
  </div>
</div>

Alternatives contextuelles

Les barres de progression utilisent certaines des mêmes classes de boutons et d'alertes pour des styles cohérents.

Terminé à 40% (succès)
Terminé à 20%
Terminé à 60% (avertissement)
Terminé à 80% (danger)
<div class="progress">
  <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
    <span class="sr-only">40% Complete (success)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
    <span class="sr-only">20% Complete</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: 60%">
    <span class="sr-only">60% Complete (warning)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
    <span class="sr-only">80% Complete</span>
  </div>
</div>

Rayé

Utilise un dégradé pour créer un effet rayé. Non disponible dans IE8.

Terminé à 40% (succès)
Terminé à 20%
Terminé à 60% (avertissement)
Terminé à 80% (danger)
<div class="progress">
  <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
    <span class="sr-only">40% Complete (success)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
    <span class="sr-only">20% Complete</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
    <span class="sr-only">60% Complete (warning)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
    <span class="sr-only">80% Complete (danger)</span>
  </div>
</div>

Animé

Add .active to .progress-bar-striped to animate the stripes right to left. Not available in IE9 and below.

Terminé à 45%
<div class="progress">
  <div class="progress-bar progress-bar-striped active"  role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
    <span class="sr-only">45% Complete</span>
  </div>
</div>

Empilé

Placez plusieurs barres dans le même .progress pour les empiler.

Terminé à 35% (succès)
Terminé à 20% (avertissement)
Terminé à 10% (danger)
<div class="progress">
  <div class="progress-bar progress-bar-success" style="width: 35%">
    <span class="sr-only">35% Complete (success)</span>
  </div>
  <div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%">
    <span class="sr-only">20% Complete (warning)</span>
  </div>
  <div class="progress-bar progress-bar-danger" style="width: 10%">
    <span class="sr-only">10% Complete (danger)</span>
  </div>
</div>

Objet média

Des styles d'objet abstraits pour créer divers types de composants (comme des commentaires de blog, tweets, etc) proposant une image alignée à gauche ou à droite aux côtés du contenu textuel.

Support par défaut

Le support par défaut permet de faire flotter un objet média (images, vidéo, audio) sur la gauche ou la droite d'un bloc de contenu.

Generic placeholder image

En tête de média

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Generic placeholder image
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

En tête de média

Generic placeholder image

Nested media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
<div class="media">
  <a class="pull-left" href="#">
    <img class="media-object" src="..." alt="...">
  </a>
  <div class="media-body">
    <h4 class="media-heading">Media heading</h4>
    ...
  </div>
</div>

Liste de supports

Avec un peu de marquage supplémentaire, vous pouvez utiliser la liste de médias internes (utile pour les fils de commentaires ou listes d'articles).

  • Generic placeholder image

    En tête de média

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

    Generic placeholder image
    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

    En-tête de média imbriqué

    Generic placeholder image

    Nested media heading

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
    Generic placeholder image

    En-tête de média imbriqué

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
  • Generic placeholder image

    En tête de média

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
<ul class="media-list">
  <li class="media">
    <a class="pull-left" href="#">
      <img class="media-object" src="..." alt="...">
    </a>
    <div class="media-body">
      <h4 class="media-heading">Media heading</h4>
      ...
    </div>
  </li>
</ul>

Groupe de listes

Les groupes de listes sont un composant flexible et puissant pour afficher non seulement des listes d'éléments simples, mais aussi d'autres complexes avec du contenu personnalisé.

Exemple simple

Le groupe de listes le plus simple est simplement une liste non triée avec des éléments de liste et les bonnes classes. Complétez cette liste avec les options suivantes, ou votre propre CSS selon vos besoins.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros
<ul class="list-group">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

Badges

Ajoutez le composant badges à tout élément de groupe de listes et celui-ci sera automatiquement positionné à droite.

  • 14 Cras justo odio
  • 2 Dapibus ac facilisis in
  • 1 Morbi leo risus
<ul class="list-group">
  <li class="list-group-item">
    <span class="badge">14</span>
    Cras justo odio
  </li>
</ul>

Éléments liés

Ajoutez un lien à des éléments de groupe de listes en utilisant des balises d'ancrage au lieu d'éléments de liste (cela signifie également un <div> parent au lien d'un <ul>. Inutile d'avoir des parents individuels autour de chaque élément).

<div class="list-group">
  <a href="#" class="list-group-item active">
    Cras justo odio
  </a>
  <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item">Morbi leo risus</a>
  <a href="#" class="list-group-item">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item">Vestibulum at eros</a>
</div>

Disabled items

Add .disabled to a .list-group-item to gray it out to appear disabled.

<div class="list-group">
  <a href="#" class="list-group-item disabled">
    Cras justo odio
  </a>
  <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item">Morbi leo risus</a>
  <a href="#" class="list-group-item">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item">Vestibulum at eros</a>
</div>

Classes contextuelles

Utilisez des classes contextuelles pour mettre en forme les éléments de liste, par défaut ou liés. Inclut également l'état .active.

  • Dapibus ac facilisis in
  • Cras sit amet nibh libero
  • Porta ac consectetur ac
  • Vestibulum at eros
<ul class="list-group">
  <li class="list-group-item list-group-item-success">Dapibus ac facilisis in</li>
  <li class="list-group-item list-group-item-info">Cras sit amet nibh libero</li>
  <li class="list-group-item list-group-item-warning">Porta ac consectetur ac</li>
  <li class="list-group-item list-group-item-danger">Vestibulum at eros</li>
</ul>
<div class="list-group">
  <a href="#" class="list-group-item list-group-item-success">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item list-group-item-info">Cras sit amet nibh libero</a>
  <a href="#" class="list-group-item list-group-item-warning">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item list-group-item-danger">Vestibulum at eros</a>
</div>

Contenu personnalisé

Ajoutez à peu près tout code HTML à l'intérieur, y compris pour les groupes de listes liés comme ci-dessous.

<div class="list-group">
  <a href="#" class="list-group-item active">
    <h4 class="list-group-item-heading">List group item heading</h4>
    <p class="list-group-item-text">...</p>
  </a>
</div>

Panneaux

Même si cela n'est pas toujours nécessaire, vous aurez parfois besoin de placer votre DOM dans une zone. Dans de tels cas, essayez le composant panel.

Exemple simple

Par défaut, .panel se contente d'appliquer une bordure et une marge intérieure de base pour le contenu.

Exemple de panneau simple
<div class="panel panel-default">
  <div class="panel-body">
    Basic panel example
  </div>
</div>

Panneau avec en-tête

Avec .panel-heading, ajoutez facilement un conteneur d'en-tête pour votre panneau. Vous pouvez également inclure n’importe <h1>-<h6> avec une classe .panel-title pour ajouter un titre déjà mis en forme.

For proper link coloring, be sure to place links in headings within .panel-title.

En-tête de panneau sans titre
Contenu de panneau

Titre de panneau

Contenu de panneau
<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 title</h3>
  </div>
  <div class="panel-body">
    Panel content
  </div>
</div>

Englobez des boutons ou du texte secondaire dans .panel-footer. Notez que les pieds de panneau n'héritent pas des couleurs et bordures lors de l'utilisation de variations contextuelles, car celles-ci ne sont pas conçues pour être au premier plan.

Contenu de panneau
<div class="panel panel-default">
  <div class="panel-body">
    Panel content
  </div>
  <div class="panel-footer">Panel footer</div>
</div>

Alternatives contextuelles

Comme d'autres composants, rendez facilement un panneau plus significatif pour un contexte particulier en ajoutant une classe d'état contextuel quelconque.

Titre de panneau

Contenu de panneau

Titre de panneau

Contenu de panneau

Titre de panneau

Contenu de panneau

Titre de panneau

Contenu de panneau

Titre de panneau

Contenu de panneau
<div class="panel panel-primary">...</div>
<div class="panel panel-success">...</div>
<div class="panel panel-info">...</div>
<div class="panel panel-warning">...</div>
<div class="panel panel-danger">...</div>

Avec tableaux

Pour un design fluide, ajoutez n'importe quel .table sans bordure au sein d'un panneau. Si un .panel-body est présent, nous ajoutons une bordure supplémentaire en haut du tableau pour effectuer la séparation.

En-tête de panneau

Du contenu de panneau par défaut ici. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.

# Prénom Nom de famille Nom d'utilisateur
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>
  <div class="panel-body">
    <p>...</p>
  </div>

  <!-- Table -->
  <table class="table">
    ...
  </table>
</div>

Si aucun corps de panneau n'est présent, le composant se déplace de l'en-tête du panneau vers le tableau sans interruption.

En-tête de panneau
# Prénom Nom de famille Nom d'utilisateur
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>

  <!-- Table -->
  <table class="table">
    ...
  </table>
</div>

Avec groupes de listes

Easily include full-width list groups within any panel.

En-tête de panneau

Du contenu de panneau par défaut ici. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros
<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>
  <div class="panel-body">
    <p>...</p>
  </div>

  <!-- List group -->
  <ul class="list-group">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Morbi leo risus</li>
    <li class="list-group-item">Porta ac consectetur ac</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>

Responsive embed

Allow browsers to determine video or slideshow dimensions based on the width of their containing block by creating an intrinsic ratio that will properly scale on any device.

Rules are directly applied to <iframe>, <embed>, and <object> elements; optionally use an explicit descendant class .embed-responsive-item when you want to match the styling for other attributes.

Pro-Tip! You don't need to include frameborder="0" in your <iframe>s as we override that for you.

<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="…"></iframe>
</div>

<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="…"></iframe>
</div>

Cadres

Cadre de décalage par défaut

Utilisez le cadre de décalage comme effet simple sur un élément pour lui donner un effet décalé.

Regardez, je suis dans un cadre !
<div class="well">...</div>

Classes optionnelles

Contrôlez le décalage et les coins arrondis avec deux classes de modificateur optionnelles.

Regardez, je suis dans un gros cadre !
<div class="well well-lg">...</div>
Regardez, je suis dans un petit cadre !
<div class="well well-sm">...</div>