Défaut

Source

Deprecated: Function create_function() is deprecated in /home/praufkea/bootstrap-doc.prauds.fr/geshi/geshi.php on line 4698

<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
    <li role="presentation" class="dropdown-header">Titre dans le menu</li>
    <li role="presentation"><a role="menuitem" href="#">Lien normal</a></li>
    <li role="presentation" class="active"><a role="menuitem" href="#">Lien actif</a></li>
    <li role="presentation" class="disabled"><a role="menuitem" href="#">Lien désactivé</a></li>
    <li role="presentation" class="divider"></li>
    <li class="dropdown-submenu">
        <a href="#">Lien séparer</a>
        <ul class="dropdown-menu">
            <li><a href="#">2éme niveau</a></li>
            <li class="dropdown-submenu">
                <a href="#">Plus...</a>
                <ul class="dropdown-menu">
                    <li><a href="#">3éme niveau</a></li>
                    <li><a href="#">3éme niveau</a></li>
                </ul>
            </li>
            <li><a href="#">2éme niveau</a></li>
            <li><a href="#">2éme niveau</a></li>
        </ul>
    </li>
</ul>

Avec la classe pull-right

Source

<ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dropdownMenu1">
    <li role="presentation" class="dropdown-header">Titre dans le menu</li>                               
    <li role="presentation"><a role="menuitem" href="#">Lien normal</a></li>
    <li role="presentation" class="active"><a role="menuitem" href="#">Lien actif</a></li>
    <li role="presentation" class="disabled"><a role="menuitem" href="#">Lien désactivé</a></li>
    <li role="presentation" class="divider"></li>
    <li class="dropdown-submenu pull-left">
        <a href="#">Lien séparer</a>
        <ul class="dropdown-menu">
            <li><a href="#">2éme niveau</a></li>
            <li class="dropdown-submenu pull-left">
                <a href="#">Plus...</a>
                <ul class="dropdown-menu">
                    <li><a href="#">3éme niveau</a></li>
                    <li><a href="#">3éme niveau</a></li>
                </ul>
            </li>
            <li><a href="#">2éme niveau</a></li>
            <li><a href="#">2éme niveau</a></li>
        </ul>
    </li>
</ul>

Défaut

Barre de boutons

Groupe Boutons + Dropdown

Taille d'un groupe de boutons

Groupe de boutons vertical

Groupe de boutons justifié (fonctionne uniquement sur des <a>)

Gauche Centre Droite

Gauche Centre

Source

<div class="btn-group btn-group-justified">
    <a class="btn btn-default" href="#">Gauche</a>
    <a class="btn btn-default" href="#">Centre</a>
    <a class="btn btn-default" href="#">Droite</a>
</div>
<br>
<div class="btn-group btn-group-justified">
    <a class="btn btn-default" href="#">Gauche</a>
    <a class="btn btn-default" href="#">Centre</a>
    <div class="btn-group">
        <button data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button" id="btnGroupVerticalDrop1">Dropdown <span class="caret"></span></button>
        <ul aria-labelledby="btnGroupVerticalDrop1" role="menu" class="dropdown-menu">
          <li><a href="#">Dropdown link</a></li>
          <li><a href="#">Dropdown link</a></li>
        </ul>
    </div>
</div>

Couleur et taille de bouton dropdowns

Source

<div class="btn-group">
    <button data-toggle="dropdown" class="btn btn-lg btn-default dropdown-toggle" type="button">Default <span class="caret"></span></button>
    <ul role="menu" class="dropdown-menu dropdown-menu-default">
        <li><a href="#">Action</a></li>
        <li class="active"><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 data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button">Default <span class="caret"></span></button>
    <ul role="menu" class="dropdown-menu dropdown-menu-default">
        <li><a href="#">Action</a></li>
        <li class="active"><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 data-toggle="dropdown" class="btn btn-sm btn-default dropdown-toggle" type="button">Default <span class="caret"></span></button>
    <ul role="menu" class="dropdown-menu dropdown-menu-default">
        <li><a href="#">Action</a></li>
        <li class="active"><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 data-toggle="dropdown" class="btn btn-xs btn-default dropdown-toggle" type="button">Default <span class="caret"></span></button>
    <ul role="menu" class="dropdown-menu dropdown-menu-default">
        <li><a href="#">Action</a></li>
        <li class="active"><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>

Couleur et taille de split bouton dropdowns

Source

<div class="btn-group">
    <button class="btn btn-default btn-lg" type="button">Default</button>
    <button data-toggle="dropdown" class="btn btn-lg btn-default dropdown-toggle" type="button"> <span class="caret"></span></button>
    <ul role="menu" class="dropdown-menu dropdown-menu-default">
        <li><a href="#">Action</a></li>
        <li class="active"><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 class="btn btn-default" type="button">Default</button>
    <button data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button">Default <span class="caret"></span></button>
    <ul role="menu" class="dropdown-menu dropdown-menu-default">
        <li><a href="#">Action</a></li>
        <li class="active"><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 class="btn btn-default btn-sm" type="button">Default</button>
    <button data-toggle="dropdown" class="btn btn-sm btn-default dropdown-toggle" type="button">Default <span class="caret"></span></button>
    <ul role="menu" class="dropdown-menu dropdown-menu-default">
        <li><a href="#">Action</a></li>
        <li class="active"><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 class="btn btn-default btn-xs" type="button">Default</button>
    <button data-toggle="dropdown" class="btn btn-xs btn-default dropdown-toggle" type="button">Default <span class="caret"></span></button>
    <ul role="menu" class="dropdown-menu dropdown-menu-default">
        <li><a href="#">Action</a></li>
        <li class="active"><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>

