it-swarm.com.ru

Bootstrap 3 Navbar с логотипом

Я хочу использовать панель навигации по умолчанию Bootstrap 3 с логотипом вместо текста. Как правильно это сделать, не вызывая проблем с экранами разных размеров? Я предполагаю, что это общее требование, но я еще не видел хороший пример кода. Ключевым требованием, помимо приемлемого отображения на всех размерах экрана, является возможность выбора меню на меньших экранах.

Я попытался просто поместить тег IMG в тег A, который имеет класс navbar-brand, но из-за этого меню не работало должным образом на моем телефоне Android. Я также попытался увеличить высоту класса navbar, но это все испортило еще больше.

Кстати, изображение моего логотипа больше, чем высота панели навигации.

364
stepanian

Почему все пытаются сделать это трудным путем? Конечно, некоторые из этих подходов будут работать, но они более сложны, чем необходимо.

Хорошо, во-первых - вам нужно изображение, которое будет вписываться в вашу панель навигации. Вы можете настроить изображение с помощью атрибута css height (позволяя масштабировать ширину) или просто использовать изображение подходящего размера. Что бы вы ни решили сделать - то, как это будет выглядеть, будет зависеть от того, насколько хорошо вы измените размер своего изображения.

По какой-то причине каждый хочет прикрепить изображение внутри якоря с помощью navbar-brand, и в этом нет необходимости. navbar-brand применяет текстовые стили, которые не нужны для изображения, а также класс navbar-left (точно так же как pull-left, но для использования в панели навигации). Все, что вам действительно нужно, это добавить navbar-left.

<a href="#" class="navbar-left"><img src="/path/to/image.png"></a>

Вы можете даже следовать за этим с товарным знаком navbar, который появится справа от изображения.

406
Michael
<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>
146
Vicky

Bootstrap 3 navbar logo resizing

ПОЛНАЯ ДЕМО С МНОГИМИ ПРИМЕРАМИ

ВАЖНОЕ ОБНОВЛЕНИЕ: 21.12.15

В настоящее время существует ошибка в Mozilla Я обнаружил, что ломает панель навигации на определенных браузерах с помощью МНОГИХ ДЕМО НА ЭТОЙ СТРАНИЦЕ . По сути, ошибка Mozilla включает в себя левый и правый отступы на ссылку бренда Navbar как часть ширины изображения. Тем не менее, это можно легко исправить, и я проверил это, и я уверен, что это самый стабильный рабочий пример на этой странице. Он автоматически изменит размер и работает во всех браузерах.

Просто добавьте это в свой css и используйте navbar-brand точно так же, как .img-responsive. Ваш логотип будет автоматически соответствовать

.navbar-brand {
  padding: 0px; /* firefox bug fix */
}
.navbar-brand>img {
  height: 100%;
  padding: 15px; /* firefox bug fix */
  width: auto;
}

Другой вариант - использовать фоновое изображение. Используйте изображение любого размера, а затем просто установите желаемую ширину:

.navbar-brand {
  background: url(http://disputebills.com/site/uploads/2015/10/dispute.png) center / contain no-repeat;
  width: 200px;
}


ОРИГИНАЛЬНЫЙ ОТВЕТ НИЖЕ (только для справки)

Кажется, люди часто забывают об объектах. Лично я считаю, что с ним проще всего работать, потому что изображение автоматически подстраивается под размер меню. Если вы просто используете подгонку объекта к изображению, он автоматически изменит размеры до высоты меню.

    .navbar-brand > img {
      max-height: 100%;
      height: 100%;
      -o-object-fit: contain;
      object-fit: contain;
    }

Было отмечено, что это не работает в IE "пока". Существует polyfill , но это может быть чрезмерно, если вы не планируете использовать его для чего-либо еще. Выглядит так, будто подгонка объекта планируется для будущего выпуска IE, поэтому, как только это произойдет, это сработает во всех браузерах.

Тем не менее, если вы заметили, что .img-отзывчивый класс в bootstrap, максимальная ширина предполагает, что вы помещаете эти изображения в столбцы или что-то, что имеет явное значение с set. Это будет означать, что 100% означает 100% ширину родительского элемента.

    .img-responsive
        max-width: 100%;
        height: auto;
    }

Причина, по которой мы не можем использовать это с панелью навигации, заключается в том, что родительский элемент (.navbar-brand) имеет фиксированную высоту 50 пикселей, но ширина не установлена.

