Bootstrap源码解读（第八弹：标签、徽章、缩略图和警示框）

最新推荐文章于 2023-05-01 22:04:47 发布

艺术就是爆炸

最新推荐文章于 2023-05-01 22:04:47 发布

阅读量1k

点赞数 1

分类专栏： Bootstrap 文章标签： bootstrap 标签徽章缩略图警示框

本文链接：https://blog.csdn.net/lianjiww/article/details/53840934

版权

Bootstrap 专栏收录该内容

13 篇文章 2 订阅

订阅专栏

可以追加颜色样式，类名如下：
.label-deafult:默认标签，深灰色
.label-primary：主要标签，深蓝色
.label-success：成功标签，绿色
.label-info：信息标签，浅蓝色
.label-warning：警告标签，橙色
.label-danger：错误标签，红色
实现代码如下：

.label-default {
  background-color: #777;
}
.label-default[href]:hover,
.label-default[href]:focus {
  background-color: #5e5e5e;
}
.label-primary {
  background-color: #428bca;
}
.label-primary[href]:hover,
.label-primary[href]:focus {
  background-color: #3071a9;
}
.label-success {
  background-color: #5cb85c;
}
.label-success[href]:hover,
.label-success[href]:focus {
  background-color: #449d44;
}
.label-info {
  background-color: #5bc0de;
}
.label-info[href]:hover,
.label-info[href]:focus {
  background-color: #31b0d5;
}
.label-warning {
  background-color: #f0ad4e;
}
.label-warning[href]:hover,
.label-warning[href]:focus {
  background-color: #ec971f;
}
.label-danger {
  background-color: #d9534f;
}
.label-danger[href]:hover,
.label-danger[href]:focus {
  background-color: #c9302c;
}

徽章

徽章效果也是用来做一些提示信息使用，比如显示有几条未读消息。使用“.badge”样式来实现。可以使用span标签来制作，例如：<a href="#">未读消息<span class="badge">3</span></a>
实现源码如下：

.badge {
  display: inline-block;
  min-width: 10px;
  padding: 3px 7px;
  font-size: 12px;
  font-weight: bold;
  line-height: 1;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  background-color: #777;
  border-radius: 10px;
}

当没有内容的时候隐藏，实现源码如下：

.badge:empty {
  display: none;
}

徽章可以与按钮或者导航之类配合使用，实现源码如下：

.btn .badge {
  position: relative;
  top: -1px;
}
.btn-xs .badge {
  top: 0;
  padding: 1px 5px;
}
a.badge:hover,
a.badge:focus {
  color: #fff;
  text-decoration: none;
  cursor: pointer;
}
a.list-group-item.active > .badge,
.nav-pills > .active > a > .badge {
  color: #428bca;
  background-color: #fff;
}
.nav-pills > li > a > .badge {
  margin-left: 3px;
}

缩略图

简单缩略图

通过“thumbnail”样式配合bootstrap的网格系统来实现。例如：

<div class="container">
    <div class="row">
        <div class="col-md-3">
            <a href="#" class="thumbnail">
                <img alt="100%x180" src="http://placehold.it/350x150" style="height: 180px; width: 100%; display: block;" >
            </a>
        </div>
        ...
    </div>
</div>

缩略图的实现源码如下：

.thumbnail {
  display: block;
  padding: 4px;
  margin-bottom: 20px;
  line-height: 1.42857143;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  -webkit-transition: border .2s ease-in-out;
       -o-transition: border .2s ease-in-out;
          transition: border .2s ease-in-out;
}
.thumbnail > img,
.thumbnail a > img {
  margin-right: auto;
  margin-left: auto;
}
a.thumbnail:hover,
a.thumbnail:focus,
a.thumbnail.active {
  border-color: #428bca;
}
.thumbnail .caption {
  padding: 9px;
  color: #333;
}

复杂缩略图

还可以配合标题、描述内容，按钮来制作复杂的缩略图。在缩略图的基础上，添加一个div名为“caption”的容器，在这个容器中放置其他内容，比如说标题，文本描述，按钮等。例如：

