Bootstrap 3 exemple

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>

Dropdowns

Défaut

Source

Avec la classe pull-right

Source

Groupe de boutons

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

Source

Bouton dropdowns

Couleur et taille de bouton dropdowns

Source

Split Bouton dropdowns

Couleur et taille de split bouton dropdowns

Source

Classe dropup

Ouverture du menu vers le haut

Source

Préfixe - suffixe

Préfixe et/ou suffixe d'un champ

Source

Champ texte et bouton avec bord arrondi sp

Source

Ajouter un icone dans un champ sp

Source

Ajouter un icone dans un champ à droite sp

Source

Taille de champ avec préfixe et/ou suffixe

Source

Navs

Menu à onglets

Menu à onglets

nav-success

nav-info

nav-warning

nav-danger

nav-inverse

nav-purple

nav-pink

Menu à onglets avec bordure

nav-border-color

nav-border-color nav-success

nav-border-color nav-info

nav-border-color nav-warning

nav-border-color nav-danger

nav-border-color nav-inverse

nav-border-color nav-purple

nav-border-color nav-pink

Menu à onglets alternatif

nav-tabs-alt

nav-tabs-alt nav-success

nav-tabs-alt nav-info

nav-tabs-alt nav-warning

nav-tabs-alt nav-danger

nav-tabs-alt nav-inverse

nav-tabs-alt nav-purple

nav-tabs-alt nav-pink

Menu à boutons

Menu à boutons

nav-pills nav-success

nav-pills nav-info

nav-pills nav-warning

nav-pills nav-danger

nav-pills nav-inverse

nav-pills nav-purple

nav-pills nav-pink

Menu à boutons vertical à gauche

Menu à boutons vertical à droite

Menu à onglets justifié

Menu à onglets avec bordure justifié

nav-tabs-alt justifié sp

Menu à boutons justifié

NavBar

navbar-default

Source

navbar-primary