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 -- 插件: 按钮状态、折叠样式、轮播样式的更多相关文章

使用bootstrap建立响应式网页——通栏轮播图（carousel）
1.bootstrap提供了js插件——轮播图我们还是照旧,直接拿过来用,需要改的地方再说. 2.修改小屏幕看小图,大屏图看大图:这个可以利用自定义属性(data-XXX)data-img-lg( ...
非常优秀的swiper插件————幻灯片播放、图片轮播
http://www.idangero.us/ http://www.swiper.com.cn/ Swiper中文网 2015-10-15 SuperSlide2: (这是个PC用的滚屏插件,看着不 ...
Bootstrap 我的学习记录4 轮播图的使用和理解
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8& ...
onethink插件二（首页图片轮播）
2014年8月1日 15:34:15 基于slice-box 写了一个图片轮播的插件. 一.功能: 1.图片轮播功能 2.自定义功能(数量,效果,打开方式) 3.多重效果一键切换 4.独立性强,不影响 ...
微信小程序开发小技巧——单击事件传参、动态修改样式、轮播样式修改等
一. 脚本部分: 1. 表达式无效的处理: 如果你发现自己编写的表达式无效或者数据不展示,那么请先检查你的表达式是否有添加{{}},小程序中全部都要添加的,只要是在模板中调用js中的数据 2. 获取元 ...
Bootstrap学习笔记（7）--轮播
说明: 1. 幻灯片效果,外面的div有个id="myppt",class="carousel slide"这个是有图片滑动效果,不加就是直接瞬间换图片,dat ...
聊一聊 bootstrap 的轮播图插件
今天做工作的时候,轻车熟路的做完,又用到了bootstrap的轮播图,觉得有必要安利一下这个插件,如果你需要的轮播图.功能不需要太炫酷,那么bootstrap的插件是你的首要选择. 使用方式引入js ...
Bootstrap插件之Carousel轮播效果（2015年-05月-21日）
<!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"& ...
原生JS实现"旋转木马"效果的图片轮播插件
一.写在最前面最近都忙一些杂七杂八的事情,复习软考.研读经典...好像都好久没写过博客了... 我自己写过三个图片轮播,一个是简单的原生JS实现的,没有什么动画效果的,一个是结合JQuery实现的, ...

随机推荐

SuperMap iObject入门开发系列之三管线系统标注
本文是一位好友“托马斯”授权给我来发表的,介绍都是他的研究成果,在此,非常感谢. 管线系统会涉及到一些坐标标注,属性标注,提供给用户查询获取其需要的信息,这期的文章介绍的是基于超图iObject开发的 ...
NTSTATUS Values
By combining the NTSTATUS into a single 32-bit numbering space, the following NTSTATUS values are de ...
CF914G Sum the Fibonacci FWT、子集卷积
传送门一道良心的练习FWT和子集卷积的板子-- 具体来说就是先把所有满足\(s_a \& s_b = 0\)的\(s_a \mid s_b\)的值用子集卷积算出来,将所有\(s_a \opl ...
body标签中l的相关标签
字体标签: h1~h6.font. u.b,.strong. em. sup. sub 排版标签: div,.span.br.hr.center.pre 图片标签: img 超链接: a 列表标签: ...
我的2018OKR年终回顾与2019OKR初步规划
转眼一年又过去了,在这个年底的时候,按照国际惯例,又到了重新回顾审视一下这一年来的得失,规划一下明年的奋斗方向的时候了.因此,我继续使用OKR来给自己做Review和Planning,也希望自己能够保 ...
[macOS开发.NET Core] 一个简单的WEB程序
上一篇咱们提到了在macOS下选进行开发. 咱们已经把工具准备完成了. 现在咱们做一个简单的DEMO 创建WEB程序之前咱们已经创建过WEB程序,并且成功的运行过数据现在咱们创建一个页面,并显 ...
104 - kube-scheduler源码分析 - predicate整体流程
(注:从微信公众:CloudGeek复制过来,格式略微错乱,更好阅读体验请移步公众号,二维码在文末) 今天我们来跟一下predicates的整个过程:predicate这个词应该是“断言.断定”的意思 ...
DSAPI 截取被遮挡的窗口图像
Me.BackgroundImage=DSAPI.控件.截取窗体或控件图像(目标窗口句柄) 支持截取被覆盖或隐藏的窗口.
【Oracle学习笔记】索引
1 简介 1)索引是数据库对象之一,用于加快数据的检索,类似于书籍的索引.在数据库中索引可以减少数据库程序查询结果时需要读取的数据量,类似于在书籍中我们利用索引可以不用翻阅整本书即可找到想要的信息. ...
.NET Core和.NET Standard有什么不同
近日,微软发布了.NET Core 2.0,但是开发人员中间仍然存在一些疑惑,就是.NET Core..NET Standard.Xamarin和.NET Framework有什么不同. .N ...

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

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

随机推荐

热门专题