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 学习之旅 (2)
Feb 05 Javascript
js静态方法与实例方法分析
Jul 04 Javascript
js有关元素内容操作小结
Dec 20 Javascript
JS批量操作CSS属性详细解析
Dec 16 Javascript
Jquery+asp.net后台数据传到前台js进行解析的方法
May 11 Javascript
jQuery中slice()方法用法实例
Jan 07 Javascript
浅谈JavaScript 浏览器对象
Jun 03 Javascript
让浏览器崩溃的12行JS代码(DoS攻击分析及防御)
Oct 10 Javascript
微信小程序 高德地图SDK详解及简单实例(源码下载)
Jan 11 Javascript
Node.js开发第三方微信公众平台
Jun 05 Javascript
聊聊Vue中provide/inject的应用详解
Nov 10 Javascript
js实现录音上传功能
Nov 22 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 ob_start()控制浏览器cache、生成html实现代码
2010/02/16 PHP
PHP读取XML值的代码(推荐)
2011/01/01 PHP
php中debug_backtrace、debug_print_backtrace和匿名函数用法实例
2014/12/01 PHP
PHP单例模式简单用法示例
2017/06/23 PHP
很棒的学习jQuery的12个网站推荐
2011/04/28 Javascript
autoPlay 基于jquery的图片自动播放效果
2011/12/07 Javascript
方便实用的jQuery checkbox复选框全选功能简单实例
2013/10/09 Javascript
按下Enter焦点移至下一个控件的实现js代码
2013/12/11 Javascript
js函数内变量的作用域分析
2015/01/12 Javascript
JavaScript设置获取和设置属性的方法
2015/03/04 Javascript
jQuery 1.9.1源码分析系列(十三)之位置大小操作
2015/12/02 Javascript
JavaScript+html5 canvas实现图片破碎重组动画特效
2016/02/22 Javascript
使用淘宝镜像cnpm安装Vue.js的图文教程
2018/05/17 Javascript
html-webpack-plugin修改页面的title的方法
2020/06/18 Javascript
基于PHP pthreads实现多线程代码实例
2020/06/24 Javascript
vue 根据选择的月份动态展示日期对应的星期几
2021/02/06 Vue.js
Python3.2模拟实现webqq登录
2016/02/15 Python
Python 实现链表实例代码
2017/04/07 Python
JPype实现在python中调用JAVA的实例
2017/07/19 Python
python写入已存在的excel数据实例
2018/05/03 Python
可能是最全面的 Python 字符串拼接总结【收藏】
2018/07/09 Python
一文带你了解Python中的字符串是什么
2018/11/20 Python
解决pycharm回车之后不能换行或不能缩进的问题
2019/01/16 Python
对python判断ip是否可达的实例详解
2019/01/31 Python
Pycharm IDE的安装和使用教程详解
2020/04/30 Python
python元组拆包实现方法
2021/02/28 Python
CSS3的 fit-content实现水平居中
2017/09/07 HTML / CSS
HTML5 Canvas实现文本对齐的方法总结
2016/03/24 HTML / CSS
mui几种页面跳转方式对比总结概括
2017/08/18 HTML / CSS
Marriott国际:万豪国际酒店查询预订
2017/09/25 全球购物
澳大利亚网上买书:Angus & Robertson
2019/07/21 全球购物
法学专业应届生求职信
2013/10/16 职场文书
好邻里事迹材料
2014/01/16 职场文书
运动会方队口号
2014/06/07 职场文书
业绩倒数第一的检讨书
2014/09/24 职场文书
优质护理心得体会
2016/01/22 职场文书