Выпадающее меню в панели номеров страниц Twitter Bootstrap

    Вчера я делал верстку для панели с номерами страниц с использованием Twitter Bootstrap и мне потребовалось добавить туда выпадающее меню (для выбора вариантов сортировки и количества элементов на странице).



    Bootstrap не содержит стандартных стилей для выпадающих меню в панели номеров страниц. Я написал свои стили для выпадающих меню, возможно, кому-то они будут полезны.

    Версия .less (просто подключите вместе с twitter bootstrap)
    Версия .css и пример использования
    Демо



    Пример верстки:
    <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>
    
    Share post
    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More
    Ads

    Comments 23

      –2
      А чего так по-опенсурски недоделано-то? Ну, выровняйте меню по родительскому элементу?
        +2
        Не совсем понял, поясните. пожалуйста.
        Сейчас меню выровнено по правому краю кнопки, открывающей меню.
          –1
          ширина меню по ширине родительского элемента
            +1
            В моем случае, ширина родительского элемента и ширина меню зависят от контента, который будет подставляться динамически. Соответственно, их размеры могут сильно отличаться и выравнивание, на мой взгляд, здесь не очень нужно.

            Думаю, если кому-то потребуется выравнивание, то он сможет легко его добавить.
        +2
        Из-за разделителя кажется, что «по алфавиту» и "↓" — это два разных элемента.
          0
          это и есть 2 разных элемента. при клике на «по алфавиту» будет меняться порядок сортировки на противоположный (ах, да, еще надо добавить туда стрелочку, указывающую порядок сортировки)
        • UFO just landed and posted this here
            0
            Нужно было сделать все именно в панели номеров страниц, т.е. внутри блока с class=«pagination».
            Собственно, верстка почти такая же, как в Split button dropdowns, просто дописал недостающие стили.
            +5
            Pull Request отправили уже?
              0
              Был уже похожий Pull Request, но авторы TB его не приняли :(
              Мой вариант отличается тем, что он не изменяет стандартные файлы TB.
              0
              Реквестирую подробную инструкцию как использовать less в bootstrap. Насчет раздела less, документация там совсем не понятная.
              Я вот так подключил ваш файл
              <link rel="../assets/less/pagination-dropdown.less" rel="stylesheet" type="text/css">
              

              Две точки в начале, так должно быть, у меня ко всем css и js, они стоят.
              Затем скопитастил ваш код, не работает. Меню разложено, а не сложено.
              image
                0
                Извините, я не написал, что это для использования с .less версией bootstrap
                Файлы .less можно подключить при помощи JavaScript или собрать из них CSS (заранее или «на лету»).

                ЗЫ. Постараюсь сегодня сделать CSS-версию.
                  +1
                  Мне css версия не нужна, я просто пытался разобраться как использовать less. Благодаря вам, я уже потихоньку начинаю понимать, думаю, за пару дней разберусь. Мне нужен был толчок.
                    0
                    Добавил в пост ссылку на css-версию и пример использования.
                  0
                  и да, у Вас написано «rel=» вместо «href=»
                  +1
                  Hello, world?
                    0
                    в каком смысле?
                    +1
                    Но позвольте, вы же утратили всю гибкость BootStrap! При уменьшении размеров окна всё скукоживается и куда-то вылазит. Вы неправильно использовали блочную архитектуру.
                      –1
                      Если Вы про общую верстку демо-страницы, то это незаконченный вариант. Не смотрите туда.
                        0
                        Вот вариант, близкий к окончательному thinking-home.ru
                        0
                        А на гитхаб код не выкладывали?
                          0
                          Видел pull request с другим вариантом выпадающего меню (там было не совсем то, что мне нужно, но дело не в этом). В общем, авторы Bootstrap отклонили его с комментарием, что, по их мнению, выпадающие меню в списках страниц в бутстрапе не нужны.
                            0
                            Гм, видимо я избаловался, как-то дико выглядит архив, который надо качать, распаковывать и пр., когда на гитхабе можно сразу поглядеть код и если понравится, сделать git clone… :)

                        Only users with full accounts can post comments. Log in, please.