欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-03-30 15:57:04
...

四、Bootstrap组件设计

4、Bootstrap分页

    在Bootstrap框架中使用.pagination类来实现分页,答题可分为标准分页方式和翻页分页方式两种。

    标准分页方式

       Bootstrap框架中标准分页方式比较适合App应用搜索结果的展示。通过.pagination类定义一个标准分页组件。    Bootstrap框架学习(四)——Bootstrap组件设计之分页、标签与徽章、进度条、字体

<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类定义一个翻页分页组件。

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

<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类定义一组徽章。

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

<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%。

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

<div class="bs-docs-example">
    <div class="progress">
        <div class="bar" style="width: 80%;"></div>
    </div>
</div>

斜条纹样式进度条

    通过.progress类和.progress-striped类定义了一个斜条纹样式进度条组件,通过.bar类定义了进度条,并设置初始值为50%。

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

<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类,分别设置初始值。

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

<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字体图标