Bootstrap -- 插件: 按钮状态、折叠样式、轮播样式

1. 按钮（Button）插件：可以添加进一些交互，比如控制按钮状态。

如需向按钮添加加载状态，只需要简单地向 button 元素添加 data-loading-text="Loading..." 作为其属性即可。

为按钮添加加载状态：

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title>My Test bootstrap</title>

    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">

    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>

    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <script>

        $(function() {

            $(".btn").click(function(){

                $(this).button('loading').delay(1000).queue(function() {

                    $(this).button('reset');

                    $(this).dequeue();

                });

            });

        });

    </script>

</head>

<body>

    <button id="fat-btn" class="btn btn-primary" data-loading-text="Loading..." type="button"> 加载状态

</button>

</body>

</html>

样式效果：

2. 折叠（Collapse）插件：可以很容易地让页面区域折叠起来。无论您用它来创建折叠导航还是内容面板，它都允许很多内容选项。

使用折叠样式：

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title>My Test bootstrap</title>

    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">

    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>

    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>

<body>

<div class="panel-group" id="accordion">

    <div class="panel panel-default">

        <div class="panel-heading">

            <h4 class="panel-title">

                <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">

                点击展开

                </a>

            </h4>

        </div>

        <div id="collapseOne" class="panel-collapse collapse in">

            <div class="panel-body">

                展开的内容：折叠（Collapse）插件可以很容易地让页面区域折叠起来。无论您用它来创建折叠导航还是内容面板，它都允许很多内容选项。

    如果您想要单独引用该插件的功能，那么您需要引用 collapse.js。同时，也需要在您的 Bootstrap 版本中引用 Transition（过渡）插件。

            </div>

        </div>

    </div>

</div>

</body>

</html>

样式效果：

3. 轮播（Carousel）插件：是一种灵活的响应式的向站点添加滑块的方式。

使用轮播样式：

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title>My Test bootstrap</title>

    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">

    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>

    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>

<body>

    <div id="myCarousel" class="carousel slide">

        <ol class="carousel-indicators">

            <li data-target="#myCarousel" data-slide-to="0" class="active">1</li>

            <li data-target="#myCarousel" data-slide-to="1">2</li>

            <li data-target="#myCarousel" data-slide-to="2">3</li>

        </ol>

        <div class="carousel-inner">

            <div class="item active">

                <img src="./img/test1.jpg" alt="第一张桌面背景">

            </div>

            <div class="item">

                <img src="./img/test2.jpg" alt="第二张桌面背景">

            </div>

            <div class="item">

                <img src="./img/test3.jpg" alt="第三张桌面背景">

            </div>

        </div>

    </div>

</body>

</html>

样式效果：

