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. Android项目实战（五十四）：zxing 生成二维码图片去除白色内边距的解决方案

    目录:zxing->encoding->EncodingHandler类 中修改 createQRCode方法 private static final int BLACK = 0xff0 ...

  2. v4v7升级到androidx过程

    因为原项目应用的都是v4v7包,谷歌改成androidx后就升级了一番,首先在properties文件 然后在菜单里点击升级,studio会帮你把报名什么的都改掉 打开项目,发现都自动改掉了,完美,然 ...

  3. Python之路【第二篇】:Python基础

    Python基础 对于Python,一切事物都是对象,对象基于类创建 所以,以下这些值都时对象:"zhurui".22.['北京','上海','深圳'],并且是根据不同的类生成的对 ...

  4. sql server2005安装时报 ‘服务无法启动’

    SQL server服务无法启动的原因分析: 在安装SQL 2005标准版(不多于四个CPU)和企业版(无限制)时,CPU的总核数必须是2的n次方.即核心数为1,2,4,8,16,32依次类推.因BL ...

  5. Windows Server 2016-活动目录NTP时间同步

    在实际生产域环境下,往往会有很多跟时间不同步相关的问题,简单的说几种常见的情景:本地客户端时间与域控时间不统一导致无法加域:每次客户端电脑输入密码到进入桌面环境等N久:Skype for Busine ...

  6. nginx通过域名访问项目（不接项目名称），cookie丢失问题详解

    最近搞了个域名,想用它直接去访问Tomcat上部署的项目,开始一直必须加上项目名称,经过短暂配置,成功了. 访问一次,到达登陆页面,结果死活登录不进去,一直在登陆界面,原来是由于cookie丢失,现配 ...

  7. （转）ceph 常用 运维命令--查看信息 - 不错的文档

    下面是测试验证环节 1. 创建一个 pool rbd create foo --size 4 --image-format 2 --image-feature layering 2. 挂载和格式化 r ...

  8. k8s实战之从私有仓库拉取镜像 - kubernetes

    1.实战目的 从私有docker仓库拉取镜像,部署pod.上一篇中,我们搭建了私有的镜像仓库,这一篇我们将与k8s结合实战使用私有仓库. 2.登录docker 为了完成本次实战,需要登录docker, ...

  9. .NET Core微服务之基于MassTransit实现数据最终一致性（Part 2）

    Tip: 此篇已加入.NET Core微服务基础系列文章索引 一.案例结构与说明 在上一篇中,我们了解了MassTransit这个开源组件的基本用法,这一篇我们结合一个小案例来了解在ASP.NET C ...

  10. TabLayoutBottomDemo【TabLayout实现底部选项卡】

    版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 使用TabLayout实现底部选项卡切换功能. 效果图 代码分析 1.演示固定模式的展现 2.演示自定义布局的实现 使用步骤 一.项 ...