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 相关文章推荐
图片自动更新(说明)
Oct 02 Javascript
Jquery升级新版本后选择器的语法问题
Jun 02 Javascript
jQuery学习笔记之jQuery的事件
Dec 22 Javascript
JavaScript去掉空格的方法集合
Dec 28 Javascript
关于 文本框默认值 的操作js代码
Jan 12 Javascript
JS数字抽奖游戏实现方法
May 04 Javascript
详解angular中通过$location获取路径(参数)的写法
Mar 21 Javascript
React Native悬浮按钮组件的示例代码
Apr 05 Javascript
JavaScript事件冒泡与事件捕获实例分析
Aug 01 Javascript
webpack4+react多页面架构的实现
Oct 25 Javascript
Angular 多模块项目构建过程
Feb 13 Javascript
js 执行上下文和作用域的相关总结
Feb 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与jquery设置和读取cookies
2013/08/08 PHP
护卫神php套件 php版本升级方法(php5.5.24)
2015/05/10 PHP
PHP导出带样式的Excel示例代码
2016/08/28 PHP
PHP使用Session实现上传进度功能详解
2019/08/06 PHP
javascript设计模式 接口介绍
2012/07/24 Javascript
浅析Node.js查找字符串功能
2014/09/03 Javascript
Javascript与jQuery方法的隐藏与显示
2015/01/19 Javascript
JS实现很酷的EMAIL地址添加功能实例
2015/02/28 Javascript
14款经典网页图片和文字特效的jQuery插件-前端开发必备
2015/08/25 Javascript
jquery原理以及学习技巧介绍
2015/11/11 Javascript
理解Javascript图片预加载
2016/02/23 Javascript
概述VUE2.0不可忽视的很多变化
2016/09/25 Javascript
JS实现页面打印功能
2017/03/16 Javascript
jQuery插件FusionCharts绘制的3D环饼图效果示例【附demo源码】
2017/04/02 jQuery
vue表单绑定实现多选框和下拉列表的实例
2017/08/12 Javascript
微信小程序倒计时功能实现代码
2017/11/09 Javascript
原生JS写Ajax的请求函数功能
2017/12/22 Javascript
JS封装的模仿qq右下角消息弹窗功能示例
2018/08/22 Javascript
Vue CLI3 开启gzip压缩文件的方式
2018/09/30 Javascript
Vue-Router基础学习笔记(小结)
2018/10/15 Javascript
详解Vue中的scoped及穿透方法
2019/04/18 Javascript
简明 Python 基础学习教程
2007/02/08 Python
python将html转成PDF的实现代码(包含中文)
2013/03/04 Python
python3+PyQt5实现使用剪贴板做复制与粘帖示例
2017/01/24 Python
Python处理文本文件中控制字符的方法
2017/02/07 Python
matplotlib绘图实例演示标记路径
2018/01/23 Python
使用Python读取安卓手机的屏幕分辨率方法
2018/03/31 Python
Python去除字符串前后空格的几种方法
2019/03/04 Python
Python操作MySQL数据库的两种方式实例分析【pymysql和pandas】
2019/03/18 Python
Python3字符串encode与decode的讲解
2019/04/02 Python
python 进程间数据共享multiProcess.Manger实现解析
2019/09/23 Python
Python3+Selenium+Chrome实现自动填写WPS表单
2020/02/12 Python
Python Spyder 调出缩进对齐线的操作
2021/02/26 Python
仓库班组长岗位职责
2013/12/12 职场文书
租房协议书样本
2014/08/20 职场文书
谢师宴学生答谢词
2015/09/30 职场文书