编程 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游戏人物上下左右跑步效果代码分享

Aug 28 Javascript

基于JS实现PHP的sprintf函数实例

Nov 14 Javascript

jQuery插件实现多级联动菜单效果

Dec 01 Javascript

HTML页面,测试JS对C函数的调用简单实例

Aug 09 Javascript

从零学习node.js之利用express搭建简易论坛(七)

Feb 25 Javascript

实例详解Vue项目使用eslint + prettier规范代码风格

Aug 20 Javascript

微信小程序非swiper组件实现的自定义伪3D轮播图效果示例

Dec 11 Javascript

原生JS实现列表内容自动向上滚动效果

May 22 Javascript

17道题让你彻底理解JS中的类型转换

Aug 08 Javascript

解决layer.open弹出框不能获取input框的值为空的问题

Sep 10 Javascript

浅谈vue-router路由切换组件重用挖下的坑

Nov 01 Javascript

jQuery实现简单评论区功能

Oct 26 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

几种显示数据的方法的比较

2006/10/09 PHP

解析如何通过PHP函数获取当前运行的环境来进行判断执行逻辑(小技巧)

2013/06/25 PHP

PHP图形计数器程序显示网站用户浏览量

2016/07/20 PHP

PHP设计模式之适配器模式原理与用法分析

2018/04/25 PHP

Laravel中如何轻松容易的输出完整的SQL语句

2020/07/26 PHP

javascript 24小时弹出一次的代码(利用cookies)

2009/09/03 Javascript

基于jquery的仿百度的鼠标移入图片抖动效果

2010/09/17 Javascript

JavaScript建立一个语法高亮输入框实现思路

2013/02/26 Javascript

HTML上传控件取消选择

2013/03/06 Javascript

js中AppendChild与insertBefore的用法详细解析

2013/12/16 Javascript

js replace替换所有匹配的字符串

2014/02/13 Javascript

AngularJS学习笔记之基本指令(init、repeat)

2015/06/16 Javascript

Vue.js每天必学之组件与组件间的通信

2016/09/08 Javascript

详解vue.js全局组件和局部组件

2017/04/10 Javascript

JavaScript中附件预览功能实现详解（推荐）

2017/08/15 Javascript

bootstrap日期插件daterangepicker使用详解

2017/10/19 Javascript

30分钟快速入门掌握ES6/ES2015的核心内容（上）

2018/04/18 Javascript

ES6中let 和 const 的新特性

2018/09/03 Javascript

详解Ubuntu安装angular-cli遇到的坑

2018/09/08 Javascript

axios取消请求的实践记录分享

2018/09/26 Javascript

微信小程序template模板与component组件的区别和使用详解

2019/05/22 Javascript

微信小程序iOS下拉白屏晃动问题解决方案

2019/10/12 Javascript

原生js实现简单轮播图

2020/10/26 Javascript

python threading模块操作多线程介绍

2015/04/08 Python

python执行CMD指令,并获取返回的方法

2018/12/19 Python

pandas 使用均值填充缺失值列的小技巧分享

2019/07/04 Python

解决Python3 抓取微信账单信息问题

2019/07/19 Python

python manage.py runserver流程解析

2019/11/08 Python

解决运行出现'dict' object has no attribute 'has_key'问题

2020/07/15 Python

Linux的主要特性

2014/10/06 面试题

服装设计专业毕业生求职信

2014/04/09 职场文书

关于中国梦的演讲稿

2014/04/23 职场文书

旅游与酒店管理专业求职信

2014/07/21 职场文书

单位租房协议书样本

2014/10/30 职场文书

Django Paginator分页器的使用示例

2021/06/23 Python

Elasticsearch Recovery 详细介绍

2022/04/19 Java/Android