Ouverture du menu vers le haut

Source

<div class="btn-group dropup">
    <button data-toggle="dropdown" class="btn btn-default btn-xs dropdown-toggle" type="button">dropup <span class="caret"></span></button>
    <ul role="menu" class="dropdown-menu">
        <li><a href="#">Action</a></li>
    </ul>
</div>
<div class="btn-group dropup">
    <button data-toggle="dropdown" class="btn btn-primary btn-sm dropdown-toggle" type="button">dropup <span class="caret"></span></button>
    <ul role="menu" class="dropdown-menu">
        <li><a href="#">Action</a></li>
    </ul>
</div>
<div class="btn-group dropup">
    <button data-toggle="dropdown" class="btn btn-success dropdown-toggle" type="button">dropup <span class="caret"></span></button>
    <ul role="menu" class="dropdown-menu">
        <li><a href="#">Action</a></li>
    </ul>
</div>
<div class="btn-group dropup">
    <button data-toggle="dropdown" class="btn btn-info btn-lg dropdown-toggle" type="button">dropup <span class="caret"></span></button>
    <ul role="menu" class="dropdown-menu">
        <li><a href="#">Action</a></li>
    </ul>
</div>
<div class="btn-group dropup">
    <button class="btn btn-warning btn-lg" type="button">dropup</button>
    <button data-toggle="dropdown" class="btn btn-warning btn-lg dropdown-toggle" type="button"> <span class="caret"></span></button>
    <ul role="menu" class="dropdown-menu">
        <li><a href="#">Action</a></li>
    </ul>
</div>
<div class="btn-group dropup">
    <button class="btn btn-danger" type="button">dropup</button>
    <button data-toggle="dropdown" class="btn btn-danger dropdown-toggle" type="button"> <span class="caret"></span></button>
    <ul role="menu" class="dropdown-menu">
        <li><a href="#">Action</a></li>
    </ul>
</div>
<div class="btn-group dropup">
    <button class="btn btn-inverse btn-sm" type="button">dropup</button>
    <button data-toggle="dropdown" class="btn btn-inverse btn-sm dropdown-toggle" type="button"> <span class="caret"></span></button>
    <ul role="menu" class="dropdown-menu">
        <li><a href="#">Action</a></li>
    </ul>
</div>
<div class="btn-group dropup">
    <button class="btn btn-purple btn-xs" type="button">dropup</button>
    <button data-toggle="dropdown" class="btn btn-purple btn-xs dropdown-toggle" type="button"> <span class="caret"></span></button>
    <ul role="menu" class="dropdown-menu">
        <li><a href="#">Action</a></li>
    </ul>
</div>

Préfixe et/ou suffixe d'un champ

@ .00

.00

Source

<div class="row">
  <div class="col-sm-8">
    <div class="input-group">
      <span class="input-group-addon">@</span>
      <input type="text" class="form-control">
    </div>
  </div>                        
  <div class="col-sm-8">                   
    <div class="input-group">
      <span class="input-group-addon">@</span>
      <input type="text" class="form-control">
      <span class="input-group-addon">.00</span>
    </div>
  </div>
  <div class="col-sm-8">                   
    <div class="input-group">
      <input type="text" class="form-control">
      <span class="input-group-addon">.00</span>
    </div>
  </div>
</div>
 
<div class="row">
  <div class="col-sm-6">
    <div class="input-group">
      <span class="input-group-addon"><input type="checkbox"></span>
      <input type="text" class="form-control">
    </div>
  </div>
  <div class="col-sm-6">
    <div class="input-group">
      <input type="text" class="form-control">
      <span class="input-group-addon"><input type="checkbox"></span>
    </div>
  </div>
  <div class="col-sm-6">
    <div class="input-group">
      <span class="input-group-addon"><input type="radio" name="choix"></span>
      <input type="text" class="form-control">
    </div>
  </div>
  <div class="col-sm-6">
    <div class="input-group">
      <input type="text" class="form-control">
      <span class="input-group-addon"><input type="radio" name="choix"></span>
    </div>
  </div>
</div>
 
<div class="row">
  <div class="col-sm-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>
  </div>                        
  <div class="col-sm-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>
  </div>
  <div class="col-sm-6">
    <div class="input-group">
      <span 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">
          <li><a href="#">Action</a></li>
        </ul>
      </span>
      <input type="text" class="form-control">
    </div>
  </div>                        
  <div class="col-sm-6">                   
    <div class="input-group">
      <input type="text" class="form-control">
      <span 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 pull-right">
          <li><a href="#">Action</a></li>
        </ul>
      </span>
    </div>
  </div>
</div>
 
<div class="row">
  <div class="col-sm-12">
    <div class="input-group">
      <div class="input-group-btn">
        <button class="btn btn-default" type="button">Action</button>
        <button data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button"> <span class="caret"></span></button>
        <ul role="menu" class="dropdown-menu">
          <li><a href="#">Action</a></li>
        </ul>
      </div>
      <input type="text" class="form-control">
    </div>
  </div>
  <div class="col-sm-12">
    <div class="input-group">
      <input type="text" class="form-control">
      <div class="input-group-btn">
        <button class="btn btn-default" type="button">Action</button>
        <button data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button"> <span class="caret"></span></button>
        <ul role="menu" class="dropdown-menu pull-right">
          <li><a href="#">Action</a></li>
        </ul>
      </div>
    </div>
  </div>
