编程 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控制的回到页面顶端goTop的代码实现

Mar 20 Javascript

js Date概念详细介绍

Nov 22 Javascript

js取值中form.all和不加all的区别介绍

Jan 20 Javascript

Jquery使用val方法读写value值

May 18 Javascript

基于jQuery通过jQuery.form.js插件使用ajax提交form表单

Aug 17 Javascript

全面解析Bootstrap中form、navbar的使用方法

May 30 Javascript

AngularJS 模块化详解及实例代码

Sep 14 Javascript

jQuery基于ajax实现页面加载后检查用户登录状态的方法

Feb 10 Javascript

JavaScript两个变量交换值的实现方法

Mar 01 Javascript

分析JS中this引发的bug

Dec 12 Javascript

Vue完整项目构建(进阶篇)

Feb 10 Javascript

原生js添加一个或多个类名的方法分析

Jul 30 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中空字符串介绍0、null、empty和false之间的关系

2012/09/25 PHP

PHP提取字符串中的手机号正则表达式怎么写

2017/07/17 PHP

PhpStorm2020.1 安装 debug - Postman 调用的详细教程

2020/08/17 PHP

javascript里的条件判断

2007/02/27 Javascript

Jquery图片滚动与幻灯片的实例代码

2013/04/08 Javascript

JavaScript 对任意元素,自定义右键菜单的实现方法

2013/05/08 Javascript

关于jquery的多个选择器的使用示例

2013/10/18 Javascript

js 数组去重的四种实用方法

2014/09/09 Javascript

onclick和onblur冲突问题的快速解决方法

2016/04/28 Javascript

如何使用AngularJs打造权限管理系统【简易型】

2016/05/09 Javascript

javascript实现简易计算器的代码

2016/05/31 Javascript

JavaScript性能优化总结之加载与执行

2016/08/11 Javascript

Bootstrap 下拉多选框插件Bootstrap Multiselect

2017/01/22 Javascript

angular.JS实现网页禁用调试、复制和剪切

2017/03/31 Javascript

JavaScript中document.referrer的用法详解

2017/07/04 Javascript

基于webpack4搭建的react项目框架的方法

2018/06/30 Javascript

vue实现条件判断动态绑定样式的方法

2018/09/29 Javascript

JS实现倒计时图文效果

2018/11/17 Javascript

vue单页面在微信下只能分享落地页的解决方案

2019/04/15 Javascript

一篇文章带你搞懂Vue虚拟Dom与diff算法

2020/08/25 Javascript

js将日期格式转换为YYYY-MM-DD HH:MM:SS

2020/09/18 Javascript

python实现的文件同步服务器实例

2015/06/02 Python

python实现爬虫统计学校BBS男女比例之数据处理（三）

2015/12/31 Python

Python 40行代码实现人脸识别功能

2017/04/02 Python

Python 实现数据库更新脚本的生成方法

2017/07/09 Python

Python实现的批量修改文件后缀名操作示例

2018/12/07 Python

python 爬虫之selenium可视化爬虫的实现

2020/12/04 Python

英国花园、DIY、电器和家居用品商店：Robert Dyas

2019/03/18 全球购物

德国珠宝和配件商店：Styleserver

2021/02/23 全球购物

统计每一学生的平均成绩

2014/06/06 面试题

运动会广播稿100字

2014/01/11 职场文书

担保书格式及范文

2014/04/01 职场文书

运动会口号霸气押韵

2015/12/24 职场文书

Java基础-封装和继承

2021/07/02 Java/Android

口袋妖怪冰系十大最强精灵，几何雪花排第七，第六类似北极熊

2022/03/18 日漫

使用vuex-persistedstate本地存储vuex

2022/04/29 Vue.js