• Гость
For-Web
  • Главная
  • Вебмастеру new
    • Блог
    • SQL
    • PHP
    • JavaScript
    • CSS
    • HTML
    • Литература
    • VIP - Бесплатно
  • Скрипты сайтов
    • Bitcoin
    • Fruit Farm
    • Бонусники, Удвоители
    • Движки сайтов
    • Соц сети
    • Обмен визитами
    • Скрипты буксов
    • Скрипты рекламы
    • Интернет магагзин
    • Браузерные игры
    • Хайпы, Пирамиды
    • Скрипты CSGO
    • Скрипты хостинга
  • Data Life Eingine
    • Модули
    • Хаки
    • DLE шаблоны
  • Bootstrap
    • Шаблоны
    • Плагины
    • Сниппеты
    • Пособие Bootstrap
  • WordPress
    • Шаблоны
  • Дизайн и Графика
    • PSD макеты
    • Mocups Free
    • Иконки, Кнопки
    • Шрифты,Текст
    • Текстуры, Фон
    • Анимация
    • Формы
    • Палитра
    • Галерея
    • Раскладка
    • Модальное окно
    • Элементы загрузки
    • Меню и навигация
    • Таблицы
    • Украшения для сайта
    • Фотошоп
  • Шаблоны сайтов
    • WAP шаблоны
    • HTML 5 шаблоны
    • Админка
    • Автомобили
    • Аниме
    • Блоги
    • Бизнес и Финансы
    • Игровые
    • Женские
    • Заглушки
    • Кинопорталы
    • Кулинарные
    • Лендинг
    • Мобильные
    • Музыкальные
    • Новостные
    • ПО, IT
    • Портфолио
    • Природа
    • Строительство
    • Спорт
    • Хостинг
    • Адалт
    • Страницы 404
  • Windows
    • Windows
    • Программы
    • Темы
  • Инфо
    • О проекте
    • Обратная связь
    • Пользователи
    • Статистика
    • Объявления на сайте
    • Партнёрство
    • Privacy Policy
главная » Учебник Bootstrap » Руководство Bootstrap NavBar

Руководство Bootstrap NavBar


Navigation Bar (Навигационный бар) это часть пользовательского интерфейса UI, помогающий пользователю переходить на разные страницы (page) на  вебсайте.
Bootstrap предоставляет вам соответствующие классы  Css, которые помогают вам легко создать  Navigation Bar который подходит всем устройствам с разными размерами экрана.

Navbar

Чтобы сочетаться с устройствами с разными ширинами экрана, панель инструментов у  Bootstrap может расширяться (expand) или уменьшаться (collapse) в зависимости от размера экрана. Самое простое действие этот возможность изменения из горизонтальной панели инструментов в вертикальную, когда ширина экрана уменьшается.Стандартные панели инструментов созданы с применением класса .navbar, и классов  .navbar-expand-xl|lg|md|sm,чтобы ясно указать для каких экранов панель инструментов будет расширятся  (expand), или наоборот уменьшаться (collapse).
KeywordDescriptionWidth
smSmall>= 567px
mdMedium>= 768px
 lgLarge>= 992px
xlExtra Large>=1200px

Ниже приведена иллюстрация структуры простого  Navbar Bootstrap 4. Один  «.navbar» может содержать один или несколько  «.navbar-nav» :
<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Navbar Example</title>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
   </head>
   <body>
 
      <h4>.navbar .navbar-expand-sm</h4>
 
      <!-- A horizontal navbar that becomes vertical on small screens -->
      <nav class="navbar navbar-expand-sm bg-dark">
         <!-- Links -->
         <ul class="navbar-nav">
            <li class="nav-item">
               <a class="nav-link" href="#">jаvascript</a>
            </li>
            <li class="nav-item">
               <a class="nav-link" href="#">Css</a>
            </li>
            <li class="nav-item">
               <a class="nav-link" href="#">Bootstrap</a>
            </li>
         </ul>
      </nav>
 
      <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
   </body>
</html>
Если вы не используете класс  .navbar-expand-xl|lg|md|sm,панель инструментов всегда будет вертикальная со всеми размерами экрана.
<!-- Vertical with every screen size -->
<nav class="navbar bg-dark">
   <!-- Links -->
   <ul class="navbar-nav">
      <li class="nav-item">
         <a class="nav-link" href="#">jаvascript</a>
      </li>
      <li class="nav-item">
         <a class="nav-link" href="#">Css</a>
      </li>
      <li class="nav-item">
         <a class="nav-link" href="#">Bootstrap</a>
      </li>
   </ul>