</div>

Champ texte et bouton avec bord arrondi sp

Source

<form role="search" name="searchform" method="get">
    <div class="row">
        <div class="col-sm-8">
            <div class="form-group">
                <div class="input-group">
                    <input type="text" placeholder="recherche" name="s" class="form-control left-rounded">
                    <div class="input-group-btn">
                        <button type="submit" class="btn btn-inverse right-rounded">Chercher</button>
                    </div>
                </div>
            </div>
        </div>
 
        <div class="col-sm-8">
            <div class="form-group">
                <div class="input-group">
                    <input type="text" placeholder="recherche" name="s" class="form-control">
                    <div class="input-group-btn">
                        <button type="submit" class="btn btn-inverse right-rounded">Chercher</button>
                    </div>
                </div>
            </div>
        </div>
 
        <div class="col-sm-8">
            <div class="form-group">
                <div class="input-group">
                    <input type="text" placeholder="recherche" name="s" class="form-control left-rounded">
                    <div class="input-group-btn">
                        <button type="submit" class="btn btn-inverse">Chercher</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>

Ajouter un icone dans un champ sp

Source

<div class="form-group">
    <div class="icon-addon addon-lg">
        <input type="text" placeholder="Texte" class="form-control input-lg" id="Textelg">
        <i class="icon icon-envelope"></i>
    </div>
</div>
 
<div class="form-group">
    <div class="input-group input-group-lg icon-addon addon-lg">
        <input type="text" placeholder="Texte" name="" id="schbox" class="form-control input-lg">
        <i class="icon icon-search"></i>
        <span class="input-group-btn">
            <button type="submit" class="btn btn-inverse">Rechercher</button>
        </span>
    </div>
</div>
 
<div class="form-group">
    <div class="icon-addon addon-lg">
        <select class="form-control input-lg">
            <option>Select Option</option>
            <option>Sample</option>
            <option>Sample</option>
        </select>
        <i class="icon icon-search"></i>
    </div>
</div>
 
<div class="form-group">
    <div class="icon-addon addon-md">
        <input type="text" placeholder="Texte" class="form-control" id="Textemd">
        <i class="icon icon-lock"></i>
    </div>
</div>
 
<div class="form-group">
    <div class="input-group input-group-md icon-addon addon-md">
        <input type="text" placeholder="Texte" name="" id="schbox" class="form-control">
        <i class="icon icon-search"></i>
        <span class="input-group-btn">
            <button type="submit" class="btn btn-inverse">Rechercher</button>
        </span>
    </div>
</div>
 
<div class="form-group">
    <div class="icon-addon addon-md">
        <select class="form-control">
            <option>Select Option</option>
            <option>Sample</option>
            <option>Sample</option>
        </select>
        <i class="icon icon-search"></i>
    </div>
</div>
 
<div class="form-group">
    <div class="icon-addon addon-sm">
        <input type="text" placeholder="Texte" class="form-control input-sm" id="Textesm">
        <i class="icon icon-user"></i>
    </div>
</div>
 
<div class="form-group">
    <div class="input-group input-group-sm icon-addon addon-sm">
        <input type="text" placeholder="Texte" name="" id="schbox" class="form-control input-sm">
        <i class="icon icon-search"></i>
        <span class="input-group-btn">
            <button type="submit" class="btn btn-inverse">Rechercher</button>
        </span>
    </div>
</div>
 
<div class="form-group">
    <div class="icon-addon addon-sm">
        <select class="form-control input-sm">
            <option>Select Option</option>
            <option>Sample</option>
            <option>Sample</option>
        </select>
        <i class="icon icon-search"></i>
    </div>
</div>

Ajouter un icone dans un champ à droite sp

Source

<div class="form-group">
    <div class="icon-addon addon-lg addon-right">
        <input type="text" placeholder="Texte" class="form-control input-lg" id="Textelg">
        <i class="icon icon-envelope"></i>
    </div>
</div>
 
<div class="form-group">
    <div class="icon-addon addon-right">
        <input type="text" placeholder="Texte" class="form-control" id="Textemd">
        <i class="icon icon-lock"></i>
    </div>
</div>
 
<div class="form-group">
    <div class="icon-addon addon-right">
        <input type="text" placeholder="Texte" class="form-control input-sm" id="Textesm">
        <i class="icon icon-user"></i>
    </div>
</div>

Taille de champ avec préfixe et/ou suffixe

.00

Source

<div class="row">
  <div class="col-sm-8">
    <div class="input-group input-group-lg">
      <span class="input-group-addon"><i class="icon icon-envelope"></i></span>
      <input type="text" class="form-control">
    </div>
  </div>                        
  <div class="col-sm-8">                   
    <div class="input-group input-group-lg">
      <span class="input-group-addon"><i class="icon icon-envelope"></i></span>
      <input type="text" class="form-control">
      <span class="input-group-addon">.00</span>
    </div>
  </div>
  <div class="col-sm-8">                   
    <div class="input-group input-group-lg">
      <input type="text" class="form-control">
      <span class="input-group-addon">.00</span>
    </div>
  </div>
</div>
 
