Если посмотреть на список услуг хостинга Fornex, то видно, что не в последнюю очередь он ориентируется на веб-мастеров. Во-первых, кроме традиционных предложений есть: AntiDDoS защита, организация Backup, VPN и создание GEO-кластера. Во-вторых, имеется бесплатная базовая поддержка, партнерская программа, помощь с переносом проектов и хорошая цена/качество на SSD/VPS хостинг. К тому же среди клиентов Pikabu,Читать далее… >
Структурированное программирование потверждает закон исключенного третьего. (Алан.Дж.Перлис)
С помощью использования плагина DropDown можно добавить выпадающее меню для любых компонентов, таких как навигационная панель, вкладки, таблетка и кнопки.
Если вы хотите включить эту функциональность плагина в отдельности, то вам нужно подключить dropdown.js. В противном случае, как уже упоминалось в главе Bootstrap – Обзор плагинов, вы можете подключить c gjvjom. bootstrap.js или минимизированный bootstrap.min.js.
Применение
Вы можете включить плагин ниспадающего меню следующем образом:
С помощью атрибутов data – Добавление data-toggle = “dropdown” на ссылку или кнопку для переключения выпадающего меню, как показано ниже:
<div class = "dropdown">
<a data-toggle = "dropdown" href = "#">Dropdown trigger</a>
<ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel">
...
</ul>
</div>
Если вам нужно сохранить ссылки целыми (это полезно, если браузер не позволяет запускать JavaScript), используйте атрибут data-target вместо href = “#”:
<div class = "dropdown">
<a id = "dLabel" role = "button" data-toggle = "dropdown" data-target = "#" href = "/my_page.html">
Dropdown
<span class = "caret"></span>
</a>
<ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel">
...
</ul>
</div>
С помощью JavaScript – Для вызова выпадающего переключателя с помощью JavaScript, используйте следующий метод:
$('.dropdown-toggle').dropdown()
Пример
В навигационной панели
Следующий пример демонстрирует использование выпадающего меню в пределах навигационной панели:
<nav class = "navbar navbar-default" role = "navigation">
<div class = "navbar-header">
<a class = "navbar-brand" href = "#">AndreyEx</a>
</div>
<div>
<ul class = "nav navbar-nav">
<li class = "active"><a href = "#">iOS</a></li>
<li><a href = "#">SVN</a></li>
<li class = "dropdown">
<a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">
Java
<b class="caret"></b>
</a>
<ul class = "dropdown-menu">
<li><a href = "#">jmeter</a></li>
<li><a href = "#">EJB</a></li>
<li><a href = "#">Jasper Report</a></li>
<li class = "divider"></li>
<li><a href = "#">Разделенная ссылка</a></li>
<li class = "divider"></li>
<li><a href = "#">Еще одна разделенная ссылка</a></li>
</ul>
</li>
</ul>
</div>
</nav>
Во вкладках
Следующий пример демонстрирует использование выпадающего меню во вкладках:
Комментарии: