Создание навигации в Bootstrap

Чтобы долго не объяснять, что мы сейчас будем делать, посмотрите демо1 и демо2 при очень маленьком размере экрана... Неплохо, неправда ли? Появляется кнопочка, которая делает наше меню выпадающим.

А теперь давайте рассмотрим решение данной задачи.

Было:

<nav class="row">
    <ul class="nav nav-pills nav-justified">
    	<li><a href="#">Home</a></li>
    	<li><a href="#">About</a></li>
    	<li class="active"><a href="#">Services</a></li>
    	<li><a href="#">Photo Gallery</a></li>
    	<li><a href="#">Contact</a></li>  
    </ul>  
</nav>

Стало:

<div class="row">
    <nav class="navbar navbar-default navbar-inverse navbar-fixed-top" role="navigation">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#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>
        <div class="collapse navbar-collapse" id="collapse">
            <ul class="nav navbar-nav">
            	<li><a href="#">Home</a></li>
            	<li><a href="#">About</a></li>
            	<li class="active"><a href="#">Services</a></li>
            	<li><a href="#">Photo Gallery</a></li>
            	<li><a href="#">Contact</a></li>  
            </ul>
        </div>  
    </nav>
</div>

Рассказывать про каждый класс смысле не вижу, но основную нашу идею все же опишу. 

  1. Сначала мы создаем контейнер <nav>, в который поместим все наше добро и укажем, что это наш navbar и есть и зададим кое-какие стили, чтобы навбар был вверху.
  2. Затем создаем контейнер с классом .navbar-header, в который мы воткнем кнопку <button>, которая будет появляться, когда будет очень маленькое окно браузера. Так же укажим этой кнопки, какое меню показывать при кликке на ней (data-target="#collapse") и немного стилей.
  3. И последний этап - создаем контейнер с нашим меню. Обязательно указываем id, чтобы именно это меню показывалось.
  4. И вот еще, добавьте в css, чтобы кошкам нашим головы не отрубало
body { padding-top: 70px; }

Вот и все, а более подробно про навбар читаем на getbootstrap.com

Скачать урок

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Scroll Up
Adblock detector