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

js里取容器大小、定位、距离等属性搜集整理

Aug 19 Javascript

加载列表时jquery获取ul中第一个li的属性

Nov 02 Javascript

asp.net+js实现金额格式化

Feb 27 Javascript

学习JavaScript设计模式(封装)

Nov 26 Javascript

底部悬浮通栏可以关闭广告位的实现方法

Jun 01 Javascript

Jquery鼠标放上去显示全名的实现方法

Feb 06 Javascript

基于JavaScript实现的顺序查找算法示例

Apr 14 Javascript

浅谈angular4生命周期钩子

Sep 05 Javascript

Parcel 打包示例(React HelloWorld)

Jan 16 Javascript

vue写h5页面的方法总结

Feb 12 Javascript

解决mui框架中switch开关通过js控制开或者关状态时小圆点不动的问题

Sep 03 Javascript

JS数据类型分类及常用判断方法

Nov 19 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

Drupal7中常用的数据库操作实例

2014/03/02 PHP

WebQQ最新登陆协议的用法

2014/12/22 PHP

CI框架中通过hook的方式实现简单的权限控制

2015/01/07 PHP

php上传中文文件名乱码问题处理方案

2015/02/03 PHP

PHP数组操作类实例

2015/07/11 PHP

jquery获取div宽度的实现思路与代码

2013/01/13 Javascript

探讨在JQuery和Js中,如何让ajax执行完后再继续往下执行

2013/07/09 Javascript

使用jquery的ajax需要注意的地方dataType的设置

2013/08/12 Javascript

讨论html与javascript在浏览器中的加载顺序问题

2013/11/27 Javascript

JS排序方法（sort，bubble，select，insert）代码汇总

2016/01/30 Javascript

JS获取复选框的值,并传递到后台的实现方法

2016/05/30 Javascript

JavaScript实现一个空中避难的小游戏

2017/06/06 Javascript

JS 封装父页面子页面交互接口的实例代码

2019/06/25 Javascript

利用不到200行代码写一款属于你自己的js类库

2019/07/08 Javascript

js实现单元格拖拽效果

2020/02/10 Javascript

[05:31]DOTA2英雄梦之声_第04期_光之守卫

2014/06/23 DOTA

Python实现端口复用实例代码

2014/07/03 Python

跟老齐学Python之重回函数

2014/10/10 Python

Python写的Tkinter程序屏幕居中方法

2015/03/10 Python

Python实现找出数组中第2大数字的方法示例

2018/03/26 Python

使用python根据端口号关闭进程的方法

2018/11/06 Python

Python数据类型之Number数字操作实例详解

2019/05/08 Python

Python 给定的经纬度标注在地图上的实现方法

2019/07/05 Python

Python:二维列表下标互换方式(矩阵转置)

2019/12/02 Python

django 链接多个数据库并使用原生sql实现

2020/03/28 Python

谈谈对css属性box-sizing的了解

2017/01/04 HTML / CSS

Html5 localStorage入门教程

2018/04/26 HTML / CSS

手把手教你实现一个canvas智绘画板的方法

2019/03/04 HTML / CSS

业务经理的岗位职责

2013/11/16 职场文书

八年级历史教学反思

2014/01/10 职场文书

简历上的自我评价怎么写

2014/01/28 职场文书

网络工程师专家职业发展路线

2014/02/14 职场文书

2014年教研员工作总结

2014/12/23 职场文书

Ajax请求超时与网络异常处理图文详解

2021/05/23 Javascript

python生成可执行exe控制Microsip自动填写号码并拨打功能

2021/06/21 Python

Python NumPy灰度图像的压缩原理讲解

2021/08/04 Python