Bootstrap вкладки
Эта глава описывает функции, поддерживаемые вкладке Bootstrap. Пейджинга (Разбивка), представляет собой неупорядоченный список, Bootstrap рассматриваться как другие элементы интерфейса, как ручки подкачки.
Пейджинга (Разбивка)
В следующей таблице перечислены Bootstrap обеспечивают класс обработки поискового вызова.
| Class | 描述 | 示例代码 |
|---|---|---|
| .pagination | 添加该 class 来在页面上显示分页。 |
<ul class="pagination"> <li><a href="#">«</a></li> <li><a href="#">1</a></li> ....... </ul> |
| .disabled, .active | 您可以自定义链接，通过使用.disabled来定义不可点击的链接，通过使用.active来指示当前的页面。 |
<ul class="pagination"> <li class="disabled"><a href="#">«</a></li> <li class="active"><a href="#">1<span class="sr-only">(current)</span></a></li> ....... </ul> |
| .pagination-lg, .pagination-sm | 使用这些 class 来获取不同大小的项。 |
<ul class="pagination pagination-lg">...</ul> <ul class="pagination">...</ul> <ul class="pagination pagination-sm">...</ul> |
Вкладка по умолчанию
Следующий пример демонстрирует класс таблицы обсуждается использование.pagination:
примеров
Попробуйте »
Результаты следующие:
статус оповещения по громкой связи
Следующий пример демонстрируеткласс .disabled описано выше таблице, .activeиспользование:
примеров
Попробуйте »
Результаты следующие:
размер страницы
В следующем примере демонстрируется таблица класса обсуждаются.pagination- * Использование:
примеров
Попробуйте »
Результаты следующие:
Флип (Пейджер)
Если вы хотите создать простой ссылки страницы, чтобы предоставить пользователям перемещаться по странице, чтобы достичь. И пейджинговой ссылки в виде неупорядоченного списка флип. По умолчанию, ссылки по центру. В следующей таблице перечислены класс обработки флип-Bootstrap.
| Class | 描述 | 示例代码 |
|---|---|---|
| .pager | 添加该 class 来获得翻页链接。 |
<ul class="pager"> <li><a href="#">Previous</a></li> <li><a href="#">Next</a></li> </ul> |
| .previous, .next | 使用 class.previous把链接向左对齐，使用.next把链接向右对齐。 |
<ul class="pager"> <li class="previous"><a href="#">← Older</a></li> <li class="next"><a href="#">Newer →</a></li> </ul> |
| .disabled | 添加该 class 来获得一个颜色变淡的外观。 |
<ul class="pager"> <li class="previous disabled"><a href="#">← Older</a></li> <li class="next"><a href="#">Newer →</a></li> </ul> |
страница по умолчанию
Следующий пример демонстрирует таблицу класса.pager обсуждается использование:
примеров
Попробуйте »
Результаты следующие:
Унифицированные ссылки
Следующий пример демонстрируеткласс .previous описанный выше таблицы,использование.next:
примеров
Попробуйте »
Результаты следующие:
Флип состояние
В следующем примере демонстрируется таблица классов обсуждали.disabled использование:
примеров
Попробуйте »
Результаты следующие:
Другие примеры пагинацией
| категория | описание | примеров |
|---|---|---|
| .pager | Простой пагинации ссылки, ссылки по центру. | пробовать |
| .previous | .pager предыдущей стиль кнопки, выравнивание по левому краю | пробовать |
| .next | .pager кнопка Далее стиль, выравнивание по правому краю | пробовать |
| .disabled | Отключить ссылку | пробовать |
| .pagination | Пейджинговые ссылки | пробовать |
| .pagination-Л.Г. | Большие ссылки поискового вызова | пробовать |
| .pagination-см | Меньший размер страничных ссылок | пробовать |
| .disabled | Отключить ссылку | пробовать |
| .active | Текущий доступ стиль страницы ссылка | пробовать |