Bootstrap缩略图与警告框学习使用


Posted in Javascript onFebruary 08, 2017

本文实例为大家分享了Bootstrap缩略图与警告框的具体代码,供大家参考,具体内容如下

<html>
<head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>Bootstrap</title>
 <link rel="stylesheet" href="css/bootstrap.css" rel="external nofollow" />
</head>
<body>
 <div class="container">
 <div class="row">
 <div class="col-lg-3"><!--thumbnail为缩略图,外围加了边框并变为圆角-->
 <a href="https://3water.com" class="thumbnail">
  <img src="../logo.jpg"/>
 </a>
 </div>
 <div class="col-lg-3">
 <a href="https://3water.com" class="thumbnail">
  <img src="../logo.jpg"/>
 </a>
 </div>
 <div class="col-lg-3">
 <a href="https://3water.com" class="thumbnail">
  <img src="../logo.jpg"/>
 </a>
 </div>
 <div class="col-lg-3">
 <a href="https://3water.com" class="thumbnail">
  <img src="../logo.jpg"/>
 </a>
 </div>
 </div>
 <div class="row">
 <div class="col-lg-4">
 <div class="thumbnail"><!--给父级加上thumbnail-->
  <a href="https://3water.com">
  <img src="../logo.jpg"/>
  </a>
  <div class="caption"><!--可以增加图片与文字之间的距离-->
  <h3>水果</h3>
  <p>苹果梨橘子葡萄柚子香蕉苹果梨橘子葡萄柚子香蕉</p>
  </div>
 </div>
 </div>
 </div>
 </div>
 <div class="container">
 <div class="row">
 <p class="alert alert-danger">这里是一个警告框!!!<button class="close" data-dismiss="alert">×</button></p><!--data-dismiss="alert"使其与js进行交互-->
 </div>
 </div>
 <script src="js/jquery-2.1.0.js"></script>
 <script src="js/bootstrap.js"></script>
</body>
</html>

效果图:

Bootstrap缩略图与警告框学习使用

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

Javascript 相关文章推荐
jQuery 幻灯片插件(带缩略图功能)
Jan 24 Javascript
详谈 Jquery Ajax异步处理Json数据.
Sep 09 Javascript
jquery 实现checkbox全选,反选,全不选等功能代码(奇数)
Oct 24 Javascript
Javascript实现字数统计
Jul 03 Javascript
BootStrap智能表单实战系列(四)表单布局介绍
Jun 13 Javascript
easyui combobox开启搜索自动完成功能的实例代码
Nov 08 Javascript
jQuery之动画效果大全
Nov 09 Javascript
javascript 单例模式详解及简单实例
Feb 14 Javascript
vue 数组和对象不能直接赋值情况和解决方法(推荐)
Oct 25 Javascript
微信小程序实现选项卡功能
Jun 19 Javascript
详解如何构建Promise队列实现异步函数顺序执行
Oct 23 Javascript
AJAX在JQuery中的应用详解
Jan 30 jQuery
Bootstrap导航条学习使用(二)
Feb 08 #Javascript
jquery对象与DOM对象转化
Feb 08 #Javascript
vue2 如何实现div contenteditable=“true”(类似于v-model)的效果
Feb 08 #Javascript
jQuery中Datatables增加跳转到指定页功能
Feb 08 #Javascript
node.js的事件机制
Feb 08 #Javascript
jQuery多选框选择数量限制方法
Feb 08 #Javascript
Node.js连接MongoDB数据库产生的问题
Feb 08 #Javascript
You might like
php中get_object_vars()方法用法实例
2015/02/08 PHP
Laravel中使用阿里云OSS Composer包分享
2015/02/10 PHP
php中PDO方式实现数据库的增删改查
2015/05/17 PHP
如何用PHP做到页面注册审核
2017/03/02 PHP
使用正则替换变量
2007/05/05 Javascript
查询绑定数据岛的表格中的文本并修改显示方式的js代码
2009/12/15 Javascript
ie中js创建checkbox默认选中问题探讨
2013/10/21 Javascript
ajax请求乱码的解决方法(中文乱码)
2014/04/10 Javascript
javascript Deferred和递归次数限制实例
2014/10/21 Javascript
Vue.js一个文件对应一个组件实践
2016/10/27 Javascript
jQuery EasyUI tree增加搜索功能的实现方法
2017/04/27 jQuery
详解jquery选择器的原理
2017/08/01 jQuery
Vue+Element使用富文本编辑器的示例代码
2017/08/14 Javascript
使用Nodejs连接mongodb数据库的实现代码
2017/08/21 NodeJs
浅谈vue的几种绑定变量的值 防止其改变的方法
2018/03/01 Javascript
Node.js事件的正确使用方法
2019/04/05 Javascript
JavaScript中将值转换为字符串的五种方法总结
2019/06/06 Javascript
Layui点击图片弹框预览的实现方法
2019/09/16 Javascript
浅谈vue在html中出现{{}}的原因及解决方式
2020/11/16 Javascript
[01:03:51]2018DOTA2亚洲邀请赛 4.7 淘汰赛 VP vs LGD 第三场
2018/04/09 DOTA
python实现图片处理和特征提取详解
2017/11/13 Python
在python中对变量判断是否为None的三种方法总结
2019/01/23 Python
Python参数类型以及常见的坑详解
2019/07/08 Python
Flask使用Pyecharts在单个页面展示多个图表的方法
2019/08/05 Python
python 单线程和异步协程工作方式解析
2019/09/28 Python
TensorFlow2.1.0最新版本安装详细教程
2020/04/08 Python
python3:excel操作之读取数据并返回字典 + 写入的案例
2020/09/01 Python
python调用win32接口进行截图的示例
2020/11/11 Python
使用django自带的user做外键的方法
2020/11/30 Python
HTML5 Canvas绘制圆点虚线实例
2015/01/01 HTML / CSS
三维科技面试题
2013/07/27 面试题
cf收人广告词
2014/03/14 职场文书
2015社区六五普法工作总结
2015/04/21 职场文书
2015年度合同管理工作总结
2015/05/22 职场文书
2015年中秋晚会主持词
2015/07/01 职场文书
如何基于python实现单目三维重建详解
2022/06/25 Python