Лучшее руководство по Bootstrap навигации в 2024 году. В этом руководстве вы можете изучить
Навигации по умолчанию бар,примеров,Отзывчивый панель навигации,примеров,Форма панели навигации,примеров,Кнопка в панели навигации,примеров,Текстовая панель навигации,примеров,В сочетании с значок ссылки навигации,примеров,Компонент Выравнивание,примеров,Фиксированный к началу,примеров,Установленный в концевой части,примеров,Статический верх,примеров,Переверните панель навигации,примеров,
Bootstrap навигации
Панель навигации приятная особенность, является отличительной особенностью сайта Bootstrap. Панель навигации Фонд в качестве компонентов реагирования заголовка навигационной страницы в приложении или на сайте. С учетом мобильного навигационного устройства сгибают, увеличивает доступную ширину окна просмотра навигационной панели будет в горизонтальном положении. Bootstrap основной навигационной панели, навигационная панель включает в себя доменное имя и основные навигационные определенные стили.
Навигации по умолчанию бар
Создание навигации по умолчанию панель A, выполните следующие действия:
- Метки добавитькласс .navbar, .navbar-умолчанию в <нав>.
- Добавитьроль = "навигация" , чтобы вышеуказанные элементы, способствуют увеличению доступности.
- Добавьте названиекласса .navbar-заголовок в <div> элемент содержит <a> внутренние элементы с классомNavBar-брендом. Это позволит сделать текст появится больший.
- Чтобы добавить ссылку на панели навигации, просто добавить неупорядоченный список может склассом .nav, .navbar-Nav -х годов.
Следующий пример иллюстрирует этот момент:
примеров
<Nav класс = "Navbar Navbar-умолчанию" Роль = "навигация">
<Div класс = "контейнер-жидкость">
<Div класс = "Navbar-заголовок">
<А класс = "Navbar-бренд" HREF = "#"> учебник </ а>
</ Div>
<Div>
<Ul класс = "нав Navbar-нав" >
<Li класс = "активный"> <а HREF = "#"> Иос < / а> </ li>
<Li> <а HREF = "#"> SVN < / а> </ li>
<Li класс = "раскрывающимся">
<А HREF = "#" класс = "выпадающий-тумблер" данных тумблер = "раскрывающимся"> Java <б класс = "каретка"> </ B>
</ A>
<Ul класс = "выпадающий меню">
<Li> <а HREF = "#"> JMeter < / а> </ li>
<Li> <а HREF = "#"> EJB < / а> </ li>
<Li> <а HREF = "#"> Джаспер Отчет </ а> </ li>
<Li класс = "разделитель"> </ li>
<Li> <а HREF = "#"> изолированных ссылка </ A> </ li>
<Li класс = "разделитель"> </ li>
<Li> <а HREF = "#"> другой изолированный ссылка </ A> </ li>
</ UL>
</ Li>
</ UL>
</ Div>
</ Div>
</ Nav>
Попробуйте » Результаты следующие:
Отзывчивый панель навигации
Чтобы добавить отзывчивый для навигации, вы должны сложить содержание , завернутое вклассах с .collapse, .navbar-распада <DIV> в.Сложенные панель навигации на самом деле кнопка .navbar-переключателькласса и два data- элементы с.Первый из них являетсяданных тумблер, кнопка используется , чтобы сообщить JavaScript должен делать, а во - вторых, данные-мишень,указывая , на который вы хотите переключить элемент. Три склассом .Icon-бар кнопки <SPAN> , чтобы создать так называемую Гамбург.Эти переключатели для.nav коллапса <div> элемент.Для достижения этих функций, вы должны включать в себя Bootstrap раз (коллапс) штекер .
Следующий пример иллюстрирует этот момент:
примеров
<Nav класс = "Navbar Navbar-умолчанию" Роль = "навигация">
<Div класс = "контейнер-жидкость">
<Div класс = "Navbar-заголовок">
<Кнопка типа "кнопка" = класс = "Navbar-тумблер" данных тумблер = "коллапс"
данных целевых = "# ПРИМЕР- Navbar-коллапс">
<SPAN класс = "стер-только"> Переключение навигации </ SPAN>
<SPAN класс = "значок-бар"> </ SPAN>
<SPAN класс = "значок-бар"> </ SPAN>
<SPAN класс = "значок-бар"> </ SPAN>
</ Button>
<А класс = "Navbar-бренд" HREF = "#"> учебник </ а>
</ Div>
<Div класс = "коллапс Navbar-коллапс" ID = "Пример-Navbar-коллапс ">
<Ul класс = "нав Navbar-нав" >
<Li класс = "активный"> <а HREF = "#"> Иос < / а> </ li>
<Li> <а HREF = "#"> SVN < / а> </ li>
<Li класс = "раскрывающимся">
<А HREF = "#" класс = "выпадающий-тумблер" данных тумблер = "раскрывающимся"> Java <б класс = "каретка"> </ B>
</ A>
<Ul класс = "выпадающий меню">
<Li> <а HREF = "#"> JMeter < / а> </ li>
<Li> <а HREF = "#"> EJB < / а> </ li>
<Li> <а HREF = "#"> Джаспер Отчет </ а> </ li>
<Li класс = "разделитель"> </ li>
<Li> <а HREF = "#"> изолированных ссылка </ A> </ li>
<Li класс = "разделитель"> </ li>
<Li> <а HREF = "#"> другой изолированный ссылка </ A> </ li>
</ UL>
</ Li>
</ UL>
</ Div>
</ Div>
</ Nav>
Попробуйте » Результаты следующие:
Форма панели навигации
Форма в панели навигации вместо использования Bootstrap образуют главах класса по умолчанию уже упоминалось, он использует.navbar-класс формы.Это обеспечивает правильное вертикальное выравнивание и форму в узком поведении видового экрана складывания. Используйте опцию выравнивания (которые будут подробно описаны в разделе выравнивания компонентов), чтобы определить содержание навигационной панели находится там, где.
Следующий пример иллюстрирует этот момент:
примеров
<Nav класс = "Navbar Navbar-умолчанию" Роль = "навигация">
<Div класс = "контейнер-жидкость">
<Div класс = "Navbar-заголовок">
<А класс = "Navbar-бренд" HREF = "#"> учебник </ а>
</ Div>
<Div>
<Форма класс = "NavBar-форма NAVBAR- левый" Роль = "Поиск">
<Div класс = "форма-группа">
<Input тип = "текст" класс = "форма-контроль" заполнитель = "Поиск">
</ Div>
<Кнопка тип = "отправить" класс = "БТН БТН-умолчанию" > Отправить </ кнопка>
</ Форма>
</ Div>
</ Div>
</ Nav>
Попробуйте » Результаты следующие:
Кнопка в панели навигации
Вы можете использоватькласс .navbar-BTN добавить кнопку, кнопка по центру вертикально на панели навигации , чтобы не <форма> Элемент <кнопка>..navbar-БТН может быть использован на <a> и элементов <INPUT>.
Не используйте.navbar-BTN в .navbar-Navна <a> элемент, потому что это не является стандартной кнопки, класс .
Следующий пример иллюстрирует этот момент:
примеров
<Nav класс = "Navbar Navbar-умолчанию" Роль = "навигация">
<Div класс = "контейнер-жидкость">
<Div класс = "Navbar-заголовок">
<А класс = "Navbar-бренд" HREF = "#"> учебник </ а>
</ Div>
<Div>
<Форма класс = "NavBar-форма NAVBAR- левый" Роль = "Поиск">
<Div класс = "форма-группа">
<Input тип = "текст" класс = "форма-контроль" заполнитель = "Поиск">
</ Div>
<Кнопка тип = "отправить" класс = "БТН БТН-умолчанию" > кнопка отправки </ Кнопка>
</ Форма>
<Кнопка типа "кнопка" = класс = "БТН БТН-умолчанию NavBar -btn"> кнопка навигационной панели кнопку </>
</ Div>
</ Div>
</ Nav>
Попробуйте » Результаты следующие:
Текстовая панель навигации
Если вы хотите включить в текстовой строке навигации, использоватькласс .navbar-текст.Это часто используется в сочетании с тегом <p> для обеспечения правильной ведущих и цветов. Следующий пример иллюстрирует этот момент:
примеров
<Nav класс = "Navbar Navbar-умолчанию" Роль = "навигация">
<Div класс = "контейнер-жидкость">
<Div класс = "Navbar-заголовок">
<А класс = "Navbar-бренд" HREF = "#"> учебник </ а>
</ Div>
<Div>
<P класс = "NavBar-текст"> w3big Логин пользователя </ p>
</ Div>
</ Div>
</ Nav>
Попробуйте » Результаты следующие:
В сочетании с значок ссылки навигации
Если вы хотите использовать в обычной пиктограмму навигационной составляющей навигационной панели, а затем использовать значок , чтобы установитькласс glyphicon glyphicon- *, больше , см значок Bootstrap , как показано в следующем примере:
примеров
<Nav класс = "Navbar Navbar-умолчанию" Роль = "навигация">
<Div класс = "контейнер-жидкость">
<Div класс = "Navbar-заголовок">
<А класс = "Navbar-бренд" HREF = "#"> учебник </ а>
</ Div>
<Ul класс = "нав Navbar-нав Navbar -Верно">
<Li> <а HREF = "#"> <SPAN класс = "glyphicon glyphicon-пользователь" > </ SPAN> Регистрация </ A> </ li>
<Li> <а HREF = "#"> <SPAN класс = "glyphicon glyphicon-логарифмическая в"> </ SPAN> Войти </ A> </ li>
</ UL>
</ Div>
</ Nav>
Попробуйте » Результаты следующие:
Компонент Выравнивание
Вы можете использовать .navbar налево или.navbar направо или справа утилита классаслева выровненные панель навигациинавигационные ссылки, формы, кнопки, или текстэтих компонентов. Оба добавить класс CSS будет плавать в указанном направлении. Следующий пример иллюстрирует этот момент:
примеров
<Nav класс = "Navbar Navbar-умолчанию" Роль = "навигация">
<Div класс = "контейнер-жидкость">
<Div класс = "Navbar-заголовок">
<А класс = "Navbar-бренд" HREF = "#"> учебник </ а>
</ Div>
<Div>
<Ul класс = "нав Navbar-нав Navbar -Выберите">
<Li класс = "раскрывающимся">
<А HREF = "#" класс = "выпадающий-тумблер" данных тумблер = "раскрывающимся"> Java <б класс = "каретка"> </ B>
</ A>
<Ul класс = "выпадающий меню">
<Li> <а HREF = "#"> JMeter < / а> </ li>
<Li> <а HREF = "#"> EJB < / а> </ li>
<Li> <а HREF = "#"> Джаспер Отчет </ а> </ li>
<Li класс = "разделитель"> </ li>
<Li> <а HREF = "#"> изолированных ссылка </ A> </ li>
<Li класс = "разделитель"> </ li>
<Li> <а HREF = "#"> другой изолированный ссылка </ A> </ li>
</ UL>
</ Li>
</ UL>
<Форма класс = "NavBar-форма NAVBAR- левый" Роль = "Поиск">
<Кнопка тип = "отправить" класс = "БТН БТН-умолчанию" > Align Left - Добавить Кнопка </ кнопка>
</ Форма>
<P класс = "NavBar-текст NAVBAR- левый"> Выровнять по левому краю - текст </ p>
по
<Ul класс = "нав Navbar-нав Navbar -Верно">
<Li класс = "раскрывающимся">
<А HREF = "#" класс = "выпадающий-тумблер" данных тумблер = "раскрывающимся"> Java <б класс = "каретка"> </ B>
</ A>
<Ul класс = "выпадающий меню">
<Li> <а HREF = "#"> JMeter < / а> </ li>
<Li> <а HREF = "#"> EJB < / а> </ li>
<Li> <а HREF = "#"> Джаспер Отчет </ а> </ li>
<Li класс = "разделитель"> </ li>
<Li> <а HREF = "#"> изолированных ссылка </ A> </ li>
<Li класс = "разделитель"> </ li>
<Li> <а HREF = "#"> другой изолированный ссылка </ A> </ li>
</ UL>
</ Li>
</ UL>
<Форма класс = "NavBar-форма NAVBAR- право" Роль = "Поиск">
<Кнопка тип = "отправить" класс = "БТН БТН-умолчанию" > Выровнять справа - Добавить Кнопка </ кнопка>
</ Форма>
<P класс = "NavBar-текст NAVBAR- право"> Выровнять по правому краю - текст </ p>
</ Div>
</ Div>
</ Nav>
Попробуйте » Результаты следующие:
Фиксированный к началу
Bootstrap панель навигации может быть динамическим позиционированием. По умолчанию, это блочным элементом, который основан на местоположении HTML размещены в ориентации. Через несколько вспомогательных классов, вы можете поместить его в верхней или нижней части страницы, или вы можете сделать это вместе со страницей прокрутки статической навигационной панели.
Если вы хотите , панель навигации , прикрепленный к верхней части страницы, добавьтекласс .navbar фиксированной сверху .navbar класс.Следующий пример иллюстрирует этот момент:
Для того, чтобы предотвратить верхнюю панель навигации и тело содержимого страницы с другой в шахматном порядке, пожалуйста, добавьте тег, по крайней мере 50 пикселей дополнения к <тело> (обивка), значение дополнения могут быть установлены в соответствии с вашими потребностями.
примеров
<Nav класс = "Navbar Navbar-умолчанию Navbar -fixed-топ" Роль = "навигация">
<Div класс = "контейнер-жидкость">
<Div класс = "Navbar-заголовок">
<А класс = "Navbar-бренд" HREF = "#"> учебник </ а>
</ Div>
<Div>
<Ul класс = "нав Navbar-нав" >
<Li класс = "активный"> <а HREF = "#"> Иос < / а> </ li>
<Li> <а HREF = "#"> SVN < / а> </ li>
<Li класс = "раскрывающимся">
<А HREF = "#" класс = "выпадающий-тумблер" данных тумблер = "раскрывающимся"> Java <б класс = "каретка"> </ B>
</ A>
<Ul класс = "выпадающий меню">
<Li> <а HREF = "#"> JMeter < / а> </ li>
<Li> <а HREF = "#"> EJB < / а> </ li>
<Li> <а HREF = "#"> Джаспер Отчет </ а> </ li>
<Li класс = "разделитель"> </ li>
<Li> <а HREF = "#"> изолированных ссылка </ A> </ li>
<Li класс = "разделитель"> </ li>
<Li> <а HREF = "#"> другой изолированный ссылка </ A> </ li>
</ UL>
</ Li>
</ UL>
</ Div>
</ Div>
</ Nav>
Попробуйте » Результаты следующие:
Установленный в концевой части
Если вы хотите навигационную панель крепится к нижней части страницы, добавьтекласс .navbar фиксированной снизу .navbar класса.Следующий пример иллюстрирует этот момент:
примеров
<Nav класс = "Navbar Navbar-умолчанию Navbar -fixed-дно" Роль = "навигация">
<Div класс = "контейнер-жидкость">
<Div класс = "Navbar-заголовок">
<А класс = "Navbar-бренд" HREF = "#"> учебник </ а>
</ Div>
<Div>
<Ul класс = "нав Navbar-нав" >
<Li класс = "активный"> <а HREF = "#"> Иос < / а> </ li>
<Li> <а HREF = "#"> SVN < / а> </ li>
<Li класс = "раскрывающимся">
<А HREF = "#" класс = "выпадающий-тумблер" данных тумблер = "раскрывающимся"> Java <б класс = "каретка"> </ B>
</ A>
<Ul класс = "выпадающий меню">
<Li> <а HREF = "#"> JMeter < / а> </ li>
<Li> <а HREF = "#"> EJB < / а> </ li>
<Li> <а HREF = "#"> Джаспер Отчет </ а> </ li>
<Li класс = "разделитель"> </ li>
<Li> <а HREF = "#"> изолированных ссылка </ A> </ li>
<Li класс = "разделитель"> </ li>
<Li> <а HREF = "#"> другой изолированный ссылка </ A> </ li>
</ UL>
</ Li>
</ UL>
</ Div>
</ Div>
</ Nav>
Попробуйте » Результаты следующие:
Статический верх
Для того, чтобы быть в состоянии создать вместе с навигационной панели прокрутки страницы, добавьте.navbar-статическому высший класс.Этот класс не требует <тело> добавить отступы (дополнение).
примеров
<Nav класс = "Navbar Navbar-умолчанию Navbar -static-топ" Роль = "навигация">
<Div класс = "контейнер-жидкость">
<Div класс = "Navbar-заголовок">
<А класс = "Navbar-бренд" HREF = "#"> учебник </ а>
</ Div>
<Div>
<Ul класс = "нав Navbar-нав" >
<Li класс = "активный"> <а HREF = "#"> Иос < / а> </ li>
<Li> <а HREF = "#"> SVN < / а> </ li>
<Li класс = "раскрывающимся">
<А HREF = "#" класс = "выпадающий-тумблер" данных тумблер = "раскрывающимся"> Java <б класс = "каретка"> </ B>
</ A>
<Ul класс = "выпадающий меню">
<Li> <а HREF = "#"> JMeter < / а> </ li>
<Li> <а HREF = "#"> EJB < / а> </ li>
<Li> <а HREF = "#"> Джаспер Отчет </ а> </ li>
<Li класс = "разделитель"> </ li>
<Li> <а HREF = "#"> изолированных ссылка </ A> </ li>
<Li класс = "разделитель"> </ li>
<Li> <а HREF = "#"> другой изолированный ссылка </ A> </ li>
</ UL>
</ Li>
</ UL>
</ Div>
</ Div>
</ Nav>
Попробуйте » Результаты следующие:
Переверните панель навигации
Чтобы создать панель навигации перевернутый черный фон с белым текстом, и просто добавить к.navbar-обратный класс .navbar класс,как показано в следующем примере:
Для того, чтобы предотвратить верхнюю панель навигации и тело содержимого страницы с другой в шахматном порядке, пожалуйста, добавьте тег, по крайней мере 50 пикселей дополнения к <тело> (обивка), значение дополнения могут быть установлены в соответствии с вашими потребностями.
примеров
<Nav класс = "Navbar Navbar-обратное" Роль = "навигация">
<Div класс = "контейнер-жидкость">
<Div класс = "Navbar-заголовок">
<А класс = "Navbar-бренд" HREF = "#"> учебник </ а>
</ Div>
<Div>
<Ul класс = "нав Navbar-нав" >
<Li класс = "активный"> <а HREF = "#"> Иос < / а> </ li>
<Li> <а HREF = "#"> SVN < / а> </ li>
<Li класс = "раскрывающимся">
<А HREF = "#" класс = "выпадающий-тумблер" данных тумблер = "раскрывающимся"> Java <б класс = "каретка"> </ B>
</ A>
<Ul класс = "выпадающий меню">
<Li> <а HREF = "#"> JMeter < / а> </ li>
<Li> <а HREF = "#"> EJB < / а> </ li>
<Li> <а HREF = "#"> Джаспер Отчет </ а> </ li>
<Li класс = "разделитель"> </ li>
<Li> <а HREF = "#"> изолированных ссылка </ A> </ li>
<Li класс = "разделитель"> </ li>
<Li> <а HREF = "#"> другой изолированный ссылка </ A> </ li>
</ UL>
</ Li>
</ UL>
</ Div>
</ Div>
</ Nav>
Попробуйте » Результаты следующие: