四、Bootstrap组件设计
4、Bootstrap分页
在Bootstrap框架中使用.pagination类来实现分页,答题可分为标准分页方式和翻页分页方式两种。
标准分页方式
Bootstrap框架中标准分页方式比较适合App应用搜索结果的展示。通过.pagination类定义一个标准分页组件。
<div class="container"> <section id="global"> <div class="page-header"> <h3>Bootstrap组件 - 标准分页方式</h3> </div> </section> <div class="bs-docs-example"> <div class="pagination"> <ul> <li><a href="#">«</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="#">6</a></li> <li><a href="#">7</a></li> <li><a href="#">8</a></li> <li><a href="#">9</a></li> <li><a href="#">»</a></li> </ul> </div> </div>
翻页分页方式
通过.pager类定义一个翻页分页组件。
<div class="bs-docs-example"> <div class="bs-docs-example"> <ul class="pager"> <li><a href="#">前一页</a></li> <li><a href="#">后一页</a></li> </ul> </div> </div>
5、Bootstrap标签与徽章
在Bootstrap框架中通过.label类定义一组标签,通过.badge类定义一组徽章。
<div class="bs-docs-example"> <span>标签:</span> <span class="label">默认样式</span> <span class="label label-success">成功</span> <span class="label label-warning">警告</span> <span class="label label-important">重要</span> <span class="label label-info">信息</span> <span class="label label-inverse">反色</span> <br><br><br> <span>徽章:</span> <span class="badge">1</span> <span class="badge badge-success">2</span> <span class="badge badge-warning">4</span> <span class="badge badge-important">6</span> <span class="badge badge-info">8</span> <span class="badge badge-inverse">10</span> </div>
6、Bootstrap进度条
Bootstrap框架中的进度条,用于战术加载、跳转或动作正在执行中的状态。
基本样式进度条
通过.progress类定义了一个进度条组件,通过.bar类定义了进度条,并设置初始值为80%。<div class="bs-docs-example"> <div class="progress"> <div class="bar" style="width: 80%;"></div> </div> </div>
斜条纹样式进度条
通过.progress类和.progress-striped类定义了一个斜条纹样式进度条组件,通过.bar类定义了进度条,并设置初始值为50%。
<div class="bs-docs-example"> <div class="progress progress-striped"> <div class="bar" style="width: 50%;"></div> </div> </div>
堆叠样式进度条
通过.progress类定义一个堆叠样式进度条组件,通过.bar类定义三个进度条,分别使用了.bar-success类、.bar-warning类和.bar-danger类,分别设置初始值。
<div class="bs-docs-example"> <div class="progress"> <div class="bar bar-success" style="width: 50%"></div> <div class="bar bar-warning" style="width: 25%"></div> <div class="bar bar-danger" style="width: 15%"></div> </div> </div>