Bootstrap笔记之缩略图、警告框实例详解


Posted in Javascript onMarch 09, 2017

 1. 基础缩略图

Bootstrap笔记之缩略图、警告框实例详解

给a标签添加类class="thumbnail"如下:

<div class="row">
  <div class="col-md-3 col-sm-6">
    <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="thumbnail"><img src="img/01.png" alt="图片"></a>
  </div>
  <div class="col-md-3 col-sm-6">
    <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="thumbnail"><img src="img/01.png" alt="图片"></a>
  </div>
  <div class="col-md-3 col-sm-6">
    <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="thumbnail"><img src="img/01.png" alt="图片"></a>
  </div>
  <div class="col-md-3 col-sm-6">
    <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="thumbnail"><img src="img/01.png" alt="图片"></a>
  </div>
</div>

2.缩略图添加内容

Bootstrap笔记之缩略图、警告框实例详解

<div class="row">
  <div class="col-md-4 col-sm-6">
    <div class="thumbnail">
      <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="img/01.png" alt="图片"></a>
      <div class="caption">
        <h3>我是图片标题</h3>
        <p>我是对图片的描述我是对图片的描述我是对图片的描述</p>
        <p><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="btn btn-primary">按钮</a><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="btn btn-danger">按钮</a></p>
      </div>
    </div>
  </div>
</div>

3.警告框

Bootstrap笔记之缩略图、警告框实例详解

点击右上角叉号就关闭警示框。可以更改背景色alert-warning、alert-info、alert-success、alert-danger

可关闭的警示框添加类;alert-dismissible和按钮button.

也可以在警告框中添加a链接:

<p>这里是提示信息<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="alert-link">百度</a></p>

<div class="alert alert-warning alert-dismissible">
  <button type="button" class="close" data-dismiss="alert">×</button>
  <p>这里是提示信息</p>
</div>

以上所述是小编给大家介绍的 Bootstrap笔记之缩略图、警告框实例详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
在JavaScript中,为什么要尽可能使用局部变量?
Apr 06 Javascript
javascript省市级联功能实现方法实例详解
Oct 20 Javascript
利用Node.js制作爬取大众点评的爬虫
Sep 22 Javascript
JavaScript实现格式化字符串函数String.format
Dec 16 Javascript
React-Native中禁用Navigator手势返回的示例代码
Sep 09 Javascript
vue.js实现插入数值与表达式的方法分析
Jul 06 Javascript
详解Node.js 中使用 ECDSA 签名遇到的坑
Nov 26 Javascript
React中阻止事件冒泡的问题详析
Apr 12 Javascript
node.js实现带进度条的多文件上传
Mar 27 Javascript
Vue插槽_特殊特性slot,slot-scope与指令v-slot说明
Sep 04 Javascript
JS时间戳与日期格式互相转换的简单方法示例
Jan 30 Javascript
Vue路由权限控制解析
Nov 09 Javascript
Bootstrap学习笔记之进度条、媒体对象实例详解
Mar 09 #Javascript
bootstrap实现的自适应页面简单应用示例
Mar 09 #Javascript
js实现3D图片环展示效果
Mar 09 #Javascript
Vue监听数组变化源码解析
Mar 09 #Javascript
Node.js通过身份证号验证年龄、出生日期与性别方法示例
Mar 09 #Javascript
基于jQuery实现一个marquee无缝滚动的插件
Mar 09 #Javascript
jQuery插件HighCharts绘制2D圆环图效果示例【附demo源码下载】
Mar 09 #Javascript
You might like
php正则表达式(regar expression)
2011/09/10 PHP
PHP 之Section与Cookie使用总结
2012/09/14 PHP
PHP sleep()函数, usleep()函数
2016/08/25 PHP
PHP迭代与递归实现无限级分类
2017/08/28 PHP
Thinkphp整合阿里云OSS图片上传实例代码
2019/04/28 PHP
关于this和self的使用说明
2010/08/01 Javascript
JS操作Cookie写入和读取实例代码
2013/10/20 Javascript
js实现全屏漂浮广告移入光标停止移动
2013/12/02 Javascript
如何将php数组或者对象传递给javascript
2014/03/20 Javascript
jQuery选择器简明总结(含用法实例,一目了然)
2014/04/25 Javascript
IE8下jQuery改变png图片透明度时出现的黑边
2015/08/30 Javascript
简单谈谈json跨域
2016/03/13 Javascript
js 弹出对话框(遮罩)透明,可拖动的简单实例
2016/07/11 Javascript
jQuery 更改checkbox的状态,无效的解决方法
2016/07/22 Javascript
js判断数组key是否存在(不用循环)的简单实例
2016/08/03 Javascript
vue购物车插件编写代码
2017/11/27 Javascript
JavaScript常用事件介绍
2019/01/21 Javascript
layui输入框只允许输入中文且判断长度的例子
2019/09/18 Javascript
[00:27]DOTA2战队VP、Secret贺新春
2018/02/11 DOTA
用Python中的wxPython实现最基本的浏览器功能
2015/04/14 Python
python 获取一个值在某个区间的指定倍数的值方法
2018/11/12 Python
python3 json数据格式的转换(dumps/loads的使用、dict to str/str to dict、json字符串/字典的相互转换)
2019/04/01 Python
opencv3/Python 稠密光流calcOpticalFlowFarneback详解
2019/12/11 Python
python实现串口通信的示例代码
2020/02/10 Python
Python OpenCV实现测量图片物体宽度
2020/05/27 Python
python 装饰器的使用示例
2020/10/10 Python
浅谈HTML5 FileReader分布读取文件以及其方法简介
2017/11/09 HTML / CSS
FirstCry阿联酋儿童和婴儿产品网上购物:FirstCry.ae
2021/02/22 全球购物
西班牙Polo衫品牌:Polo Club
2020/08/09 全球购物
25道Java面试题集合
2013/05/21 面试题
工程造价与管理专业应届生求职信
2013/11/23 职场文书
开朗女孩的自我评价
2014/02/10 职场文书
闭幕式主持词
2014/04/02 职场文书
小学总务工作总结
2015/08/13 职场文书
Sql Server之数据类型详解
2022/02/28 SQL Server
Axios代理配置及封装响应拦截处理方式
2022/04/07 Vue.js