CSS : comment utiliser la barre de navigation (navbar) par défaut de Bootstrap avec un logo ?

La barre de navigation de Bootstrap ne fonctionne en principe qu'avec du texte. Il est cependant possible d'y ajouter un logo.

La barre de navigation fournie par Bootstrap permet d'afficher des liens dans un menu de navigation facile à utiliser pour l'utilisateur, et qui s'adapte à la taille de l'appareil qui l'affiche. Cette barre ne fonctionne en principe qu'avec du texte. Il est cependant possible d'y ajouter le logo de son site.

La classe navbar-brand permet d'ajouter un logo sous forme de texte dans la barre de navigation. On peut détourner son usage pour y inclure un logo sous forme d'image. En ajoutant dans le style une marge négative par rapport, on peut centrer verticalement le logo (cette marge dépend de la hauteur qu'occupe votre logo dans la barre) :

<div class=navbar-header>
 <button type=button class=navbar-toggle data-toggle=collapse 
 data-target=.navbar-ex1-collapse>
 <span class=sr-only>Lien</span>
 <span class=icon-bar>Lien 2</span>
 </button>
 <a class=navbar-brand rel=home href=# title=Mon Site>
 <img style=max-width:100px; margin-top: -7px;
 src=/img/logo.png>
 </a>
</div>

Une autre solution consiste à utiliser une image dont les dimensions correspondent à la taille de la barre de navigation. Il suffit, pour cela, d'utiliser l'élément CSS height pour ajuster la hauteur de l'image, ou bien de retailler son image pour qu'elle ait naturellement la bonne hauteur. Il faut ensuite mettre la balise de l'image à l'intérieur d'un lien. Pour que l'image soit située à gauche, ajoutez la classe pull-left sur le lien :
<a href=# class=pull-left><img src=img/logo.png></a>

Bootstrap