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

jquery子元素过滤选择器使用示例

Jun 24 Javascript

JS深度拷贝Object Array实例分析

Mar 31 Javascript

ionic js 模型 $ionicModal 可以遮住用户主界面的内容框

Jun 06 Javascript

Bootstrap学习系列之使用 Bootstrap Typeahead 组件实现百度下拉效果

Jul 07 Javascript

一个简单不报错的summernote 图片上传案例

Jul 11 Javascript

jquery层级选择器的实现(匹配后代元素div)

Sep 05 Javascript

Angular组件化管理实现方法分析

Mar 17 Javascript

js与jQuery实现获取table中的数据并拼成json字符串操作示例

Jul 12 jQuery

在antd4.0中Form使用initialValue操作

Nov 02 Javascript

javascript全局自定义鼠标右键菜单

Dec 08 Javascript

JavaScript实现移动小精灵的案例代码

Dec 12 Javascript

js制作提示框插件

Dec 24 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中通过ADO调用Access数据库的方法测试不通过

2006/12/31 PHP

phpMyAdmin 链接表的附加功能尚未激活的问题

2010/08/01 PHP

允许phpmyadmin空密码登录的配置方法

2011/05/29 PHP

PHP设计模式之装饰者模式

2012/02/29 PHP

php生成zip文件类实例

2015/04/07 PHP

支持中文、字母、数字的PHP验证码

2015/05/04 PHP

POST一个JSON格式的数据给Restful服务实例详解

2017/04/07 PHP

ajax调用返回php接口返回json数据的方法(必看篇)

2017/05/05 PHP

js中opener与parent的区别详细解析

2014/01/14 Javascript

经过绑定元素时会多次触发mouseover和mouseout事件

2014/02/28 Javascript

Javascript中3种实现继承的方法和代码实例

2014/08/12 Javascript

JQuery删除DOM节点的方法

2015/06/11 Javascript

深入浅析javascript立即执行函数

2015/10/23 Javascript

jstree创建无限分级树的方法【基于ajax动态创建子节点】

2016/10/25 Javascript

Angular下H5上传图片的方法（可多张上传）

2017/01/09 Javascript

微信小程序中使用Promise进行异步流程处理的实例详解

2017/08/17 Javascript

20170918 前端开发周报之JS前端开发必看

2017/09/18 Javascript

React Native使用Modal自定义分享界面的示例代码

2017/10/31 Javascript

JavaScript中的事件与异常捕获详析

2019/02/24 Javascript

vue路由切换之淡入淡出的简单实现

2019/10/31 Javascript

Python中os和shutil模块实用方法集锦

2014/05/13 Python

浅谈python抛出异常、自定义异常, 传递异常

2016/06/20 Python

简单介绍python封装的基本知识

2019/08/10 Python

python mqtt 客户端的实现代码实例

2019/09/25 Python

python游戏开发的五个案例分享

2020/03/09 Python

纯CSS3大转盘抽奖示例代码（响应式、可配置）

2017/01/13 HTML / CSS

美国知名的网上鞋类及相关服装零售商：Shoes.com

2017/05/06 全球购物

LTD Commodities：礼品，独特发现，家居装饰，家用器皿

2017/08/11 全球购物

C/C++程序员常见面试题二

2015/11/19 面试题

战友聚会邀请函

2014/01/18 职场文书

普通话宣传标语

2014/06/26 职场文书

关于读书的演讲稿600字

2014/08/27 职场文书

毕业生见习报告总结

2014/11/08 职场文书

2015年五四青年节活动总结

2015/02/10 职场文书

法人代表资格证明书

2015/06/18 职场文书

小学音乐课教学反思

2016/02/18 职场文书