编程 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 UI AutoComplete 自动完成使用小记

Aug 21 Javascript

javascript权威指南学习笔记之null和undefined

Sep 25 Javascript

JS按回车键实现登录的方法

Aug 25 Javascript

jquery实现翻动fadeIn显示的方法

Mar 05 Javascript

三分钟带你玩转jQuery.noConflict()

Feb 15 Javascript

[原创]JQuery 在表单提交之前修改提交的值

Apr 14 Javascript

JavaScript中数组去除重复的三种方法

Apr 22 Javascript

Bootstrap table使用方法详细介绍

Dec 09 Javascript

javascript设计模式之策略模式学习笔记

Feb 15 Javascript

Node 自动化部署的方法

Oct 17 Javascript

laravel5.3 vue 实现收藏夹功能实例详解

Jan 21 Javascript

vue 路由meta 设置导航隐藏与显示功能的示例代码

Sep 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

You might like

层叠菜单的动态生成

2006/10/09 PHP

PHP base64+gzinflate压缩编码和解码代码

2008/10/03 PHP

ThinkPHP模板比较标签用法详解

2014/06/30 PHP

PHP实现根据数组某个键值大小进行排序的方法

2018/03/13 PHP

在textarea中屏蔽js的某个function的javascript代码

2007/04/20 Javascript

JS维吉尼亚密码算法实现代码

2010/11/09 Javascript

js 在定义的时候立即执行的函数表达式(function)写法

2013/01/16 Javascript

js查找某元素中的所有图片地址的方法

2014/01/16 Javascript

Javascript中拼接大量字符串的方法

2015/02/05 Javascript

javascript实现跨域的方法汇总

2015/06/25 Javascript

AngularJS入门教程之AngularJS指令

2016/04/18 Javascript

AngularJS实现textarea记录只能输入规定数量的字符并显示

2016/04/26 Javascript

ExtJS 4.2 Grid组件单元格合并的方法

2016/10/12 Javascript

基于javascript实现的购物商城商品倒计时实例

2016/12/11 Javascript

AngularJS中的作用域实例分析

2018/05/16 Javascript

使用Vue实现移动端左滑删除效果附源码

2019/05/16 Javascript

小程序实现上下移动切换位置

2019/09/23 Javascript

Python写的创建文件夹自定义函数mkdir()

2014/08/25 Python

对于Python中RawString的理解介绍

2016/07/07 Python

Python 稀疏矩阵-sparse 存储和转换

2017/05/27 Python

python基础教程项目四之新闻聚合

2018/04/02 Python

Python pygorithm模块用法示例【常见算法测试】

2018/08/16 Python

示例详解Python3 or Python2 两者之间的差异

2018/08/23 Python

python 实现数字字符串左侧补零的方法

2018/12/04 Python

Pytorch实现LSTM和GRU示例

2020/01/14 Python

html5需遵循的6个设计原则

2016/04/27 HTML / CSS

如何让pre和textarea等HTML元素去掉滚动条自动换行自适应文本内容高度

2019/08/01 HTML / CSS

使用canvas生成含有微信头像的邀请海报没有微信头像问题

2019/10/29 HTML / CSS

美国领先的水果篮送货公司和新鲜水果供应商：The Fruit Company

2018/02/13 全球购物

7 For All Mankind官网：美国加州洛杉矶的高级牛仔服装品牌

2018/12/20 全球购物

ECCO英国官网：丹麦鞋履品牌

2019/09/03 全球购物

Tahari ASL官方网站：高级设计师女装

2021/03/15 全球购物

大专学生推荐信范文

2013/11/19 职场文书

护士的岗位职责

2013/12/04 职场文书

Python数据可视化之绘制柱状图和条形图

2021/05/25 Python

MybatisPlus代码生成器的使用方法详解

2021/06/13 Java/Android