</nav>

.justify-content-center

Класс  .justify-content-center помогает  .navbar-nav располагаться посередине панели инструментов.
<nav class="navbar navbar-expand-sm bg-dark justify-content-center">
   <!-- Links -->
   <ul class="navbar-nav">
      <li class="nav-item">
         <a class="nav-link" href="#">jаvascript</a>
      </li>
      <li class="nav-item">
         <a class="nav-link" href="#">Css</a>
      </li>
      <li class="nav-item">
         <a class="nav-link" href="#">Bootstrap</a>
      </li>
   </ul>
</nav>

Colored Navbar

Bootstrap 4  предлагает несколько классов для того, чтобы можно было изменить цвет навигационного бара.
Класс Css 
Описание
.navbar-dark
Используйте данный класс если вы оповещаете Bootstrap, что фон панель инструментов который вы используете темного цвета. Bootstrap автоматически настроит цвет текста для всех Nav-item белым.
.navbar-light
Используйте данный класс если вы оповещаете  Bootstrap что фон панель инструментов который вы используете светлого цвета. Bootstrap автоматически настроит цвет текста для всех Nav-item черным.

<nav class="navbar navbar-expand-sm bg-warning navbar-light">
   <!-- Links -->
   <ul class="navbar-nav">
      <li class="nav-item">
         <a class="nav-link" href="#">jаvascript</a>
      </li>
      <li class="nav-item">
         <a class="nav-link" href="#">Css</a>
      </li>
      <li class="nav-item">
         <a class="nav-link" href="#">Bootstrap</a>
      </li>
   </ul>
</nav>

Так же Bootstrap предлагает несколько классов для того, что бы можно было выделить определённый Nav-item
Класс Css
Описание
.active
Используйте данный класс если вы хотите, чтобы Bootstrap подчеркнул (highlight) определенный Nav-item. будто он выбран (или активирован).
.disabled
Используйте данный класс если вы хотите, чтобы Bootstrap отключил (disable) определенный Link, пользователь не сможет нажать на этот Link.
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
   <!-- Links -->
   <ul class="navbar-nav">
      <li class="nav-item">
         <a class="nav-link" href="#">jаvascript</a>
      </li>
      <li class="nav-item">
         <a class="nav-link" href="#">Css</a>
      </li>
      <li class="nav-item active">
         <a class="nav-link" href="#">Bootstrap</a>
      </li>
      <li class="nav-item">
         <a class="nav-link disabled" href="#">AngularJS (Disabled)</a>
      </li>
   </ul>
</nav>


Brand/ Logo

Одним из обязательных компонентов Navbar является Brand. Это место, где вы размещаете логотип или имя, непосредственно связанное с вашим сайтом.

Используйте  <a class="navbar-brand">, чтобы создать  Brand. У вас есть два способа расположить  Brand, это может быть прямой подкомпонент  ".navbar" или прямой подкомпонент ".nav-item". 
<!-- Brand: Direct child of ".navbar" -->
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
   <a class="navbar-brand" href="#">o7planning</a>
 
   <ul class="navbar-nav">
      <li class="nav-item">
         <a class="nav-link" href="#">jаvascript</a>
      </li>
      <li class="nav-item">
         <a class="nav-link" href="#">Css</a>
      </li>
      <li class="nav-item">
         <a class="nav-link" href="#">Bootstrap</a>
      </li>
   </ul>
</nav>
 
<!-- Brand: Direct Child of ".nav-item" -->
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
   <ul class="navbar-nav">
      <li class="nav-item">
         <a class="nav-link navbar-brand" href="#">o7planning</a>
      </li>
      <li class="nav-item">
         <a class="nav-link" href="#">jаvascript</a>
      </li>
      <li class="nav-item">
         <a class="nav-link" href="#">Css</a>
      </li>
      <li class="nav-item">
         <a class="nav-link" href="#">Bootstrap</a>
      </li>
   </ul>
</nav>


