Bootstrap分页，标签，徽章，屏幕，缩略图，警告，进度条，

作者: 墨马 | 来源:发表于2017-09-22 11:46 被阅读86次

Bootstrap分页，标签，徽章，屏幕，缩略图，警告，进度条，
八、bootstrap分页、标签、徽章、巨幕、页头、缩略图、警告
第十五谈：分页和进度条
Bootstrap（ui框架）
Bootstrap组件 - 标签、徽章
#每日技术学习# Bootstrap学习：分页导航、标签、徽章、
前端框架bootstrap-路径分页标签和徽章组件
2018-10-09Bootstrap05
BootStrap[第九章:路径分页标签和徽章组件]
2019-04-12 进度条（15）

分页

分页（Pagination），是一种无序列表，Bootstrap 像处理其他界面元素一样处理分页

class	描述
.pagination	在页面上显示分页
.disabled, .active	通过使用 .disabled 来定义不可点击的链接，通过使用 .active 来指示当前的页面
.pagination-lg, .pagination-sm	获取不同大小的项

<ul class="pagination">
    <li><a href="#">&laquo;</a></li>
    <li class="active"><a href="#">1</a></li>
    <li class="disabled"><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="#">&raquo;</a></li>
</ul>

类	描述
.pager	一个简单的分页链接，链接居中对齐
.previous	.pager 中上一页的按钮样式，左对齐
.next	.pager 中下一页的按钮样式，右对齐

<ul class="pager">
    <li class="previous disabled"><a href="#">&larr; Older</a></li>
    <li class="next"><a href="#">Newer &rarr;</a></li>
</ul>

类	描述
.label label-default	默认的灰色标签
.label label-primary	"primary" 类型的蓝色标签
.label label-success	"success" 类型的绿色标签
.label label-info	"info" 类型的浅蓝色标签
.label label-warning	"warning" 类型的黄色标签
.label label-danger	"danger" 类型的红色标签

<span class="label label-default">默认标签</span>
<span class="label label-primary">主要标签</span>
<span class="label label-success">成功标签</span>
<span class="label label-info">信息标签</span>
<span class="label label-warning">警告标签</span>
<span class="label label-danger">危险标签</span>

徽章

徽章与标签相似，主要的区别在于徽章的边角更加圆滑

<ul class="nav nav-pills">
    <li class="active"><a href="#">消息 <span class="badge">42</span></a></li>    
</ul>

超大屏幕

该组件可以增加标题的大小，并为登陆页面内容添加更多的外边距（margin）

<div class="container">
   <div class="jumbotron">
        <h1>欢迎登陆页面！</h1>
        <p>这是一个超大屏幕（Jumbotron）的实例。</p>
        <p><a class="btn btn-primary btn-lg" role="button">
        学习更多</a>
      </p>
   </div>
</div>

在所有的 .container class 外使用 .jumbotron class可以获得占用全部宽度且不带圆角的超大屏幕

缩略图

需要在网格中布局图像、视频、文本等。Bootstrap 通过缩略图为在网格中布局图像、视频、文本等，提供了一种简便的方式

在图像周围添加带有 class .thumbnail 的 <a> 标签。
这会添加四个像素的内边距（padding）和一个灰色的边框。
当鼠标悬停在图像上时，会动画显示出图像的轮廓。

<div class="row">
    <div class="col-md-3">
        <a href="#" class="thumbnail">
            <img src="/wp-content/uploads/2014/06/kittens.jpg"
                 alt="通用的占位符缩略图">
        </a>
    </div>
</div>

警告

警告（Alerts）向用户提供了一种定义消息样式的方式。它们为典型的用户操作提供了上下文信息反馈

<div class="alert alert-success alert-dismissable">
    <button type="button" class="close" data-dismiss="alert"
            >
        &times;
    </button>
    成功！很好地完成了提交。
</div>
<div class="alert alert-info alert-dismissable">
    <button type="button" class="close" data-dismiss="alert"
            >
        &times;
    </button>
    信息！请注意这个信息。
