Bootstrap学习笔记4
作者：互联网
1. 下拉菜单与滚动监视器
1.1 下拉菜单
1.1.1 属性声明式方法
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>下拉菜单--属性声明式方法（一）</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<h3>示例1</h3>
<div class="navbar navbar-default" id="navmenu">
<a href="##" class="navbar-brand">W3cplus</a>
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="##" data-toggle="dropdown" class="dropdown-toggle" role="button" id="tutorial">教程<b class="caret"></b></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="tutorial">
<li role="presentation"><a href="##">CSS3</a></li>
<li role="presentation"><a href="##">HTML5</a></li>
<li role="presentation"><a href="##">Sass</a></li>
</ul>
</li>
<li><a href="##">前端论坛</a></li>
<li><a href="##">关于我们</a></li>
</ul>
</div>
<h3>示例2</h3>
<ul class="nav nav-pills">
<li class="dropdown">
<a href="##" data-toggle="dropdown" class="dropdown-toggle" role="button" id="tutorial">教程<b class="caret"></b></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="tutorial">
<li role="presentation"><a href="##">CSS3</a></li>
<li role="presentation"><a href="##">HTML5</a></li>
<li role="presentation"><a href="##">Sass</a></li>
</ul>
</li>
<li class="active"><a href="##">前端论坛</a></li>
<li><a href="##">关于我们</a></li>
</ul>
<script src="https://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>
1.1.2 JavaScript触发方法
<ul class="nav nav-pills">
<li class="dropdown">
<a href="##" class="dropdown-toggle" role="button" id="tutorial">教程<b class="caret"></b></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="tutorial">
<li role="presentation"><a href="##">CSS3</a></li>
<li role="presentation"><a href="##">HTML5</a></li>
<li role="presentation"><a href="##">Sass</a></li>
</ul>
</li>
<li class="active"><a href="##">前端论坛</a></li>
<li><a href="##">关于我们</a></li>
</ul>
使用JavaScript调用dropdown()方法后，单击激活按钮，会弹出下拉菜单，再次单击的时候会收起下拉菜单
$(function(){
$(".dropdown-toggle").dropdown();
})
还可以使用参数“toggle”。当下拉菜单隐藏时，调用dropdown(“toggle”)方法可以显示下拉菜单，反之，如果下拉菜单显示时，调用dropdown(“toggle”)方法可以让下拉菜单隐藏
$(function(){
$(".dropdown-toggle").dropdown("toggle");
})
不过使用该参数，每次单击都要两次toggle，就会一直是一个不变的状态。所以，一般情况下，使用示例中不带参数的方法。就算你需要使用参数“toggle”，也建议使用jQuery的one方法
$(".dropdown-toggle").one("click",function(){
$(this).dropdown("toggle");
})
1.2 滚动监视器
表现形式：
- 当用户鼠标滚动时，滚动条的位置会自动更新导航条中相应的导航项
- 用户拖动滚动条，当滚动到@mdo时，上面的@mdo导航项就会高亮显示
1.2.1 滚动监控器的设计
-
第一步：使用滚动监控器，首要的条件是在页面中加载对应的插件
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> -
第二步：设计一个带有下拉菜单的导航条。分别为导航条和下拉菜单项定义一个锚点链接，锚点分别为“#blog”,“html”,“#css”,“#sass”,“#js”,“php”,“#about”。同时为导航条定义一个id值“navbar-menu”（id名称可自由定义），方便滚动监控
-
第三步：设计监控对象。这里将监控对象内容都放置在一个div名为scrollspy（这个类名可自由定义）的容器中，其中放了多个子内容框。每个子内容框有一个标题，而且每个标题的ID值与导航菜单项中的锚点链接名相对应，并且注意加入“data-target="#navbar-menu"”属性（这个属性值要与前面的nav标签的id名称保持一致）
<div class="scrollspy" data-target="#navbar-menu"> <h4 id="blog">Blog</h4> <p>…</p> <h4 id="html">Html</h4> <p>…</p> <h4 id="css">CSS</h4> <p>…</p> <h4 id="sass">Sass</h4> <p>…</p> <h4 id="js">JavaScript</h4> <p>…</p> <p>…</p> <h4 id="php">PHP</h4> <p>…</p> <p>…</p> <h4 id="about">About</h4> <p>…</p> <p>…</p> </div> -
第四步：为监控对象定义样式，设置容器scrollspy大小（设置高度目的是为了产生垂直滚动条）
.scrollspy{ height:500px; font-size:20px; overflow:auto; }
1.2.2 声明属性触发滚动监控
为监控对象设置被监控的data属性：data-spy=“scroll”，指定监控的导航条：data-target="#navbar-menu"。同时定义监控过程中滚动条偏移位置data-offset=“60”,代码如下：
<div class="scrollspy" data-spy="scroll" data-target="#navbar-menu" data-offset="60">
…
</div>
1.2.3 在body中加监控
可以直接在body上进行滚动条监控，此时要将滚动监控器移到body上，而且导航nav一定要在body内部。如下所示：
<body data-spy="scroll" data-target="#navbar-menu">
<div class="navbar navbar-default navbar-fixed-top" id="navbar-menu">
</div>
<h3 id="blog">Blog</h3>
<p>…</p>
</body>
注意：导航条必须设置为顶部固定样式（navbar-fixed-top）
1.2.4 JavaScript方法触发滚动监控器
<nav id="navbar-menu" class="navbar navbar-default navbar-static" role="navigation">
…
</nav>
<div class="scrollspy" id="scrollspy">
…
</div>
<!--JavaScript触发可以这样写：-->
$(function(){
$("#scrollspy").scrollspy({
target: "#navbar-menu"
});
})
<!--Bootstrap的滚动监控还提供了一个方法scrollspy("refresh")。当滚动监控所作用的DOM有增加或删除页面元素的操作时，需要调用下面的refresh方法：-->
$(function(){
$("[data-spy='scroll']").each(function(){
var $spy=$(this).scrollspy("refresh");
})
})
<!-- 注意：这种refresh方法只对声明式用法有效。另外滚动监控除了options参数“target”之外，还提供了一个offset参数，此参数默认值为10。默认情况下，滚动内容距离滚动容器10px以内的话，就高一片面前显示所对应的菜单项-->
2. 选项卡、提示框和弹出框
2.1 选项卡-Tabs
2.1.1 选项卡的结构
两部分组成：
- 选项卡组件（也就是菜单组件），对应的是 Bootstrap的 nav-tabs）
- 底部可以切换的选项卡面板，在 Bootstrap 中通常 tab-pane 来表示
关键一点，选项卡中链接的锚点要与对应的面板内容容器的ID相匹配
2.1.2 触发切换效果
- 选项卡导航链接中要设置 data-toggle=“tab”
- 并且设置 data-target=“对应内容面板的选择符(一般是ID)”；如果是链接的话，还可以通过 href=“对应内容面板的选择符(一般是ID)”；主要起的作用是用户点击的时候能找到该选择符所对应的面板内容 tab-pane。
- 面板内容统一放在 tab-content 容器中，而且每个内容面板 tab-pane 都需要设置一个独立的选择符（最好是ID）与选项卡中的data-target 或 href 的值匹配
2.1.3 为选择卡添加fade样式
让面板的隐藏与显示在切换的过程效果更流畅，可以在面板中添加类名 fade，让其产生渐入的效果。在添加 fade 样式时，最初的默认显示的内容面板一定要记得加上 in 类名，不然其内容用户无法看到。
<!-- 选项卡组件（菜单项nav-tabs）-->
<ul id="myTab" class="nav nav-tabs" role="tablist">
<li class="active"><a href="#bulletin" role="tab" data-toggle="tab">公告</a></li>
<li><a href="#rule" role="tab" data-toggle="tab">规则</a></li>
<li><a href="#forum" role="tab" data-toggle="tab">论坛</a></li>
<li><a href="#security" role="tab" data-toggle="tab">安全</a></li>
<li><a href="#welfare" role="tab" data-toggle="tab">公益</a></li>
</ul>
<!-- 选项卡面板 -->
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade in active" id="bulletin">公告内容面板</div>
<div class="tab-pane fade" id="rule">规则内容面板</div>
<div class="tab-pane fade" id="forum">论坛内容面板</div>
<div class="tab-pane fade" id="security">安全内容面板</div>
<div class="tab-pane fade" id="welfare">公益内容面板</div>
</div>
2.1.4 胶囊式选项卡（nav-pills）
只需要将 nav-tabs 换成 nav-pills，另外关键一点是将 data-toggle="tab"换成data-toggle="pill"。
2.1.5 JavaScript触发方法
在每个链接的单击事件中调用tab("show")方法，显示对应的标签面板内容。针对上面的示例，删除HTML中自定义的 data-toggle=“tab” 或 data-toggle=“pill” 的属性，然后通过下面的脚本来调用:
<!-- 选项卡组件（菜单项nav-tabs）-->
<ul id="myTab2" class="nav nav-pills" role="tablist">
<li><a href="#a" role="tab" data-toggle="pill">娱乐</a></li>
<li><a href="#b" role="tab" data-toggle="pill">房产</a></li>
<li><a href="#c" role="tab" data-toggle="pill">国内</a></li>
<li><a href="#d" role="tab" data-toggle="pill">国外</a></li>
</ul>
<!-- 选项卡面板 -->
<div id="myTabContent2" class="tab-content">
<div class="tab-pane fade in active" id="a">娱乐内容面板</div>
<div class="tab-pane fade" id="b">房产内容面板</div>
<div class="tab-pane fade" id="c">国内内容面板</div>
<div class="tab-pane fade" id="d">国外内容面板</div>
</div>
<script>
$(function(){
$("#myTab2 a").click(function(e){
e.preventDefault();
$(this).tab("show");
});
})
</script>
2.2 提示框-Tooltip
2.2.1 结构
共同特点：
- 通过 title 属性的值来定义提示信息(也可以使用自定义属性 data-original-title 来设置提示信息)， data-original-title 的优先级要高于 title。
- 通过 data-placement 自定义属性来控制提示信息框的位置，根据四种不同的位置，data-placement具有四个值：top、right、bottom和left，分别表示提示框出现的位置在顶部、右边、底部和左边。
- 还有一个最重要的参数不可缺少，data-toggle=“tooltip”。
2.2.2 JS触发提示框方法
不能直接通过自定义的属性 data- 来触发。必须得依赖于JavaScript的代码触发
// 最简单的触发方式如下：
$(function(){
$('[data-toggle="tooltip"]').tooltip();
});
// 除此之外，也可以单独指定一个元素，在该元素上调用提示框，并且可能通过JavaScript的各种参数来实现，无需定义一些 data 属性，如：
$(function(){
$('#myTooltip').tooltip({
title:"我是一个提示框，我在顶部出现",
placement:'top'
});
});
案例：
<button type="button"
class="btn btn-default"
data-toggle="tooltip"
data-placement="left"
data-original-title="提示框居左"
title="">
提示框居左
</button>
<a class="btn btn-primary"
data-toggle="tooltip"
data-placement="top"
title="提示框在顶部">
提示框在顶部
</a>
<a href="##"
class="btn btn-primary"
id="myTooltip">
我是提示框
</a>
<script>
$(function(){
$('[data-toggle="tooltip"]').tooltip();
$('#myTooltip').tooltip({
title:"我是一个提示框，我在顶部出现",
placement:'top'
});
});
</script>
2.2.3 其它自定义属性
提示框还有其他的自定义属性，每个自定义属性都具自身存在的意义
2.2.4 JS设置参数方法
表格中的任何属性，在使用 JavaScript 触发提示框时，都可以被调用，比如：
<script>
$(function(){
$('#myTooltip1').tooltip({
title:"我是一个提示框，我在顶部出现",
placement:"top"
});
});
</script>
2.3 弹出框-Popover
2.3.1 弹出框的结构
弹出框Popover和提示框tooltip相比，就多了一个content内容，那么在此使用 data-content 来定义弹出框中的内容。同样可以使用<button>或者<a>标签来制作
<button type="button"
class="btnbtn-default"
data-container="body"
data-placement="bottom"
data-toggle="popover"
data-original-title="Bootstrap弹出框标题"
data-content="Bootstrap弹出框的内容" >
猛击我吧
</button>
<a href="#" class="btnbtn-default"
data-container="body"
data-placement="right"
data-toggle="popover"
title="Bootstrap弹出框标题"
data-content="Bootstrap弹出框的内容">
猛击我吧
</a>
$(function(){
$('[data-toggle="popover"]').popover();
});
2.3.2 触发弹出框的方法
需要依赖JavaScript脚本
// html代码
<button type="button"
class="btn btn-default"
id="myPopover">
猛击我吧
</button>
// 使用js设置参数
$(function(){
$('#myPopover').popover({
title:"我是弹出框的标题",
content:"我是弹出框的内容",
placement:"top"
});
});
2.3.3 自定义结构属性
2.3.4 提示框和弹出框的异同
- 提示框 tooltip 的默认触发事件是 hover 和 focus，而弹出框 popover 是 click
- 提示框 tooltip 只有一个内容(title)，而弹出框不仅可以设置标题（title）还可以设置内容(content)
// 提示框tooltip的模板：
<div class="tooltip" role="tooltip">
<div class="tooltip-arrow"></div>
<div class="tooltip-inner"></div>
</div>
// 弹出框popover的模板：
<div class="popover" role="tooltip">
<div class="arrow"></div>
<h3 class="popover-title"></h3>
<div class="popover-content"></div>
</div>
3. 警示框、按钮
3.1 警示框-Alert
3.1.1 结构与样式
警告框插件就是在“警示框组件”基础上添加了一个关闭的按钮，外形上就是一个X。所以其结构只需要在警示框组件的基础上添加一个按钮即可：
// 不能被关闭
<div class="alert " role="alert">
<button class="close" type="button" >×</button>
恭喜您操作成功！
</div>
3.1.2 使用声明式触发警告框
如果通过自定义的HTML属性（声明式）来触发警告框，需要在关闭按钮上设置自定义属性data-dismiss="alert"，如下所示
<div class="alert alert-success" role="alert">
<button class="close" data-dismiss="alert" type="button" >×</button>
<p>恭喜您操作成功！</p>
</div>
其实关闭按钮，不一定非要用X号，也可以是普通的按钮元素或者链接元素，只需要保证关闭元素带有自定义属性data-dismiss="alert"即可
3.1.3 JavaScript触发警告框
<!--html代码:-->
<div class="alert alert-warning" role="alert" id="myAlert">
<h4>谨防被骗</h4>
<p>请确认您转账的信息是你的亲朋好友，不要轻意相信不认识的人...</p>
<button type="button" class="btn btn-danger" id="close">关闭</button>
</div>
<!--通过下面的JavaScript代码来触发：-->
$(function(){
$("#close").on("click",function(){
$(this).alert("close");
});
});
3.2 按钮插件-Button
3.2.1 按钮加载状态
通过按钮可以设计状态提示，当单击按钮时，会显示loading状态信息
<button class="btnbtn-primary" data-loading-text="正在加载中,请稍等..." type="button" id="loaddingBtn">加载</button>
通过data-loading-text属性定义加载的文本信息，然后通过JavaScript给按钮绑定一个事件，并给按钮添加一个button(“loading”)方法来激活按钮的加载状态行为。如下所示：
$(function(){
$("#loaddingBtn").click(function () {
$(this).button("loading");
});
});
注意，无法直接通过声明式触发此效果
3.2.2 模拟单选择按钮
使用按钮组来模拟单选按钮组,可以通过给按钮组自定义属性data-toggle="buttons"
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input type="radio" name="options" id="options1">男
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="options2">女
</label>
</div>
注：使用这种效果的时候，无需借助JavaScript代码来触发，因为默认Bootstrap就已经为用户初始化好了
3.2.3 模拟复选按钮
也是通过在按钮组上自定义data-toggle="buttons"来实现。唯一不同的是，将input[type="radio"]换成input[type="checkbox"]
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input type="checkbox" name="options" id="options1">电影
</label>
<label class="btn btn-primary">
<input type="checkbox" name="options" id="options2">音乐
</label>
</div>
3.2.4 按钮状态切换
使用 data-toggle 属性还可以激活按钮的行为状态，实现在激活和未激活之间进行状态切换
<button type="button" data-toggle="button" class="btn btn-primary">确认</button>
注意，这里自定义属性是 data-toggle=“button”，而不是 data-toggle=“buttons”。
3.2.5 JavaScript用法
按钮插件还可以通过调用button函数，然后给button函数传入具体的参数，实现不同的效果。而其中有两个参数是固定不变的，即toggle和reset
-
切换按钮状态(得到焦点):
$("#mybutton").button("toggle") -
重新恢复按钮:
$("#mybutton").button("reset")$(function() { $("#mybutton").click(function(){ $(this).button('loading').delay(1000).queue(function() { $(this).button('reset'); }); }); }); -
任意参数：
$("#mybutton").button("任意字符参数名")上面代码作用：替换 data-任意字符参数名-text 的属性值为“按钮上显示的文本值”。如下代码:
<!--html:--> <button type="button" data-toggle="button" class="btn btn-primary" id="mybutton" data-complete-text="Loading finished" >确认</button> <!--js代码：--> $(function() { $("#mybutton").click(function(){ $(this).button('loading').delay(1000).queue(function() { $(this).button('complete'); }); }); });
4. 手风琴、图片轮播和固定定位
4.1 手风琴-Collapse(折叠)
4.1.1 手风琴结构
手风琴最关键的部分，就是每个标题对应有一个内容，在Bootstrap框架中将这两个部分组合起来称为一个panel页板，如果有三个panel面板，将这三个面板组合在一起，就是一个面板组合 panel-group。简单点就是一个触发器和一个折叠区
<button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo">触发器</button>
<div id="demo" class="collapse in">折叠区</div>
4.1.2 声明式触发手风琴
触发手风琴可以通过自定义的 data-toggle 属性来触发。其中data-toggle值设置为 collapse，data-target="#折叠区标识符"
-
设计一个面板组合，里面有三个折叠区
<div class="panel-group" id="myAccordion"> <div class="panel panel-accordion panel-default"></div> <div class="panel panel-accordion panel-default"></div> <div class="panel panel-accordion panel-default"></div> </div> -
给面板添加内容，每个面板包括两个部分，第一个是面板标题 panel-heading，并且在这里面添加标题 panel-title。第二个部分是面板内容，也就是折叠区，使用 panel-collapse 样式
<div class="panel panel-accordion panel-default"> <div class="panel-heading"> <h4 class="panel-title">标题一</h4> </div> <div class="panel-collapse"> <div class="panel-body">折叠区内容...</div> </div> </div> … -
通过锚链接的方法，把标题区域和面板区连在一起
<div class="panel panel-accordion panel-default"> <div class="panel-heading"> <h4 class="panel-title"><a href="#panel1">标题一</a></h4> </div> <div class="panel-collapse" id="panel1"> <div class="panel-body">折叠区内容...</div> </div> </div> -
控制面板内容区是否可视，只需要在 panel-collapse 样式上添加 collapse
<div class="panel-collapse collapse in" id="panel1">...</div>希望默认第一个面板内容是可视的，在collapse基础上再追加 in样式
-
激活手风琴交互行为，需要在标题链接中自定义两个属性，一个是data-toggle，并且取值为collapse；另一个是data-target，取值为各个面板内容区的标识符
-
定义data-parent属性，实现点击一个其中一个元素时，关闭所有的折叠区，再打开所单击的区域，data-parent取值与手风琴面板容器的标识符相匹配
<div class="panel-group" id="accordion">
<div class="panel panel-default panel-accordion">
<div class="panel-heading">
<h4 class="panel-title"><a href="#aa1" data-toggle="collapse" data-target="#aa1" data-parent="#accordion">标题一</a></h4>
</div>
<div class="panel-collapse collapse in" id="aa1">
<div class="panel-body">标题一对应的内容</div>
</div>
</div>
<div class="panel panel-default panel-accordion">
<div class="panel-heading">
<h4 class="panel-title"><a href="#aa2" data-toggle="collapse" data-target="#aa2" data-parent="#accordion">标题二</a></h4>
</div>
<div class="panel-collapse collapse" id="aa2">
<div class="panel-body">标题二对应的内容</div>
</div>
</div>
</div>
4.2 图片轮播-Carousel
4.2.1 轮播图片的设计
轮播图片包括三部分：轮播的图片、轮播图片的计数器、轮播图片的控制器
-
设计轮播图片的容器。在 Bootstrap 框架中采用 carousel 样式，并且给这个容器定义一个 ID 值，方便后面采用 data 属性来声明触发。
<div id="slidershow" class="carousel"></div> -
设计轮播图片计数器。在容器 div.carousel 的内部添加轮播图片计算器，采用 carousel-indicators 样式，其主要功能是显示当前图片的播放顺序(有几张图片就放置几个li)，一般采用有顺列表来制作
-
设计轮播图片播放区，这个区域使用 carousel-inner 样式来控制，而且其同样放置在 carousel 容器内，并且通过 item 容器来放置每张轮播的图片
-
设计轮播图片控制器，在 Carousel 中通过 carousel-control样式配合 left 和 right 来实现。其中left表示向前播放，right表示向后播放。其同样放在carousel容器内
<div id="slidershow" class="carousel">
<!-- 设置图片轮播的顺序 -->
<ol class="carousel-indicators">
<li class="active">1</li>
<li>2</li>
</ol>
<!-- 设置轮播图片 -->
<div class="carousel-inner">
<div class="item active">
<a href="##"><img src="http://images3.c-ctrip.com/rk/201407/ll580x145.jpg" alt=""></a>
<div class="carousel-caption">
<h3>图片标题1</h3>
<p>描述内容1...</p>
</div>
</div>
<div class="item">
<a href="##"><img src="http://images3.c-ctrip.com/dj/201408/zj/zj_580145.jpg" alt=""></a>
<div class="carousel-caption">
<h3>图片标题2</h3>
<p>描述内容2...</p>
</div>
</div>
</div>
<!-- 设置轮播图片控制器 -->
<a class="left carousel-control" href="" >
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
4.2.2 声明式触轮播图的播放
声明式方法是通过定义 data 属性来实现，data 属性可以很容易地控制轮播的位置
-
data-ride 属性：取值 carousel，并且将其定义在 carousel 上。
-
data-target 属性：取值 carousel 定义的 ID 名或者其他样式识别符，如前面示例所示，取值为“#slidershow”，并且将其定义在轮播图计数器的每个 li 上。
-
data-slide 属性：取值包括 prev，next，prev表示向后滚动，next 表示向前滚动。该属性值同样定义在轮播图控制器的 a 链接上，同时设置控制器 href 值为容器 carousel 的 ID 名或其他样式识别符。
-
data-slide-to 属性：用来传递某个帧的下标，比如 data-slide-to=“2”，可以直接跳转到这个指定的帧（下标从0开始计），同样定义在轮播图计数器的每个 li 上。
为 #slidershow 层添加 slide 样式，使用图片与图片切换效果有平滑感
<div id="slidershow" class="carousel slide" data-ride="carousel"> <!-- 设置图片轮播的顺序 --> <ol class="carousel-indicators"> <li class="active" data-target="#slidershow" data-slide-to="0"></li> <li data-target="#slidershow" data-slide-to="1"></li> <li data-target="#slidershow" data-slide-to="2"></li> </ol> <!-- 设置轮播图片 --> <div class="carousel-inner"> … </div> <!-- 设置轮播图片控制器 --> <a class="left carousel-control" href="#slidershow" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> </a> <a class="right carousel-control" href="#slidershow" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> </a> </div>
其他自定义属性：
<!--实现“轮播不持续循环”和“轮播时间间隔为1秒”。-->
<div id="slidershow" class="carousel" data-ride="carousel" data-wrap="false" data-interval="1000">
......
</div>
4.2.3 JavaScript触发方法
如果没有定义 data-ride 属性，可以通过 JavaScript 方法来触发轮播图片切换
// 具体使用方法如下：
$(".carousel").carousel();
// 也可以通过容器的 ID 来指定：
$("#slidershow").carousel();
Bootstrap 框架中的 carousel 插件还给使用者提供了几种特殊的调用方法:
- .carousel(“cycle”)：从左向右循环播放；
- .carousel(“pause”)：停止循环播放；
- .carousel(“number”)：循环到指定的帧，下标从0开始，类似数组；
- .carousel(“prev”)：返回到上一帧；
- .carousel(“next”)：下一帧
$(function(){
$("#slidershow").carousel({
interval:2000
});
$("#slidershow a.left").click(function(){
$(".carousel").carousel("prev");
});
$("#slidershow a.right").click(function(){
$(".carousel").carousel("next");
});
});
4.3 固定定位-Affix
4.3.1 声明式触发固定定位
通过自定义属性 data 来触发。其主要包括两个参数：
- data-spy：取值 affix，表示元素固定不变的。
- data-offset：整数值，比如 90，表示元素 top 和 bottom 的值都是 90px，其包括两种方式：data-offset-top 和 data-offset-bottom。
- data-offset-top 用来设置元素距离顶部的距离。比如 90，表示元素距离顶部 90px，当用户从顶部向下拖动滚动条，当滚动的距离大于 90px 时，affix 元素不再滚动，就会固定在浏览器窗口顶部。
- data-offset-bottom 刚好与 data-offset-top 相反。
<body data-spy="scroll" data-target="myScrollspy">
<div class="container">
<div class="jumbotron">
<h1>Bootstrap Affix</h1>
</div>
<div class="row">
<div class="col-xs-3" id="myScrollspy">
<ul class="nav nav-tabs nav-stacked" data-spy="affix" data-offset-top="125">
<li class="active"><a href="#section-1">第一部分</a></li>
<li><a href="#section-2">第二部分</a></li>
<li><a href="#section-3">第三部分</a></li>
<li><a href="#section-4">第四部分</a></li>
<li><a href="#section-5">第五部分</a></li>
</ul>
</div>
<div class="col-xs-9">...</div>
</div>
</div>
</body>
注意，在 body 要声明滚动监控
素不再滚动，就会固定在浏览器窗口顶部。
- data-offset-bottom 刚好与 data-offset-top 相反。
<body data-spy="scroll" data-target="myScrollspy">
<div class="container">
<div class="jumbotron">
<h1>Bootstrap Affix</h1>
</div>
<div class="row">
<div class="col-xs-3" id="myScrollspy">
<ul class="nav nav-tabs nav-stacked" data-spy="affix" data-offset-top="125">
<li class="active"><a href="#section-1">第一部分</a></li>
<li><a href="#section-2">第二部分</a></li>
<li><a href="#section-3">第三部分</a></li>
<li><a href="#section-4">第四部分</a></li>
<li><a href="#section-5">第五部分</a></li>
</ul>
</div>
<div class="col-xs-9">...</div>
</div>
</div>
</body>
注意，在 body 要声明滚动监控
标签：function,触发,Bootstrap,笔记,学习,toggle,按钮,data,属性 来源： https://blog.csdn.net/qq_52476758/article/details/123242067