Эта статья в основном представляет меню Bootstrap's и навигацию.
Начиная с этой статьи, мы представим файлы, связанные с JavaScript, следующим образом:
<!-Поместите его в конце тега тела, чтобы страница загрузилась быстрее->
<!-Если вы хотите использовать плагин JS Bootstrap, вы должны сначала позвонить в jQuery->
<script src = "http://libs.baidu.com/jquery/1.9.0/jquery.min.js"> </script>
<!-Включает все плагины Bootstrap JS или плагины JS, которые можно использовать по мере необходимости->
<script src = "http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"> </script>
В начальной загрузке компонент раскрывающегося меню является автономным компонентом. Эффект взаимодействия компонента Bootstrap основан на плагинах, написанных библиотекой jQuery, поэтому перед использованием Bootstrap.min.js вы должны сначала загрузить jQuery.min.js, чтобы вступить в силу.
1. Выпадающее меню-базовое использование
<! Doctype html> <html> <head> <meta charset = "utf-8"> <Title> Основное использование выпадающего меню </title> <link rel = "stylesheet" href = "http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css>! Style-> <style> Body {Margin: 50px; Padding: 50px;} </style> </head> <body> <div> <button type = "button" id = "dropdownmenu1" data-toggle = "Выпадение"> раскрывающееся меню <pran> </span> </button> <ul role = "menu" aria-labelledby = "dumpdownu1"> veverdation1 <> rome = "aria-labelldyb ROLE = "menuitem" tabIndex = "-1" href = "#"> menu1 </a> </li> <li role = "Presentation"> <a ROLE = "menuitem" tabIndex = "-1" href = "#"> menu2 </a> </li> <! tabIndex = "-1" href = "#"> menu3 </a> </li> <!-Установите статус элемента меню отключению (.disabled)-> <li role = "Presentation"> <a Rel = "menuitem" tabindex = "-1" href = "#"> menu 4 </a> </li> <! rol = "menuitem" tabindex = "-1" href = "#"> Menu 4 </a> </li> <li role = "Presentation"> <a role = "menuitem" tabIndex = "-1" href = "#"> Menu 4 </a> </li> <li rol = "> <alef =" menuuitem "tabIndex ="-1 "hre"#"#"#"#"#"#". 5 </a> </li> <li rol = "presentation"> <a rol = "menuitem" tabindex = "-1" href = "#"> меню 6 </a> </li> </ul> </div> <!-Поместите его в конце документа, чтобы сделать страницу быстрее-> <! src = "http://libs.baidu.com/jquery/1.9.0/jquery.min.js"> </script> <!-включая все плагины JS для плагинов Bootstrap или JS, которые можно использовать по мере необходимости-> <Скрипт src = "http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"> </script> </body> </html>Примечание. Иногда необходимо подпрыгивать вверх, поэтому вам нужно только добавить имя класса «отсечение» к имени класса «раскрывающийся список».
Рендеринги следующие:
2. Выпадающее меню выравнивание
Раскрывающееся меню в начальной загрузке по умолчанию выравнивается по умолчанию. Если вы хотите, чтобы выпадающее меню было выравнивано правым по сравнению с родительским контейнером, вы можете добавить имя класса «Право» или «Право выпадающих меню» к «выпадению меню», как показано ниже:
<!-пропущенная часть, такая как код в 1-> ... <div> <button type = "button" id = "dropdownmenu1" data-toggle = "Выпадение"> выпадающее меню <pan> </span> </button> <ul role = "menu" aria-labelledby = "dropdownmenu1"> <li olue = "> <a role =" halex "#"#"#"-"#"#"#"#"#". Участок меню меню </a> </li> <li role = "presentation"> <a role = "menuitem" tabIndex = "-1" href = "#"> Разметное меню Меню </a> </li> </ul> </div> ...
Рендеринги следующие:
3. Кнопка-кнопка Группа
Группа кнопок также является независимым компонентом. Он должен полагаться на плагин Button.js, чтобы работать нормально. И Bootstrap.js интегрировал функцию подключаемого модуля Button.js.
Использование: используйте контейнер «BTN-Group» и поместите несколько кнопок в этот контейнер. Как показано ниже:
<! Doctype html> <html> <head> <meta charset = "utf-8"> <tite> Группа кнопок </title> <link rel = "styleSheet" href = "http://netdna.bootstrapcdn.com/bootstrap/3.1.1/csss/bootstrap.min.csssss> <> css- тело {маржа: 30px; накладка: 30px; } </style></head><body><div> <button type="button"><span></span></button> <button type="button"><span></span></button> <button type="button"><span></span></button> <button type="button"><span></span></button> <button type="button"><span></span></button> <button type="button"><span></span></button> <button type="button"><span></span></button> <button type="button"><span></span></button> <button type="button"><span></span></button> <button type="button"><span></span></button> <button type="button"><span></span></button> <button type="button"><span></span></button> <button type="button"><span></span></button> <button type="button"><span></span></button> <button type="button"><span></span></button> <button type="button"><span></span></button> <button type="button"><span></span></button> <button type = "button"> <pan> </span> </button> </div> <!-Поместите его в конце документа, чтобы страница загружалась быстрее-> <!-Если вы хотите использовать плагин JS Bootstrap, вы должны сначала позвонить в jQuery-> <Скрипт src = "http://libs.baidu.com/jquery/1.9.0/jquery.min.js"> </script> <!-включая все плагины Bootstrap JS или плагины JS, которые можно назвать по мере необходимости-> <Скрипт src = "http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"> </script> </body> </html>Рендеринги следующие:
4. Кнопки - вложенная группировка
Много раз мы часто организуем раскрывающееся меню и группы обычных кнопок для достижения эффекта, аналогичного меню навигации. При использовании вложенной группировки кнопок начальной загрузки вам нужно только заменить контейнер «раскрывающееся список», который сделал выпадающее меню с «группой BTN» и поместить его на том же уровне, что и обычные кнопки. Как показано ниже:
<!-пропущенные детали, такие как код в 3-> ... <div> <button type = "button"> home </button> <div> <кнопка-toggle = "dropdown" type = "button"> Mobile Development <span> </span> </button> <ul> <li> <a href = "##"> Android </a> </li> <li> <a href = "#[#[#11 </a> </li> <li> <li> </div> <button Type = "button"> Java Web Development </button> <button Type = "button"> PHP Development </button> <button Type = "Кнопка"> Большие данные </button> </div> ...
Рендеринги следующие:
В фактическом использовании всегда будет встречаться эффект вертикального отображения. Этот стиль также предоставляется в начальной загрузке. Нам нужно только изменить имя класса «BTN-группа» горизонтальной группировки на «Btn-Group-Ventical», чтобы реализовать вертикальную группировку кнопки.
5. Кнопка-эквивалентная кнопка
Метод реализации кнопки выравнивания (кнопка адаптивной группировки) также очень прост. Вам нужно только добавить «имени класса» только «BTN-групп» в группу кнопок «Btn-Group», как показано ниже:
<div> <a href = "#"> одна треть </a> <a href = "#"> одна треть </a> <a href = "#"> одна треть </a> <a href = "#"> треть </a> </div>
Рендеринги следующие:
6. Навигация - базовое использование
Навигационные стержни в основном сделаны в начальной загрузке в стиле «.nav». .nav "должен быть прикреплен с другим стилем, чтобы быть эффективным, такого как" навигационные таблы "," навигационные нависения "и т. Д.
<! Doctype html> <html> <head> <meta charset = "UTF-8"> <Title> Навигационное использование </title> <Link rel = "styleSheet" href = "http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.csss stylestrap/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.css. <style> body {margin: 30px; Padding: 30px;} </style> </head> <body> <ul> <li> <a href = "##"> home </a> </li> <li> <a href = "##"> Новости </a> </li> <li> <a href = "##"> Blog </a> </li> <li> <a href = "##"> </li> </li> <li> <a href = "##" <li> <a href = "##"> форум </a> </li> <!-Отключенный статус-> <li> <a href = "##" src = "http://libs.baidu.com/jquery/1.9.0/jquery.min.js"> </script> <!-включая все плагины JS для плагинов Bootstrap или JS, которые можно назвать по мере необходимости-> <Скрипт src = "http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"> </script> </body> </html>Рендеринги следующие:
7. Навигационная навигация (таблетки) навигация
Навигация капсулы (таблетки), текущий предмет выделен и обладает округлым угловым эффектом. Просто замените название класса "Nav-Tabs" на "Nav-Pills":
<ul> <!-Текущее состояние-> <li> <a href = "##"> home </a> </li> <!-Приостановленный статус-> <li> <a href = "##"> News </a> </li> <li> <a href = "##" Data-toggle = выпуск "> blog <pran> </span> </a> <ul> <ul> <ul> <ul> <ul> <ul> <ul>- href = "##"> Front-End Blog </a> </li> <li> <a href = "##"> java blog </a> </li> </li> </li> <li> <a href = "##"> Форум </a> </li> <!-Отключенный статус-> <li> <a href = "#[#[/li> <!
Рендеринги следующие:
8. Навигация - вертикальная навигация
Чтобы создать вертикальную навигацию стека, вам нужно только добавить имя класса «навигационное покрытие» на основе «Nav-Pills»:
<ul> <li> <a href = "##"> Home </a> </li> <li> <a href = "##"> News </a> </li> <li> <a href = "##"> блог </a> </li> <li> <a href = "##" href = "##"> обратная связь </a> </li> </ul>
Рендеринги следующие:
9. Навигация - адаптивная навигация
Адаптивная навигация «Nav-Justified» (пожалуйста, см. Файл Bootstrap.css, строка 3585 до строки 3607) должна использоваться в сочетании с «навигационными таблами» или «Nav-Pills». нравиться:
<ul> <li> <a href = "##"> Home </a> </li> <li> <a href = "##"> News </a> </li> <li> <a href = "##"> блог </a> </li> <li> <a href = "##" href = "##"> обратная связь </a> </li> </ul>
Рендеринги следующие:
10. Navigation-Breadcrumb
Breadcrumb также является независимым компонентом модуля, обычно используемым для навигации, и его основная функция - сообщить пользователю текущее местоположение страницы (текущее местоположение). Метод использования очень прост, добавьте класс Breadcrumb в OL:
<ol> <li> <a href = "#"> home </a> </li> <li> <a href = "#"> China </a> </li> <li> Пекин </li> </ol>
Выше всего содержание этой статьи. Я надеюсь, что это будет полезно для каждого обучения, и я надеюсь, что все будут поддерживать Wulin.com больше.