Bootstrap源码解读标签、徽章、缩略图和警示框(8)
标签
标签组件通常用来做一些高亮显示用以提醒。使用“.label”样式来实现,可以使用span这样的行内标签,例如:<span class="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标签来制作,例如:<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">×</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; }
本文系列教程整理到:Bootstrap基础教程 专题中,欢迎点击学习。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
最新评论