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分析、压缩工具 JavaScript Analyser
Nov 30 Javascript
javascript如何写热点图
Dec 08 Javascript
js 求时间差的实现代码
Apr 26 Javascript
使用jQuery实现Web页面换肤功能的要点解析
May 12 Javascript
js实现音频控制进度条功能
Apr 01 Javascript
ES6新特性五:Set与Map的数据结构实例分析
Apr 21 Javascript
vuejs实现递归树型菜单组件
Jan 13 Javascript
vue 开发一个按钮组件的示例代码
Mar 27 Javascript
Echart折线图手柄触发事件示例详解
Dec 16 Javascript
简单了解Ajax表单序列化的实现方法
Jun 14 Javascript
js中script的上下放置区别,Dom的增删改创建操作实例分析
Dec 16 Javascript
使用JavaScript实现网页秒表功能(含开始、暂停、继续、重置功能)
Jun 05 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
一个从别的网站抓取信息的例子(域名查询)
2006/10/09 PHP
joomla jce editor 解决上传中文名文件失败问题
2013/06/09 PHP
php  单例模式详细介绍及实现源码
2016/11/05 PHP
PHP简单实现欧拉函数Euler功能示例
2017/11/06 PHP
tp5(thinkPHP5框架)使用DB实现批量删除功能示例
2019/05/28 PHP
基于jquery的lazy loader插件实现图片的延迟加载[简单使用]
2011/05/07 Javascript
js window.onload 加载多个函数和追加函数详解
2014/01/08 Javascript
基于jQuery+Cookie实现的防止刷新的在线考试倒计时
2015/06/19 Javascript
举例讲解Node.js中的Writable对象
2015/07/29 Javascript
基于JS实现无缝滚动思路及代码分享
2016/06/07 Javascript
jQuery实例—选项卡的简单实现(js源码和jQuery)
2016/06/14 Javascript
JS实现隐藏同级元素后只显示JS文件内容的方法
2016/09/04 Javascript
JavaScript递归操作实例浅析
2016/10/31 Javascript
jQuery实现两列等高并自适应高度
2016/12/22 Javascript
jQuery插件HighCharts绘制2D柱状图、折线图的组合双轴图效果示例【附demo源码下载】
2017/03/09 Javascript
AngularJS日程表案例详解
2017/08/15 Javascript
vue2.0 可折叠列表 v-for循环展示的实例
2018/09/07 Javascript
微信小程序中插入激励视频广告并获取收益(实例代码)
2019/12/06 Javascript
原生JS实现音乐播放器
2021/01/26 Javascript
python获取糗百图片代码实例
2013/12/18 Python
python二分查找算法的递归实现方法
2016/05/12 Python
Python通过RabbitMQ服务器实现交换机功能的实例教程
2016/06/29 Python
Python3.4解释器用法简单示例
2019/03/22 Python
使用python进行波形及频谱绘制的方法
2019/06/17 Python
分享CSS3中必须要知道的10个顶级命令
2012/04/26 HTML / CSS
HTML5+CSS3实现拖放(Drag and Drop)示例
2014/07/07 HTML / CSS
详解HTML5 Canvas绘制不规则图形时的非零环绕原则
2016/03/21 HTML / CSS
Under Armour安德玛德国官网:美国高端运动科技品牌
2019/03/09 全球购物
小学班干部竞选演讲稿
2014/04/24 职场文书
爱国主义教育演讲稿
2014/08/26 职场文书
乡镇党的群众路线对照检查材料
2014/09/24 职场文书
支部书记四风问题自我剖析材料
2014/09/29 职场文书
销售辞职信范文
2015/03/02 职场文书
仅仅使用 HTML/CSS 实现各类进度条的方式汇总
2021/11/11 HTML / CSS
Java 异步任务计算FutureTask
2022/04/28 Java/Android
Golang解析JSON对象
2022/04/30 Golang