Эта статья содержит основные методы использования навигационной панели Bootstrap для вашей ссылки. Конкретный контент заключается в следующем
1. Bootstrap Basic Navigation Style
Навигационные стержни в основном изготовлены в начальной рамке в стиле «.nav». Стиль по умолчанию «.nav» не обеспечивает стиль навигации по умолчанию. Другой стиль должен быть прикреплен к нему, чтобы быть эффективным, таким как «навигационные таблы», «Nav-Pills» и т. Д. Его метод реализации состоит в том, чтобы добавить два стиля класса в UL Tag.NAV и NAV-Tabs
<ul> <li> <a href = "##"> home </a> </li> <li> <a href = "##"> css3 </a> </li> <li> <a href = "##"> sass </a> </li> <li> <a href = "##> jquery </a> </li> href = "##"> отзывчивый </a> </li> </ul>
2. Bootstrap Basic Navigation Bar
При создании базовой навигационной панели в основном включает следующие шаги:
Шаг 1: Сначала добавьте имя класса "Navbar-Nav" на основе списка навигации (<ul class = "Nav">)
Шаг 2: Добавьте контейнер (div) вне списка и используйте имена классов «Navbar» и «Navbar-Defaul»
Основная функция стиля «.navbar» состоит в том, чтобы установить эффекты левой и правой прокладки и округленных углов, но стили, связанные с цветом, никоим образом не установлены.
<div rol = "navigation"> <ul> <li> <a href = "##"> домашняя страница </a> </li> <li> <a href = "##"> серия учебных пособий </a> </li> <li> <a href = "##"> Введение в знаменитые учителя </a> </li> <li> <a href = "########> </i> </li> <li> <li> <a href = "##"> о нас </a> </li> </ul> </div>
3. Добавьте заголовок в Bootstrap Navigation Bar
В производстве веб -страницы часто есть заголовок перед меню (размер текста немного больше, чем другие тексты). Фактически, платформа Bootstrap также сделала это рассмотрение для всех, которое реализовано через «Навиной заголовок» и «Navbar-Brand».
<div rol = "navigation"> <viv> <a href = "##"> навигационная бар </a> </div> <ul> <li> <a href = "##"> Homepage </a> </li> <li> <a href = "##"> серия учебных пособий </a> </li> <li> <a href = "##> vemistrons </a> </li> <li> <li> <a href = "##"> Успешные случаи </a> </li> <li> <a href = "##"> о нас </a> </li> </ul> </div>
4. Bootstrap Navigation Bar Menu Menu
Также очень легко добавить вторичное меню в навигационную панель
<div rol = "navigation"> <viv> <a href = "##"> навигационная планка </a> </div> <ul> <li> <a href = "##"> Homepage </a> </li> <li> <a href = "##"> toggle = "Dropdown"> серия учебников </span> </a> <li> <li> <li> <li> href = "##"> css3 </a> </li> <li> <a href = "##"> javascript </a> </li> <li> <a href = "##"> php </a> </li> </li> </li> <li> <a href = "#[#[#[#[#[#[#[#[#[#1> </li> </li> <li> href = "##"> Успешные случаи </a> </li> <li> <a href = "##"> о нас </a> </li> </ul> </div>
5. Bootstrap Navigation Bar с формой
Некоторые навигационные стержни содержат формы поиска, а в платформе начальной загрузки приведена «форма Navbar». Метод очень прост в использовании. Поместите форму с именем класса Navbar-Form в контейнере Navbar. Навиелево-левое »позволяет форме плавать слева, чтобы лучше достичь выравнивания. В рамках начальной загрузки также предоставляется стиль« правой навигации », чтобы позволить элементам быть выровненными вправо в навигационной панели.
<div rol = "navigation"> <div> <a href = "##"> bootstrap </a> </div> <ul> <li> <a href = "##"> Homepage </a> </li> <li> <a href = "##"> toggle = "Dropdown"> серия учебников <S-span> </span> </l> <li> <cl> <li> href = "##"> css3 </a> </li> <li> <a href = "##"> javascript </a> </li> <li> <a href = "##"> php </a> </li> </li> </li> <li> <a href = "#1> </li> </li> <li> <li> <li> </li> </li> </li> </li> </li> </li> </li> </li> <li> <li> <li> href="##">Introduction to famous teachers</a></li> <li><a href="##">Successful Cases</a></li> <li><a href="##">About us</a></li> </ul> <form action="##" rol="search"> <div> <input type="text" placeholder="Please enter keywords" /> </div> <button type = "Opport"> Search </button> </form> </div>
6. Кнопки, текст и ссылки в навигационной панели начальной загрузки
В дополнение к использованию элемента в бренде Navbar и UL и Navbar-Form of Navbar-Nav, другие элементы могут использоваться в навигационной панели платформы начальной загрузки. Структура предоставляет три других стиля:
1). Кнопка в навигационной штанге NAVBAR-BTN
2). Текст в навигационном баре Navbar
3) .Navbar-Link в навигационной панели
Тем не менее, эти три стиля подвергаются определенным ограничениям при использовании в рамках и должны использоваться в сочетании с брендом Navbar и Navbar-Nav. Более того, существуют определенные ограничения на количество. Как правило, не будет проблем при использовании одного или двух, и будут проблемы, если он превышает два.
<div rol = "navigation"> <viv> <a href = "##"> bootstrap </a> </div> <ul> <li> <a href = "##"> Navbar Text </a> </li> <li> <a href = "##"> текст Navbar </a> </li> <li> <a href = "#[#[#[#[> navbar </a> </li> <li> <li> <a href = "##"> Text Navbar </a> </li> </ul> </div> <div role = "navigation"> <div> <a href = "##"> bootstrap </a> </div> <div> <a href = "##"> Text </a> <a href = "#[> navbar </abar </a> href = "##"> Navbar Text </a> </div> </div>
7. Bootstrap фиксированная навигационная панель
В одном из многих случаев дизайнеры хотят, чтобы навигационная панель была исправлена в верхней или нижней части браузера, и применение этой фиксированной навигационной панели чаще встречается в мобильной разработке. Структура начальной загрузки предоставляет два способа исправления навигационных стержней:
.navbar-фиксированный топ: навигационная полоса зафиксирована в верхней части окна браузера
.navbar-fixed-bottom: навигационная планка зафиксирована в нижней части окна браузера
<div rol = "navigation">… </div> <div> я довольствоваюсь </div> <div rol = "navigation"> </div>
8. Навигация по начальной загрузке страниц
Навигация на странице нумерованной страницы может быть наиболее распространенной навигацией по странице, особенно когда на странице списка есть много контента, она предоставит пользователям методы навигации по странице. Обычно многим студентам нравится использовать структуры Div> a и Div> для создания страничной навигации. Однако в платформе начальной загрузки используется такая структура, как Ul> li> a, и к тегу UL добавляется метод лиц.
<ul> <li> <a href = "#"> «</a> </li> <li> <a href ="#"> 1 </a> </li> <li> <a href ="#"> 2 </a> </li> <li> <a href ="#"> 3 </a> </li> <li> <li> href = "#"> 4 </a> </li> <li> <a href = "#"> 5 </a> </li> <li> <a href = "#"> »</a> </li> </ul>
В платформе начальной загрузки вы также можете установить размер кнопки странификации в нескольких различных ситуациях.
1). Сделайте навигацию на странице больше через «страниц-LG»;
2). Сделайте навигацию на странице меньше через «страниц-SM»
<ul>… </ul> <ul>… </ul> <ul>… </ul> <ul>… </ul>
В дополнение к предоставлению страниц навигации страницы, платформа Bootstrap также предоставляет навигацию по странице. Этот вид навигации на странице часто встречается на некоторых простых веб -сайтах, таких как личные блоги, веб -сайты журналов и т. Д. Этот вид навигации на странице не видит конкретного номера страницы и предоставляет только кнопку «предыдущая страница» и «следующая страница».
В фактическом использовании навигация по переворачиванию страниц страниц аналогична навигации по странице, добавляя класс пейджера в тег UL.
<ul> <li> <a href = "#"> «Предыдущая страница </a> </li> <li> <a href ="#"> следующая страница» </a> </li> </ul>
По умолчанию в центре отображается навигация по переворачивающей странице, но иногда нам нужно, чтобы один был слева, а другой вправо. Bootstrap Framework предоставляет два стиля
Предыдущий: пусть кнопка «предыдущая» будет оставлена
Далее: пусть кнопка «Далее» справа
<ul> <li> <a href = "#"> «Предыдущая страница </a> </li> <li> <a href ="#"> следующая страница» </a> </li> </ul>
Если вы все еще хотите учиться глубже, вы можете нажать здесь, чтобы изучить и прикрепить к вам 3 захватывающих тем:
Начальная учебник по обучению
Bootstrap Practical Rutorial
Учебное пособие по использованию плагина Bootstrap
Вышеуказанное посвящено навигационной панели Bootstrap, я надеюсь, что это будет полезно для каждого обучения.