Если мы возьмем эту логику и перевернем , чтобы она была адаптивной в зависимости от высоты, мы можем получить адаптивное изображение, которое масштабируется до высоты бренда .navbar и добавление и автоматическая установка ширины будет регулироваться пропорционально.

max-height: 100%;
width: auto;

Обычно нам нужно добавить display:block; в сценарий, но так как у navbar-brand уже есть float: left; Применительно к нему он автоматически действует как блочный элемент.


Вы можете столкнуться с редкой ситуацией, когда ваш логотип слишком маленький. Подход img-отзывчивый не принимает это во внимание, но мы будем. Также добавив атрибут "height" в код .navbar-brand > img, вы можете быть уверены, что он будет увеличиваться и уменьшаться.

max-height: 100%;
height: 100%;
width: auto;

Итак, чтобы завершить это, я собрал их вместе, и, похоже, он отлично работает во всех браузерах.

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

DEMOhttp://codepen.io/bootstrapped/pen/KwYGwq

71
Bryan Willis

Хотя ваш вопрос интересен, я не ожидаю, что будет один ответ на него. Может быть, ваш вопрос слишком широк. Ваше решение должно зависеть от: другого содержимого в панели навигации (количества элементов), размеров вашего логотипа, должен ли ваш логотип действовать адаптивно и т.д. Добавление логотипа в a (с брендом navbar) кажется хорошей отправной точкой. Я должен использовать класс navbar-brand, потому что это добавит отступ (верх/низ) из 15 пикселей.

Я проверяю этот параметр на http://getbootstrap.com/examples/navbar/ с логотипом 300x150 пикселей.

Полный экран> 1200:

enter image description here

от 768 до 992 пикселей (меню не свернуто):

enter image description here

<768 (меню свернуто)

enter image description here

Помимо эстетических аспектов я не нашел никаких технических проблем. На маленьких экранах большой логотип может перекрывать или разрушать область просмотра. Экраны размером от 768 до 992 пикселей также имеют другие проблемы, когда содержимое не помещается в строку, см., Например: https://github.com/bassjobsen/jamedo-bootstrap-start-theme/issues/18

Навбар по умолчанию имеет Пример панели навигации по умолчанию добавляет нижнее поле в 30 пикселей, поэтому содержимое панели навигации не должно перекрывать содержимое вашей страницы. (фиксированные навигационные панели будут иметь проблемы при изменении высоты навигационной панели).

Вам понадобятся некоторые CSS и медиа-запросы, чтобы адаптировать навигационную панель к вашим потребностям на экранах разных размеров. Пожалуйста, попробуйте сузить свой вопрос. быть. опишите проблему, которую вы обнаружили на Android.

обновить , см. http://bootply.com/77512 для примера.

На маленьких экранах, таких как телефон, свернутое меню появляется над логотипом

поменяйте местами кнопку и логотип в вашем коде, сначала логотип (установите поплавок: слева на логотипе)

Нет никакого способа выровнять пункты меню ни к чему, кроме верхней

установите margin-top для .navbar-collapse ul. Использовать высоту логотипа минус высота панели навигации, чтобы выровнять по дну или (высота логотипа - высота панели навигации)/2 по центру

23
Bass Jobsen

Инструкция по созданию навигационной панели bootstrap с логотипом, который больше высоты по умолчанию (50 пикселей):

Пример с логотипом 100px x 100px, стандартный CSS:

  1. Вычислите высоту и (отступы сверху + отступы снизу) логотипа. Здесь 120px (высота 100px + верхний отступ (10px) + нижний отступ (10px))

  2. Перейти к начальная загрузка/настройка . Установите вместо высоту панели навигации 50px> 120px (50 + 70) и navbar-collapse-max-height от 340px до 410px (340 + 70). Скачать css.

  3. В этом примере я использую это navbar . В navbar-brand :

      <div class="navbar-header">
        ...
        </button>
        <a class="navbar-brand myLogo" href="#">
          <img src="yourLogo.jpg" />
        </a>
      </div>...
    

    добавить класс, например myLogo , и img (ваш логотип)

    <a class="navbar-brand myLogo" href="#"><img src="yourLogo.jpg" /></a>.

  4. Добавить CSS

    .myLogo {padding: 10px; }

  5. Подходит для других размеров.

пример

21
Sun

Ну, наконец-то у меня появилась эта проблема, вот мое решение, и я протестировал его на своем сайте во всех трех основных браузерах: Chrome, Firefox и Internet Explorer.

Прежде всего, если вы не используете текстовый логотип, полностью удалите "navbar-brand", так как я обнаружил, что именно этот класс является основной причиной удвоения моего свернутого навигационного меню.

