Выпадающее меню
Специальное утверждение: Поскольку эффект взаимодействия компонента Bootstrap основан на плагинах, написанных библиотекой jQuery, вы должны сначала загрузить jquery.min.js, прежде чем использовать Bootstrap.min.js для создания эффектов.
<div> <button type = "button" id = "dropdownmenu1" data-toggle = "выпадающий в выпадающие меню <pran> </span> </button> <ul role =" menu "aria-labelledby =" dropdowdmenu1 "> <li role =" presentation "> <a role =" menuictem "tabindex ="-1 "href ="#"#"#"#"#"#>"#"#"#> " Item </a> </li> <li rol = "presentation"> <a role = "menuitem" tabindex = "-1" href = "#"> выпадающее меню </a> </li> <li role = "Presentation"> <a Rel = "menuitem" tabindex = "-1" href = "#"> Dirlow Down Menu Menu Item. rol = "menuitem" tabindex = "-1" href = "#"> раскрывающиеся пункты меню </a> </li> </ul> </div> <!-jquery должен быть импортирован до начальной загрузки, последнее реализуется на основе прежнего-> <script src = "http://libs.baidu.com/jquery/1.9.0/jquery.js"> </script> <script src = "// maxcdn.bootstrappcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"> </script>
Изображение воспроизведения:
Принцип реализации:
В начале был дисплей: ни один в классе; Взгляните на CSS ниже
.dropdown-menu {position: Absolute;/*Установить абсолютное позиционирование, относительно родительского элемента div.dropdown*/top: 100%;/*Пусть пункт выпадающего меню в нижней части пункта меню родительского меню. Если родительский элемент не устанавливает относительное позиционирование, элемент относится к элементу тела*/слева: 0; z-Index: 1000;/*Установите элемент раскрывающегося меню меню, не покрываемое другими элементами*/отображение: нет;/*скрыть элемент выпадающего меню по умолчанию*/float: min-width: 160px; Padding: 5px 0; margin: 2px 0; Нет; фоновый цвет: #fff; фоновая зажима: прокладка; .175);}Затем используйте событие Click, чтобы управлять удалением и добавлением класса тегов для достижения отображения и скрытия
Через технологию JS добавьте или удалите название класса «Open» в родительский контейнер «Div.Dropdown», чтобы управлять дисплеем или скрыть раскрывающееся меню. То есть по умолчанию,
«Div.dropdown» не имеет названия класса «открыто». Когда пользователь нажимает в первый раз, имя класса «Открыть» будет добавлено в имя класса «Open»; Когда пользователь снова нажимает, имя класса «Открыть» в контейнере «Div.dropdown» будет удалено снова. Мы можем просмотреть весь процесс через Firebug браузера:
По умолчанию:
Пользователь нажимает в первый раз:
Пользователь снова нажимает:
Открыть CSS
.open> .dropdown-menu {display: block;}Потянуть в меню линию разделения
Давайте посмотрим на пример выше, а затем вставьте код! Посмотрите на эффект, вам все еще нужно представить файл JS! После этого не так много!
<div> <button type = "button" id = "dropdownmenu1" data-toggle = "выпадающий в выпадающие меню <pran> </span> </button> <ul role =" menu "aria-labelledby =" dropdowdmenu1 "> <li role =" presentation "> <a role =" menuictem "tabindex ="-1 "href ="#"#"#"#"#"#>"#"#"#> " Item </a> </li> <li rol = "presentation"> <a role = "menuitem" tabindex = "-1" href = "#"> выпадающее меню </a> </li> <li role = "Presentation"> <a role = "menuitem" tabindex = "-1" href = "#"> раскрывающееся меню. ROLE = "Presentation"> <a ROLE = "menuitem" tabIndex = "-1" href = "#"> Раздача пункта меню </a> </li> </ul> </div>
Изображение воспроизведения:
На самом деле, есть еще одна строка кода
<li role = "presentation"> </li>
Название меню раскрывающегося меню
Прямая загрузка кода
<div> <button type = "button" id = "dropdownmenu1" data-toggle = "выпадающий в выпадающие меню <pran> </span> </button> <ul role =" menu "aria-labelledby =" dropdowdmenu1 "> <li role =" Presentation "> cheage menu header </li> <li ="> <a role = "justem emindem". href = "#"> Разметное меню Меню </a> </li> <li role = "presentation"> <a role = "menuitem" tabindex = "-1" href = "#"> пункт раскрывающегося меню </a> </li> <li role = "Presentation"> <a role = "menuitem" tabindex = "-1" href = "#"> DROPIT DIPER </RI-ITER </RI/">"> DROPLOH DOW DOMITEM </I/"> ROLE = "Presentation"> </li> <li ROLE = "Presentation"> Заголовок меню части 2 </li> <li role = "Presentation"> <a role = "menuitem" tabIndex = "-1" href = "#"> Разбрасывание пункта меню </a> </li> <li role = "> <a Rely =" menuuiceem "tabIdex ="-1 "href =" href = "href =" href = "#"#"##"#"#"#"##"##"##"##"##"#" пункт </a> </li> <li role = "presentation"> <a rol = "menuitem" tabindex = "-1" href = "#"> раскрывающийся меню </a> </li> </ul> </div>
Изображение воспроизведения:
На самом деле, добавлен только один код:
<li role = "presentation"> Заголовок меню части 2 </li>
Выравнивание выключения меню
<h4> Используйте класс Pull-Right, чтобы выровнять раскрывающееся меню с правой стороной родительского контейнера </h4> <div style = "float: left;"> <button type = "button" id = "dropdownmenu1" data-toggle = "Dropdown">
Выпадающее меню
<pran> </span> </button> <ul rol = "menu" aria-labelledby = "dropdownmenu1"> <li role = "presentation"> <a role = "menuitem" tabindex = "-1" href = "#"> Раздача меню меню </a> </li> <li role = "> <a role =" menuitem "#"#"#"#"#"#"#"#"#"#"#"#". Пункт меню </a> </li> <li role = "presentation"> <a role = "menuitem" tabIndex = "-1" href = "#"> Разбрасывание пункта меню </a> </li> <li role = "Presentation"> <a Role = "menuitem" tabIndex = "-1" href = "#"> Разрушение меню </a> </li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li ROLE = "Presentation"> </li> <li ROLE = "Presentation"> <a ROLE = "menuitem" tabIndex = "-1" href = "#"> выпадающие пункты меню </a> </li> </ul> </div> <br/> <br/> <H4> Используйте класс-выпадающий-menu-right, чтобы выявить меню распадания со стороны родителя, составной </4-right </4-n-right </4-right </4-n-right </4-right-right </4-right </4-n-right-right. слева; "> <button type =" button "id =" dropdownmenu1 "data-toggle =" выпадает ">
Выпадающее меню
<pran> </span> </button> <ul rol = "menu" aria-labelledby = "dropdownmenu1"> <li role = "presentation"> <a role = "menuitem" tabindex = "-1" href = "#"> Раздача меню меню </a> </li> <li role = "> <a role =" menuitem "#"#"#"#"#"#"#"#"#"#"#"#". Пункт меню </a> </li> <li role = "presentation"> <a role = "menuitem" tabIndex = "-1" href = "#"> Разбрасывание пункта меню </a> </li> <li role = "Presentation"> <a Role = "menuitem" tabIndex = "-1" href = "#"> Разрушение меню </a> </li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li ROLE = "Presentation"> </li> <li role = "Presentation"> <a role = "menuitem" tabIndex = "-1" href = "#"> выпадающие меню </a> </li> </ul> </div> <br/> <br/> <h4> выпадающее меню выравнивается с левой стороной кнопки-кондиционера </h4> <div style = "div style"; type = "button" id = "dropdownmenu1" data-toggle = "Выпадающий в действие">
Выпадающее меню
<pran> </span> </button> <ul rol = "menu" aria-labelledby = "dropdownmenu1"> <li role = "presentation"> <a role = "menuitem" tabindex = "-1" href = "#"> Раздача меню меню </a> </li> <li role = "> <a role =" menuitem "#"#"#"#"#"#"#"#"#"#"#"#". Пункт меню </a> </li> <li role = "presentation"> <a role = "menuitem" tabIndex = "-1" href = "#"> Разбрасывание пункта меню </a> </li> <li role = "Presentation"> <a Role = "menuitem" tabIndex = "-1" href = "#"> Разрушение меню </a> </li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li rol = "presentation"> </li> <li role = "presentation"> <a rol = "menuitem" tabindex = "-1" href = "#"> Раздача пункт меню </a> </li> </ul> </div>
На самом деле, добавьте название класса «Право» или «Право выпадающего меню» на «Выпадающуюся меню», где код стиля CSS
.dropdown-menu.pull-right {right: 0; слева: auto;}. Выпадающий меню-право {right: 0; слева: auto;}Выпадающее меню (статус пункта меню)
Состояние по умолчанию элемента раскрывающегося меню (без настройки) имеет приостановленное состояние (: Hover) и состояние фокуса (: Focus)
В дополнение к двум вышеуказанным состояниям, раскрывающиеся пункты меню также имеют текущее состояние (.
<div> <button type = "button" id = "dropdownmenu1" data-toggle = "выпадающий в выпадающие меню <pran> </span> </button> <ul role =" menu "aria-labelledby =" dropdowdmenu1 "> <li role =" presentation "> <a role =" menuictem "tabindex ="-1 "href ="#"#"#"#"#"#>"#"#"#> " Item </a> </li> <li rol = "presentation"> <a role = "menuitem" tabindex = "-1" href = "#"> выпадающее меню </a> </li> <li role = "Presentation"> <a role = "menuitem" tabindex = "-1" href = "#"> раскрывающееся меню. ROLE = "Presentation"> <a ROLE = "menuitem" tabIndex = "-1" href = "#"> Раздача пункта меню </a> </li> </ul> </div>
Поместите на нее мышь, и на отключенном отключении будет отображаться запрещенный знак. Снимок экрана не может быть вставлен!
Кнопки (группа кнопок)
Использование отдельных кнопок на веб -страницах иногда не отвечает потребностям нашего бизнеса. Мы часто видим несколько кнопок, объединенных вместе, таких как набор маленьких кнопок значков в богатом текстовом редакторе.
<div> <button type = "button"> <pan> </span> </button> <button Type = "button"> <pan> </span> </button> <button Type = "button"> <pan> </span> </button> <button Type = "Button"> <pan> </span> </button> <button = "> <pan> </span> </span> </span> </button> <button =" type="button"><span></span></button><button><button type="button"><span></span></button><button><button type="button"><span></span></button><button><button type="button"><span></span></button><button><button type="button"><span></span></button><button><button type = "button"> <pan> </span> </button> <button Type = "Кнопка"> <pan> </span> </button> </div>
Изображение воспроизведения:
Здесь вы можете генерировать различные кнопки значков в соответствии с различными значками! Вы можете просмотреть его на этом веб -сайте: http://getbootstrap.com/components/#glyphicons
Кнопки (панель инструментов кнопки)
В богатом текстовом редакторе групповые кнопки группируются вместе, такие как копирование, вырезать и вставить группу; Средний, средний, средний, правый выравнивание и конечная группа, как показано на рисунке ниже:
Затем панель инструментов для кнопки Bootstrap Frame также обеспечивает такой метод изготовления. Вам нужно только поместить группу кнопок «BTN-Group» в группы в большом контейнере "Btn-Toolbar", как показано ниже:
<div> <div> <button type = "button"> <pan> </span> </button> <button Type = "button"> <pan> </span> </button> <button Type = "button"> <pan> </span> </button> </div> <div> <button Type = " type = "button"> <pan> </span> </button> </div> <div> <button type = "button"> <pan> </span> </button> </div> <div> <button type = "button"> <pan> </span> </button> <butne> <tood> </button> <buten> </button> <//кнопка> </div> <div> <ditup> type = "button"> <pan> </span> </button> <tutdio> </button> <tood> <button Type = "> <pan> </span> </button> <button Type =" button "> <pan> </span> </button> </div> <div> <tood Type ="> <pan> </span> </button> </div> <div> <button = "
Изображение воспроизведения:
Второй набор значков на рисунке добавляется с помощью класса:
BTN-Group-LG: большая группа кнопок
BTN-Group-SM: небольшая группа кнопок
BTN-Group-XS: Ultra-Small Button Group
Просто добавьте соответствующее имя класса в имя класса «.btn-Group», чтобы получить группы кнопок разных размеров.
Кнопки (вложенная группа)
Много раз мы часто организуем раскрывающееся меню и группы обычных кнопок для достижения эффекта, аналогичного меню навигации.
При его использовании вам нужно только заменить контейнер, который сделал «выпадающий список», который первоначально создал выпадающее меню с «BTN-группой», и поместить его на том же уровне, что и обычная кнопка.
<div> <button type = "button"> home </button> <button Type = "button"> Display Product </button> <button Type = "button"> Анализ case </button> <button Type = "Кнопка"> Свяжитесь с нами </button> <div> <futne Data-toggle = "Dropdown" Type = "Кнопка"> О нас </span> </wutre> <ul> <li> <li> <li> <li> <li> <li> Профиль </a> </li> <li> <a href = "##"> Корпоративная культура </a> </li> <li> <a href = "##"> Организационная структура </a> </li> <li> <a href = "##"> Обслуживание клиентов </a> </li> </ul> </div> </div>
Изображение воспроизведения:
Кнопки (вертикальная группировка)
В примере, который можно увидеть ранее, группа кнопок отображается горизонтально. Но в реальном использовании эффект вертикального отображения всегда будет встречаться. Этот стиль также предоставляется в платере начальной загрузки. Нам просто нужно изменить название класса «BTN-Group» горизонтальной группировки на «Btn-Group-Ventical»
<div> <button type = "button"> home </button> <button Type = "button"> Display Product </button> <button Type = "button"> Анализ case </button> <button Type = "Кнопка"> Свяжитесь с нами </button> <div> <futne Data-toggle = "Dropdown" Type = "Кнопка"> О нас </span> </wutre> <ul> <li> <li> <li> <li> <li> <li> Профиль </a> </li> <li> <a href = "##"> Корпоративная культура </a> </li> <li> <a href = "##"> Организационная структура </a> </li> <li> <a href = "##"> Обслуживание клиентов </a> </li> </ul> </div> </div>
Изображение воспроизведения:
Кнопка (равная кнопка)
Эффект кнопки равного сегмента особенно практичен на мобильных терминалах. Вся ширина группы кнопок составляет 100% от контейнера, и каждая кнопка в группе кнопки делит всю ширину контейнера. Например, если у вас есть пять кнопок в группе кнопок, то каждая кнопка шириной 20%, если есть четыре кнопки, то каждая кнопка шириной 25% и так далее.
Кнопка выравнивания также часто называют кнопкой адаптивной группировки. Метод реализации также очень прост. Вам нужно только добавить «имени класса» только «BTN-групп» в группу кнопок «Btn-Group», как показано ниже:
<div> <div> <a href = "#"> home </a> <a href = "#"> Дисплей продукта </a> <a href = "#"> Анализ случая </a> <a href = "#"> свяжитесь с нами </a> </div> </div>
Измените ширину экрана
Специальное заявление: при создании группы кнопок Aliquot, попробуйте использовать элемент тега <a> для изготовления кнопок, потому что при использовании элемента тега <Tood>, используя дисплей: Таблица не подходит для поддержки в некоторых браузерах.
Вниз вверх треугольник кнопки
Нисходящий треугольник кнопки, мы добавляем элемент «метки» на этикетку и называем его «Кейт»:
Иногда появляется наше выпадающее меню (в следующем разделе его представят). В настоящее время наше направление треугольника должно отображаться вверх. Метод реализации: вам необходимо добавить имя класса «отсечение» в класс.
<div> <Кнопка Data-toggle = "DOPLOWNADE" TYPE = "Кнопка"> раскрывающееся меню кнопки <pran> </span> </button> <ul> <li> <a href = "##"> Размечающий меню кнопок </a> </li> <li> <a href = "##"> Кнопка «Menu» </a> </li> <li> <a href = "##" пункт </a> </li> </ul> </div>
Изображение воспроизведения:
Навигация (базовый стиль)
Навигация не привыкать к лицу. Можно сказать, что навигация является одним из важных элементов веб -сайта, который может помочь пользователям найти различные функциональные услуги, предоставляемые веб -сайтом. Метод навигации также очень разнообразен и разнообразен.
Навигационные стержни в основном изготовлены в начальной рамке в стиле «.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>
Навигация (навигация в форме тегов)
Навигация в форме тегов, также известная как навигация вкладок. Особенно, когда в кусках отображается много содержимого, очень подходит для использования этой вкладки для их сгруппировки.
Навигация в форме тегов реализуется в стиле "навигации". При создании навигации в форме тегов вам необходимо добавить этот тип имени в исходную навигацию "NAV"
<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>
Фактически, эффект приведенного выше примера не согласуется с эффектами TAB, которые мы обычно видим. Как правило, вкладка обучает текущему выбору. Фактически, основа для начальной загрузки также предоставляется соответственно. Предположим, что мы хотим, чтобы элемент «дома» был выбранным в настоящее время элементом, просто добавьте имя класса "class =" Active "" в свой тег.
<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>
Изображение воспроизведения:
В дополнение к текущему элементу, некоторые вкладки также имеют отключенное состояние. Чтобы достичь этого эффекта, вам нужно только добавить "class =" отключить "к элементу тега:
<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>
Изображение воспроизведения:
Навигация (таблетки) Навигация)
Навигация формы капсулы (таблетки) звучит немного неловко, потому что она немного похожа на капсульную форму. Но это больше похоже на массовую навигацию, которую мы обычно видим. Текущий предмет выделен с закругленным угловым эффектом. Метод реализации похож на «навигационные таблы». С той же структурой вам нужно только заменить название класса «Nav-Tabs» на «Nav-Pills»:
<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>
Изображение воспроизведения:
То же самое, что упомянуто выше!
Навигация (вертикальная навигация)
В фактическом использовании, в дополнение к горизонтальной навигации, существует также вертикальная навигация, как и кнопки вертикального расположения, представленные ранее. Создание вертикальной навигации стека требует только добавления названия класса с «навигацией» на основе «Nav-Pills»
<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>
Изображение воспроизведения:
В разделе раскрывающегося меню существует разделитель между раскрывающейся группой меню и группой. На самом деле, вертикальная навигация стека также имеет такой эффект, вам нужно только добавить »
" Только:
<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> <li> <li> <li> <li> <li> <li> href = "##"> отзывчивый </a> </li> </ul>
Изображение воспроизведения:
Адаптивная навигация (используется)
Адаптивная навигация относится к навигации, занимающей всю ширину контейнера, и элементы меню могут адаптироваться к ширине, как ячейки таблицы. Адаптивная навигация такая же, как и группа адаптивных кнопок, изготовленную с использованием «BTN-Group-Justified». Просто при создании адаптивной навигации, другого названия класса «Nav-Justified». Конечно, он должен использоваться с «навигационными таблами» или «навигационными наборами». нравиться:
<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>
Изображение воспроизведения:
Это другой экран
Навигация плюс меню «Снижение» (Вторичная навигация)
Предыдущие примеры посвящены использованию платформы начальной загрузки для создания навигации первого уровня, но во многих случаях эффект навигации второго уровня неотделим от веб-страницы. Тогда легче сделать вторичную навигацию в платформе начальной загрузки. Просто относитесь к LI как родительский контейнер, используйте имя класса «выпадающее место» и гнездитесь в другой список UL в LI и используйте метод, введенный в предыдущем раскрывающемся меню:
<ul> <li> <a href = "##"> home </a> </li> <li> <a href = "##" data-toggle = "Выпадение"> учебник <pan> </span> </a> <ul> <li> <a href = "##"> css3 </a> </li> <li> <a href = "##" href = "##"> sass </a> </li> <li> <a href = "##"> jquery </a> </li> <li> <a href = "##"> отзывчивый </a> </li> </li> <li> <a href = "##"> о нас </a> </li> </ul>
Изображение воспроизведения:
Через инструмент отладки браузера нетрудно обнаружить, что, нажав на элемент меню с вторичной навигацией, имя класса «Открыть» будет автоматически добавлено. Еще раз нажав удалить добавленное имя класса «Открыть», а принцип реализации раскрывающегося меню одинаково!
Затем при использовании делящей линии во вторичной навигации вам нужно только добавить пустой тег, такой как «<li class =" vivider "> </li>".
Навигация по хлебной крошке
Сухарики обычно используются для навигации, и их основная функция - сообщить пользователю текущее местоположение страницы (текущее местоположение)
<ol> <li> <a href = "#"> Home </a> </li> <li> <a href = "#"> моя книга </a> </li> <li> "Иллюстрированный CSS3" </li> </ol>
Изображение воспроизведения: