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

JTrackBar水平拖动效果

Jul 15 Javascript

location.href 在IE6中不跳转的解决方法与推荐使用代码

Jul 08 Javascript

JSON为什么那样红为什么要用json(另有洞天)

Dec 26 Javascript

Javascript中prototype属性实现给内置对象添加新的方法

May 14 Javascript

javascript实现输出指定行数正方形图案的方法

Aug 03 Javascript

谈谈我对JavaScript中typeof和instanceof的深入理解

Dec 25 Javascript

vue.js入门（3）——详解组件通信

Dec 02 Javascript

jQuery html表格排序插件tablesorter使用方法详解

Feb 10 Javascript

vue实现验证码按钮倒计时功能

Apr 10 Javascript

使用layer弹窗和layui表单实现新增功能

Aug 09 Javascript

详解Element-UI中上传的文件前端处理

Aug 07 Javascript

JS实现简单日历特效

Jan 03 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

为了这两部电子管收音机，买了6套全新电子管和10粒刻度盘灯泡

2021/03/02 无线电

PHP获取音频文件的相关信息

2015/06/22 PHP

php抽象类和接口知识点整理总结

2019/08/02 PHP

js函数排序的实例代码

2013/07/01 Javascript

jQuery验证插件validation使用指南

2015/04/21 Javascript

分享经典的JavaScript开发技巧

2015/11/21 Javascript

jQuery多个版本和其他js库冲突的解决方法

2016/08/11 Javascript

javascript中apply/call和bind的使用

2017/02/15 Javascript

ECMAScript6变量的解构赋值实例详解

2017/09/19 Javascript

JS匿名函数和匿名自执行函数概念与用法分析

2018/03/16 Javascript

js循环map 获取所有的key和value的实现代码(json)

2018/05/09 Javascript

Javascript实现动态时钟效果

2018/11/17 Javascript

Vue+element 解决浏览器自动填充记住的账号密码问题

2019/06/11 Javascript

vue keep-alive列表页缓存详情页返回上一页不刷新,定位到之前位置

2019/11/26 Javascript

2020淘宝618理想生活列车自动领喵币js脚本的代码

2020/06/02 Javascript

[27:08]完美世界DOTA2联赛PWL S2 SZ vs Rebirth 第二场 11.21

2020/11/23 DOTA

[05:08]DOTA2-DPC中国联赛3月6日Recap集锦

2021/03/11 DOTA

python网络编程学习笔记(八)：XML生成与解析（DOM、ElementTree）

2014/06/09 Python

Python学习入门之区块链详解

2017/07/25 Python

用python结合jieba和wordcloud实现词云效果

2017/09/05 Python

解决Django的request.POST获取不到内容的问题

2018/05/28 Python

python 遍历列表提取下标和值的实例

2018/12/25 Python

python 多进程队列数据处理详解

2019/12/23 Python

基于python生成英文版词云图代码实例

2020/05/16 Python

css3中仿放大镜效果的几种方式原理解析

2020/12/03 HTML / CSS

JRE、JDK、JVM之间的关系怎样

2012/05/16 面试题

竞聘上岗演讲稿范文

2014/01/10 职场文书

社区活动邀请函范文

2014/01/29 职场文书

酒店经理职责

2014/01/30 职场文书

体育比赛口号

2014/06/09 职场文书

大学生翘课检讨书范文

2014/10/06 职场文书

导师对论文的学术评语

2015/01/04 职场文书

婚宴邀请函

2015/01/30 职场文书

2015年度物流工作总结

2015/04/30 职场文书

2015年国庆节新闻稿

2015/07/18 职场文书

励志正能量20句：送给所有为梦想拼搏的人

2019/11/11 职场文书