Bootstrap框架学习(四）——Bootstrap组件设计之分页、标签与徽章、进度条、字体

四、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>

7、Glyphicons字体图标