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. AI2(App Inventor 2)离线版服务器网络版

    个人修改包括: 1.后台增加用户批量添加功能         https://gte.fsyz.net/node/1877 2.上传文件限制改为100M ,编译文件限制改为10M      https ...

  2. frp内网 穿透映射使内网svn可外网访问

    起因 公司svn目前部署在内网服务器上,现在想在家中也可以使用,因此需要外网访问内网的工具 经过 使用过几个产品: utools,一个小巧的windows下的工具,内网映射只是它的一个小功能,支持tc ...

  3. svn版本控制迁移到git

    获得原 SVN 仓库使用的作者名字列表 因为导入到git需要配置原作者(svn提交人)和git账户的映射关系 其格式为: vim authors-transform.txt taoxs = xsTao ...

  4. 数据库艰难求生之路(基础：增删改查)part2

    一.数据库查询 由于这个点的东西实在是多的,我就和题目,知识点一起演示. 首先是创建数据库: create database ExampleInfo --创建数据库 use ExampleInfo - ...

  5. perlin噪声

    手贱去点了图形学里面的噪声课程,然后一个周末就交代在这上面了,还是有些云里雾里. 噪声就是给定一个输入变量,生成一个值在0~1范围内的伪随机变量的函数.在图形学中一般是输入一个坐标得到一个范围在0~1 ...

  6. 实现iframe高度自适应

    iframe高度自适应使用场景是类似于微博,新闻等点击加载更多这种功能实现,要求iframe的高度能够跟随内容的变化而变化. 父html文件,也就是引用ifram的文件 src="blog/ ...

  7. 【Netty】(6) ---源码ServerBootstrap

    [Netty]6 ---源码ServerBootstrap 之前写了两篇与Bootstrap相关的文章,一篇是ServerBootstrap的父类,一篇是客户端Bootstrap类,博客地址: [Ne ...

  8. 《IDEO，设计改变一切》（Change By Design）- 读书笔记

    一.关于IDEO与设计思维 IDEO是一家世界顶级创意公司,而作者蒂姆布朗是IDEO的CEO.当然,在未阅读本书之前,我都是不知道的,也不会主动去了解IDEO和蒂姆布朗的.那么,我为什么要去读这样一本 ...

  9. spring-security实现的token授权

    在我的用户密码授权文章里介绍了spring-security的工作过程,不了解的同学,可以先看看用户密码授权这篇文章,在 用户密码授权模式里,主要是通过一个登陆页进行授权,然后把授权对象写到sessi ...

  10. MySQL优化小建议

    背景 "那啥,你过来一下!" "怎么了?我代码都单元测试了的,没出问题啊!"我一脸懵逼跑到运维大佬旁边. "你看看!你看看!多少条报警,赶快优化一下! ...