Пример отображения  Logo на  Navbar: 
<!-- Brand: Direct Child of ".navbar" -->
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
   <a class="navbar-brand" href="#">
   <img src="../images/logo.png" style="width:64px;">
   </a>
 
   <ul class="navbar-nav">
      <li class="nav-item">
         <a class="nav-link" href="#">jаvascript</a>
      </li>
      <li class="nav-item">
         <a class="nav-link" href="#">Css</a>
      </li>
      <li class="nav-item">
         <a class="nav-link" href="#">Bootstrap</a>
      </li>
   </ul>
</nav>
 
<!-- Brand: Direct Child of ".nav-item" -->
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
   <ul class="navbar-nav">
      <li class="nav-item">
         <a class="nav-link navbar-brand" href="#">
         <img src="../images/logo.png" style="width:64px;">
         </a>
      </li>
      <li class="nav-item">
         <a class="nav-link" href="#">jаvascript</a>
      </li>
      <li class="nav-item">
         <a class="nav-link" href="#">Css</a>
      </li>
      <li class="nav-item">
         <a class="nav-link" href="#">Bootstrap</a>
      </li>
   </ul>
</nav>

Collapsing Navbar

Обычно на устройствах с малым экраном, вебсайты выбирают действие уменьшения навигационного бара (navigation bar) в кнопку (button), когда пользователь нажимает на этот кнопку, навигационный бар будет отображен вертикально.
Чтобы навигационный бар отображался так же как выше, вам нужно использовать комбинацию следующих классов  css:
  • collapse
  • navbar-collapse
  • navbar-toggler
<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Navbar Example</title>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
   </head>
   <body>
 
      <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
         <!-- Brand -->
         <a class="navbar-brand" href="#">o7planning</a>
 
         <!-- Toggler/collapsibe Button -->
         <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
            <span class="navbar-toggler-icon"></span>
         </button>
 
         <!-- Navbar links -->
         <div class="collapse navbar-collapse" id="collapsibleNavbar">
            <ul class="navbar-nav">
               <li class="nav-item">
                  <a class="nav-link" href="#">jаvascript</a>
               </li>
               <li class="nav-item">
                  <a class="nav-link" href="#">Css</a>
               </li>
               <li class="nav-item">
                  <a class="nav-link" href="#">Bootstrap</a>
               </li>
            </ul>
         </div>
      </nav>
 
      <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
   </body>
 
</html>

Navbar Left & Right

Navbar может содержать один или более «.navbar-nav» . Ниже приведен пример: Navbar  с Brend,  «.navbar-nav»  слева и  «.navbar-nav»  справа.

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Navbar Example</title>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
   </head>
   <body>
      <nav class="navbar navbar-expand-sm navbar-dark bg-primary">
         <a class="navbar-brand" href="#">o7planning</a>
 
         <!-- Left -->
         <ul class="navbar-nav mr-auto">
            <li class="nav-item">
               <a class="nav-link">Java</a>
            </li>
            <li class="nav-item">
               <a class="nav-link">C/C++</a>
            </li>
         </ul>
         <!-- Right -->
         <ul class="navbar-nav ml-auto">
           <li class="nav-item">
              <a class="nav-link">Tom</a>
           </li>
           <li class="nav-item">
              <a class="nav-link">Logout</a>
           </li>
         </ul>
      </nav>
 
      <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
   </body>
</html>

mr-auto, ml-auto


Dropdown Navbar

Так же Bootstrap 4 не обходится и без выпадающего меню.
<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Navbar Example</title>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
   </head>
   <body>
      <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
 
         <!-- Brand -->
         <a class="navbar-brand" href="#">o7planning</a>
 
         <!-- Links -->
         <ul class="navbar-nav">
            <li class="nav-item">
               <a class="nav-link" href="#">Java</a>
            </li>
            <li class="nav-item">
               <a class="nav-link" href="#">C/C++</a>
            </li>
            <!-- Dropdown -->
            <li class="nav-item dropdown">
               <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
               Front-end
               </a>
               <div class="dropdown-menu">
                  <a class="dropdown-item" href="#">jаvascript</a>
                  <a class="dropdown-item" href="#">Css</a>
                  <a class="dropdown-item" href="#">Bootstrap</a>
               </div>
            </li>
         </ul>
 
      </nav>
 
      <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
   </body>
</html>

Navbar & Form