Привет пользователю 3137032, чтобы он вел меня в правильном направлении.

Вы должны сделать пользовательский адаптивный контейнер изображений, я назвал мой "логотип"

Вот разметка bootstrap HTML:

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

И код 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%;
}
}

Значение в @media (max-width: x) может варьироваться в зависимости от ширины изображений вашего логотипа, у меня это 368px. Процентные доли, возможно, также должны быть изменены в зависимости от размера вашего логотипа. Первый запрос @media должен быть вашим порогом, а мой был шириной изображения (368px) + размер свернутой кнопки (44px) + около 60px, и он достиг 480px, где я начинаю масштабирование адаптивного изображения.

Пожалуйста, не забудьте удалить мой синтаксис бритвы из частей HTML. Дайте мне знать, если это решит вашу проблему, это исправило мою.

Правка: Извините, я пропустил ваш вопрос высоты Navbar. Есть несколько способов сделать это, лично я скомпилирую Bootstrap LESS с соответствующей высотой панели навигации, для своих целей я использую 70px, а высота моего изображения - 68 px. Второй способ сделать это - в самом файле bootstrap.css найти ".navbar" и изменить min-height: на высоту вашего логотипа.

14
Derek Williams

Мое решение - добавить css "display: inline-block" в тег img.

<img style="display: inline-block; height: 30px; margin-top: -5px">

ДЕМО: jsfiddle

14
Kuofp

Я использую img-отзывчивый класс и затем устанавливаю максимальную ширину для элемента a. Как это:

<nav class="navbar">
    <div class="navbar-header">
        <a class="navbar-brand" href="#">
            <img class="img-responsive" src="mylogo.png">
        </a>
    </div>
</nav>

и CSS:

.navbar-brand {
    max-width: 50%;
}
13
dustinfarris

Вы должны использовать код как это:

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

Класс А тега должен быть "логотип", а не navbar-бренд.

5
NurlanXp

Быстрое исправление: Создайте класс для своего logo и установите для height значение 28px. Это хорошо работает с navbar на всех устройствах. Обратите внимание, я сказал, что работает "ХОРОШО".

.logo {
  display:block;
  height:28px;
}
4
Brian Scramlin

Это зависит от того, какой высоты вы хотите, чтобы ваш логотип.

Высота <a> по умолчанию на панели навигации составляет 20 пикселей, поэтому если вы укажете height: 20px на своем логотипе, он будет хорошо совмещен.

Тем не менее, это немного мало для логотипа, поэтому я выбрал следующее:

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

Это делает изображение высотой 30px и выравнивает его по вертикали, добавляя отрицательный отступ к вершине (5px составляет половину разницы между отступом a и размером изображения).

В качестве альтернативы вы можете изменить заполнение элемента <a>, например:

<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>
4
cwohlman

Мой подход заключается в том, чтобы включить ЧЕТЫРЕ разных изображения разных размеров для телефонов, планшетов, настольных компьютеров, больших настольных компьютеров, но показывать только ОДИН, используя отзывчивые служебные классы начальной загрузки, как указано ниже:

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

Примечание. Вы можете заменить закомментированную строку предоставленным кодом. Замените PHP-код, если вы не используете WordPress.

Редактировать Примечание 2: Да, это добавляет запросы к вашему серверу при загрузке страницы, что может немного замедлиться, но если вы используете фоновую технику CSS Sprite, скорее всего, логотип не будет напечатан при печати страницы, и приведенный выше код должен получить лучше SEO.

3
vascorola

Другой подход заключается в реализации встроенный в Bootstrap класс .text-hide наряду с .navbar-brand для замены текста/контента бренда фоновым изображением.

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>

Это очень последовательный метод, который держит ваше изображение в центре. Чтобы настроить размер изображения, все, что вам нужно сделать, это настроить ширину .navbar-brand, так как высота уже установлена.

Вот живая демонстрация

2
Bryan Willis

У меня такая же проблема. Я решил это так:

<a href="#" class="btn btn-link navbar-btn">
  <img class="img-responsive" src="#">
</a>

Класса Навбар-бренда нет. Результат выглядит как изображение логотипа, которое соответствует navbar и работает как ссылка. Также я рекомендую использовать класс меню navbar-right для пунктов меню, чтобы они не опускались ниже логотипа.

<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>
2
margin

Я также реализую это через свойство фона CSS. Работает нормально при любом значении ширины.

.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
}
2
crx4

