Bootstrap源码解读标签、徽章、缩略图和警示框（8）

Bootstrap源码解读标签、徽章、缩略图和警示框（8）

标签

标签组件通常用来做一些高亮显示用以提醒。使用“.label”样式来实现，可以使用span这样的行内标签，例如：标签

实现源码如下：

.label {

display: inline;

padding: .2em .6em .3em;

font-size: 75%;

font-weight: bold;

line-height: 1;

color: #fff;

text-align: center;

white-space: nowrap;

vertical-align: baseline;

border-radius: .25em;

}

也可以使用a标签元素来制作标签，实现源码如下：

a.label:hover,

a.label:focus {

color: #fff;

text-decoration: none;

cursor: pointer;

}

标签内没有内容的时候会被隐藏，实现源码如下：

.label:empty {

display: none;

}

可以追加颜色样式，类名如下：

.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标签来制作，例如：未读消息3

实现源码如下：

.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的网格系统来实现。例如：

...

缩略图的实现源码如下：

.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”的容器，在这个容器中放置其他内容，比如说标题，文本描述，按钮等。例如：

Bootstrap框架是一个优秀的前端框架，快来学习吧！

按钮1

按钮2

...

警示框

基本的警示框

使用在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 错误警示框，背景、边框和文本都是浅红色

例如：

实现源码如下：

.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来检测该属性，从而控制警示框的关闭。

例如：

JIIayEGHj

×

对不起，您输入的密码有误

实现源码如下：

.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”样式给链接提供高亮显示。

例如：

申请成功！

下一步请

验证邮箱

。

实现源码如下：

.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;

}

本文系列教程整理到：Bootstrap基础教程 专题中，欢迎点击学习。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。