<div class="row">
  <div class="col-sm-8">
    <div class="input-group">
      <span class="input-group-addon"><i class="icon icon-envelope"></i></span>
      <input type="text" class="form-control">
    </div>
  </div>                        
  <div class="col-sm-8">                   
    <div class="input-group">
      <span class="input-group-addon"><i class="icon icon-envelope"></i></span>
      <input type="text" class="form-control">
      <span class="input-group-addon">.00</span>
    </div>
  </div>
  <div class="col-sm-8">                   
    <div class="input-group">
      <input type="text" class="form-control">
      <span class="input-group-addon">.00</span>
    </div>
  </div>
</div>
 
<div class="row">
  <div class="col-sm-8">
    <div class="input-group input-group-sm">
      <span class="input-group-addon"><i class="icon icon-envelope"></i></span>
      <input type="text" class="form-control">
    </div>
  </div>                        
  <div class="col-sm-8">                   
    <div class="input-group input-group-sm">
      <span class="input-group-addon"><i class="icon icon-envelope"></i></span>
      <input type="text" class="form-control">
      <span class="input-group-addon">.00</span>
    </div>
  </div>
  <div class="col-sm-8">                   
    <div class="input-group input-group-sm">
      <input type="text" class="form-control">
      <span class="input-group-addon">.00</span>
    </div>
  </div>
</div>

Menu à onglets

Texte Accueil

Texte Messages

Texte 1

Texte 2

nav-success

Texte Accueil

Texte Messages

Texte 1

Texte 2

nav-info

Texte Accueil

Texte Messages

Texte 1

Texte 2

nav-warning

Texte Accueil

Texte Messages

Texte 1

Texte 2

nav-danger

Texte Accueil

Texte Messages

Texte 1

Texte 2

nav-inverse

Texte Accueil

Texte Messages

Texte 1

Texte 2

nav-purple

Texte Accueil

Texte Messages

Texte 1

Texte 2

nav-pink

Texte Accueil

Texte Messages

Texte 1

Texte 2

Menu à onglets avec bordure

nav-border-color

Texte Accueil

Texte Messages

Texte 1

Texte 2

nav-border-color nav-success

Texte Accueil

Texte Messages

Texte 1

Texte 2

nav-border-color nav-info

Texte Accueil

Texte Messages

Texte 1

Texte 2

nav-border-color nav-warning

Texte Accueil

Texte Messages

Texte 1

Texte 2

nav-border-color nav-danger

Texte Accueil

Texte Messages

Texte 1

Texte 2

nav-border-color nav-inverse

Texte Accueil

Texte Messages

Texte 1

Texte 2

nav-border-color nav-purple

Texte Accueil

Texte Messages

Texte 1

Texte 2

nav-border-color nav-pink

Texte Accueil

Texte Messages

Texte 1

Texte 2

Menu à onglets alternatif

nav-tabs-alt

Texte Accueil

Texte Messages

Texte 1

Texte 2

nav-tabs-alt nav-success

Texte Accueil

Texte Messages

Texte 1

Texte 2

nav-tabs-alt nav-info

Texte Accueil

Texte Messages

Texte 1

Texte 2

nav-tabs-alt nav-warning

Texte Accueil

Texte Messages

Texte 1

Texte 2

nav-tabs-alt nav-danger

Texte Accueil

Texte Messages

Texte 1

Texte 2

nav-tabs-alt nav-inverse

Texte Accueil

Texte Messages

Texte 1

Texte 2

nav-tabs-alt nav-purple

Texte Accueil

Texte Messages

Texte 1

Texte 2

nav-tabs-alt nav-pink

Texte Accueil

Texte Messages

Texte 1

Texte 2

Menu à boutons

Texte Accueil

Texte Messages

Texte 1

Texte 2

nav-pills nav-success

Texte Accueil

Texte Messages

Texte 1

Texte 2

nav-pills nav-info

Texte Accueil

Texte Messages

Texte 1

Texte 2

nav-pills nav-warning

Texte Accueil

Texte Messages

Texte 1

Texte 2

nav-pills nav-danger

Texte Accueil

Texte Messages

Texte 1

Texte 2

nav-pills nav-inverse

Texte Accueil

Texte Messages

Texte 1

Texte 2

nav-pills nav-purple

Texte Accueil

Texte Messages

Texte 1

Texte 2

nav-pills nav-pink

Texte Accueil

Texte Messages

Texte 1

Texte 2

Menu à boutons vertical à gauche

Texte Accueil

Texte Messages

Texte 1

Texte 2

Menu à boutons vertical à droite

Texte Accueil

Texte Messages

Texte 1

Texte 2

Menu à onglets justifié

Texte Accueil

Texte Messages

Texte 1

Texte 2

Menu à onglets avec bordure justifié

Texte Accueil

Texte Messages

Texte 1

Texte 2

nav-tabs-alt justifié sp

Texte Accueil

Texte Messages

Texte 1

Texte 2

Menu à boutons justifié

Texte Accueil

Texte Messages

Texte 1

Texte 2

Navbar fixe en haut de page

Ajouter la classe navbar-static-top à la balise <nav></nav>

Navbar toujours visible en haut de page

Ajouter la classe navbar-fixed-top à la balise <nav></nav>, Il faut aussi ajouter ce css body {padding-top: 70px;}

Navbar toujours visible en bas de page

Ajouter la classe navbar-fixed-bottom à la balise <nav></nav>, Il faut aussi ajouter ce css body {padding-bottom: 70px;}

navbar-default

Source