</div>
<div class="alert alert-warning alert-dismissable">
    <button type="button" class="close" data-dismiss="alert"
            >
        &times;
    </button>
    警告！请不要提交。
</div>
<div class="alert alert-danger alert-dismissable">
    <button type="button" class="close" data-dismiss="alert"
            >
        &times;
    </button>
    错误！请进行一些更改。
</div>

进度条

添加一个带有 class .progress 的 <div>。
在上面的 <div> 内，添加一个带有 class .progress-bar 的空的 <div>。
添加一个带有百分比表示的宽度的 style 属性，例如 style="60%"; 表示进度条在 60% 的位置
默认进度条

<div class="progress">
    <div class="progress-bar" role="progressbar" aria-valuenow="60" 
        aria-valuemin="0" aria-valuemax="100" style="width: 40%;">
        <span class="sr-only">40% 完成</span>
    </div>
</div>

带条纹的进度条

添加一个带有 class .progress 和 .progress-striped 的 <div>
在上面的 <div> 内，添加一个带有 class .progress-bar 和 class progress-bar-* 的空的 <div>。其中，* 可以是 success、info、warning、danger

<div class="progress progress-striped">
    <div class="progress-bar progress-bar-success" role="progressbar"
         aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
         style="width: 90%;">
        <span class="sr-only">90% 完成（成功）</span>
    </div>
</div>
<div class="progress progress-striped">
    <div class="progress-bar progress-bar-info" role="progressbar"
         aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
         style="width: 30%;">
        <span class="sr-only">30% 完成（信息）</span>
    </div>
</div>
<div class="progress progress-striped">
    <div class="progress-bar progress-bar-warning" role="progressbar"
         aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
         style="width: 20%;">
        <span class="sr-only">20% 完成（警告）</span>
    </div>
</div>
<div class="progress progress-striped">
    <div class="progress-bar progress-bar-danger" role="progressbar"
         aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
         style="width: 10%;">
        <span class="sr-only">10% 完成（危险）</span>
    </div>
</div>

动画的进度条

添加一个带有 class .progress 和 .progress-striped 的 <div>。同时添加 class .active

<div class="progress progress-striped active">
    <div class="progress-bar progress-bar-success" role="progressbar"
         aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
         style="width: 40%;">
        <span class="sr-only">40% 完成</span>
    </div>
</div>

堆叠的进度条

把多个进度条放在相同的 .progress 中即可实现堆叠

<div class="progress">
    <div class="progress-bar progress-bar-success" role="progressbar"
         aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
         style="width: 40%;">
        <span class="sr-only">40% 完成</span>
    </div>
    <div class="progress-bar progress-bar-info" role="progressbar"
         aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
         style="width: 30%;">
        <span class="sr-only">30% 完成（信息）</span>
    </div>
    <div class="progress-bar progress-bar-warning" role="progressbar"
         aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
         style="width: 20%;">
        <span class="sr-only">20% 完成（警告）</span>
    </div>
</div>

多媒体对象

在组件中使用图文混排，图像可以左对齐或者右对齐。媒体对象可以用更少的代码来实现媒体对象与文字的混排

.media：该 class 允许将媒体对象里的多媒体（图像、视频、音频）浮动到内容区块的左边或者右边。
.media-list：如果你需要一个列表，各项内容是无序列表的一部分，可以使用该 class。可用于评论列表与文章列表