Может быть, это слишком просто, но я просто скопировал строку с брендом navbar, чтобы их было два: изображение, а затем текст.

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

И я создал изображение, которое помещается внутри панели навигации (примерно 1/2 высоты).

1
twiddly

При использовании LESS это работает:

@navbar-height: 150px;
@navbar-brand-vpadding: 10px;

.navbar-brand img {
  height: @navbar-height - @navbar-brand-vpadding * 2;
  position: absolute;
  top: @navbar-brand-vpadding;
}
1
XåpplI'-I0llwlg'I -

Вам не нужно добавлять дополнительный CSS, так как Bootstrap3 его предоставляет. Если вы не хотите добавить его. Это мой код размещения логотипа слева и ссылки справа. Эта навигация отзывчива. Внесите изменения в это, как вы считаете нужным.

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>
1
Krista A.

Этот код прекрасно работает, если вам нужно видеть марку по центру и с автоматической шириной на панели инструментов. Он содержит функцию Wordpress для получения файла изображения по правильному пути:

<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">
1
Taras Vovkovych

Вместо замены маркировки текста я разделил на две строки, как показано в коде ниже, и присвоил классу img-responsive изображение ......

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

и, кроме того, я добавил следующие коды CSS .......

#menubar-logo img {
  margin-top: 10px;
  margin-bottom: 20px;
  margin-right: 10px;
}

Если мой код решит твою проблему, это мое удовольствие .....

0
I.Z

Вы можете попробовать использовать запрос @media, например ниже.

Сначала добавьте класс логотипа, а затем используйте @media, чтобы указать высоту и ширину логотипа для каждого размера устройства. В приведенном ниже примере я нацеливаюсь на устройства с максимальной шириной 320 пикселей (iPhone). Вы можете поэкспериментировать с этим до тех пор, пока не найдете наилучшее соответствие. Простой способ проверки: используйте chrome или Firefox с проверяющим элементом. Сократите ваш браузер как можно дальше. Обратите внимание на изменение размера логотипа в зависимости от заданной вами максимальной ширины @media. Протестируйте на iPhone, Android устройствах, iPad и т.д., Чтобы получить желаемые результаты.

.logo {
  height: 42px;
  width: 140px;
}

@media (max-width:320px) { 
.logo {
  height: 33px;
  width: 110px;
}
}
0
user3137032

Самый простой и лучший ответ на этот вопрос - установить максимальную ширину и высоту в зависимости от вашего логотипа, изображение будет иметь максимальную высоту 50px, но не более 200px.

<a href="index.html">
<img src="imgs/brand-w.png" style="max-height:50px;max-width:200px;">
</a>

Это будет зависеть от размера вашего логотипа и имеющихся у вас элементов навигационной панели.

0
Theo Leinad

В моем случае не удалось заставить работать какие-либо другие ответы (я, вероятно, не прошел тест на интеллект), и после некоторых экспериментов я использую это (которое, я считаю, очень близко к Bootstrap) дефолт):

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

И в файле CSS я добавил следующее:

.navbar-brand {
   padding-top: 5px;
}

.navbar-collapse {
   float: left;
}

.navbar-logo {
   float: left;
}

Обратите внимание, что @Html.ActionLink() - это синтаксис Razor для тега <a>. Там, где написано @Html.ActionLink(...), просто замените его соответствующим тегом <a>. В том же месте, где указано @Url.Action(...), замените его соответствующим URL-адресом (в этом случае нет тега <a>).

0
Manfred

Пожалуйста, попробуйте следующий код:

<style>
   .navbar a.navbar-brand {padding: 9px 15px 8px; }
</style>
<a class="navbar-brand" href="#">
   <img src="http://placehold.it/140x34/000000/ffffff/&amp;text=LOGO" alt="">
</a>
0
Dhaval Solanki
<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>

Пожалуйста, поймите код самостоятельно: D Это мой черновик кода, и он уже работает :) Вот скриншот.

enter image description here

0
LYKS

мой рабочий код - bootstrap 3.0.3. когда navbar-toggle, скрытое-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>
0
OpenCode

Это не семантика, но я просто использую существующий элемент a, устанавливаю фоновое изображение, затем создаю несколько вариаций для разрешения @ 2x, меньших размеров экрана и т.д.

Затем вы можете использовать класс .text-hide, чтобы получить какой-то текст на странице по-старому. Простое и эффективное, но не правильное использование изображения.

Вот ссылка на вспомогательный класс для замены текста:

http://getbootstrap.com/css/#helper-classes

0
KJ Prince