Bootstrap -- 插件: 按钮状态、折叠样式、轮播样式的更多相关文章

  1. 使用bootstrap建立响应式网页——通栏轮播图（carousel）

    1.bootstrap提供了js插件——轮播图 我们还是照旧,直接拿过来用,需要改的地方再说. 2.修改 小屏幕看小图,大屏图看大图:这个可以利用自定义属性(data-XXX)data-img-lg( ...

  2. 非常优秀的swiper插件————幻灯片播放、图片轮播

    http://www.idangero.us/ http://www.swiper.com.cn/ Swiper中文网 2015-10-15 SuperSlide2: (这是个PC用的滚屏插件,看着不 ...

  3. Bootstrap 我的学习记录4 轮播图的使用和理解

    <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8& ...

  4. onethink插件二（首页图片轮播）

    2014年8月1日 15:34:15 基于slice-box 写了一个图片轮播的插件. 一.功能: 1.图片轮播功能 2.自定义功能(数量,效果,打开方式) 3.多重效果一键切换 4.独立性强,不影响 ...

  5. 微信小程序开发小技巧——单击事件传参、动态修改样式、轮播样式修改等

    一. 脚本部分: 1. 表达式无效的处理: 如果你发现自己编写的表达式无效或者数据不展示,那么请先检查你的表达式是否有添加{{}},小程序中全部都要添加的,只要是在模板中调用js中的数据 2. 获取元 ...

  6. Bootstrap学习笔记（7）--轮播

    说明: 1. 幻灯片效果,外面的div有个id="myppt",class="carousel slide"这个是有图片滑动效果,不加就是直接瞬间换图片,dat ...

  7. 聊一聊 bootstrap 的轮播图插件

    今天做工作的时候,轻车熟路的做完,又用到了bootstrap的轮播图,觉得有必要安利一下这个插件,如果你需要的轮播图.功能不需要太炫酷,那么bootstrap的插件是你的首要选择. 使用方式 引入js ...

  8. Bootstrap插件之Carousel轮播效果（2015年-05月-21日）

    <!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"& ...

  9. 原生JS实现"旋转木马"效果的图片轮播插件

    一.写在最前面 最近都忙一些杂七杂八的事情,复习软考.研读经典...好像都好久没写过博客了... 我自己写过三个图片轮播,一个是简单的原生JS实现的,没有什么动画效果的,一个是结合JQuery实现的, ...

随机推荐

  1. 「工具」Aquarelo - 来自意大利的色阶管理工具

    Aquarelo是一款小而美的色阶管理工具,由意大利团队开发,包含三个核心功能,可用于色彩管理.色彩搭配等场景. ## 相关参数 * 操作系统:macOS* 工具官网:[Aquarelo for Ma ...

  2. Unicode 与 utf8 utf16 utf32的关系

    Unicode是计算机领域的一项行业标准,它对世界上绝大部分的文字的进行整理和统一编码,Unicode的编码空间可以划分为17个平面(plane),每个平面包含2的16次方(65536)个码位.17个 ...

  3. PuppeteerSharp: 更友好的 Headless Chrome C# API

    前端就有了对 headless 浏览器的需求,最多的应用场景有两个 UI 自动化测试:摆脱手工浏览点击页面确认功能模式 爬虫:解决页面内容异步加载等问题 也就有了很多杰出的实现,前端经常使用的莫过于 ...

  4. javascript权威指南笔记[6-8]

    1.三类对象,两类属性 2.原型链只有在查询的时候才会体现 3.对象属性访问 4.属性赋值 5.delete只是断开属性和宿主对象的关系,不会去操作属性中的属性 6.Object.ke() var m ...

  5. mybatis入门系列二之输入与输出参数

    mybatis入门系列二之详解输入与输出参数   基础知识   mybatis规定mapp.xml中每一个SQL语句形式上只能有一个@parameterType和一个@resultType 1. 返回 ...

  6. Python学习之路——Day01

    Day01 一.编程和编程语言 编程语言是人与计算机之间交流沟通的介质 编程就是人实现通过让计算机实现动作的文件 二.计算机的组成 1.控制器:负责控制指挥计算机硬件运行 2.运算器:负责数学与逻辑运 ...

  7. 理解滑动平均(exponential moving average)

    1. 用滑动平均估计局部均值 滑动平均(exponential moving average),或者叫做指数加权平均(exponentially weighted moving average),可以 ...

  8. 从零开始学习PYTHON3讲义（十五）让画面动起来

    <从零开始PYTHON3>第十五讲 虽然看起来绘图和音乐并不相关,但是听过了上一讲的内容你一定知道,这是游戏编程中四个需要处理内容的两部分,这两部分必须同时.并行的处理,不能因为某一项计算 ...

  9. Linux最小系统移植之早期打印CONFIG_DEBUG_LL

    一.几个关键宏定义 CONFIG_DEBUG_LL. CONFIG_DEBUG_LL_INCLUDE 容我慢慢道来, 首先要使能早期打印, menuconfig必须选中CONFIG_DEBUG_LL, ...

  10. JVM（六）为什么新生代有两个Survivor分区？

    本文会使用排除法的手段,来讲解新生代的区域划分,从而让读者能够更清晰的理解分代回收器的原理,在开始之前我们先来整体认识一下分代收集器. 分代收集器会把内存空间分为:老生代和新生代两个区域,而新生代又会 ...