[Résolu] [bootstrap3] explications classes et navbar

Bonjour,
si quelqu'un peux m'aider sur les différentes classes de bootstrap ce serait sympa.
Existe t il par exemple un site qui liste les fonctions de chaque classes de Bootstrap3 ?
Car sur leur site ils ne détaillent que le principal et chercher dans leur css c'est un peu lourd.

Ici je bloque sur les classes des navbar, il n'y a pas assez d'explications sur le site de bootstrap.

Sur leur code de présentation pour la 1ere navbar ils mettent ceci :

<nav class="navbar navbar-default" role="navigation">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

En cherchant, j'ai compris que navbar-toggle signifie qu'au dessus d'une certaine taille d'écran le bouton est caché.
Par contre à quoi sert la classe navbar-header ?

Merci

Bonjour LeFredd,

Le fichier final CSS de Bootstrap est généré à partir d'une source LESS.
Pour découvrir le rôle précis des classes, vous pouvez vous orienter vers ces fichiers LESS fournis dans le package téléchargeable :

1 - Récupérer le package Source Code de la page Download de Bootstrap.
2 - Dezziper le fichier bootstrap-3.x.x.zip.
3 - Retrouver tous les fichiers LESS dans le dossier bootstrap-3.x.x/less.

Ces fichiers LESS contiennent les commentaires et explications sur le rôle des classes.
Vous aurez ainsi des informations sur 40 catégories de classes : alerts, forms, grid, glyphicons, navbar, ...

Exemple avec la classe .navbar-header (fichier navbar.less) :

// Navbar heading
//
// Groups `.navbar-brand` and `.navbar-toggle` into a single component for easy
// styling of responsive aspects.

.navbar-header {
  &:extend(.clearfix all);

  @media (min-width: @grid-float-breakpoint) {
    float: left;
  }
}

[...]

// Both navbar header and collapse
//
// When a container is present, change the behavior of the header and collapse.

.container > .navbar-header,
.container > .navbar-collapse {
  margin-right: -@navbar-padding-horizontal;
  margin-left:  -@navbar-padding-horizontal;

  @media (min-width: @grid-float-breakpoint) {
    margin-right: 0;
    margin-left:  0;
  }
}

Et en effet ...

LeFredd a écrit :

En cherchant, j'ai compris que navbar-toggle signifie qu'au dessus d'une certaine taille d'écran le bouton est caché.

... vous pouvez voir pour la classe .nav-toggle le code suivant (toujours dans le fichier navbar.less):

// Navbar toggle
//
// Custom button for toggling the `.navbar-collapse`, powered by the collapse
// JavaScript plugin.

.navbar-toggle {
  position: relative;
  float: right;
  
  [...]

  @media (min-width: @grid-float-breakpoint) {
    display: none;
  }
}

Vous pouvez en déduire facilement qu'à partir de @grid-float-breakpoint = 768px (voir fichier variables.less), les menus .nav-toggle ne sont plus visibles.

Vous avez aussi à disposition une version SASS de Bootstrap sur cette même page Download de Bootstrap, qui contiendra les mêmes commentaires et explications.

Espérant que la solution vous convienne. Bon code...
Modifié par Guiwint (26 Feb 2014 - 12:43)