Bootstrap 3 Barre de navigation avec logo
Je souhaite utiliser la barre de navigation par défaut Bootstrap 3 avec un logo d'image au lieu d'une image de marque de texte. Quelle est la bonne façon de faire cela sans causer de problèmes avec différentes tailles d'écran? Je suppose que c'est une exigence commune, mais je n'ai pas encore vu un bon échantillon de code. Une condition essentielle autre que d'avoir un affichage acceptable sur toutes les tailles d'écran est la possibilité de réduire les menus sur des écrans plus petits.
J'ai simplement essayé d'insérer une balise IMG dans la balise A de la classe navbar-brand, mais le menu ne fonctionnait pas correctement sur mon téléphone Android. J'ai également essayé d'augmenter la hauteur de la classe de navbar, mais cela a encore tout gâché.
À propos, mon image de logo est plus grande que la hauteur de la barre de navigation.
Pourquoi tout le monde essaie de le faire à la dure? Bien sûr, certaines de ces approches vont fonctionner, mais elles sont plus compliquées que nécessaire.
OK, d’abord, vous avez besoin d’une image qui tienne dans votre barre de navigation. Vous pouvez ajuster votre image via l'attribut CSS CSS (autorisant la largeur à l'échelle) ou simplement utiliser une image de taille appropriée. Quoi que vous décidiez de faire, son apparence dépendra de la taille de votre image.
Pour une raison quelconque, tout le monde veut coller l'image à l'intérieur d'une ancre avec navbar-brand, et ce n'est pas nécessaire. navbar-brand applique des styles de texte inutiles à une image, ainsi qu'à la classe navbar-left (comme le fait de tirer à gauche, mais pour une utilisation dans une barre de navigation). Tout ce dont vous avez besoin est d’ajouter navbar-left.
<a href="#" class="navbar-left"><img src="/path/to/image.png"></a>
Vous pouvez même suivre cela avec un élément de marque navbar, qui apparaîtra à droite de l'image.
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target=".navbar-ex1-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" rel="home" href="#" title="Buy Sell Rent Everyting">
<img style="max-width:100px; margin-top: -7px;"
src="/img/transparent-white-logo.png">
</a>
</div>
DÉMO COMPLÈTE AVEC DE NOMBREUX EXEMPLES
MISE À JOUR IMPORTANTE: 12/21/15
Il y a actuellement un bug dans Mozilla J'ai découvert que casser la barre de navigation sur certaines largeurs de navigateur avec BEAUCOUP DE DEMOS SUR CETTE PAGE . Fondamentalement, le bug de mozilla inclut l'incrustation gauche et droite sur le lien de la marque navbar dans la largeur de l'image. Cependant, cela peut être facilement corrigé et je l’ai testé et je suis assez sûr que c’est l’exemple de travail le plus stable de cette page. Il sera redimensionné automatiquement et fonctionne sur tous les navigateurs.
Ajoutez simplement ceci à votre css et utilisez navbar-brand de la même manière que vous le feriez .img-responsive. Votre logo ira automatiquement
.navbar-brand {
padding: 0px; /* firefox bug fix */
}
.navbar-brand>img {
height: 100%;
padding: 15px; /* firefox bug fix */
width: auto;
}
Une autre option consiste à utiliser une image d'arrière-plan. Utilisez une image de toute taille, puis définissez simplement la largeur souhaitée:
.navbar-brand {
background: url(http://disputebills.com/site/uploads/2015/10/dispute.png) center / contain no-repeat;
width: 200px;
}
RÉPONSE ORIGINALE CI-DESSOUS (pour référence seulement)
Les gens semblent beaucoup oublier la mise en forme. Personnellement, je pense que c'est le plus facile à utiliser car l'image s'adapte automatiquement à la taille du menu. Si vous n'utilisez que l'ajustement d'objet sur l'image, il sera automatiquement redimensionné à la hauteur des menus.
.navbar-brand > img {
max-height: 100%;
height: 100%;
-o-object-fit: contain;
object-fit: contain;
}
Il a été souligné que cela ne fonctionnait pas dans IE "pour le moment". Il y a un polyfill , mais cela pourrait être excessif si vous ne prévoyez pas l'utiliser pour autre chose. Il semble que l'objet-fit soit en cours de planification pour une future version de IE donc une fois que cela se produit, cela fonctionnera dans tous les navigateurs.
Cependant, si vous remarquez la classe .img-responsive dans bootstrap, max-width suppose que vous mettez ces images dans des colonnes ou quelque chose qui a une valeur explicite avec set. Cela signifierait que 100% signifie spécifiquement 100% largeur de l'élément parent.
.img-responsive
max-width: 100%;
height: auto;
}
La raison pour laquelle nous ne pouvons pas l'utiliser avec la barre de navigation est que le parent (.navbar-brand) a une hauteur fixe de 50 px, mais que la largeur n'est pas définie.
Si nous prenons cette logique et l'inversons pour qu'elle soit réactive en fonction de la hauteur, nous pouvons avoir une image réactive qui s'adapte à la hauteur de .navbar-brand en ajoutant et en définissant automatiquement la largeur, il s’ajustera aux proportions.
max-height: 100%;
width: auto;
Habituellement, nous devrions ajouter display:block; au scénario, mais puisque navbar-brand a déjà float: left; appliqué, il agit automatiquement comme un élément de bloc.
Vous pouvez rencontrer la situation rare où votre logo est trop petit. L’approche img-responsive ne prend pas cela en compte, mais nous le ferons. En ajoutant également l'attribut "height" à .navbar-brand > img, vous pouvez être assuré qu'il sera redimensionné et redimensionné.
max-height: 100%;
height: 100%;
width: auto;
Donc pour compléter ceci je les ai mis ensemble et cela semble fonctionner parfaitement dans tous les navigateurs.
<style type="text/css">
.navbar-brand>img {
max-height: 100%;
height: 100%;
width: auto;
margin: 0 auto;
/* probably not needed anymore, but doesn't hurt */
-o-object-fit: contain;
object-fit: contain;
}
</style>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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="http://disputebills.com"><img src="http://disputebills.com/site/uploads/2015/10/dispute.png" alt="Dispute Bills"></a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</div>
</nav>
DÉMOhttp://codepen.io/bootstrapped/pen/KwYGwq
Bien que votre question soit intéressante, je ne m'attends pas à ce qu'il y ait une réponse à cela. Peut-être que votre question est trop large. Votre solution devrait dépendre: des autres éléments de la barre de navigation (nombre d'éléments), de la taille de votre logo, si votre logo doit répondre, etc. L'ajout du logo dans l'a (avec la marque navbar) semble un bon point de départ. Je devrais utiliser la classe navbar-brand car cela ajoutera un remplissage (haut/bas) de 15 pixels.
Je teste ce paramètre sur http://getbootstrap.com/examples/navbar/ avec un logo de 300x150 pixels.
Plein écran> 1200:
entre 768 et 992 pixels (menu non réduit):
<768 (menu réduit)
Outre les aspects esthétiques, je n’ai trouvé aucun problème technique. Sur les petits écrans, un gros logo se superposera ou éclatera peut-être dans la fenêtre. Les écrans compris entre 768 et 992 pixels posent également d'autres problèmes lorsque le contenu ne tient pas dans une ligne, voir par exemple: https://github.com/bassjobsen/jamedo-bootstrap-start-theme/issues/18
La barre de navigation par défaut a L'exemple de barre de navigation par défaut ajoute une marge inférieure de 30 pixels, de sorte que le contenu de votre barre de navigation ne doit jamais chevaucher le contenu de votre page. (les barres de navigation fixes auront des problèmes lorsque la hauteur de la barre de navigation varie).
Vous aurez besoin de quelques requêtes CSS et multimédia pour adapter la barre de navigation à vos besoins sur différentes tailles d'écran. S'il vous plaît essayez de préciser votre question. être. décrivez le problème que vous avez trouvé sur Android.
update voir http://bootply.com/77512 pour un exemple.
Sur des écrans plus petits tels qu'un téléphone, le menu réduit apparaît au-dessus du logo.
échanger le bouton et le logo dans votre code, le logo d'abord (set float: left on the logo)
Il n’ya aucun moyen d’aligner les éléments de menu sur quoi que ce soit, sauf en haut.
définir le margin-top pour .navbar-collapse ul. Utilisez la hauteur du logo moins la hauteur de la barre de navigation pour aligner vers le bas ou (hauteur du logo - hauteur de la barre de navigation)/2 au centre
Instruction pour créer une barre de navigation bootstrap _ avec un logo plus grand que la hauteur par défaut (50px):
Exemple avec un logo 100px x 100px, CSS standard:
Calcule la hauteur et (rembourrage en haut + rembourrage en bas) du logo. Ici 120px (hauteur 100px + remplissage supérieur (10px) + remplissage inférieur (10px))
Aller à bootstrap/personnaliser . Réglez à la place de hauteur de barre de navigation 50px> 120px (50 + 70) et navbar-collapse-max-height de 340 pixels à 410 pixels (340 + 70). Télécharger css.
Dans cet exemple, j'utilise ceci barre de navigation . Dans navbar-brand :
<div class="navbar-header"> ... </button> <a class="navbar-brand myLogo" href="#"> <img src="yourLogo.jpg" /> </a> </div>...ajoutez une classe, par exemple myLogo , et un img (votre logo)
<a class="navbar-brand myLogo" href="#"><img src="yourLogo.jpg" /></a>.Ajouter CSS
.myLogo {padding: 10px; }
Adéquat à d'autres tailles.
Eh bien, j'ai finalement eu le même problème, voici ma solution et je l'ai testée sur mon site dans les trois principaux navigateurs: Chrome, Firefox et Internet Explorer.
Tout d'abord, si vous n'utilisez pas de logo à base de texte, supprimez complètement "navbar-brand" car je trouvais que cette classe était la principale cause de la duplication de mon menu de navigation effondré.
Merci à user3137032 de m'avoir conduit dans la bonne direction.
Vous devez créer un conteneur d'image responsive personnalisé, que j'ai appelé le mien "logo".
Voici la balise HTML bootstrap _:
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="@Url.Action(" Index ", "Home ")" class="logo"><img src="~/resources/images/Logo_Concept.png" /></a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>
<a href="@Url.Action(" About ", "Home ")">
<i class="glyphicon glyphicon-info-sign"></i> About
</a>
</li>
<li>
<a href="@Url.Action(" Contact ", "Home ")">
<i class="glyphicon glyphicon-phone"></i> Contact
</a>
</li>
<li>
<a href="@Url.Action(" Index ", "Products ")">
<i class="glyphicon glyphicon-tag"></i> Products
</a>
</li>
</ul>
</div>
</div>
</div>
Et le code CSS:
.logo img {
width: 100% \9; /*Force IE10 and below to size SVG images correctly*/
max-width: 100%;
}
@media (max-width:480px) {
.logo img {
width: 70% \9; /*Force IE10 and below to size SVG images correctly*/
max-width: 70% !important;
}
}
@media (max-width:400px) {
.logo img {
width: 75% \9; /*Force IE10 and below to size SVG images correctly*/
max-width: 75%;
}
}
@media (max-width:385px) {
.logo img {
width: 70% \9; /*Force IE10 and below to size SVG images correctly*/
max-width: 70%;
}
}
@media (max-width:345px) {
.logo img {
width: 65% \9; /*Force IE10 and below to size SVG images correctly*/
max-width: 65%;
}
}
@media (max-width:335px) {
.logo img {
width: 60% \9; /*Force IE10 and below to size SVG images correctly*/
max-width: 60%;
}
}
@media (max-width:325px) {
.logo img {
width: 55% \9; /*Force IE10 and below to size SVG images correctly*/
max-width: 55%;
}
}
@media (max-width:315px) {
.logo img {
width: 50% \9; /*Force IE10 and below to size SVG images correctly*/
max-width: 50%;
}
}
La valeur dans @media (max-width: x) peut varier en fonction de la largeur de vos images de logo; la mienne est de 368 pixels. Les pourcentages devront peut-être également être modifiés en fonction de la taille de votre logo. La première requête @media devrait être votre seuil et la mienne était largeur d'image (368px) + taille du bouton réduit (44px) + environ 60px et elle est sortie à 480px, point de départ de la mise à l'échelle de l'image réactive.
Assurez-vous de supprimer la syntaxe de rasoir des parties HTML. Faites-moi savoir si cela résout votre problème, cela corrige le mien.
Edit: Désolé, j'ai raté votre problème de hauteur de barre de navigation. Il y a plusieurs façons de s'y prendre. Personnellement, je compile le Bootstrap MOINS avec la hauteur de barre de navigation appropriée. Pour mes besoins, j'utilise 70px et la hauteur de mon image est de 68 px. La deuxième façon de le faire est dans le fichier bootstrap.css lui-même, recherchez ".navbar" et modifiez min-height: à la hauteur de votre logo.
Ma solution est d’ajouter css "display: inline-block" à la balise img.
<img style="display: inline-block; height: 30px; margin-top: -5px">
DEMO: jsfiddle
J'utilise la classe img-responsive, puis une largeur maximale sur l'élément a. Comme ça:
<nav class="navbar">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img class="img-responsive" src="mylogo.png">
</a>
</div>
</nav>
et le CSS:
.navbar-brand {
max-width: 50%;
}
Vous devez utiliser le code comme ceci:
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target=".navbar-ex1-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="logo" rel="home" href="#" title="Buy Sell Rent Everyting">
<img style=""
src="/img/transparent-white-logo.png">
</a>
</div>
La classe d'une balise doit être "logo" et non pas navbar-brand.
Correction rapide: Créez une classe pour votre logo et définissez-le height sur 28px. Cela fonctionne bien avec la barre de navigation sur tous les appareils. Remarquez que j'ai dit fonctionne "bien".
.logo {
display:block;
height:28px;
}
Cela dépend de la taille de votre logo.
La hauteur par défaut de <a> dans la barre de navigation est 20px. Par conséquent, si vous spécifiez height: 20px sur votre logo, il s'alignera bien.
Cependant, c'est un peu petit pour un logo, alors j'ai opté pour ceci:
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target=".navbar-ex1-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" rel="home" href="#" title="Brand">
<img style="height: 30px; margin-top: -5px;"
src="/img/brand.png">
</a>
</div>
Cela rend l'image haute de 30 pixels et l'aligne verticalement en ajoutant une marge négative au sommet (5 pixels est la moitié de la différence entre le remplissage sur un et la taille de l'image).
Vous pouvez également modifier le remplissage de l'élément <a>, par exemple:
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target=".navbar-ex1-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" rel="home" href="#" title="Brand" style="padding-top: 10px; padding-bottom: 10px">
<img style="height: 30px;"
src="/img/transparent-white-logo.png">
</a>
</div>
Mon approche consiste à inclure QUATRE images différentes de tailles différentes pour les téléphones, les tablettes, les ordinateurs de bureau et les grands ordinateurs de bureau, mais uniquement en afficher ONE à l'aide des classes d'utilitaires réactifs de bootstrap, comme suit:
<!--<a class="navbar-brand" href="<?php echo home_url(); ?>/"><?php bloginfo('name'); ?></a>-->
<a class="navbar-brand visible-xs" href="<?php echo home_url(); ?>/"><img src="/assets/logo-phone.png" alt="<?php bloginfo('name'); ?> Logo" /></a>
<a class="navbar-brand visible-sm" href="<?php echo home_url(); ?>/"><img src="/assets/logo-tablet.png" alt="<?php bloginfo('name'); ?> Logo" /></a>
<a class="navbar-brand visible-md" href="<?php echo home_url(); ?>/"><img src="/assets/logo-desktop.png" alt="<?php bloginfo('name'); ?> Logo" /></a>
<a class="navbar-brand visible-lg" href="<?php echo home_url(); ?>/"><img src="/assets/logo-large.png" alt="<?php bloginfo('name'); ?> Logo" /></a>
Remarque: vous pouvez remplacer la ligne commentée par le code fourni. Remplacez le code php si vous n'utilisez pas wordpress.
Edit Note2: Oui, cela ajoute des requêtes à votre serveur lors du chargement de la page, ce qui risque de ralentir un peu, mais si vous utilisez une technique d'arrière-plan css Sprite, il est probable que le logo ne soit pas imprimé lors de l'impression d'une page et que le code ci-dessus devrait l'être. meilleur référencement.
Une autre approche consiste à implémenter la classe .text-hide de la classe _ intégrée dans Bootstrap à côté de .navbar-brand pour remplacer le texte/le contenu de la marque par une image d'arrière-plan.
CSS:
.navbar-brand{
background: url(http://example.com/your-logo-here.png) center / contain no-repeat;
width: 200px;
}
HTML:
<a class="navbar-brand text-hide" href="#">Navbar Brand</a>
Ceci est une méthode très cohérente et maintient votre image centrée. Pour ajuster la taille de l'image, il vous suffit d'ajuster .navbar-brand width puisque la hauteur est déjà définie.
J'ai eu le même problème. Je l'ai résolu comme ça:
<a href="#" class="btn btn-link navbar-btn">
<img class="img-responsive" src="#">
</a>
Il n'y a pas de classe de marque navbar. Le résultat ressemble à une image de logo adaptée à la barre de navigation et fonctionnant comme un lien. Aussi, je recommande d'utiliser la classe de droite de barre de navigation pour les éléments de menu afin qu'ils ne descendent pas sous le logo.
<div class="collapse navbar-collapse navbar-right">
<ul class="nav navbar-nav" role="navigation">
<li><a href="#">Item1</a></li>
<li><a href="#">Item2</a></li>
</ul>
</div>
Je l'implémente également via la propriété d'arrière-plan css. Cela fonctionne sainement dans n'importe quelle valeur de largeur.
.navbar-brand{
float:left;
height:50px;
padding:15px 15px;
font-size:18px;
line-height:20px;
background-image: url("../images/logo.png");
background-repeat: no-repeat;
background-position: left center
}
C’est peut-être trop simple, mais je viens de copier la ligne de marque navbar, donc il y en a deux: l’image, puis le texte.
<a class="navbar-brand" href="index.php"><img class="img-responsive" src="images/my-icon.png" width="30" height="25" alt=" "></a>
<a class="navbar-brand" href="index.php">My Brand</a>
Et j'ai créé une image qui s'adapte à l'intérieur de la barre de navigation (environ la moitié de la hauteur).
Si vous utilisez LESS, cela fonctionne:
@navbar-height: 150px;
@navbar-brand-vpadding: 10px;
.navbar-brand img {
height: @navbar-height - @navbar-brand-vpadding * 2;
position: absolute;
top: @navbar-brand-vpadding;
}
Vous ne devriez pas avoir besoin d'ajouter de CSS supplémentaire, car Bootstrap3 le fournit. À moins que vous ne vouliez l'ajouter. Ceci est mon code pour mettre le logo à gauche et les liens à droite. Cette navigation est réactive. Apportez des modifications à votre convenance.
HTML:
<nav class="navbar navbar-expand-lg navbar-light fixed-top" style="background-color:white;">
<div class="container">
<a class="navbar-brand" href="#"><img style=" width: 150px;" src="image.jpg" alt="Image text"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item"><a class="nav-link" href="#">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#">Projects</a></li>
<li class="nav-item"><a class="nav-link" href="#">Blog</a></li>
<li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
</ul>
</div>
</div>
</nav>
Ce code fonctionne parfaitement si vous avez besoin de voir la marque centrée et avec largeur automatique dans la barre d’outils. Il contient la fonction Wordpress permettant d'extraire le fichier image du bon chemin:
<a class="navbar-brand page-scroll" rel="home"
href="#page-top" title="Title">
<img style="height: 100%; width: auto;"
src="<?php echo get_template_directory_uri();?>/img/logo.png">
Au lieu de remplacer l'image de marque du texte, je me suis divisé en deux lignes, comme dans le code ci-dessous, et j'ai donné la classe img-responsive à l'image ......
<div class="collapse navbar-collapse navbar-ex1-collapse" style="background: #efefef; height:auto;">
<div class="container" style="margin-bottom:-1px;">
<div class="row">
<div class="col-md-3">
<div id="menubar-logo">
<a href="index.html"><img src="img/tl_logo.png" class="img-responsive" alt="Triple Luck IT Service Logo"></a>
</div>
</div>
<div class=" col-md-offset-3 col-md-6">
<ul class="nav navbar-nav">
<li><a href="index.php" class="active">Home</a></li>
<li><a href="about_us.php">About Us</a></li>
<li><a href="contact_us.php">Contact Us</a></li>
</ul>
</div>
</div>
<!-- end of "row" -->
</div>
<!-- end of "container" -->
</div>
<!-- end of "collapse" -->
et en plus, j'ai ajouté les codes CSS suivants .......
#menubar-logo img {
margin-top: 10px;
margin-bottom: 20px;
margin-right: 10px;
}
Si mon code résout votre problème, ça me fait plaisir .....
Vous pouvez essayer d'utiliser la requête @media telle que ci-dessous.
Ajoutez d'abord une classe de logo, puis utilisez @media pour spécifier la hauteur et la largeur de votre logo par taille de périphérique. Dans l'exemple ci-dessous, je cible les appareils dont la largeur maximale est de 320 pixels (iPhone). Vous pouvez jouer avec cela jusqu'à ce que vous trouviez la solution la mieux adaptée. Moyen facile de tester: Utilisez chrome ou Firefox avec l'élément inspecter. Réduisez votre navigateur autant que possible. Observez le changement de taille du logo en fonction de la largeur maximale de @media que vous spécifiez. Testez sur iPhone, Android appareils, iPad, etc. pour obtenir les résultats souhaités.
.logo {
height: 42px;
width: 140px;
}
@media (max-width:320px) {
.logo {
height: 33px;
width: 110px;
}
}
La réponse la plus simple et la meilleure pour cette question consiste à définir une largeur et une hauteur maximales en fonction de votre logo. L'image aura une hauteur maximale de 50 pixels, mais ne dépassera pas 200 pixels.
<a href="index.html">
<img src="imgs/brand-w.png" style="max-height:50px;max-width:200px;">
</a>
Cela varie en fonction de la taille de votre logo et des éléments de la barre de navigation dont vous disposez.
A défaut de faire fonctionner les autres réponses dans mon cas (je n’ai probablement pas passé le test d’intelligence), et après quelques essais, c’est ce que j’utilise (ce qui, je crois, est très proche du Bootstrap défaut):
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-logo">
<a class="navbar-brand" rel="home" href="@Url.Action("Index", "Home")" title="Home">
<img src="~/Images/logo.png" class="img-responsive">
</a>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav">
<li>@Html.ActionLink("Home", "Index", "Home")</li>
<li>@Html.ActionLink("Coaching", "Coaching", "Home")</li>
<li>@Html.ActionLink("Resources", "Resources", "Home")</li>
<li>@Html.ActionLink("Contact", "Contact", "Home")</li>
<li>@Html.ActionLink("Blog", "Blog", "Home")</li>
<li>@Html.ActionLink("About", "About", "Home")</li>
</ul>
</div>
</div>
</div>
Et dans le fichier CSS, j'ai ajouté ce qui suit:
.navbar-brand {
padding-top: 5px;
}
.navbar-collapse {
float: left;
}
.navbar-logo {
float: left;
}
Notez que @Html.ActionLink() est la syntaxe Razor pour une balise <a>. Où il est dit @Html.ActionLink(...) il suffit de le remplacer par une balise appropriée <a>. De même, là où il est indiqué @Url.Action(...), remplacez-le par une URL appropriée (pas de balise <a> dans ce cas).
Veuillez essayer le code suivant:
<style>
.navbar a.navbar-brand {padding: 9px 15px 8px; }
</style>
<a class="navbar-brand" href="#">
<img src="http://placehold.it/140x34/000000/ffffff/&text=LOGO" alt="">
</a>
<header class="navbar navbar-inverse header-outer" role="banner">
<div class="container form-inline">
<img src="@Url.Content(" ~/Content/img/Logo-Sample.png ")" alt="Image" id="logo" class="img-responsive pull-left" />
<div class="pull-right padding-top">
<form class="hidden-xs" role="form">
<div class="form-group" style="padding-left:10px">
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="Username">
</div>
<div class="form-group">
<input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
</div>
<div class="form-group navbar-remember">
<label class="white-font">
<input type="checkbox" class="white-font"> Remember me
</label>
</div>
<button type="button" class="btn btn-primary form-group" title="Sign In">Sign In</button>
</form>
</div>
</div>
</header>
S'il vous plaît comprendre le code à votre propre effort: D Ceci est mon projet de code et il fonctionne déjà :) Voici la capture d'écran.
mon code de travail - bootstrap 3.0.3. lorsque navbar-toggle, l’image du logo original hidden-xs.
<a class="navbar-brand hidden-xs" href="<?=$g4['path']?>/">
<img src="<?=$g4[path]?>/images/logo_opencode.gif" align=absmiddle alt="brand logo">
</a>
<a class="navbar-brand navbar-toggle" href="<?=$g4['path']?>/" style="border:0;margin-bottom:0;">
<img src="<?=$g4[path]?>/images/logo_opencode.gif" alt="brand logo" style="width:120px;">
</a>
Ce n'est pas sémantique mais j'utilise simplement l'élément a existant, crée une image d'arrière-plan, puis crée plusieurs variations pour une résolution de 2x, des tailles d'écran plus petites, etc.
Ensuite, vous pouvez utiliser la classe .text-hide pour obtenir du texte sur la page de la même façon. Utilisation simple et efficace mais non appropriée d'une image.
Voici un lien vers la classe d'assistance pour le remplacement de texte: