浅析Bootstrap缩略图组件与警示框组件


Posted in Javascript onApril 29, 2016

Bootstrap简介

Bootstrap,来自 Twitter,是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷。

缩略图组件

缩略图在网站中最常用的就是产品列表页面,一行显示几张图片,有的在图片底下带有标题、描述内容、按钮等信息。

bootstrap框架将这部分独立成一个模块组件,通过类名.thumbnail配合bootstrap的网格系统来实现。下面是bootstrap缩略图组件不同版本的源码文件:

LESS : tbumbnails.less

SASS : _tbumbnails.scss

实现原理:

布局的实现主要依靠于bootstrap框架的网格系统,下面是缩略图对应的样式

.thumbnail {
display: block;
padding: 4px;
margin-bottom: 20px;
line-height: 1.42857143;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 4px;
-webkit-transition: all .2s ease-in-out;
transition: all .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 class="container">
<div class="row">
<div class="col-md-3">
<a herf="#" class="thumbnail">
<img src="img/1.jpg" style="height:180px;width:100%;display: block">
</a>
</div>
<div class="col-md-3">
<a herf="#" class="thumbnail">
<img src="img/2.jpg" style="height:180px;width:100%;display: block">
</a>
</div>
<div class="col-md-3">
<a herf="#" class="thumbnail">
<img src="img/3.jpg" style="height:180px;width:100%;display: block">
</a>
</div>
<div class="col-md-3">
<a herf="#" class="thumbnail" >
<img src="img/4.jpg" style="height:180px;width:100%;display: block">
</a>
</div>
</div>
</div>

效果如下:

浅析Bootstrap缩略图组件与警示框组件

可以用火狐响应式设计视图查看

浅析Bootstrap缩略图组件与警示框组件

在仅有缩略图的基础上,添加一个类名为.caption的div容器,在这个容器中放置其他内容,如:标题,文本描述,按钮等

<div class="container">
<div class="row">
<div class="col-md-3">
<a href="#" class="thumbnail">
<img src="img/1.jpg" style="height:180px;width:100%;display: block">
</a>
<div class="caption">
<h3>这里是图文标题1111</h3>
<p>这里是描述内容这里是描述内容这里是描述内容这里是描述内容这里是描述内容这里是描述内容这里是描述内容</p>
<a href="#" class="btn btn-primary">开始学习</a>
<a href="#" class="btn btn-info">正在学习</a>
</div>
</div>
<div class="col-md-3">
<a href="#" class="thumbnail">
<img src="img/2.jpg" style="height:180px;width:100%;display: block">
</a>
<div class="caption">
<h3>这里是图文标题2222</h3>
<p>这里是描述内容2222这里是描述内容22222这里是描述内容22222这里是描述内容222这里是描述内容2222</p>
<a href="#" class="btn btn-primary">开始学习</a>
<a href="#" class="btn btn-info">正在学习</a>
</div>
</div>
<div class="col-md-3">
<a href="#" class="thumbnail">
<img src="img/3.jpg" style="height:180px;width:100%;display: block">
</a>
<div class="caption">
<h3>这里是图文标题3333</h3>
<p>这里是描述内容3333这里是描述内容3333这里是描述内容33333这里是描述内容222这里是描述内容3333</p>
<a href="#" class="btn btn-primary">开始学习</a>
<a href="#" class="btn btn-info">正在学习</a>
</div>
</div>
<div class="col-md-3">
<a href="#" class="thumbnail">
<img src="img/4.jpg" style="height:180px;width:100%;display: block">
</a>
<div class="caption">
<h3>这里是图文标题4444</h3>
<p>这里是描述内容4444这里是描述内容4444这里是描述内容4444这里是描述内容4444这里是描述内容4444</p>
<a href="#" class="btn btn-primary">开始学习</a>
<a href="#" class="btn btn-info">正在学习</a>
</div>
</div>
</div>
</div>

浅析Bootstrap缩略图组件与警示框组件

警示框组件

bootstrap框架通过.alert样式来实现警示框效果,在默认情况下,bootstrap提供了四种不同的警示框效果:

1、成功警示框:提示用户操作成功,在.alert的基础上追加.alert-success样式;

2、信息警告框:给用户提供提示信息,在.alert的基础上追加.alert-info样式;

3、警告警示框:提供警告信息,在.alert的基础上追加.alert-warning样式;

4、错误警示框:提示用户操作错误,在.alert的基础上追加.alert-danger样式;

其中,.alert样式主要设置了警示框的背景色、边框,圆角,文字颜色,此外还对h4、p、ul及.alert-link做了样式上的处理,下面是css源码:

.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;
}
.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;
}

例如:

<div class="alert alert-success" role="alert">恭喜你操作成功!</div>
<div class="alert alert-info" role="alert">请输入正确的密码</div>
<div class="alert alert-warning" role="alert">你已经操作失败两次,还有最后一次机会</div>
<div class="alert alert-danger" role="alert">对不起,你的密码输入有误!</div>

浅析Bootstrap缩略图组件与警示框组件

可关闭的警示框

1、在默认的警示框的容器上追加一个.alert-dismissable类名

2、在button标签中添加.close,实现警告框的关闭按钮

3、确保关闭按钮元素上设置了自定义属性data-dismiss=”alert“(关闭警示框需要通过js来检测该属性,从而控制警示框的关闭)

例子:

<div class="alert alert-success alert-dismissable" role="alert">
<button class="close" type="button" data-dismiss="alert">×</button>
恭喜你操作成功!
</div>
<div class="alert alert-info alert-dismissable"role="alert">
<button class="close" type="button" data-dismiss="alert">×</button>
请输入正确的密码
</div>
<div class="alert alert-warning alert-dismissable" role="alert">
<button class="close" type="button" data-dismiss="alert">×</button>
你已经操作失败两次,还有最后一次机会
</div>
<div class="alert alert-danger alert-dismissable" role="alert">
<button class="close" type="button" data-dismiss="alert">×</button>
对不起,你的密码输入有误!
</div>

浅析Bootstrap缩略图组件与警示框组件

警示框的链接

有时候需要在警示框中加入链接,告诉用户跳转到新的页面,bootstrap框架中对警示框的链接做了高亮处理。给警告框加的链接添加一个为.alert-link的类名,下面是alert-link的css样式

.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;
}

例子:

<div class="alert alert-success " role="alert">
<strong>Well done!</strong>
You successfully read
<a href="#" class="alert-link">this important alert message</a>
</div>
<div class="alert alert-info" role="alert">
<strong>Well done!</strong>
You successfully read
<a href="#" class="alert-link">this important alert message</a>
</div>
<div class="alert alert-warning " role="alert">
<strong>Well done!</strong>
You successfully read
<a href="#" class="alert-link">this important alert message</a>
</div>
<div class="alert alert-danger" role="alert">
<strong>Well done!</strong>
You successfully read
<a href="#" class="alert-link">this important alert message</a>
</div>

浅析Bootstrap缩略图组件与警示框组件

关于本文给大家介绍的Bootstrap缩略图组件与警示框组件的相关知识就给大家介绍这么多,希望对大家有所帮助!

Javascript 相关文章推荐
Js从头学起(基本数据类型和引用类型的参数传递详细分析)
Feb 16 Javascript
JS实现淘宝幻灯片效果的实现方法
Mar 22 Javascript
JS 实现Json查询的方法实例
Apr 12 Javascript
js实现简单的星级选择器提交效果适用于评论等
Oct 18 Javascript
javaScript基础语法介绍
Feb 28 Javascript
基于MVC5和Bootstrap的jQuery TreeView树形控件(一)之数据支持json字符串、list集合
Aug 11 Javascript
详解Angularjs在控制器(controller.js)中使用过滤器($filter)格式化日期/时间实例
Feb 17 Javascript
学习React中ref的两个demo示例
Aug 14 Javascript
JavaScript学习笔记之图片库案例分析
Jan 08 Javascript
Vue2.x通用编辑组件的封装及应用详解
May 28 Javascript
原生js实现无缝轮播图
Jan 11 Javascript
小程序中设置缓存过期的实现方法
Jan 14 Javascript
javascript中利用柯里化函数实现bind方法
Apr 29 #Javascript
Bootstrap模态对话框的简单使用
Apr 29 #Javascript
jquery UI Datepicker时间控件的使用及问题解决
Apr 28 #Javascript
jquery弹出遮掩层效果【附实例代码】
Apr 28 #Javascript
onclick和onblur冲突问题的快速解决方法
Apr 28 #Javascript
如何使用jquery修改css中带有!important的样式属性
Apr 28 #Javascript
JavaScript String 对象常用方法总结
Apr 28 #Javascript
You might like
php在服务器执行exec命令失败的解决方法
2012/03/03 PHP
从PHP $_SERVER相关参数判断是否支持Rewrite模块
2013/09/26 PHP
ThinkPHP实现ajax仿官网搜索功能实例
2014/12/02 PHP
php获取本周星期一具体日期的方法
2015/04/20 PHP
php以fastCGI的方式运行时文件系统权限问题及解决方法
2015/05/11 PHP
ubuntu下配置nginx+php+mysql详解
2015/09/10 PHP
PHP判断上传文件类型的解决办法
2015/10/20 PHP
Javascript 读后台cookie代码
2008/09/15 Javascript
event.X和event.clientX的区别分析
2011/10/06 Javascript
ASP.NET jQuery 实例2 (表单中使用回车在TextBox之间向下移动)
2012/01/13 Javascript
探讨js字符串数组拼接的性能问题
2014/10/11 Javascript
JavaScript实现俄罗斯方块游戏过程分析及源码分享
2015/03/23 Javascript
JQuery替换DOM节点的方法
2015/06/11 Javascript
JS中生成随机数的用法及相关函数
2016/01/09 Javascript
js实现异步循环实现代码
2016/02/16 Javascript
VUE开发一个图片轮播的组件示例代码
2017/03/06 Javascript
移动端手指放大缩小插件与js源码
2017/05/22 Javascript
深入理解ES7的async/await的用法
2017/09/09 Javascript
jQuery实现可兼容IE6的淡入淡出效果告警提示功能示例
2017/09/20 jQuery
微信小程序开发技巧汇总
2019/07/15 Javascript
在Echarts图中给坐标轴加一个标识线markLine
2020/07/20 Javascript
Python 读写文件和file对象的方法(推荐)
2016/09/12 Python
Python lambda函数基本用法实例分析
2018/03/16 Python
如何爬取通过ajax加载数据的网站
2019/08/15 Python
python获取系统内存占用信息的实例方法
2020/07/17 Python
Python同时迭代多个序列的方法
2020/07/28 Python
Canvas globalCompositeOperation
2018/12/18 HTML / CSS
Melijoe时尚童装德国官网:Melijoe德国
2016/09/03 全球购物
如何打开WebSphere远程debug
2014/10/10 面试题
工程造价与财务管理专业应届生求职信
2013/10/06 职场文书
优秀研究生自我鉴定
2013/12/04 职场文书
大学生自我鉴定评语
2014/01/27 职场文书
旅游与环境专业求职信
2014/06/05 职场文书
人力资源管理求职信
2014/08/07 职场文书
基层党员对照检查材料
2014/09/24 职场文书
观看《信仰》心得体会
2016/01/15 职场文书