<ul class="media-list">
    <li class="media">
        <a class="media-left" href="#">
            <img class="media-object" src="/wp-content/uploads/2014/06/64.jpg"
                 alt="通用的占位符图像">
        </a>
        <div class="media-body">
            <h4 class="media-heading">媒体标题</h4>
            <p>这是一些示例文本。这是一些示例文本。
                这是一些示例文本。这是一些示例文本。
                这是一些示例文本。这是一些示例文本。
                这是一些示例文本。这是一些示例文本。
                这是一些示例文本。这是一些示例文本。</p>
            <!-- 嵌套的媒体对象 -->
            <div class="media">
                <a class="media-left" href="#">
                    <img class="media-object" src="/wp-content/uploads/2014/06/64.jpg"
                         alt="通用的占位符图像">
                </a>
                <div class="media-body">
                    <h4 class="media-heading">嵌套的媒体标题</h4>
                    这是一些示例文本。这是一些示例文本。
                    这是一些示例文本。这是一些示例文本。
                    这是一些示例文本。这是一些示例文本。
                    这是一些示例文本。这是一些示例文本。
                    这是一些示例文本。这是一些示例文本。
                    <!-- 嵌套的媒体对象 -->
                    <div class="media">
                        <a class="media-left" href="#">
                            <img class="media-object" src="/wp-content/uploads/2014/06/64.jpg"
                                 alt="通用的占位符图像">
                        </a>
                        <div class="media-body">
                            <h4 class="media-heading">嵌套的媒体标题</h4>
                            这是一些示例文本。这是一些示例文本。
                            这是一些示例文本。这是一些示例文本。
                            这是一些示例文本。这是一些示例文本。
                            这是一些示例文本。这是一些示例文本。
                            这是一些示例文本。这是一些示例文本。
                        </div>
                    </div>
                </div>
            </div>
            <!-- 嵌套的媒体对象 -->
            <div class="media">
                <a class="media-left" href="#">
                    <img class="media-object" src="/wp-content/uploads/2014/06/64.jpg"
                         alt="通用的占位符图像">
                </a>
                <div class="media-body">
                    <h4 class="media-heading">嵌套的媒体标题</h4>
                    这是一些示例文本。这是一些示例文本。
                    这是一些示例文本。这是一些示例文本。
                    这是一些示例文本。这是一些示例文本。
                    这是一些示例文本。这是一些示例文本。
                    这是一些示例文本。这是一些示例文本。
                </div>
            </div>
        </div>
    </li>
    <li class="media">
        <a class="pull-right" href="#">
            <img class="media-object" src="/wp-content/uploads/2014/06/64.jpg"
                 alt="通用的占位符图像">
        </a>
        <div class="media-body">
            <h4 class="media-heading">媒体标题</h4>
            这是一些示例文本。这是一些示例文本。
            这是一些示例文本。这是一些示例文本。
            这是一些示例文本。这是一些示例文本。
            这是一些示例文本。这是一些示例文本。
            这是一些示例文本。这是一些示例文本。
        </div>
    </li>
</ul>

列表组

列表组件用于以列表形式呈现复杂的和自定义的内容

向元素 <ul> 添加 class .list-group。
向 <li> 添加 class .list-group-item。
可以向任意的列表项添加徽章组件，它会自动定位到右边。只需要在 <li> 元素中添加 <span class="badge"> 即可

<ul class="list-group">
    <li class="list-group-item">免费域名注册</li>
    <li class="list-group-item">免费 Window 空间托管</li>
    <li class="list-group-item">图像的数量</li>
    <li class="list-group-item">
        <span class="badge">新</span>
        24*7 支持
    </li>
    <li class="list-group-item">每年更新成本</li>
    <li class="list-group-item">
        <span class="badge">新</span>
        折扣优惠
    </li>
</ul>

我们可以向上面已添加链接的列表组添加任意的 HTML 内容

<div class="list-group">
    <a href="#" class="list-group-item active">
        <h4 class="list-group-item-heading">
            入门网站包
        </h4>
    </a>
    <a href="#" class="list-group-item">
        <h4 class="list-group-item-heading">
            免费域名注册
        </h4>
        <p class="list-group-item-text">
            您将通过网页进行免费域名注册。
        </p>
    </a>
</div>

面板

面板组件用于把 DOM 组件插入到一个盒子中
基本面板

<div class="panel panel-default">
     <div class="panel-heading">
        <h3 class="panel-title">
            带有 title 的面板标题
        </h3>
    </div>
    <div class="panel-body">
        这是一个基本的面板
    </div>
    <div class="panel-footer">面板脚注</div>
</div>

带语境色彩的面板

<div class="panel panel-primary">
    <div class="panel-heading">
        <h3 class="panel-title">面板标题</h3>
    </div>
    <div class="panel-body">
        这是一个基本的面板
    </div>