<nav class="navbar navbar-default" role="navigation">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex2-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="#">Brand</a>
    </div>
    <div class="collapse navbar-collapse navbar-ex2-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Accueil</a></li>
        <li class="dropdown dropup">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">
            Dropup <b class="caret"></b>
          </a>
          <ul class="dropdown-menu dropdown-menu-default">
            <li><a href="#">Action</a></li>
            <li><a href="#">Autre action</a></li>
            <li><a href="#">Exemple</a></li>
            <li class="divider"></li>
            <li class="dropdown-header">Titre exemple</li>
            <li><a href="#">Lien séparer</a></li>
            <li><a href="#">Autre lien séparer</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"><i class="icon icon-search"></i></button>
      </form>
      <p class="navbar-text">navbar-text</p>
      <ul class="nav navbar-nav navbar-right">
        <li class="disabled"><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
          <ul class="dropdown-menu dropdown-menu-default">
            <li><a href="#">Action</a></li>
            <li class="active"><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
        <li><a href="#" class="navbar-link">[navbar-link]</a></li>
      </ul>
    </div>
  </div>
</nav>

navbar-primary

Source

<nav class="navbar navbar-primary" role="navigation">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex2-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="#">Brand</a>
    </div>
    <div class="collapse navbar-collapse navbar-ex2-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Accueil</a></li>
        <li class="dropdown dropup">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">
            Dropup <b class="caret"></b>
          </a>
          <ul class="dropdown-menu dropdown-menu-primary">
            <li><a href="#">Action</a></li>
            <li><a href="#">Autre action</a></li>
            <li><a href="#">Exemple</a></li>
            <li class="divider"></li>
            <li class="dropdown-header">Titre exemple</li>
            <li><a href="#">Lien séparer</a></li>
            <li><a href="#">Autre lien séparer</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-primary"><i class="icon icon-search"></i></button>
      </form>
      <p class="navbar-text">navbar-text</p>
      <ul class="nav navbar-nav navbar-right">
        <li class="disabled"><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
          <ul class="dropdown-menu dropdown-menu-primary">
            <li><a href="#">Action</a></li>
            <li class="active"><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
        <li><a href="#" class="navbar-link">[navbar-link]</a></li>
      </ul>
    </div>
  </div>
</nav>

navbar-success

Source

<nav class="navbar navbar-success" role="navigation">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex2-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="#">Brand</a>
    </div>
    <div class="collapse navbar-collapse navbar-ex2-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Accueil</a></li>
        <li class="dropdown dropup">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">
            Dropup <b class="caret"></b>
          </a>
          <ul class="dropdown-menu dropdown-menu-success">
            <li><a href="#">Action</a></li>
            <li><a href="#">Autre action</a></li>
            <li><a href="#">Exemple</a></li>
            <li class="divider"></li>
            <li class="dropdown-header">Titre exemple</li>
            <li><a href="#">Lien séparer</a></li>
            <li><a href="#">Autre lien séparer</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-success"><i class="icon icon-search"></i></button>
      </form>
      <p class="navbar-text">navbar-text</p>
      <ul class="nav navbar-nav navbar-right">
        <li class="disabled"><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
          <ul class="dropdown-menu dropdown-menu-success">
            <li><a href="#">Action</a></li>
            <li class="active"><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
        <li><a href="#" class="navbar-link">[navbar-link]</a></li>
      </ul>
    </div>
  </div>
</nav>

navbar-info

Source

<nav class="navbar navbar-info" role="navigation">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex2-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="#">Brand</a>
    </div>
    <div class="collapse navbar-collapse navbar-ex2-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Accueil</a></li>
        <li class="dropdown dropup">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">
            Dropup <b class="caret"></b>
          </a>
          <ul class="dropdown-menu dropdown-menu-info">
            <li><a href="#">Action</a></li>
            <li><a href="#">Autre action</a></li>
            <li><a href="#">Exemple</a></li>
            <li class="divider"></li>
            <li class="dropdown-header">Titre exemple</li>
            <li><a href="#">Lien séparer</a></li>
            <li><a href="#">Autre lien séparer</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-info"><i class="icon icon-search"></i></button>
      </form>
      <p class="navbar-text">navbar-text</p>
      <ul class="nav navbar-nav navbar-right">
        <li class="disabled"><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
          <ul class="dropdown-menu dropdown-menu-info">
            <li><a href="#">Action</a></li>
            <li class="active"><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
        <li><a href="#" class="navbar-link">[navbar-link]</a></li>
      </ul>
    </div>
  </div>
</nav>

navbar-warning

Source

<nav class="navbar navbar-warning" role="navigation">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex2-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="#">Brand</a>
    </div>
    <div class="collapse navbar-collapse navbar-ex2-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Accueil</a></li>
        <li class="dropdown dropup">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">
            Dropup <b class="caret"></b>
          </a>
          <ul class="dropdown-menu dropdown-menu-warning">
            <li><a href="#">Action</a></li>
            <li><a href="#">Autre action</a></li>
            <li><a href="#">Exemple</a></li>
            <li class="divider"></li>
            <li class="dropdown-header">Titre exemple</li>
            <li><a href="#">Lien séparer</a></li>
            <li><a href="#">Autre lien séparer</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-warning"><i class="icon icon-search"></i></button>
      </form>
      <p class="navbar-text">navbar-text</p>
      <ul class="nav navbar-nav navbar-right">
        <li class="disabled"><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
          <ul class="dropdown-menu dropdown-menu-warning">
            <li><a href="#">Action</a></li>
            <li class="active"><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
        <li><a href="#" class="navbar-link">[navbar-link]</a></li>
      </ul>
    </div>
  </div>
