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>

View Code

样式效果：

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>

View Code

样式效果：

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>

View Code

样式效果：

转载于:https://www.cnblogs.com/ChengWenHao/p/BootstrapPart11.html

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

bootstrap实战--微金所项目(轮播图1)
使用HTML+CSS实现响应式轮播图一.轮播图展示移动端(< 768px) 非移动端(>768px) 二.轮播图实现思路移动端 1).在移动端可以直接使用bootstrap提供的相关 ...
非常优秀的swiper插件————幻灯片播放、图片轮播
非常优秀的swiper插件----幻灯片播放.图片轮播 http://www.idangero.us/ http://www.swiper.com.cn/ Swiper中文网 2015-10-15 S ...
Android广告图片轮播，支持无限循环和设置轮播样式、切换时间等
Android-----------广告图片轮播控件 Banner广告图片轮播控件,支持无限循环和多种主题,可以灵活设置轮播样式.动画.轮播和切换时间.位置.图片加载框架等! 很多Android AP ...
dw按钮图片滚动js_轮播图--swiper插件/原生js/jQuery
1.swiper插件: 需要下载该插件到本地,并用link标签引用其swiper-bundle.min.css文件,用script引用其swiper-bundle.min.js文件,下载地址及官方文档 ...
4.22、Bootstrap V4自学之路-----内容---轮播
为什么80%的码农都做不了架构师?>>> 示例 <div id="carousel-example-generic" class="caro ...
Web APIs：移动端网页特效--移动端常用开发框架（Bootstrap）及阿里百秀轮播图案例
框架概述框架,顾名思义就是一套架构,它会基于自身的特点向用户提供一套较为完整的解决方案.框架的控制权在框架本身,使用者要按照框架所规定的某种规范进行开发. 前端常用的框架有 Bootstrap.V ...
如何用JS写一个轮播样式
首先我们捋一下逻辑,一个基本的淘宝轮播图,下方会有一个数字按钮控制轮播,其次是当鼠标划入图片时,左右会出现箭头来控制图片的滑动.鼠标移出过后,轮播会自动划走.根据这个逻辑我们可以开始码代码了. 一 1 ...
html全屏轮播图插件,jQuery全屏3D轮播图插件
jQuery.PageScroll3D是一款jQuery全屏3D轮播图插件.该jquery轮播图插件采用响应式设计,可以在垂直方向上制作出类似立方体滚动的3d轮播图效果. 使用方法在页面中引入jqu ...
jq自定义插件—$.fn的使用之(轮播图)兼容性都ok
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

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

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

最新文章

热门文章