ИТ Блог. Создание сайтов с применением Bootstrap
(1 оценок, среднее: 5,00 из 5)
Загрузка...
В этой главе будет освещена тема о выпадающем меню в Bootstrap. Выпадающее меню является переключаемым, контекстным меню для отображения ссылок в формате списка. Это может быть сделано интерактивным с JavaScript плагинов раскрывающихся списков.
Чтобы использовать выпадающее меню, просто оберните выпадающее меню в класс .dropdown. Следующий пример демонстрирует основное выпадающее меню:
<div class = "dropdown">
<button type = "button" class = "btn dropdown-toggle" id = "dropdownMenu1" data-toggle = "dropdown" aria-haspopup="true" aria-expanded="true">
Topics
<span class = "caret"></span>
</button>
<ul class = "dropdown-menu" role = "menu" aria-labelledby = "dropdownMenu1">
<li role = "presentation">
<a role = "menuitem" tabindex = "-1" href = "#">Java</a>
</li>
<li role = "presentation">
<a role = "menuitem" tabindex = "-1" href = "#">Data Mining</a>
</li>
<li role = "presentation">
<a role = "menuitem" tabindex = "-1" href = "#">
Data Communication/Networking
</a>
</li>
<li role = "presentation" class = "divider"></li>
<li role = "presentation">
<a role = "menuitem" tabindex = "-1" href = "#">Separated link</a>
</li>
</ul>
</div>
Выравняйте выпадающее меню направо, добавив класс .pull-right в .dropdown-menu. Следующий пример демонстрирует это:
<div class = "dropdown">
<button type = "button" class = "btn dropdown-toggle" id = "dropdownMenu1" data-toggle = "dropdown" aria-haspopup="true" aria-expanded="true">
Topics
<span class = "caret"></span>
</button>
<ul class = "dropdown-menu pull-right" role = "menu" aria-labelledby = "dropdownMenu1">
<li role = "presentation">
<a role = "menuitem" tabindex = "-1" href = "#">Java</a>
</li>
<li role = "presentation">
<a role = "menuitem" tabindex = "-1" href = "#">Data Mining</a>
</li>
<li role = "presentation">
<a role = "menuitem" tabindex = "-1" href = "#">
Data Communication/Networking
</a>
</li>
<li role = "presentation" class = "divider"></li>
<li role = "presentation">
<a role = "menuitem" tabindex = "-1" href = "#">Separated link</a>
</li>
</ul>
</div>
Вы можете добавить заголовок для маркировки разделов в любом раскрывающемся меню с помощью класса dropdown-header. Следующий пример демонстрирует это:
<div class = "dropdown">
<button type = "button" class = "btn dropdown-toggle" id = "dropdownMenu1" data-toggle = "dropdown" aria-haspopup="true" aria-expanded="true">
Topics
<span class = "caret"></span>
</button>
<ul class = "dropdown-menu" role = "menu" aria-labelledby = "dropdownMenu1">
<li role = "presentation" class = "dropdown-header">Dropdown header</li>
<li role = "presentation" >
<a role = "menuitem" tabindex = "-1" href = "#">Java</a>
</li>
<li role = "presentation">
<a role = "menuitem" tabindex = "-1" href = "#">Data Mining</a>
</li>
<li role = "presentation">
<a role = "menuitem" tabindex = "-1" href = "#">
Data Communication/Networking
</a>
</li>
<li role = "presentation" class = "divider"></li>
<li role = "presentation" class = "dropdown-header">Dropdown header</li>
<li role = "presentation">
<a role = "menuitem" tabindex = "-1" href = "#">Separated link</a>
</li>
</ul>
</div>