</nav>

navbar-danger

Source

<nav class="navbar navbar-danger" role="navigation">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex2-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="#">Brand</a>
    </div>
    <div class="collapse navbar-collapse navbar-ex2-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Accueil</a></li>
        <li class="dropdown dropup">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">
            Dropup <b class="caret"></b>
          </a>
          <ul class="dropdown-menu dropdown-menu-danger">
            <li><a href="#">Action</a></li>
            <li><a href="#">Autre action</a></li>
            <li><a href="#">Exemple</a></li>
            <li class="divider"></li>
            <li class="dropdown-header">Titre exemple</li>
            <li><a href="#">Lien séparer</a></li>
            <li><a href="#">Autre lien séparer</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-danger"><i class="icon icon-search"></i></button>
      </form>
      <p class="navbar-text">navbar-text</p>
      <ul class="nav navbar-nav navbar-right">
        <li class="disabled"><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
          <ul class="dropdown-menu dropdown-menu-danger">
            <li><a href="#">Action</a></li>
            <li class="active"><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
        <li><a href="#" class="navbar-link">[navbar-link]</a></li>
      </ul>
    </div>
  </div>
</nav>

navbar-inverse

Source

<nav class="navbar navbar-inverse" role="navigation">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex2-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="#">Brand</a>
    </div>
    <div class="collapse navbar-collapse navbar-ex2-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Accueil</a></li>
        <li class="dropdown dropup">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">
            Dropup <b class="caret"></b>
          </a>
          <ul class="dropdown-menu dropdown-menu-inverse">
            <li><a href="#">Action</a></li>
            <li><a href="#">Autre action</a></li>
            <li><a href="#">Exemple</a></li>
            <li class="divider"></li>
            <li class="dropdown-header">Titre exemple</li>
            <li><a href="#">Lien séparer</a></li>
            <li><a href="#">Autre lien séparer</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-inverse"><i class="icon icon-search"></i></button>
      </form>
      <p class="navbar-text">navbar-text</p>
      <ul class="nav navbar-nav navbar-right">
        <li class="disabled"><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
          <ul class="dropdown-menu dropdown-menu-inverse">
            <li><a href="#">Action</a></li>
            <li class="active"><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
        <li><a href="#" class="navbar-link">[navbar-link]</a></li>
      </ul>
    </div>
  </div>
</nav>

navbar-purple

Source

<nav class="navbar navbar-purple" role="navigation">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex2-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="#">Brand</a>
    </div>
    <div class="collapse navbar-collapse navbar-ex2-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Accueil</a></li>
        <li class="dropdown dropup">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">
            Dropup <b class="caret"></b>
          </a>
          <ul class="dropdown-menu dropdown-menu-purple">
            <li><a href="#">Action</a></li>
            <li><a href="#">Autre action</a></li>
            <li><a href="#">Exemple</a></li>
            <li class="divider"></li>
            <li class="dropdown-header">Titre exemple</li>
            <li><a href="#">Lien séparer</a></li>
            <li><a href="#">Autre lien séparer</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-purple"><i class="icon icon-search"></i></button>
      </form>
      <p class="navbar-text">navbar-text</p>
      <ul class="nav navbar-nav navbar-right">
        <li class="disabled"><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
          <ul class="dropdown-menu dropdown-menu-purple">
            <li><a href="#">Action</a></li>
            <li class="active"><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
        <li><a href="#" class="navbar-link">[navbar-link]</a></li>
      </ul>
    </div>
  </div>
</nav>

navbar-pink

Source

<nav class="navbar navbar-pink" role="navigation">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex2-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="#">Brand</a>
    </div>
    <div class="collapse navbar-collapse navbar-ex2-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Accueil</a></li>
        <li class="dropdown dropup">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">
            Dropup <b class="caret"></b>
          </a>
          <ul class="dropdown-menu dropdown-menu-pink">
            <li><a href="#">Action</a></li>
            <li><a href="#">Autre action</a></li>
            <li><a href="#">Exemple</a></li>
            <li class="divider"></li>
            <li class="dropdown-header">Titre exemple</li>
            <li><a href="#">Lien séparer</a></li>
            <li><a href="#">Autre lien séparer</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-pink"><i class="icon icon-search"></i></button>
      </form>
      <p class="navbar-text">navbar-text</p>
      <ul class="nav navbar-nav navbar-right">
        <li class="disabled"><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
          <ul class="dropdown-menu dropdown-menu-pink">
            <li><a href="#">Action</a></li>
            <li class="active"><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
        <li><a href="#" class="navbar-link">[navbar-link]</a></li>
      </ul>
    </div>
  </div>
</nav>

navbar navbar-autocollapse sp

Pour que l'autocollapse fonctionne il faut ajouter ce script dans votre fichier de déclaration des fonctions js :

function autocollapse() {
    var navbar = $('.navbar.navbar-autocollapse');
    navbar.removeClass('collapsed');
    if(navbar.innerHeight() > 50) {
    	navbar.addClass('collapsed');
    }
}
$(document).on('ready', autocollapse);
$(window).on('resize', autocollapse);

Source

<nav class="navbar navbar-default navbar-autocollapse" role="navigation">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex2-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="#">Brand</a>
    </div>
    <div class="collapse navbar-collapse navbar-ex2-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Accueil</a></li>
        <li class="dropdown dropup">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">
            Dropup <b class="caret"></b>
          </a>
          <ul class="dropdown-menu dropdown-menu-default">
            <li><a href="#">Action</a></li>
            <li><a href="#">Autre action</a></li>
            <li><a href="#">Exemple</a></li>
            <li class="divider"></li>
            <li class="dropdown-header">Titre exemple</li>
            <li><a href="#">Lien séparer</a></li>
            <li><a href="#">Autre lien séparer</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"><i class="icon icon-search"></i></button>
      </form>
      <p class="navbar-text">navbar-text</p>
      <ul class="nav navbar-nav navbar-right">
        <li class="disabled"><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
          <ul class="dropdown-menu dropdown-menu-default">
            <li><a href="#">Action</a></li>
            <li class="active"><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
        <li><a href="#" class="navbar-link">[navbar-link]</a></li>
      </ul>
    </div>
  </div>
</nav>

Bouton et texte dans une navbar

Source

<nav role="navigation" class="navbar navbar-default">
  <div class="collapse navbar-collapse">
    <button class="btn btn-default navbar-btn" type="button">navbar-btn</button>
    <button class="btn btn-default navbar-btn navbar-right" type="button">navbar-right</button>
  </div>
</nav>
 
<nav role="navigation" class="navbar navbar-default">
  <div class="navbar-collapse">
    <p class="navbar-text">navbar-text</p>
    <p class="navbar-text navbar-right">navbar-text navbar-right <a href="#" class="navbar-link">[navbar-link]</a></p>
  </div>
</nav>

Titre de la navbar avec du texte ou une image v3.3.2

Source

<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">Titre</a>
        </div>
    </div>
</nav>
 
<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#"><img width="20" height="20" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAMAAAC7IEhfAAAA81BMVEX///9VPnxWPXxWPXxWPXxWPXxWPXxWPXz///9hSYT6+vuFc6BXPn37+vz8+/z9/f2LeqWMe6aOfqiTg6uXiK5bQ4BZQX9iS4VdRYFdRYJfSINuWI5vWY9xXJF0YJR3Y5Z4ZZd5ZZd6Z5h9apq0qcW1qsW1q8a6sMqpnLyrn76tocCvpMGwpMJoUoprVYxeRoJjS4abjLGilLemmbrDutDFvdLPx9nX0eDa1OLb1uPd1+Td2OXe2eXh3Ofj3+nk4Orl4evp5u7u7PLv7fPx7/T08vb08/f19Pf29Pj39vn6+fuEcZ9YP35aQn/8/P1ZQH5fR4PINAOdAAAAB3RSTlMAIWWOw/P002ipnAAAAPhJREFUeF6NldWOhEAUBRvtRsfdfd3d3e3/v2ZPmGSWZNPDqScqqaSBSy4CGJbtSi2ubRkiwXRkBo6ZdJIApeEwoWMIS1JYwuZCW7hc6ApJkgrr+T/eW1V9uKXS5I5GXAjW2VAV9KFfSfgJpk+w4yXhwoqwl5AIGwp4RPgdK3XNHD2ETYiwe6nUa18f5jYSxle4vulw7/EtoCdzvqkPv3bn7M0eYbc7xFPXzqCrRCgH0Hsm/IjgTSb04W0i7EGjz+xw+wR6oZ1MnJ9TWrtToEx+4QfcZJ5X6tnhw+nhvqebdVhZUJX/oFcKvaTotUcvUnY188ue/n38AunzPPE8yg7bAAAAAElFTkSuQmCC" alt="Brand"></a>
        </div>
    </div>
</nav>

Breadcrumbs exemple 1

Breadcrumbs exemple 2

Breadcrumbs exemple 3

Classe pagination-sm

par défaut

Classe pagination-lg

pagination-success sp

pagination-info sp

pagination-warning sp

pagination-danger sp

pagination-inverse sp

pagination-purple sp

pagination-pink sp

Classe pagination-sm pagination-alt sp

par défaut pagination-alt sp

Classe pagination-lg pagination-alt sp

pagination-success pagination-alt sp

pagination-info pagination-alt sp

pagination-warning pagination-alt sp

pagination-danger pagination-alt sp

pagination-inverse pagination-alt sp

pagination-purple pagination-alt sp

pagination-pink pagination-alt sp

Pager par défaut

Pager alternatif

Label

Default Primary Success Info Warning Danger Inverse Purple Pink

Badges

1 2 3 4 5 6 7 8 9

Lien avec la classe label

Default Primary Success Info Warning Danger Inverse Purple Pink

Lien avec la classe badge

1 2 3 4 5 6 7 8 9

Label dans des balises h1-h6

Titre h1 New

Titre h2 New

Titre h3 New

Titre h4 New

Titre h5 New

Titre h6 New

Badge dans un menu

Jumbotron

Récapitulatif Bootstrap v3.0.0

Sur cette page vous trouverais tous ce qui est possible de faire avec bootstrap v3.0.0. Le systéme de grille, la typographie, les boutons, les formulaire, les tableaux, les images, la barre de navigation, les alerts ...

Exemple de bouton

Source

<div class="jumbotron">
  <h2>Récapitulatif Bootstrap v3.0.0</h2>
  <p>Sur cette page vous trouverais tous ce qui est possible de faire avec bootstrap v3.0.0. Le systéme de grille, la typographie, les boutons, les formulaire, les tableaux, les images, la barre de navigation, les alerts ...</p>
  <p><a class="btn btn-primary btn-lg">Exemple de bouton <i class="icon icon-caret-right"></i></a></p>
</div>

Page header

