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缩略图与警告框学习使用

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

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 职场文书