- PVSM.RU - https://www.pvsm.ru -
Вчера я делал верстку для панели с номерами страниц с использованием Twitter Bootstrap [1] и мне потребовалось добавить туда выпадающее меню (для выбора вариантов сортировки и количества элементов на странице).
Bootstrap не содержит стандартных стилей для выпадающих меню в панели номеров страниц. Я написал свои стили для выпадающих меню, возможно, кому-то они будут полезны.
Скачать файл .less [2] (просто подключите вместе с twitter bootstrap)
Демо [3]
Пример верстки:
<div class="pagination">
<!-- номера страниц -->
<ul>
<li class="disabled"><a href="#">«</a></li>
<li class="active"><a href="#">1</a> </li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">»</a></li>
</ul>
<!-- размер страницы и сортировка - расположены справа -->
<ul class="pull-right">
<li class="disabled"><a href="#">на странице:</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown">20 <span class="caret"></span></a>
<!-- количество элементов на странице -->
<ul class="dropdown-menu pull-right">
<li><a href="#">50</a></li>
<li><a href="#">100</a></li>
<li><a href="#">Все</a></li>
</ul>
</li>
<li class="disabled"><a href="#">сортировать:</a></li>
<li><a href="#">по алфавиту</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></a>
<!-- варианты сортировки -->
<ul class="dropdown-menu pull-right">
<li><a href="#">по цене</a></li>
<li><a href="#">по популярности</a></li>
</ul>
</li>
</ul>
</div>
Автор: dima117
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/css/10418
Ссылки в тексте:
[1] Twitter Bootstrap: http://twitter.github.com/bootstrap/
[2] Скачать файл .less: http://ecm7.ru/pagination-dropdown.less
[3] Демо: http://ecm7.ru/ndesign/Home/Category
Нажмите здесь для печати.