</div>
<div class="panel panel-success">
    <div class="panel-heading">
        <h3 class="panel-title">面板标题</h3>
    </div>
    <div class="panel-body">
        这是一个基本的面板
    </div>
</div>
<div class="panel panel-info">
    <div class="panel-heading">
        <h3 class="panel-title">面板标题</h3>
    </div>
    <div class="panel-body">
        这是一个基本的面板
    </div>
</div>
<div class="panel panel-warning">
    <div class="panel-heading">
        <h3 class="panel-title">面板标题</h3>
    </div>
    <div class="panel-body">
        这是一个基本的面板
    </div>
</div>
<div class="panel panel-danger">
    <div class="panel-heading">
        <h3 class="panel-title">面板标题</h3>
    </div>
    <div class="panel-body">
        这是一个基本的面板
    </div>
</div>

带表格的列表

<div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title">面板标题</h3>
    </div>
    <div class="panel-body">
        这是一个基本的面板
    </div>
    <table class="table">
        <th>产品</th><th>价格 </th>
        <tr><td>产品 A</td><td>200</td></tr>
        <tr><td>产品 B</td><td>400</td></tr>
    </table>
</div>

带列表的面板

<div class="panel panel-default">
    <div class="panel-heading">面板标题</div>
    <div class="panel-body">
        <p>这是一个基本的面板内容。这是一个基本的面板内容。
            这是一个基本的面板内容。这是一个基本的面板内容。
            这是一个基本的面板内容。这是一个基本的面板内容。
            这是一个基本的面板内容。这是一个基本的面板内容。
        </p>
    </div>
    <ul class="list-group">
        <li class="list-group-item">免费域名注册</li>
        <li class="list-group-item">免费 Window 空间托管</li>
        <li class="list-group-item">图像的数量</li>
        <li class="list-group-item">24*7 支持</li>
        <li class="list-group-item">每年更新成本</li>
    </ul>
</div>

Well

Well 是一种会引起内容凹陷显示或插图效果的容器 <div>

<div class="well well-lg">您好，我在大的 Well 中！</div>
<div class="well well-sm">您好，我在小的 Well 中！</div>

Bootstrap分页，标签，徽章，屏幕，缩略图，警告，进度条，
分页分页（Pagination），是一种无序列表，Bootstrap 像处理其他界面元素一样处理分页标签标签...
八、bootstrap分页、标签、徽章、巨幕、页头、缩略图、警告
知识点： 1、分页2、标签3、徽章4、巨幕5、页头6、缩略图7、警告框 1、分页 1）默认的分页 2）禁用和激活状...
第十五谈：分页和进度条
本节课我们来开始学习 Bootstrap 的提供的分页和进度条功能。一．分页通过.pagination 和.p...
Bootstrap（ui框架）
✍目录总览：（布局容器、栅格网格系统、排版、表单、缩略图、导航元素、分页、插件） 1、Bootstrap 1.1、...
Bootstrap组件 - 标签、徽章
知识点标签给标签添加class .label、.label-default 可用的变体：.label-defau...
#每日技术学习# Bootstrap学习：分页导航、标签、徽章、
Date | 2018-11-02 一、分页导航分页导航几乎在哪个网站都可见。好的分页导航能给用户带来更好的用户...
前端框架bootstrap-路径分页标签和徽章组件
一.路径组件例子效果图二、分页组件例子效果图三、翻页例子效果图四、徽章例子效果图五、激活状...
2018-10-09Bootstrap05
Bootstrap 分页本章将讲解 Bootstrap 支持的分页特性。分页（Pagination），是一种无序...
BootStrap[第九章:路径分页标签和徽章组件]
一．路径组件路径组件也叫做面包屑导航。二．分页组件分页组件可以提供带有展示页面的功能。三．标签四．徽章
2019-04-12 进度条（15）
使用 Bootstrap 创建加载、重定向或动作状态的进度条。 Bootstrap 进度条使用 CSS3 过渡和动...