编程 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 幻灯片插件(带缩略图功能)

Jan 24 Javascript

详谈 Jquery Ajax异步处理Json数据.

Sep 09 Javascript

jquery 实现checkbox全选，反选，全不选等功能代码(奇数)

Oct 24 Javascript

Javascript实现字数统计

Jul 03 Javascript

BootStrap智能表单实战系列(四)表单布局介绍

Jun 13 Javascript

easyui combobox开启搜索自动完成功能的实例代码

Nov 08 Javascript

jQuery之动画效果大全

Nov 09 Javascript

javascript 单例模式详解及简单实例

Feb 14 Javascript

vue 数组和对象不能直接赋值情况和解决方法(推荐)

Oct 25 Javascript

微信小程序实现选项卡功能

Jun 19 Javascript

详解如何构建Promise队列实现异步函数顺序执行

Oct 23 Javascript

AJAX在JQuery中的应用详解

Jan 30 jQuery

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中get_object_vars()方法用法实例

2015/02/08 PHP

Laravel中使用阿里云OSS Composer包分享

2015/02/10 PHP

php中PDO方式实现数据库的增删改查

2015/05/17 PHP

如何用PHP做到页面注册审核

2017/03/02 PHP

使用正则替换变量

2007/05/05 Javascript

查询绑定数据岛的表格中的文本并修改显示方式的js代码

2009/12/15 Javascript

ie中js创建checkbox默认选中问题探讨

2013/10/21 Javascript

ajax请求乱码的解决方法(中文乱码)

2014/04/10 Javascript

javascript Deferred和递归次数限制实例

2014/10/21 Javascript

Vue.js一个文件对应一个组件实践

2016/10/27 Javascript

jQuery EasyUI tree增加搜索功能的实现方法

2017/04/27 jQuery

详解jquery选择器的原理

2017/08/01 jQuery

Vue+Element使用富文本编辑器的示例代码

2017/08/14 Javascript

使用Nodejs连接mongodb数据库的实现代码

2017/08/21 NodeJs

浅谈vue的几种绑定变量的值防止其改变的方法

2018/03/01 Javascript

Node.js事件的正确使用方法

2019/04/05 Javascript

JavaScript中将值转换为字符串的五种方法总结

2019/06/06 Javascript

Layui点击图片弹框预览的实现方法

2019/09/16 Javascript

浅谈vue在html中出现{{}}的原因及解决方式

2020/11/16 Javascript

[01:03:51]2018DOTA2亚洲邀请赛 4.7 淘汰赛 VP vs LGD 第三场

2018/04/09 DOTA

python实现图片处理和特征提取详解

2017/11/13 Python

在python中对变量判断是否为None的三种方法总结

2019/01/23 Python

Python参数类型以及常见的坑详解

2019/07/08 Python

Flask使用Pyecharts在单个页面展示多个图表的方法

2019/08/05 Python

python 单线程和异步协程工作方式解析

2019/09/28 Python

TensorFlow2.1.0最新版本安装详细教程

2020/04/08 Python

python3:excel操作之读取数据并返回字典 + 写入的案例

2020/09/01 Python

python调用win32接口进行截图的示例

2020/11/11 Python

使用django自带的user做外键的方法

2020/11/30 Python

HTML5 Canvas绘制圆点虚线实例

2015/01/01 HTML / CSS

三维科技面试题

2013/07/27 面试题

cf收人广告词

2014/03/14 职场文书

2015社区六五普法工作总结

2015/04/21 职场文书

2015年度合同管理工作总结

2015/05/22 职场文书

2015年中秋晚会主持词

2015/07/01 职场文书

如何基于python实现单目三维重建详解

2022/06/25 Python