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基础教程专题中,欢迎点击学习。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。