Навигационная панель (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. Практическая тройная навигационная планка
Рендеринги следующие:
Иногда необходимо инвертировать цвет. 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>
Рендеринги следующие:
5. Практические пять тегов
На некоторых веб -страницах часто добавляется тег, чтобы сообщить пользователям некоторую дополнительную информацию, например:
Этот эффект извлекается в начальной загрузке в компонент метки и выделен в стиле «.label». Аналогично кнопке кнопки элемента кнопки, стиль метки также обеспечивает множество цветов, в основном через эти имена классов, чтобы изменить цвет фона и цвет текста:
Рендеринги следующие:
6. Практический боевой шесть - Значок
Значки в основном используются, чтобы напомнить вам о том, сколько непрочитанных сообщений нужно. В начальной загрузке стиль «значка» используется для достижения эффекта значка.
<!-Медаль навигационного бара Navbar-default-> <div rol = "navigation"> <viv> <a href = "##"> tit href = "##"> Forum <pan> 10 </span> </a> </li> <li> <a href = "##"> обратная связь </a> </li> </ul> </div>
Рендеринги следующие:
7. Практическая семи - всплывающая коробка, которая движет анимационным переходом
<! Doctype html> <html> <head> <meta charset = "utf-8"> <Title> Animated Transition Pop-Up Box </title> <Link rel = "styleSheet" href = "http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.csss '> crootstrap/3.1.1/css/bootstrap.min.css'> crootstrap/3.1.1/css/bootstrap.css '> crootstrap/3.1.1/css/bootstrap.css'> crootstrap/3.1.1/css/bootstrap.cssmin.cds. <style > body{margin:30px;padding:30px;} </style></head><body><button type="button">Click me</button><div id="mymodal"> <div> <div> <div> <button type="button" data-dismiss="modal"> <span aria-hidden="true">×</span><span>Close</span> </button> <h4> Название POPT-UP </H4> </div> <div> <p> Содержание тела POPT-Up </p> </div> <div> <Кнопка Типа = "Кнопка" DATA-DISMISS = "MODAL"> Close> </div> </div> <!-/.modal-content-> </div> <!-/.modal-dialog-> </.modal-content-> </div> <! В конце документа, чтобы сделать страницу быстрее загружаться-> <!-Если вы хотите использовать плагин JS Bootstrap, вы должны сначала позвонить jquery-> <script src = "http://libs.baidu.com/jquery/1.9.0/jquery.min.js"> </scip -> <script src = "http://maxcdn.bootstrappcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"> </script> <script> $ (function () {$ (". btn"). Click () {$ ("#mymodal"). }); </script> </body> </html>Рендеринги следующие:
Выше всего содержание этой статьи. Я надеюсь, что это будет полезно для каждого обучения, и я надеюсь, что все будут поддерживать Wulin.com больше.
Если вы все еще хотите учиться в глубине, вы можете нажать здесь, чтобы узнать и прикрепить к вам две захватывающие темы: учебник по обучению начальной загрузки.