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控制台详解
Jun 25 Javascript
jQuery插件实现多级联动菜单效果
Dec 01 Javascript
js友好的时间返回函数
Aug 24 Javascript
jQuery ajax的功能实现方法详解
Jan 06 Javascript
微信小程序引用公共js里的方法的实例详解
Aug 17 Javascript
Vue中之nextTick函数源码分析详解
Oct 17 Javascript
js插件实现图片滑动验证码
Sep 29 Javascript
Angular实现的日程表功能【可添加及隐藏显示内容】
Dec 27 Javascript
Webpack path与publicPath的区别详解
May 03 Javascript
微信网页登录逻辑与实现方法
Apr 29 Javascript
JavaScript 反射和属性赋值实例解析
Oct 28 Javascript
Antd-vue Table组件添加Click事件,实现点击某行数据教程
Nov 17 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写的获取各搜索蜘蛛爬行记录代码
2012/08/21 PHP
jQuery中的RadioButton,input,CheckBox取值赋值实现代码
2014/02/18 PHP
php判断电脑访问、手机访问的例子
2014/05/10 PHP
PHP mysqli事务操作常用方法分析
2017/07/22 PHP
PHP二维关联数组的遍历方式(实例讲解)
2017/10/18 PHP
js每隔5分钟执行一次ajax请求的实现方法
2013/11/27 Javascript
JQuery选择器、过滤器大整理
2015/05/26 Javascript
es6学习笔记之Async函数的使用示例
2017/05/11 Javascript
JavaScrpt中如何使用 cookie 设置查看与删除功能
2017/07/09 Javascript
利用纯js + transition动画实现移动端web轮播图详解
2017/09/10 Javascript
JavaScript事件冒泡与事件捕获实例分析
2018/08/01 Javascript
详解mpvue小程序中怎么引入iconfont字体图标
2018/10/01 Javascript
vue2 拖动排序 vuedraggable组件的实现
2019/08/08 Javascript
js实现的订阅发布者模式简单示例
2020/03/14 Javascript
[01:19:33]DOTA2-DPC中国联赛 正赛 iG vs VG BO3 第一场 2月2日
2021/03/11 DOTA
基于python3 类的属性、方法、封装、继承实例讲解
2017/09/19 Python
Python列表删除的三种方法代码分享
2017/10/31 Python
Flask web开发处理POST请求实现(登录案例)
2018/07/26 Python
Selenium鼠标与键盘事件常用操作方法示例
2018/08/13 Python
浅谈python脚本设置运行参数的方法
2018/12/03 Python
Python 远程开关机的方法
2020/11/18 Python
Python json解析库jsonpath原理及使用示例
2020/11/25 Python
HTML5注册表单的自动聚焦与占位文本示例代码
2013/07/19 HTML / CSS
Hertz荷兰:荷兰和全球租车
2018/01/07 全球购物
毕业生多媒体设计求职信
2013/10/12 职场文书
大学生的四年学习自我评价
2013/12/13 职场文书
数控机械专业个人的自我评价
2014/01/02 职场文书
关于逃课的检讨书
2014/01/23 职场文书
创建文明学校实施方案
2014/03/11 职场文书
食品科学与工程专业毕业生求职信范文
2014/07/21 职场文书
搞笑婚庆主持词
2015/06/29 职场文书
基于Python绘制子图及子图刻度的变换等的问题
2021/05/23 Python
Java8中接口的新特性使用指南
2021/11/01 Java/Android
Python学习之异常中的finally使用详解
2022/03/16 Python
vue实现Toast组件轻提示
2022/04/10 Vue.js
Python之matplotlib绘制饼图
2022/04/13 Python