首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 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缩略图与警告框学习使用

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

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

- Author -

轻扰时光

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

Javascript 相关文章推荐
javascript编程起步（第七课）
Feb 27 Javascript
JQUERY的属性选择符和自定义选择符使用方法（二）
Apr 07 Javascript
cookie中的path与domain属性详解
Dec 18 Javascript
Python脚本后台运行的几种方式
Mar 09 Javascript
jquery实现键盘左右翻页特效
Apr 30 Javascript
jQuery实现checkbox列表的全选、反选功能
Nov 24 Javascript
js点击任意区域弹出层消失实现代码
Dec 27 Javascript
基于jQuery代码实现圆形菜单展开收缩效果
Feb 13 Javascript
angularJS深拷贝详解
Mar 23 Javascript
JS图片预加载插件详解
Jun 21 Javascript
如何解决vue2.0下IE浏览器白屏问题
Sep 13 Javascript
微信小程序学习总结（五）常见问题实例小结
Jun 04 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
电台频率(32) 下载(1) 怀旧期刊(1) 无线电(12) 收音机(62) 短波(8) 长波(3) Harman Kardon(1) 广播(8) 保养(1)
You might like
深入PHP操作MongoDB的技术总结
2013/06/02 PHP
CodeIgniter读写分离实现方法详解
2016/01/20 PHP
jQuery的初始化与对象构建之浅析
2011/04/12 Javascript
javascript string字符串优化问题
2011/07/31 Javascript
前台js改变Session的值(用ajax实现)
2012/12/28 Javascript
框架页面高度自动刷新的Javascript脚本
2013/11/01 Javascript
用Jquery实现滚动新闻
2014/02/12 Javascript
jquery实现人性化的有选择性禁用鼠标右键
2014/06/30 Javascript
JavaScript常用字符串与数组扩展函数小结
2016/04/24 Javascript
移动端翻页插件dropload.js（支持Zepto和jQuery）
2016/07/27 Javascript
AngularJS入门教程之Scope(作用域)
2016/07/27 Javascript
jQuery制作圣诞主题页面 更像是爱情影集
2016/08/10 Javascript
微信小程序 WXML、WXSS 和JS介绍及详解
2016/10/08 Javascript
jquery实现文字单行横移或翻转（上下、左右跳转）
2017/01/08 Javascript
Javascript中数组去重与拍平的方法示例
2017/02/03 Javascript
jQuery插件FusionCharts绘制的2D双面积图效果示例【附demo源码】
2017/04/11 jQuery
jacascript DOM节点——元素节点、属性节点、文本节点
2017/04/18 Javascript
express + jwt + postMan验证实现持久化登录
2019/06/05 Javascript
js实现倒计时秒杀效果
2020/03/25 Javascript
python虚拟环境 virtualenv的简单使用
2020/01/21 Javascript
Python实现获取某天是某个月中的第几周
2015/02/11 Python
Python2.x中str与unicode相关问题的解决方法
2015/03/30 Python
python web.py开发httpserver解决跨域问题实例解析
2018/02/12 Python
Python 实现域名解析为ip的方法
2019/02/14 Python
python交互界面的退出方法
2019/02/16 Python
Python实现定时执行任务的三种方式简单示例
2019/03/30 Python
解决pyqt5异常退出无提示信息的问题
2020/04/08 Python
使用pycharm和pylint检查python代码规范操作
2020/06/09 Python
浅谈Html5移动端ios/Android兼容性总结
2018/06/01 HTML / CSS
英国Lookfantastic中文网站：护肤品美妆美发购物（英国直邮）
2020/04/27 全球购物
大学生自我评价怎样写好
2013/10/23 职场文书
社区庆中秋节活动方案
2014/02/07 职场文书
创新社会管理心得体会
2014/09/12 职场文书
2014年审计工作总结
2014/11/17 职场文书
处级干部考察材料
2014/12/24 职场文书
预备党员入党感言
2015/08/01 职场文书