<div class="container">
    <div class="row">
        <div class="col-md-3">
            <a href="#" class="thumbnail">
                <img src="http://placehold.it/350x150" style="height: 180px; width: 100%; display: block;" alt="">
            </a>
            <div class="caption">
                <h3>Bootstrap</h3>
                <p>Bootstrap框架是一个优秀的前端框架，快来学习吧！</p>
                <p>
                    <a href="##" class="btn btn-primary">按钮1</a>
                    <a href="##" class="btn btn-info">按钮2</a>
                </p>
            </div>
        </div>
        ...
    </div>
</div>

警示框

基本的警示框

使用在div上使用“alert“样式来实现警示框效果。
实现源码如下：

.alert {
  padding: 15px;
  margin-bottom: 20px;
  border: 1px solid transparent;
  border-radius: 4px;
}
.alert h4 {
  margin-top: 0;
  color: inherit;
}
.alert .alert-link {
  font-weight: bold;
}
.alert > p,
.alert > ul {
  margin-bottom: 0;
}
.alert > p + p {
  margin-top: 5px;
}

可以追加类名来实现不同的警示框效果：
1. .alert-success 成功警示框，背景、边框和文本都是绿色
2. .alert-info 信息警示框，背景、边框和文本都是浅蓝色
3. .alert-warning 警告警示框，背景、边框、文本都是浅黄色
4. .alert-danger 错误警示框，背景、边框和文本都是浅红色
例如：<div class="alert alert-danger" role="alert">对不起，您输入的密码有误</div>
实现源码如下：

.alert-success {
  color: #3c763d;
  background-color: #dff0d8;
  border-color: #d6e9c6;
}
.alert-success hr {
  border-top-color: #c9e2b3;
}
.alert-success .alert-link {
  color: #2b542c;
}
.alert-info {
  color: #31708f;
  background-color: #d9edf7;
  border-color: #bce8f1;
}
.alert-info hr {
  border-top-color: #a6e1ec;
}
.alert-info .alert-link {
  color: #245269;
}
.alert-warning {
  color: #8a6d3b;
  background-color: #fcf8e3;
  border-color: #faebcc;
}
.alert-warning hr {
  border-top-color: #f7e1b5;
}
.alert-warning .alert-link {
  color: #66512c;
}
.alert-danger {
  color: #a94442;
  background-color: #f2dede;
  border-color: #ebccd1;
}
.alert-danger hr {
  border-top-color: #e4b9c0;
}
.alert-danger .alert-link {
  color: #843534;
}

可关闭的警示框

使用方法如下：
1. 在基本警示框“alert”的基础上添加“alert-dismissable”样式。
2. 在警示框内加入一个按钮。
3. 在这个button标签中加入class=”close”类，实现警示框关闭按钮的样式。
4. 关闭按钮元素上设置自定义属性：“data-dismiss=”alert”。因为可关闭警示框需要借助于Javascript来检测该属性，从而控制警示框的关闭。
例如：

<div class="alert alert-danger alert-dismissable" role="alert">
    <button class="close" type="button" data-dismiss="alert">&times;</button>
    对不起，您输入的密码有误
</div>

实现源码如下：

.alert-dismissable,
.alert-dismissible {
  padding-right: 35px;
}
.alert-dismissable .close,
.alert-dismissible .close {
  position: relative;
  top: -2px;
  right: -21px;
  color: inherit;
}

警示框的链接

给警示框加的链接添加“alert-link”的类名，通过“alert-link”样式给链接提供高亮显示。
例如：

<div class="alert alert-success" role="alert">
    <strong>申请成功！</strong>
    下一步请
    <a href="#" class="alert-link">验证邮箱</a>
    。
</div>

实现源码如下：

.alert .alert-link {
  font-weight: bold;
}
.alert-success .alert-link {
  color: #2b542c;
}
.alert-info .alert-link {
  color: #245269;
}
.alert-warning .alert-link {
  color: #66512c;
}
.alert-danger .alert-link {
  color: #843534;
}

艺术就是爆炸

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap源码解读（第八弹：标签、徽章、缩略图和警示框）

标签标签组件通常用来做一些高亮显示用以提醒。使用“.label”样式来实现，可以使用span这样的行内标签，例如：<span class="label">标签</span> 实现源码如下：.label { display: inline; padding: .2em .6em .3em; font-size: 75%; font-weight: bold; line-heigh
复制链接

扫一扫