Блог

Привет, мне дали два примера при кодировании панели навигации в bootstrap3. Я не уверен, в чем разница, я знаю, что пример 1 является фиксированным и отзывчивым, но ex 1 находится в a <div> , а ex 2 задан в заголовке. Сбивает с толку, поскольку они оба работают, но что лучше.

Пример 1

    <!-- Fixed navbar -->
     <div class="navbar navbar-default navbar-fixed-top" role="navigation">
      <div class="container">
        <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>
                 <a class="navbar-brand" href="#">COMPANY</a>
        </div>
         <div class="navbar-collapse collapse">
           <ul class="nav navbar-nav navbar-right">
            <li class="active"><a href="#">Welcome</a></li>       
              <li><a href="#about">Create</a></li>
                <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">lorem<b class="caret"></b></a>
              <ul class="dropdown-menu">
               <li class="dropdown-header"> lorem</li>
                <li class="dropdown-header">lorem</li
                  <li class="divider"></li>
                   <li class="dropdown-header">lorem</li>
                     <li class="dropdown-header">lorem</li>
                <li class="divider"></li>
                <li class="dropdown-header">lorem</li>
                <li class="dropdown-header">lorem</li>
              </ul>
            </li>            
            <li><a href="#">Dashboard</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </div>
 

Пример второй:

 <header>
    <nav id="header-nav" class="navbar navbar-default">
      <div class="container">
        <div class="navbar-header">
          <a href="index.html" class="pull-left visible-md visible-lg">
            <div id="logo-img"></div>
          </a>
          <div class="navbar-brand">
            <a href="index.html"><h1>David Chu's China Bistro</h1></a>
            <p>
              <img src="images/star-k-logo.png" alt="Kosher certification">
              <span>Kosher Certified</span>
            </p>
          </div>
        </div>
      </div>
    </nav>
  </header>
 

Разница совершенно очевидна. Второй фрагмент кода относится к простой панели навигации с использованием bootstrap. В то время как первая — это фиксированная панель навигации, которую вы в основном видели поверх веб-сайтов. Он включает фиктивные навигационные данные в виде элементов списка.

Вы можете использовать онлайн-редакторы, такие как jsfiddle и plnkr, для практики и просмотра результатов этих примеров.

Подробнее и подробнее о панели навигации bootstrap читайте здесь.

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

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

Помните, что содержимое, находящееся в заголовке или теге body, ничего конкретно не меняет, оно просто делит код на части и облегчает его понимание.