Bootstrap源码解读标签、徽章、缩略图和警示框（8）
标签
标签组件通常用来做一些高亮显示用以提醒。使用“.label”样式来实现，可以使用span这样的行内标签，例如：<spanclass="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标签来制作，例如：<ahref="#">未读消息<spanclass="badge">3</span></a>
实现源码如下：
.badge{
display:inline-block;
min-width:10px;
padding:3px7px;
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:1px5px;
}
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的网格系统来实现。例如：
<divclass="container"> <divclass="row"> <divclass="col-md-3"> <ahref="#"class="thumbnail"> <imgalt="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:1pxsolid#ddd;
border-radius:4px;
-webkit-transition:border.2sease-in-out;
-o-transition:border.2sease-in-out;
transition:border.2sease-in-out;
}
.thumbnail>img,
.thumbnaila>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”的容器，在这个容器中放置其他内容，比如说标题，文本描述，按钮等。例如：
<divclass="container"> <divclass="row"> <divclass="col-md-3"> <ahref="#"class="thumbnail"> <imgsrc="http://placehold.it/350x150"style="height:180px;width:100%;display:block;"alt=""> </a> <divclass="caption"> <h3>Bootstrap</h3> <p>Bootstrap框架是一个优秀的前端框架，快来学习吧！</p> <p> <ahref="##"class="btnbtn-primary">按钮1</a> <ahref="##"class="btnbtn-info">按钮2</a> </p> </div> </div> ... </div> </div>
警示框
基本的警示框
使用在div上使用“alert“样式来实现警示框效果。
实现源码如下：
.alert{
padding:15px;
margin-bottom:20px;
border:1pxsolidtransparent;
border-radius:4px;
}
.alerth4{
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错误警示框，背景、边框和文本都是浅红色
例如：<divclass="alertalert-danger"role="alert">对不起，您输入的密码有误</div>
实现源码如下：
.alert-success{
color:#3c763d;
background-color:#dff0d8;
border-color:#d6e9c6;
}
.alert-successhr{
border-top-color:#c9e2b3;
}
.alert-success.alert-link{
color:#2b542c;
}
.alert-info{
color:#31708f;
background-color:#d9edf7;
border-color:#bce8f1;
}
.alert-infohr{
border-top-color:#a6e1ec;
}
.alert-info.alert-link{
color:#245269;
}
.alert-warning{
color:#8a6d3b;
background-color:#fcf8e3;
border-color:#faebcc;
}
.alert-warninghr{
border-top-color:#f7e1b5;
}
.alert-warning.alert-link{
color:#66512c;
}
.alert-danger{
color:#a94442;
background-color:#f2dede;
border-color:#ebccd1;
}
.alert-dangerhr{
border-top-color:#e4b9c0;
}
.alert-danger.alert-link{
color:#843534;
}
可关闭的警示框
使用方法如下：
1.在基本警示框“alert”的基础上添加“alert-dismissable”样式。
2.在警示框内加入一个按钮。
3.在这个button标签中加入class=”close”类，实现警示框关闭按钮的样式。
4.关闭按钮元素上设置自定义属性：“data-dismiss=”alert”。因为可关闭警示框需要借助于Javascript来检测该属性，从而控制警示框的关闭。
例如：
<divclass="alertalert-dangeralert-dismissable"role="alert"> <buttonclass="close"type="button"data-dismiss="alert">×</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”样式给链接提供高亮显示。
例如：
<divclass="alertalert-success"role="alert"> <strong>申请成功！</strong> 下一步请 <ahref="#"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;
}
本文系列教程整理到：Bootstrap基础教程专题中，欢迎点击学习。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。