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

flash调用js中的方法,让js传递变量给flash的办法及思路

Aug 07 Javascript

JS刷新当前页面的几种方法总结

Dec 24 Javascript

JavaScript中获取样式的原生方法小结

Oct 08 Javascript

详解Bootstrap按钮

Jan 04 Javascript

javascript结合Flexbox简单实现滑动拼图游戏

Feb 18 Javascript

实例讲解JavaScript中的this指向错误解决方法

Jun 13 Javascript

详解React-Todos入门例子

Nov 08 Javascript

利用浮层使select不可选的实现方法

Dec 03 Javascript

详解VUE的状态控制与延时加载刷新

Mar 27 Javascript

Vue开发之watch监听数组、对象、变量操作分析

Apr 25 Javascript

Layui数据表格之单元格编辑方式

Oct 26 Javascript

JS实现简易留言板特效

Dec 23 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过滤危险html代码的函数

2008/07/22 PHP

基于magic_quotes_gpc与magic_quotes_runtime的区别与使用介绍

2013/04/22 PHP

探讨:如何编写PHP扩展

2013/06/13 PHP

php使用post数组的键值创建同名变量并赋值的方法

2015/04/03 PHP

PHP实现多图上传(结合uploadify插件)思路分析

2016/11/30 PHP

PDO::errorInfo讲解

2019/01/28 PHP

关于ExtJS4.1:快捷键支持的问题

2013/04/24 Javascript

20行代码实现的一个CSS覆盖率测试脚本

2013/07/07 Javascript

jquery之超简单的div显示和隐藏特效demo(分享)

2013/07/09 Javascript

一个简易的js图片轮播效果

2017/07/22 Javascript

vue element-ui 绑定@keyup事件无效的解决方法

2018/03/09 Javascript

vue iview组件表格 render函数的使用方法详解

2018/03/15 Javascript

详解webpack运行Babel教程

2018/06/13 Javascript

vue 基于element-ui 分页组件封装的实例代码

2018/12/10 Javascript

koa中间件核心（koa-compose）源码解读分析

2020/06/15 Javascript

构建一个JavaScript插件系统

2020/10/20 Javascript

Python多线程爬虫简单示例

2016/03/04 Python

Python批量合并有合并单元格的Excel文件详解

2018/04/05 Python

python下载库的步骤方法

2019/10/12 Python

python tkinter之复选、文本、下拉的实现

2020/03/04 Python

Django实现从数据库中获取到的数据转换为dict

2020/03/27 Python

解决在keras中使用model.save()函数保存模型失败的问题

2020/05/21 Python

分享一个python的aes加密代码

2020/12/22 Python

css3实现一个div设置多张背景图片及background-image属性实例演示

2017/08/10 HTML / CSS

时尚的CSS3进度条效果

2012/02/22 HTML / CSS

HTML5本地存储之Database Storage应用介绍

2013/01/06 HTML / CSS

HTML5中新标签和常用标签详解

2014/03/07 HTML / CSS

澳大利亚家具和家居用品在线：BROSA

2017/11/02 全球购物

味多美官网：蛋糕订购，100%使用天然奶油

2017/11/10 全球购物

珍珠奶茶店创业计划书

2014/01/11 职场文书

群众路线党员个人整改措施

2014/10/27 职场文书

消防演习通知

2015/04/25 职场文书

学校2015年纠风工作总结

2015/05/15 职场文书

幼儿园毕业典礼家长致辞

2015/07/29 职场文书

特别篇动画《总之就是非常可爱 ~制服~》PV公开，2022年夏季播出

2022/04/04 日漫

webpack介绍使用配置教程详解webpack介绍和使用

2022/06/25 Javascript