bootstrap(6)分页，翻页，徽章效果

一 : 分页效果

我们可以看到在网站上的翻页效果如下：

使用bootstrap如何实现的呢？

代码如下：

<nav aria-label="Page navigation">
    <ul class="pagination">
        <li>
            <a href="#" aria-label="Previous">
                <span aria-hidden="true">«</span>
            </a>
        </li>
        <li><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="#">5</a></li>
        <li>
            <a href="#" aria-label="Next">
                <span aria-hidden="true">»</span>
            </a>
        </li>
    </ul>
</nav>

　分析以上代码：

我们可以知道，实现分页我们通过 ul>li>a的结构来实现的，我们通过对ul添加class为pagination来实现的分页效果  　通过ul>li>a>span来实现的上一页和下一页的功能

对于li元素：我们如果想显示当前的页码，通过对于相应的li元素上添加class为 active来实现的，

同样，如果我们想禁用特定的按钮，我们可以对相应的li元素上添加class为disabled类来实现的

在代码中的  aria-label的作用是进行说明的作用

对于nav元素：我们还需要在ul外面添加一个<nav>标签元素，里面的aria-label可以用来说明是哪儿的标签

对于ul元素：我们可以通过在ul元素上添加

.pagination-lg或者 .pagination-sm来实现分页栏的大小改变

对于

<nav  aria-label=""><ul class="pagination pagination-lg"></ul>......</nav>
<nav aria-label=""><ul  class="pagination  "></ul></nav>
<nav aria-label=""><ul  class="pagination  pagiantion-sm"></ul></nav>　　

效果如下：　　

二：实现翻页效果

1如果我们不想要中间的页码，而只是想要上一页和下一页，我们可以这样设置代码：

<ul class="pager">
    <li><a href="#">Previous</a></li>
    <li><a href="#">Next</a></li>
  </ul>

　这个默认的翻页效果实现的是居中的效果

2实现对齐效果我们可以把链接向两端对齐

通过添加class为previous或者 class="next"来实现的

 <ul class="pager">
    <li class="previous"><a href="#"><span aria-hidden="true">←</span> Older</a></li>
    <li class="next"><a href="#">Newer <span aria-hidden="true">→</span></a></li>
  </ul>　　

三：实现徽章

我们通过给链接，导航等元素嵌套  <span  class="badge">元素来展示未读的信息条目

例如：

<a  href=#>Inbox<span  class="badge">42</span></a>
<button  class="btn btn-primary  type="button">
      Messages<span  class="badge">4</span>
</button>　　

效果如下：

四：缩略图

缩略图是结合栅格系统来实现的，代码结构如下

<div class="row">
  <div class="col-xs-6 col-md-3">
    <a href="#" class="thumbnail">
      <img src="..." alt="...">
    </a>
  </div>
  ...
</div>　　

 给缩略图中定义的内容加上一个父元素，添加父元素的class为 thumbnail

在缩略图中的内容全部包裹在这个父元素之内

缩略图就是定义在bootstrap中的栅格系统中

五：警告框

1，对于普通警告框，我们通过定义  .alert 类来提示这是一个警告框

  代码如下：

<div  class="alert"  role="alert">....</div>

2,对于显示信息的警告框

我们通过：

alert-success

alert-info

alert-warning

alert-danger

例如：

如下代码：

<div class="alert alert-success" role="alert">...</div>
<div class="alert alert-info" role="alert">...</div>
<div class="alert alert-warning" role="alert">...</div>
<div class="alert alert-danger" role="alert">...</div>

　　

上面是alert-success的警告框

3，可关闭的警告框

我们要实现警告框可关闭的功能，代码如下：

<div class="alert alert-warning alert-dismissible" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
  <strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>

　　我们需要给警告框添加一个可选的  .alert-dismissable类和一个关闭按钮

注意关闭按钮：下面是我进行的实验，探索按钮不同部分的功能

1. class="close"表明这是一个关闭按钮，缺少了这个按钮会移向右边
2. data-dismiss="alert"表明这是为警告框进行关闭的按钮  上面这两个是必须的
3. aria-label仅仅作为说明，这是一个close选项

最终效果如下：

点击叉号警告块会消失

4，警告框中的链接

使用 .alert-link类可以实现设置与当前警告框相符的链接颜色

代码如下：

<div  class="alert alert-success"  role=“alert”> 
        <a  href="#"  class="alert-link"></a>
</div>　　

 效果如下：