编程 Javascript

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缩略图与警告框学习使用

- Author -

轻扰时光

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

在网页中屏蔽快捷键

Sep 06 Javascript

40款非常有用的 jQuery 插件推荐（系列一）

Dec 21 Javascript

iframe的onreadystatechange事件在firefox下的使用

Apr 16 Javascript

React.js入门学习第一篇

Mar 30 Javascript

jquery自定义插件——window的实现【示例代码】

May 06 Javascript

JS中跨页面调用变量和函数的方法(例如a.js 和 b.js中互相调用)

Nov 01 Javascript

easyui tree带checkbox实现单选的简单实例

Nov 07 Javascript

JavaScrpt判断一个数是否是质数的实例代码

Jun 11 Javascript

angularjs实现猜大小功能

Oct 23 Javascript

Express进阶之log4js实用入门指南

Feb 10 Javascript

js 动态校验开始结束时间的实现代码

May 25 Javascript

angular异步验证器防抖实例详解

Mar 31 Javascript

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查询搜索引擎排名位置的代码

2010/01/05 PHP

THINKPHP+JS实现缩放图片式截图的实现

2010/03/07 PHP

php中根据变量的类型选择echo或dump

2012/07/05 PHP

ThinkPHP整合百度Ueditor图文教程

2014/10/21 PHP

Zend Framework教程之路由功能Zend_Controller_Router详解

2016/03/07 PHP

Redis构建分布式锁

2017/03/28 PHP

PHP7多线程搭建教程

2017/04/21 PHP

extjs 列表框(multiselect)的动态添加列表项的方法

2009/07/31 Javascript

在浏览器中获取当前执行的脚本文件名的代码

2011/07/19 Javascript

关于jquery input textare 事件绑定及用法学习

2013/04/03 Javascript

js数组的基本操作(很全自己整理的)

2014/10/16 Javascript

理解javascript中的原型和原型链

2015/07/30 Javascript

node.js版本管理工具n无效的原理和解决方法

2016/11/24 Javascript

JS出现失效的情况总结

2017/01/20 Javascript

JavaScript数组迭代方法

2017/03/03 Javascript

最全的JavaScript开发工具列表总有一款适合你

2017/06/29 Javascript

Vue精简版风格指南（推荐）

2018/01/30 Javascript

教你完全理解ReentrantLock重入锁

2019/06/03 Javascript

matplotlib绘图实例演示标记路径

2018/01/23 Python

python爬虫的数据库连接问题【推荐】

2018/06/25 Python

Python编写合并字典并实现敏感目录的小脚本

2019/02/26 Python

django框架实现一次性上传多个文件功能示例【批量上传】

2019/06/19 Python

Python 计算任意两向量之间的夹角方法

2019/07/05 Python

python随机生成库faker库api实例详解

2019/11/28 Python

PyCharm永久激活方式(推荐)

2020/09/22 Python

python上传时包含boundary时的解决方法

2020/04/08 Python

Python的Django框架实现数据库查询(不返回QuerySet的方法)

2020/05/19 Python

python线程里哪种模块比较适合

2020/08/02 Python

详解tensorflow之过拟合问题实战

2020/11/01 Python

button在IE6/7下的黑边去除方案

2012/12/24 HTML / CSS

CSS3实现千变万化的文字阴影text-shadow效果设计

2016/04/26 HTML / CSS

UNIX文件系统常用命令

2012/05/25 面试题

就业协议书样本

2014/08/20 职场文书

六查六看心得体会

2014/10/14 职场文书

会计工作能力自我评价

2015/03/05 职场文书

教你用Python写一个植物大战僵尸小游戏

2021/04/25 Python