地方网站运营方案,网站设计收费,商丘做网站公司,长沙民企人才网前面的话 分页导航几乎在每个网站都可见#xff0c;好的分页能给用户带来好的用户体验。本文将详细介绍Bootstrap分页 概述 在Bootstrap框架中提供了两种分页导航#xff1a; ☑ 带页码的分页导航 ☑ 带翻页的分页导航 页码分页 带页码的分页导航#xff0c;可能是最常见…前面的话 分页导航几乎在每个网站都可见好的分页能给用户带来好的用户体验。本文将详细介绍Bootstrap分页 概述 在Bootstrap框架中提供了两种分页导航 ☑ 带页码的分页导航 ☑ 带翻页的分页导航 页码分页 带页码的分页导航可能是最常见的一种分页导航特别是在列表页内容超多的时候会给用户提供分页的导航方式
【默认分页】 平时很多人喜欢用
diva和
divspan结构来制作带页码的分页导航。不过在Bootstrap框架中使用的是
ullia这样的结构在ul标签上加入pagination方法nav aria-labelPage navigation
ul classpagination
li
a href# aria-labelPrevious
span aria-hiddentruelaquo;/span
/a
/li
lia href#1/a/li
lia href#2/a/li
lia href#3/a/li
lia href#4/a/li
lia href#5/a/li
li
a href# aria-labelNext
span aria-hiddentrueraquo;/span
/a
/li
/ul
/nav stylewidth: 100%; height: 110px; srchttps://demo.xiaohuochai.site/bootstrap/page/p1.html frameborder0 width320 height240
【状态】 链接在不同情况下可以定制。可以给不能点击的链接添加
.disabled 类、给当前页添加
.active 类最好将 active 或 disabled 状态的链接即
a 标签替换为
span 标签或者在向前/向后的箭头处省略
a 标签这样就可以让其保持需要的样式而不能被点击nav aria-labelPage navigation
ul classpagination
li classdisabled
span aria-labelPrevious
span aria-hiddentruelaquo;/span
/span
/li
li classactivespan1/span/li
lia href#2/a/li
lia href#3/a/li
lia href#4/a/li
lia href#5/a/li
li
a href# aria-labelNext
span aria-hiddentrueraquo;/span
/a
/li
/ul
/nav stylewidth: 100%; height: 110px; srchttps://demo.xiaohuochai.site/bootstrap/page/p2.html frameborder0 width320 height240
【尺寸】 在Bootstrap框架中可以通过两种不同的情况来设置其大小类似于按钮一样 1、通过“pagination-lg”让分页导航变大 2、通过“pagination-sm”让分页导航变小 nav aria-labelPage navigation
ul classpagination pagination-lg
li
a href# aria-labelPrevious
span aria-hiddentruelaquo;/span
/a
/li
lia href#1/a/li
lia href#2/a/li
lia href#3/a/li
lia href#4/a/li
lia href#5/a/li
li
a href# aria-labelNext
span aria-hiddentrueraquo;/span
/a
/li
/ul
/nav
nav aria-labelPage navigation
ul classpagination
li
a href# aria-labelPrevious
span aria-hiddentruelaquo;/span
/a
/li
lia href#1/a/li
lia href#2/a/li
lia href#3/a/li
lia href#4/a/li
lia href#5/a/li
li
a href# aria-labelNext
span aria-hiddentrueraquo;/span
/a
/li
/ul
/nav
nav aria-labelPage navigation
ul classpagination pagination-sm
li
a href# aria-labelPrevious
span aria-hiddentruelaquo;/span
/a
/li
lia href#1/a/li
lia href#2/a/li
lia href#3/a/li
lia href#4/a/li
lia href#5/a/li
li
a href# aria-labelNext
span aria-hiddentrueraquo;/span
/a
/li
/ul
/nav stylewidth: 100%; height: 275px; srchttps://demo.xiaohuochai.site/bootstrap/page/p3.html frameborder0 width320 height240 翻页 Bootstrap框架除了提供带页码的分页导航之外还提供了翻页导航。这种分页导航常常在一些简单的网站上看到比如说个人博客杂志网站等。这种分页导航是看不到具体的页码只会提供一个“上一页”和“下一页”的按钮
【默认用法】 在实际使用中翻页分页导航和带页码的分页导航类似为ul标签加入
pager类ul classpager
lia href#laquo;上一页/a/li
lia href#下一页raquo;/a/li
/ul stylewidth: 100%; height: 72px; srchttps://demo.xiaohuochai.site/bootstrap/page/p4.html frameborder0 width320 height240
【对齐设置】 默认情况之下翻页分页导航是居中显示但有的时候我们需要一个居左一个居右。Bootstrap框架提供了两个样式 ☑ previous让“上一步”按钮居左 ☑ next让“下一步”按钮居右 具体使用的时候只需要在
li标签上添加对应类名即可实现原理很简单就是一个进行了左浮动一个进行了右浮动 .pager .next a,
.pager .next span {
float: right;
}
.pager .previous a,
.pager .previous span {
float: left;
} ul classpager
li classpreviousa href#larr;上一页/a/li
li classnexta href#下一页rarr;/a/li
/ul stylewidth: 100%; height: 72px; srchttps://demo.xiaohuochai.site/bootstrap/page/p5.html frameborder0 width320 height240
【状态设置】 和带页码分页导航一样如果在li标签上添加了disabled类名的时候分页按钮处于禁用状态但同样不能禁止其点击功能。可以通过js来处理或将
a标签换成
span标签.pager .disabled a,
.pager .disabled a:hover,
.pager .disabled a:focus,
.pager .disabled span {
color: #999;
cursor: not-allowed;
background-color: #fff;
} ul classpager
li classdisabledspanlaquo;上一页/span/li
lia href#下一页raquo;/a/li
/ul stylewidth: 100%; height: 72px; srchttps://demo.xiaohuochai.site/bootstrap/page/p6.html frameborder0 width320 height240
