编程 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 控制下拉菜单刷新的方法

Mar 03 Javascript

javascript 实现子父窗体互相传值的简单实例

Feb 17 Javascript

jQuery产品间断向下滚动效果核心代码

May 08 Javascript

8个超实用的jQuery功能代码分享

Jan 08 Javascript

js中this的用法实例分析

Jan 10 Javascript

jQuery操作表单常用控件方法小结

Mar 23 Javascript

js+html5通过canvas指定开始和结束点绘制线条的方法

Jun 05 Javascript

基于jQuery实现无缝轮播与左右点击效果

May 13 jQuery

jQuery实现文本显示一段时间后隐藏的方法分析

Jun 20 jQuery

Vue数字输入框组件使用方法详解

Feb 10 Javascript

详解vue-template-admin三级路由无法缓存的解决方案

Mar 10 Javascript

JavaScript实现简单图片切换

Apr 29 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 简单日历实现代码

2009/10/28 PHP

PHP中Session引起的脚本阻塞问题解决办法

2014/04/08 PHP

Laravel框架实现简单的学生信息管理平台案例

2019/05/07 PHP

PHP7创建COOKIE和销毁COOKIE的实例方法

2020/02/03 PHP

javaScript 读取和设置文档元素的样式属性

2009/04/14 Javascript

用jquery实现的模拟QQ邮箱里的收件人选取及其他效果(一)

2011/01/06 Javascript

JavaScript中的排序算法代码

2011/02/22 Javascript

Javascript生成json的函数代码(可以用php的json_decode解码)

2012/06/11 Javascript

一个简单的JS鼠标悬停特效具体方法

2013/06/17 Javascript

在javascript中如何得到中英文混合字符串的长度

2014/01/17 Javascript

jQuery 中$(this).index与$.each的使用指南

2014/11/20 Javascript

学习javascript面向对象实例讲解面向对象选项卡

2016/01/04 Javascript

jQuery插件Validate实现自定义校验结果样式

2016/01/18 Javascript

理解javascript中的MVC模式

2016/01/28 Javascript

体验jQuery和AngularJS的不同点及AngularJS的迷人之处

2016/02/02 Javascript

JS实现本地存储信息的方法(基于localStorage与userData)

2017/02/18 Javascript

vue 2.0封装model组件的方法

2017/08/03 Javascript

AngularJS实现的base64编码与解码功能示例

2018/05/17 Javascript

nodejs检测因特网是否断开的解决方案

2019/04/17 NodeJs

JS实现音量控制拖动

2020/01/15 Javascript

微信小程序如何通过用户授权获取手机号(getPhoneNumber)

2020/01/21 Javascript

[54:09]RNG vs Liquid 2019国际邀请赛淘汰赛败者组 BO3 第一场 8.23

2019/09/05 DOTA

python网页请求urllib2模块简单封装代码

2014/02/07 Python

Python使用Flask框架同时上传多个文件的方法

2015/03/21 Python

python 二分查找和快速排序实例详解

2017/10/13 Python

在Python程序员面试中被问的最多的10道题

2017/12/05 Python

Python的UTC时间转换讲解

2019/02/26 Python

用python按照图像灰度值统计并筛选图片的操作(PIL,shutil,os)

2020/06/04 Python

python dict乱码如何解决

2020/06/07 Python

css3 column实现卡片瀑布流布局的示例代码

2018/06/22 HTML / CSS

介绍一下JNDI的基本概念

2013/07/26 面试题

使用Vue.js和MJML创建响应式电子邮件

2021/03/23 Vue.js

《珍珠泉》教学反思

2014/02/20 职场文书

三分钟演讲稿事例

2014/03/03 职场文书

2015年检察院个人工作总结

2015/05/20 职场文书

2016年感恩节活动总结大全

2016/04/01 职场文书