Form так же может отображаться на Navbar, самое распространенное это  форма поиска, он позволяет пользователю вводить ключевое слово для поиска на вебсайте.
<!-- Navbar-nav with FORM -->
<ul class="navbar-nav">
   <form class="form-inline" action="/somepage">
      <input class="form-control mr-sm-2" type="text" placeholder="Search">
      <button class="btn btn-success" type="submit">Search</button>
   </form>
</ul>

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Navbar Example</title>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
   </head>
   <body>
      
      <nav class="navbar navbar-expand-sm navbar-dark bg-primary rounded">
         <a class="navbar-brand" href="#">o7planning</a>
         <ul class="navbar-nav mr-auto">
            <li class="nav-item">
               <a class="nav-link">Java</a>
            </li>
            <li class="nav-item">
               <a class="nav-link">C/C++</a>
            </li>
         </ul>
         <!-- Navbar-nav with FORM -->
         <ul class="navbar-nav ml-auto">
            <form class="form-inline" action="/somepage">
               <input class="form-control mr-sm-2" type="text" placeholder="Search">
               <button class="btn btn-success" type="submit">Search</button>
            </form>
         </ul>
      </nav>
 
      <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
   </body>
</html>

Fixed NavBar

.fixed-top это утилитарный класс в Bootstrap, он используется для фиксации элемента наверху окна просмотра (viewport) браузера. Вы можете применить данный класс для  Navbar.

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Navbar Example</title>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
   </head>
   <body>
 
      <nav class="navbar navbar-expand-sm navbar-dark bg-primary fixed-top">
         <a class="navbar-brand" href="#">o7planning</a>
         <ul class="navbar-nav mr-auto">
            <li class="nav-item">
               <a class="nav-link">Java</a>
            </li>
            <li class="nav-item">
               <a class="nav-link">C/C++</a>
            </li>
         </ul>
      </nav>
 
      <h1 class="mt-6">Content</h1>
      <h2>Content</h2>
      <h3>Content</h3>
      <h4>Content</h4>
      <h5>Content</h5>
      <h1>Content</h1>
      <h2>Content</h2>
 
      <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
   </body>
</html>

Ссылка для скачивания доступна только авторизованным пользователям, пожалуйста пройдите регистрацию. Это займёт не более минуты. Не волнуйтесь, мы не спамим!


Скачать файл бесплатно

Вы находитесь на странице скачивания файла. Кнопка загрузки внизу страницы. Если нет кнопки , значит нет файла. Нет файла - просьба сообщить администартору удобным способом. Спасибо большое за понимание!

Реклама - это вынужденная мера для поддержания проекта на плаву. Я не принуждаю Вас кликать по рекламным блокам. Если конечно она вас не заинтересовала.

Да и самое важное, все материалы носят чисто ознакомительный характер, всё файлы взяты из открытых источников, соответсвенно Вы их используете на свой страх и риск.






  • Комментарии
  • О статье
  • Похожие новости
У данной публикации нет комментариев.

admin

Автор

17-02-2020, 12:54

Дата

Учебник Bootstrap

Категория
  • Комментариев: 0
  • Просмотров: 2 213
Учебник Bootstrap
Система сеток Bootstrap 4
Учебник Bootstrap
Руководство Bootstrap ProgressBar
Анимация / Bootstrap сниппеты
Parallax эффект перемещение логотипа на Bootstrap
Учебник Bootstrap
Bootstrap Nav, Tab, Pill
Учебник Bootstrap
Руководство Bootstrap Pagination
Учебник Bootstrap
Руководство Bootstrap Collapse и Accordion
Информация

Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.

Полезные советы
Не работает модуль или хак после установки? Попробуй очистить кеш

Комментарии
как установит?
25 июня 2022 18:56

Teador2020

RewriteRule ^pm (/(.*))?/?$ index.php?do=pm [L] когда вставляю это  у меня пишет что ошибка сервера не правильная
25 июня 2022 17:48

Teador2020

Установил все, а фильмы не добавляются почему то.
19 июня 2022 11:40

r9ybp

пардон
13 июня 2022 22:07

mtalan

Наша центр сертификации https://sbk-cert.ru/ оказывает  различные услуги в области сертификации. 
9 июня 2022 12:16

admin


Пользуетесь ли Вы облаком тегов


  • For-WEb.Ru © 2018 - 2022  

Авторизация


Регистрация Забыл пароль