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


Posted in Javascript onDecember 26, 2016

标签

标签组件通常用来做一些高亮显示用以提醒。使用“.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基础教程 专题中,欢迎点击学习。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript调用C#代码
Jan 17 Javascript
jquery中获取select选中值的代码
Jun 27 Javascript
整理8个很棒的 jQuery 倒计时插件和教程
Dec 12 Javascript
如何使用Javascript获取距今n天前的日期
Jul 08 Javascript
js中setTimeout()与clearTimeout()用法实例浅析
May 12 Javascript
使用AngularJS创建自定义的过滤器的方法
Jun 18 Javascript
javascript设置文本框光标的方法实例小结
Nov 04 Javascript
基于js实现二级下拉联动
Dec 17 Javascript
手把手带你封装一个vue component第三方库
Feb 14 Javascript
vue在index.html中引入静态文件不生效问题及解决方法
Apr 29 Javascript
Javascript Dom元素获取和添加详解
Sep 24 Javascript
Vue实例的对象参数options的几个常用选项详解
Nov 08 Javascript
js正则表达式惰性匹配和贪婪匹配用法分析
Dec 26 #Javascript
Bootstrap的modal拖动效果
Dec 25 #Javascript
原生ajax处理json格式数据的实例代码
Dec 25 #Javascript
JS异步文件分片断点上传的实现思路
Dec 25 #Javascript
BootStrop前端框架入门教程详解
Dec 25 #Javascript
半个小时学json(json传递示例)
Dec 25 #Javascript
在DWR中实现直接获取一个JAVA类的返回值的两种方法
Dec 25 #Javascript
You might like
PHP脚本的10个技巧(8)
2006/10/09 PHP
解析PHP中ob_start()函数的用法
2013/06/24 PHP
PHP strcmp()和strcasecmp()的区别实例
2016/11/05 PHP
支持汉转拼和拼音分词的PHP中文工具类ChineseUtil
2018/02/23 PHP
javascript iframe内的函数调用实现方法
2009/07/19 Javascript
juqery 学习之三 选择器 简单 内容
2010/11/25 Javascript
Jquery拖拽并简单保存的实现代码
2010/11/28 Javascript
密码强度检测效果实现原理与代码
2013/01/04 Javascript
JavaScript代码编写中各种各样的坑和填坑方法
2014/06/06 Javascript
AngularJS 中文API参考手册
2016/07/28 Javascript
基于vuejs+webpack的日期选择插件
2020/05/21 Javascript
微信开发之企业付款到银行卡接口开发的示例代码
2018/09/18 Javascript
JavaScript类型相关的常用操作总结
2019/02/14 Javascript
微信小程序扫描二维码获取信息实例详解
2019/05/07 Javascript
微信小程序npm引入vant-weapp的踩坑记录
2019/08/01 Javascript
Python的网络编程库Gevent的安装及使用技巧
2016/06/24 Python
python中实现指定时间调用函数示例代码
2017/09/08 Python
python使用itchat库实现微信机器人(好友聊天、群聊天)
2018/01/04 Python
对python中的xlsxwriter库简单分析
2018/05/04 Python
Django+Xadmin构建项目的方法步骤
2019/03/06 Python
Python基于机器学习方法实现的电影推荐系统实例详解
2019/06/25 Python
TFRecord文件查看包含的所有Features代码
2020/02/17 Python
Python如何急速下载第三方库详解
2020/11/02 Python
HTML5组件Canvas实现图像灰度化(步骤+实例效果)
2013/04/22 HTML / CSS
Auchan Direct波兰:欧尚在线杂货店
2016/10/19 全球购物
德国便宜的宠物店:Brekz.de
2020/10/23 全球购物
采购部主管岗位职责
2014/01/01 职场文书
销售团队获奖感言
2014/08/14 职场文书
在校大学生自我评价范文
2014/09/12 职场文书
公务员党的群众路线教育实践活动学习心得体会
2014/10/30 职场文书
大学军训通讯稿
2015/07/18 职场文书
神州牡丹园的导游词
2019/11/20 职场文书
《正面管教》读后有感:和善而坚定的旅程
2019/12/19 职场文书
Django显示可视化图表的实践
2021/05/10 Python
MySQL系列之开篇 MySQL关系型数据库基础概念
2021/07/02 MySQL
B站评分公认最好看的动漫,你的名字评分9.9,第六备受喜欢
2022/03/18 日漫