标签
标签组件通常用来做一些高亮显示用以提醒。使用“.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
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来检测该属性，从而控制警示框的关闭。
例如：
对不起，您输入的密码有误
实现源码如下：
.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基础教程 专题中，欢迎点击学习。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。
以上就是Bootstrap源码解读标签、徽章、缩略图和警示框（8）的详细内容，更多请关注本站其它相关文章！
