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 相关文章推荐
基于Asp.net与Javascript控制的日期控件
May 22 Javascript
ExtJS PropertyGrid中使用Combobox选择值问题
Jun 13 Javascript
JS两种定义方式的区别、内部原理
Nov 21 Javascript
解决js中window.open弹出的是上次的缓存页面问题
Dec 29 Javascript
jQuery插件scroll实现无缝滚动效果
Apr 27 Javascript
wangEditor编辑器失去焦点后仍然可以在原位置插入图片分析
May 06 Javascript
JavaScript实现基于十进制的四舍五入实例
Jul 17 Javascript
通用javascript代码判断版本号是否在版本范围之间
Nov 29 Javascript
使用Promise解决多层异步调用的简单学习心得
May 17 Javascript
基于layPage插件实现两种分页方式浅析
Jul 27 Javascript
Layui数据表格跳转到指定页的实现方法
Sep 05 Javascript
vue 函数调用加括号与不加括号的区别
Oct 29 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原理之异常机制深入分析
2010/08/08 PHP
解析linux下安装memcacheq(mcq)全过程笔记
2013/06/27 PHP
PHP5全版本绕过open_basedir读文件脚本漏洞详细介绍
2015/01/20 PHP
PHP的Laravel框架中使用消息队列queue及异步队列的方法
2016/03/21 PHP
thinkphp框架实现删除和批量删除
2016/06/29 PHP
通过PHP实现用户注册后邮箱验证激活
2020/11/10 PHP
纯js实现的论坛常用的运行代码的效果
2008/07/15 Javascript
关于可运行代码无法正常执行的使用说明
2010/05/13 Javascript
jquery单行文字向上滚动效果示例
2014/03/06 Javascript
使用CDN和AJAX加速WordPress中jQuery的加载
2015/12/05 Javascript
原生js实现移动端瀑布流式代码示例
2015/12/18 Javascript
BootStrap Validator 根据条件在JS中添加或移除校验操作
2017/10/12 Javascript
js解决软键盘遮挡输入框的问题分享
2017/12/19 Javascript
Vue中的循环及修改差值表达式的方法
2019/08/29 Javascript
laravel实现中文和英语互相切换的例子
2019/09/30 Javascript
使用Vue.set()方法实现响应式修改数组数据步骤
2019/11/09 Javascript
JavaScript数组去重实现方法小结
2020/01/17 Javascript
vue3.0 的 Composition API 的使用示例
2020/10/26 Javascript
[05:45]Ti4观战指南(下)
2014/07/07 DOTA
对于Python的框架中一些会话程序的管理
2015/04/20 Python
Python简单定义与使用二叉树示例
2018/05/11 Python
在Python中使用MySQL--PyMySQL的基本使用方法
2019/11/19 Python
python实现多进程按序号批量修改文件名的方法示例
2019/12/30 Python
python画环形图的方法
2020/03/25 Python
女装和独特珠宝:Sundance Catalog
2018/09/19 全球购物
万豪国际住宅与别墅集团:Homes & Villas by Marriott International
2020/10/08 全球购物
关于人生的感言
2014/01/17 职场文书
销售团队激励口号
2014/06/06 职场文书
建设工地安全标语
2014/06/07 职场文书
营销经理工作检讨书
2014/11/03 职场文书
求职自荐信怎么写
2015/03/04 职场文书
居委会工作总结2015
2015/05/18 职场文书
2016年幼儿园教师师德承诺书
2016/03/25 职场文书
2016年九九重阳节活动总结
2016/04/01 职场文书
Python FuzzyWuzzy实现模糊匹配
2022/04/28 Python
Android studio 简单计算器的编写
2022/05/20 Java/Android