脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → bootstrap 缩略图 警告框

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

 更新时间：2017年03月09日 14:50:33   作者：erdouzhang  
本文通过实例给大家详解介绍了Bootstrap笔记之缩略图、警告框知识，非常不错，具有参考借鉴价值，需要的朋友可以参考下

 1. 基础缩略图

这里写图片描述

给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.缩略图添加内容

这里写图片描述

<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.警告框

这里写图片描述

点击右上角叉号就关闭警示框。可以更改背景色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">&times;</button>
  <p>这里是提示信息</p>
</div>

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

您可能感兴趣的文章:

相关文章

  • javascript中call和apply的用法示例分析

    javascript中call和apply的用法示例分析

    这篇文章主要介绍了javascript中call和apply的用法示例分析，非常的详细,需要的朋友可以参考下
    2015-04-04
  • 详解JavaScript如何实现并发控制的Promise队列调度器

    详解JavaScript如何实现并发控制的Promise队列调度器

    Promise是JavaScript中一种处理异步操作的技术，提供了一种更优雅的方式来处理并发任务和串行化操作，本文主要介绍了实现并发控制的Promise队列调度器的方法，需要的可以参考一下
    2023-07-07
  • 利用D3.js实现最简单的柱状图示例代码

    利用D3.js实现最简单的柱状图示例代码

    D3.js是一个基于数据操作文档JavaScript库。D3帮助你给数据带来活力通过使用HTML、SVG和CSS。D3重视Web标准为你提供现代浏览器的全部功能，而不是给你一个专有的框架。最近在学习D3.js，这个例子是通过d3.js画一个简单的柱状图。下面来一起看看吧。
    2016-12-12
  • ES6知识点整理之对象解构赋值应用示例

    ES6知识点整理之对象解构赋值应用示例

    这篇文章主要介绍了ES6知识点整理之对象解构赋值应用,结合实例形式分析了ES6对象解构赋值相关概念、原理、出现的问题及相应解决方法,需要的朋友可以参考下
    2019-04-04
  • ExtJs使用自定义插件动态保存表头配置(隐藏或显示)

    ExtJs使用自定义插件动态保存表头配置(隐藏或显示)

    这篇文章主要介绍了ExtJs使用自定义插件动态保存表头配置(隐藏或显示) ,需要的朋友可以参考下
    2018-09-09
  • JS中如何让异步执行的方法同步执行

    JS中如何让异步执行的方法同步执行

    在写js的时候,很多时候都会遇到异步转同步的问题,下面这篇文章主要给大家介绍了关于JS中如何让异步执行的方法同步执行的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-04-04
  • 基于JS实现web端录音与播放功能

    基于JS实现web端录音与播放功能

    这篇文章主要介绍了纯js实现web端录音与播放功能,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
    2019-04-04
  • JavaScript+HTML 实现网页录制音频与下载

    JavaScript+HTML 实现网页录制音频与下载

    在这个数字化的时代,网页端的音频处理能力已经成为一个非常热门的需求,本文将详细介绍如何利用 getUserMedia 和 MediaRecorder 这两个强大的 API,实现网页端音频的录制、处理和播放等功能,需要的朋友可以参考下
    2024-07-07
  • JS正则表达式修饰符global(/g)用法分析

    JS正则表达式修饰符global(/g)用法分析

    这篇文章主要介绍了JS正则表达式修饰符global(/g)用法,结合实例形式分析了JS全局匹配修饰符/g的功能、使用方法与相关注意事项,需要的朋友可以参考下
    2016-12-12
  • 原生js实现选项卡功能

    原生js实现选项卡功能

    本文主要介绍了原生js实现选项卡功能的实例，具有很好的参考价值。下面跟着小编一起来看下吧
    2017-03-03

最新评论