Source

<div class="page-header">
  <h1>Example page header <small>sous titre</small></h1>
</div>

Avec bordure de couleur au passage de la souris sp

Source

<a class="thumbnail" href="#"> <img src="http://placehold.it/250x150&text=couleur1" alt=""> </a>
<a class="thumbnail thumbnail-success" href="#"> <img src="http://placehold.it/250x150&text=couleur2" alt=""> </a>
<a class="thumbnail thumbnail-info" href="#"> <img src="http://placehold.it/250x150&text=couleur3" alt=""> </a>
<a class="thumbnail thumbnail-warning" href="#"> <img src="http://placehold.it/250x150&text=couleur4" alt=""> </a>
<a class="thumbnail thumbnail-danger" href="#"> <img src="http://placehold.it/250x150&text=couleur5" alt=""> </a>
<a class="thumbnail thumbnail-inverse" href="#"> <img src="http://placehold.it/250x150&text=couleur6" alt=""> </a>
<a class="thumbnail thumbnail-purple" href="#"> <img src="http://placehold.it/250x150&text=couleur7" alt=""> </a>
<a class="thumbnail thumbnail-pink" href="#"> <img src="http://placehold.it/250x150&text=couleur8" alt=""> </a>
<a class="thumbnail thumbnail-muted" href="#"> <img src="http://placehold.it/250x150&text=couleur9" alt=""> </a>

Avec bordure de couleur + ombre au passage de la souris sp

Source

<a class="thumbnail thumbnail-shadow" href="#"> <img src="http://placehold.it/250x150&text=couleur1" alt=""> </a>
<a class="thumbnail thumbnail-success thumbnail-shadow" href="#"> <img src="http://placehold.it/250x150&text=couleur2" alt=""> </a>
<a class="thumbnail thumbnail-info thumbnail-shadow" href="#"> <img src="http://placehold.it/250x150&text=couleur3" alt=""> </a>
<a class="thumbnail thumbnail-warning thumbnail-shadow" href="#"> <img src="http://placehold.it/250x150&text=couleur4" alt=""> </a>
<a class="thumbnail thumbnail-danger thumbnail-shadow" href="#"> <img src="http://placehold.it/250x150&text=couleur5" alt=""> </a>
<a class="thumbnail thumbnail-inverse thumbnail-shadow" href="#"> <img src="http://placehold.it/250x150&text=couleur6" alt=""> </a>
<a class="thumbnail thumbnail-purple thumbnail-shadow" href="#"> <img src="http://placehold.it/250x150&text=couleur7" alt=""> </a>
<a class="thumbnail thumbnail-pink thumbnail-shadow" href="#"> <img src="http://placehold.it/250x150&text=couleur8" alt=""> </a>
<a class="thumbnail thumbnail-muted thumbnail-shadow" href="#"> <img src="http://placehold.it/250x150&text=couleur9" alt=""> </a>

Version avec texte

Image 1

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus.

Button Button

Image 2

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus.

Button Button

Image 3

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus.

Button Button

Image 4

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus.

Button Button

Source

<div class="row">
  <div class="col-sm-6 col-xs-3">
    <div class="thumbnail">
      <img src="http://placehold.it/250x150&text=img1" alt="">
      <div class="caption">
        <h3>Image 1</h3>
        <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus.</p>
        <p><a href="#" class="btn btn-primary">Button</a> <a href="#" class="btn btn-default">Button</a></p>
      </div>
    </div>
  </div>
 
  <div class="col-sm-6 col-xs-3">
    <div class="thumbnail">
      <img src="http://placehold.it/250x150&text=img2" alt="">
      <div class="caption">
        <h3>Image 2</h3>
        <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus.</p>
        <p><a href="#" class="btn btn-primary">Button</a> <a href="#" class="btn btn-default">Button</a></p>
      </div>
    </div>
  </div>
 
  <div class="col-sm-6 col-xs-3">
    <div class="thumbnail">
      <img src="http://placehold.it/250x150&text=img3" alt="">
      <div class="caption">
        <h3>Image 3</h3>
        <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus.</p>
        <p><a href="#" class="btn btn-primary">Button</a> <a href="#" class="btn btn-default">Button</a></p>
      </div>
    </div>
  </div>
 
  <div class="col-sm-6 col-xs-3">
    <div class="thumbnail">
      <img src="http://placehold.it/250x150&text=img4" alt="">
      <div class="caption">
        <h3>Image 4</h3>
        <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus.</p>
        <p><a href="#" class="btn btn-primary">Button</a> <a href="#" class="btn btn-default">Button</a></p>
      </div>
    </div>
  </div>
</div>

Le bouton × s'ajoute automatiquement dès que l'on ajoute la classe alert-dismissable à une alert.

Alert par défaut

Succès ! message de reussite.

Info ! message d'information.

Attention ! message d'alert.

Erreur ! message d'erreur.

Inverse ! message gris. sp

Purple ! message violet. sp

Pink ! message rose. sp

Alert avec bouton fermer

Succès ! message de reussite.

Info ! message d'information.

Attention ! message d'alert.

Erreur ! message d'erreur.

Inverse ! message gris. sp

Purple ! message violet. sp

Pink ! message rose. sp

Alert avec lien

Succès ! message de reussite lien.

Info ! message d'information lien.

Attention ! message d'alert lien.

Erreur ! message d'erreur lien.

Inverse ! message gris lien. sp

Purple ! message violet lien. sp

Pink ! message rose lien. sp