Навигационная панель является хорошей функцией и является выдающейся особенностью веб -сайта Bootstrap. Навигационная строка является отзывчивым мета -компонентом, который выступает в качестве названия навигации для приложения или веб -сайта. Навигационная полоса рухнута в виде мобильного устройства, а навигационная полоса расширяется горизонтально, когда доступная ширина просмотра увеличивается. В основе навигационной панели начальной загрузки навигационная строка включает в себя определение стилей для названий сайтов и базовую навигацию.
Шаги по созданию навигационной панели по умолчанию следующие:
Чтобы добавить ссылки в панель навигации, просто добавьте неупорядоченный список с классом .nav, .navbar-nav.
Следующие примеры поделится с вами навигационной панелью, сделанной с использованием Bootstrap3. Конкретный контент заключается в следующем
например
Вейбо
Так как написать такой удобный компонент
Используйте Bootstrap3!
Расскажите нам напрямую
Вообще говоря, навигация помещается в следующую структуру
<NAV ROLE = "Navigation"> <div> <div> <a href = "#"> <img src = "..."> </a> </div> </div> </nav>
1. Навие теги
В первом классе NAVBAR необходим. Другие свойства являются необязательными.
Добавление Navbar-Default создает самую основную навигацию, и она не будет исправлена, где цвет прозрачен.
Добавить цвет класса Navbar Delverse, чтобы стать черным
Добавьте навигационную фиксацию, чтобы исправить сверху, добавить навигационные помещения, чтобы исправить снизу
Эффект добавления Navbar-Static Top заключается в следующем
<div>
Навигационный заголовок, например, журнал веб -сайта, нажмите на домашнюю страницу или название веб -сайта
Эффект, как и выше
Я думаю, что эффект будет лучше, если я смогу изменить его на текст здесь
2. Форма
Добавление форм в навигацию, такие как поиск, вход в систему и т. Д. Также распространено
Например, мой поиск выше
<form rol = "search"> <div> <input type = "text" Placeholder = "search"> </div> <button type = "opper"> search </button> </form>
Объясните, что левый класс навигации позиционирует эту форму слева
Конечно, есть также класс в правом навигации
Точно так же кнопка может быть добавлена так
<button type = "button"> Войти в </button>
Текст можно добавить так
<p> Подписано как Марк Отто </p>
Ссылка может быть добавлена так
<p> Подписано как <a href = "#"> Mark Otto </a> </p>
И таким образом вы можете добавить в правые или левые навигации классы
Моя навигация
<!--Navigation--> <div> <div id="navcontainer"> <nav role="navigation"> <div> <div> <a href="#">Xiansheng Library</a> </div> <form role="search"> <div> <input type="text" placeholder="Search"> </div> <button type="submit">Search</button> </form> <div> <ul> <li><a data-toggle = "modal" data-target = "#register"> register </a> </li> <li> <a data-toggle = "modal" data-target = "#signin"> вход </a> </li> </ul> </div> </div> </div> </nav> </div> </ul> </div> </div> </div> </nav> </div> </ul> </div> </div> </nav> </a> </li> </ul> </div>
Эффект выглядит следующим образом
Для получения дополнительного содержания вы можете обратиться к статье для обучения:
Bootstrap реализует эффект навигации по умолчанию
Начальная загрузка должна учиться каждый день (ii)
Bootstrap должен учиться каждый день. Дополнительный плагин навигации (Affix)
Больше контента о начальной загрузке также можно найти по специальным темам: «Учебное пособие по обучению Bootstrap»
Выше приведено навигационная панель, сделанная с использованием Bootstrap3. Я надеюсь, что это будет полезно для каждого обучения и создать собственную навигационную планку