编程 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 相关文章推荐

JavaScript中prototype为对象添加属性的误区介绍

Oct 15 Javascript

jquery中html、val与text三者属性取值的联系与区别介绍

Dec 29 Javascript

jquery中each方法示例和常用选择器

Jul 08 Javascript

JS获得图片alt信息的方法

Apr 01 Javascript

JS组件Bootstrap导航条使用方法详解

Apr 29 Javascript

jQuery实现的简单分页示例

Jun 01 Javascript

jQuery自适应轮播图插件Swiper用法示例

Aug 24 Javascript

关于JavaScript中事件绑定的方法总结

Oct 26 Javascript

AngularJS获取json数据的方法详解

May 27 Javascript

Vue CL3 配置路径别名详解

May 30 Javascript

在vue中使用eslint,配合vscode的操作

Nov 09 Javascript

vue本地构建热更新卡顿的问题“75 advanced module optimization”完美解决方案

Aug 05 Vue.js

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

一条久听不愿放下的DIY森海MX500，三言两语话神奇

2021/03/02 无线电

PHP中动态HTML的输出技术

2006/10/09 PHP

初试jQuery EasyUI 使用介绍

2010/04/01 Javascript

url地址自动加#号问题说明

2010/08/21 Javascript

JavaScript伸缩的菜单简单示例

2013/12/03 Javascript

JQuery获取与设置HTML元素的内容或文本的实现代码

2014/06/20 Javascript

jQuery中offsetParent()方法用法实例

2015/01/19 Javascript

使用控制台破解百小度一个月只准改一次名字

2015/08/13 Javascript

jQuery实现商品活动倒计时

2015/10/16 Javascript

基于jquery fly插件实现加入购物车抛物线动画效果

2016/04/05 Javascript

Json对象和字符串互相转换json数据拼接和JSON使用方式详细介绍(小结)

2016/10/25 Javascript

Bootstrap Table使用整理(一)

2017/06/09 Javascript

原生实现一个react-redux的代码示例

2018/06/08 Javascript

js/jquery遍历对象和数组的方法分析【forEach，map与each方法】

2019/02/27 jQuery

微信小程序template模版的使用方法

2019/04/13 Javascript

javascript 使用sleep函数的常见方法详解

2020/04/26 Javascript

jQuery列表动态增加和删除的实现方法

2020/11/05 jQuery

深入Python函数编程的一些特性

2015/04/13 Python

python 文件转成16进制数组的实例

2018/07/09 Python

Django中日期处理注意事项与自定义时间格式转换详解

2018/08/06 Python

使用TensorFlow实现SVM

2018/09/06 Python

Python的条件表达式和lambda表达式实例

2019/01/31 Python

如何利用Python模拟GitHub登录详解

2019/07/15 Python

python实现静态web服务器

2019/09/03 Python

Python单例模式的四种创建方式实例解析

2020/03/04 Python

python小白切忌乱用表达式

2020/05/29 Python

如何利用python进行时间序列分析

2020/08/04 Python

html5 分层屏幕适配的方法

2018/03/16 HTML / CSS

Html5监听手机摇一摇事件的实现

2019/11/07 HTML / CSS

英国最大的自有市场，比亚马逊便宜：Flubit

2019/03/19 全球购物

.net开发工程师面试题

2014/02/25 面试题

说一下Linux下有关用户和组管理的命令

2016/01/04 面试题

如何开发一个JQuery插件

2016/07/28 面试题

2014年质量管理工作总结

2014/12/01 职场文书

升学宴学生致辞

2015/07/27 职场文书

小学生班干部竞选稿

2015/11/20 职场文书