Навигационная панель (NAVBAR) является независимым компонентом в начальной загрузке, и существует четкая разница между навигационной панелью (NAVBAR) и навигацией (NAV) в начальной загрузке. В панели навигации (Navbar) есть цвет фона, а навигационная панель может быть в различных формах, таких как чистые связи, формы, формы и навигация.
1. Практический боевой стержень с одним навигацией с меню 2 уровня 2 и формы
<! Doctype html> <html> <head> <meta charset = "utf-8"> <title> навигационная панель </title> <link rel = "stylessheet" href = "http://netdna.bootstrapcdn.com/bootstrap/3.1.1/cssss/bootstrap.min.cssss-- Body {Margin: 30px; Padding: 30px;} </style> </head> <body> <div rol = "навигация"> <!-Название реализуется через «Навиегол-заголовок» и «Navbar-brand»-> <div> <a href = "##" href = "##" data-toggle = "dropdown"> blog <pran> </span> </a> <!-Второе меню-> <ul> <li> <a href = "##"> Второе меню </a> </li> </li> </li> <li> <a href = "##"> Форум </a> </li> </li> <! rol = "search"> <div> <input type = "text" placeholder = "пожалуйста, введите ключевые слова"/> </div> <button Type = "pospe"> search </button> </form> </div> <!-Поместите его в конце документа, чтобы сделать страницу, нагрузить jquer src = "http://libs.baidu.com/jquery/1.9.0/jquery.min.js"> </script> <!-включая все плагины JS для плагинов Bootstrap или JS, которые можно использовать по мере необходимости-> <Скрипт src = "http://maxcdn.bootstrappcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"> </script> </body> </html>Рендеринги следующие:
В дополнение к использованию элемента A в бренде Navbar и UL и Navbar-форма Navbar-Nav, другие элементы могут использоваться в навигационной панели Bootstrap:
1) Кнопка в навигационной штанге NAVBAR-BTN
2) Текст в навигационном баре Navbar
3) Нормальная ссылка в навигационной батончике Navbar-Link
2. Практический боевой навигационный планку с 2 фиксированными
<!-Top Navigation Bar-> <div rol = "navigation"> <div> <a href = "##"> title </a> </div> <ul> <li> <a href = "##"> home </a> </li> <li> <a href = "##"> блог </a> </li> <li> <a href = "#1a> </ul> </div> <!-нижняя навигационная планка-> <div rol = "navigation"> <viv> <a href = "##"> tit href = "##"> Forum </a> </li> </ul> </div> <!-Текстовое содержимое-> <div> Содержание текстового текста веб-страницы </div>
Рендеринги следующие:
3. Практическая тройная навигационная планка
<div role="navigation"> <div> <!-- .navbar-toggle style is used to content that shrinks toggle, that is, the element where the nav-collapse collapse style is located --> <button type="button" data-toggle="collapse" data-target=".navbar-responsive-collapse"> <span></span> <span></span> <span></span> <pran> </span> <!-Убедитесь, что Navbar-бренд отображается как на широких, так и в узких экранах-> <a href = "##"> Название </a> </div> <!-Когда ширина экрана меньше 768px, содержимое в Div.navbar-отвечающем контейнере-контейнере будет скрыто, и Icon Icon Icon. Когда значок значка-бара нажимается, разверните его снова. Когда экран больше 768px, он будет отображаться по умолчанию. -> <div> <ul> <li> <a href = "##"> home </a> </li> <li> <a href = "##"> блог </a> </li> <li> <a href = "##"> Форум </a> </li> </ul> </div> </div>
Рендеринги следующие:
Иногда необходимо инвертировать цвет. Bootstrap предоставляет инвертированную навигационную панель для этого, но просто заменяет название класса на Navbar-Deafult на Navbar Deverse, а затем цвет фона навигационной панели и цвет текста будет изменен.
4. Практическая навигация с четырьмя ценами
1) Навигация на страницах с номерами страниц
<!-страница: страница нормального размера. <li> <a href = "#"> 3 </a> </li> <li> <a href = "#"> 4 </a> </li> <li> <a href = "#"> 5 </a> </li> <!-Отключить статус-> <li> <a href = "#"> </a> </li> </ul>
Рендеринги следующие:
2) Навигация по поводу страницы и навигации по странице
<ul> <li> <a href = "#"> «предыдущая страница </a> </li> <!-отключенный статус-> <li> <a href ="#"> Следующая страница» </a> </li> </ul> <!-Выровняйте влево и справа-> <ul> <li> <a href = "#"> «Предыдущая страница </a> </li> <li> <a href ="#">« Предыдущая страница </a> </li> <li> Страница »</a> </li> </ul>
Рендеринги следующие:
Выше всего содержание этой статьи. Я надеюсь, что это будет полезно для каждого обучения, и я надеюсь, что все будут поддерживать Wulin.com больше.