Bootstrap/插件

> Bootstrap > Bootstrap/插件

短•刷•阅•编•历

MediaWiki:ScrollToc

此页面整理了 Bootstrap 在 BWIKI 上可用的插件，已对BWIKI进行本地化，内容来源于 Bootstrap V3官方文档

注：经过测试，Bootstrap.js 不受 BWIKI 平台 Jquery 加载异常的影响，所以可以放心使用

过渡效果（动画） transition.js

Bootstrap 提供 css 过渡效果的组件，为元素的状态变化（如显示/隐藏、滑动等）提供平滑的动画支持，不推荐手动使用，其他组件（如 折叠 Collapse、弹出框 popover、弹窗 Modal）已自动调用。

模态框（弹窗） modal.js

一个用于创建浮动对话框的组件，支持动态加载内容、多层嵌套和多种触发方式。

html 结构

<!-- 触发按钮 -->
<span class="btn btn-primary" data-toggle="modal" data-target="#myModal"> 打开模态框 </span>

<!-- 模态框结构 -->
<div class="modal fade" id="myModal" role="dialog" data-backdrop="false">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<!-- 头部 -->
			<div class="modal-header">
				<span type="button" class="close" data-dismiss="modal">&times;</span>
				<span class="modal-title">标题</span>
			</div>
			<!-- 内容区 -->
			<div class="modal-body">
				<p>这里是主要内容...</p>
			</div>
			<!-- 底部按钮 -->
			<div class="modal-footer">
				<span type="button" class="btn btn-default" data-dismiss="modal">关闭</span>
				<span type="button" class="btn btn-primary">保存</span>
			</div>
		</div>
	</div>
</div>

参数说明

触发元素

data-toggle="modal"

必须项，标识模态框触发器

data-target="#myModal"

必须项，指向需要打开的模态框容器的 id（以 # 开头）或者指向对象元素的 class（以 . 开头，不推荐使用该方法，会对所有包含该class的元素生效，需要慎重使用）

模态框容器

class="modal"

必须项，基础样式类

class="fade"

可选项，添加淡入淡出动画效果

id="myModal"

必须项，用于标识对应模态框容器，id无命名规则，需要有唯一识别id，如果触发元素使用 class 作为指向对象，可以不使用id，但建议保留

data-backdrop="false"

必须项，控制遮罩层显示和交互行为（默认点击遮罩可关闭），BWIKI上因图层问题需关闭，否则会导致图层错误

尺寸控制

在 modal-dialog 上添加以下class控制大小，默认为600px：

modal-lg

大尺寸模态框（宽度900px）

modal-sm

小尺寸模态框（宽度300px）

使用示例

基础示例
<span class="btn btn-primary" data-toggle="modal" data-target="#myModal"> 打开模态框 </span> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" data-backdrop="false"> <div class="modal-dialog" role="document" style="margin-top: 8em;"> <div class="modal-content"> <div class="modal-header"> <span type="button" class="close" data-dismiss="modal">&times;</span> <span class="modal-title">标题</span> </div> <div class="modal-body"> <p>这里是主要内容...</p> </div> <div class="modal-footer"> <span type="button" class="btn btn-default" data-dismiss="modal">关闭</span> <span type="button" class="btn btn-primary">保存</span> </div> </div> </div> </div>
显示效果
打开模态框 × 标题 这里是主要内容... 关闭 保存

模板实例

扩展应用

下拉菜单 dropdown.js

通过交互式按钮触发的上下文菜单组件，支持多级嵌套和键盘导航。

html结构

<!-- 基础下拉菜单 -->
<div class="dropdown">
	<!-- 触发按钮 -->
	<span class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
		下拉菜单
		<span class="caret"></span>
	</span>
	
	<!-- 菜单项容器 -->
	<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
		<li>选项1</li>
		<li>选项2</li>
		<li role="separator" class="divider"></li>
		<li>分隔线下方选项</li>
	</ul>
</div>

参数说明

触发按钮

class="dropdown-toggle"

必须项，标识下拉菜单触发器

data-toggle="dropdown"

必须项，启用下拉交互功能

aria-haspopup="true"

可选项（推荐），声明按钮会弹出菜单

aria-expanded="false"

动态属性，初始为false，展开后自动变为true

span.caret

可选项，下拉箭头图标

菜单容器

class="dropdown-menu"

必须项，定义下拉菜单容器

aria-labelledby="[触发器ID]"

可选项（推荐），关联触发元素

class="dropdown-menu-right"

可选项，右对齐菜单

菜单项

class="divider"

可选项，添加分隔线（需配合 role="separator"）

class="disabled"

可选项，禁用某选项

class="active"

可选项，标记当前选中项

使用示例

代码	显示效果
<div class="dropdown"> <span class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> 操作菜单 <span class="caret"></span> </span> <ul class="dropdown-menu" style="margin:2px 0 0;"> <li class="dropdown-header">文件操作</li> <li><a href="#">保存</a></li> <li><a href="#">删除</a></li> <li class="divider"></li> <li><a href="#">退出系统</a></li> </ul> </div>	操作菜单 文件操作 保存 删除 退出系统

JavaScript控制

// 手动显示/隐藏
$('#myDropdown').dropdown('toggle'); 

// 事件监听
$('#myDropdown').on('show.bs.dropdown', function(){
	console.log('菜单即将展开');
});

特殊用法

上拉菜单：

<div class="dropup">
	<!-- 结构与dropdown相同 -->
</div>

模板实例

扩展应用

滚动监听 scrollspy.js

BWIKI上兼容性较差，暂不编写

选项卡（标签切换） tab.js

一个选项卡组件，通过标签导航切换内容面板，支持嵌套使用（需使用标准写法）。
原版选项卡组件结合了面板（panel）组件，结构相对复杂，有需求的可以自行研究，这里只对简化版的结构作说明，不对样式考虑，请自行封装或参考已封装好的模板使用。

注：经测试，BWIKI上使用简化写法（ .nav-tabs 写法）有兼容性问题，这里仅做文档说明，不推荐使用，请使用标准写法。

html结构

<!-- 方式1：使用.nav-tabs的简化写法，仅能顺序切换，此处仅做说明，不推荐使用 -->
<div>
	<ul class="nav nav-tabs">
		<li><a>选项卡1</a></li>
		<li><a>选项卡2</a></li>
	</ul>
	<div class="tab-content">
		<div class="tab-pane">内容1</div>
		<div class="tab-pane">内容2</div>
	</div>
</div>

<!-- 方式2：使用data属性和id的标准写法，支持乱序切换 -->
<div>
	<ul>
		<li data-toggle="tab" data-target="#tabContent1">选项卡A</li>
		<li data-toggle="pill" data-target="#tabContent2">选项卡B</li>
	</ul>
	<div class="tab-content">
		<div id="tabContent1" class="tab-pane">内容A</div>
		<div id="tabContent2" class="tab-pane">内容B</div>
	</div>
</div>

两种写法说明

简化写法（此处仅做说明，不推荐使用）

ul 添加 .nav-tabs 类，无需 data （或 href ）属性和 id ，按顺序切换，不支持嵌套

标准写法

需要 data-toggle 和 data-target （或 href ）属性，通过 id 精确控制切换目标，支持乱序切换，支持嵌套

两种写法同时使用时，无法使用嵌套，无法乱序排序

参数说明

触发元素

注：可以不使用 a 标签，此处使用 a 标签做示例

class="nav nav-tabs"

可选项，使用简化写法时必须添加，此时无需 data 属性和 id 即可实现顺序切换

使用 .nav-tabs 有兼容性问题（比如在标准写法下使用时，无法使用嵌套，无法乱序排序，仅能使用顺序排序），此处仅做说明，不推荐使用

data-toggle="tab" 或 data-toggle="pill"

必须项（当不使用 .nav-tabs 时），标识该元素为选项卡触发器，两种写法并无区别

data-target="#tabContent"

必须项（当不使用 .nav-tabs 时），指向对应内容元素的 id （以 # 开头）或者指向对象元素的 class （以 . 开头，不推荐使用该方法，会对所有包含该class的元素生效，需要慎重使用）

href="#tabContent"

必须项（当不使用 .nav-tabs 时，或当标签为 a 标签时），等同于 data-target="#tabContent" ，二者选一使用即可，不推荐使用

class="active"

可选项，表示默认激活的选项卡标签

内容区域

class="tab-content"

必须项，标识为选项卡内容容器

class="tab-pane"

必须项，标识单个选项卡内容区块

id="tabContent"

必须项（当使用 data-target 时），与触发元素的 data-target （或 href ）对应，id无命名规则，如果触发元素使用 class 作为指向对象，可以不使用id，但建议保留

class="active"

可选项，添加在.tab-pane上表示默认激活的选项卡内容

补充说明

1. 多目标控制

一个触发元素可以控制多个选项内容，只需在 data-target 中使用逗号分隔多个 id 或者 class，例如：

<ul>
	<li><a data-toggle="tab" data-target="#tab-another-1,#tab-another-3">标签a</a></li>
	<li><a data-toggle="tab" data-target="#tab-another-2,#tab-another-4">标签b</a></li>
</ul>
<div class="tab-content">
	<div class="tab-pane" id="tab-another-1">内容1</div>
	<div class="tab-pane" id="tab-another-2">内容2</div>
</div>
<div class="tab-content">
	<div class="tab-pane" id="tab-another-3">内容3</div>
	<div class="tab-pane" id="tab-another-4">内容4</div>
</div>

或

<ul>
	<li><a data-toggle="tab" data-target=".tab-another-1">标签a</a></li>
	<li><a data-toggle="tab" data-target=".tab-another-2">标签b</a></li>
</ul>
<div class="tab-content">
	<div class="tab-pane tab-another-1">内容1</div>
	<div class="tab-pane tab-another-2">内容2</div>
</div>
<div class="tab-content">
	<div class="tab-pane tab-another-1">内容3</div>
	<div class="tab-pane tab-another-2">内容4</div>
</div>

2. 动态加载内容

选项卡可以通过 JavaScript 动态加载，只需确保触发元素的 data-target（或 href ） 指向正确的 id 或者 class

使用示例

简化写法（此处仅做说明，不推荐使用）

代码
<div> <ul class="nav nav-tabs"> <li><a>选项卡1</a></li> <li><a>选项卡2</a></li> </ul> <div class="tab-content"> <div class="tab-pane">内容1</div> <div class="tab-pane">内容2</div> </div> </div>
显示
选项卡1 选项卡2 内容1 内容2

标准写法

代码
<div> <ul> <li><a data-toggle="tab" data-target="#tabContent1">选项卡A</a></li> <li><a data-toggle="pill" data-target="#tabContent2">选项卡B</a></li> </ul> <div class="tab-content"> <div id="tabContent1" class="tab-pane">内容A</div> <div id="tabContent2" class="tab-pane">内容B</div> </div> </div>
显示
选项卡A 选项卡B 内容A 内容B

嵌套选项卡

嵌套时需要使用标准写法（包含 data-toggle 和 data-target （或 href ）属性）

注：在BWIKI上，仅能使用标准写法进行选项卡嵌套，同时 ul 标签不能使用 .nav-tabs ，否则无法正常运行，如需要同时使用，修复代码如下（点击展开/折叠），仅做参考

// 修复.nav-tabs无法嵌套问题，来源碧蓝航线wiki
(window.RLQ = window.RLQ || []).push([["jquery"], function () {
    $(document).ready(function () {
        setTimeout(function() {
            $(document).off("click", ".nav-tabs > li");
        } ,500);
    });
}]);

代码
<div> <ul> <li><a data-toggle="tab" data-target="#tab-parent1">父标签1</a></li> <li><a data-toggle="tab" data-target="#tab-parent2">父标签2</a></li> </ul> <div class="tab-content"> <div id="tab-parent1" class="tab-pane"> <div> <!-- 子选项卡 --> <ul> <li><a data-toggle="tab" data-target="#tab-child1">子标签A</a></li> <li><a data-toggle="tab" data-target="#tab-child2">子标签B</a></li> </ul> <div class="tab-content"> <div id="tab-child1" class="tab-pane">子内容A</div> <div id="tab-child2" class="tab-pane">子内容B</div> </div> </div> </div> <div id="tab-parent2" class="tab-pane">父内容2</div> </div> </div>
显示
父标签1 父标签2 子标签A 子标签B 子内容A 子内容B 父内容2

扩展应用

模板实例

标准写法

• 模板:Tab

提示框（工具提示） tooltip.js

一个工具提示插件，用于在用户悬停、聚焦或点击元素时显示额外的提示信息。

注：该插件默认关闭，需使用 JavaScript 初始化，本页面已初始化；受 jQuery UI Tooltip 插件冲突，该插件部分参数可能会失效，取决于使用 JavaScript 初始化的顺序

html结构

<!-- 基本用法 -->
<span type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" data-container="body" title="这是提示内容">
	悬停查看提示
</span>

<!-- 自定义 html 内容 -->
<span data-toggle="tooltip" data-html="true" data-container="body" title="<nowiki><em>强调</em> <u>文本</u></nowiki>">
	带 html 的提示
</span>

<!-- 弹窗结构 -->
<div class="tooltip fade in" role="tooltip" id="tooltipxxx">
	<div class="tooltip-arrow"></div>
	<div class="tooltip-inner">弹窗内容</div>
</div>

参数说明

data-toggle="tooltip"

必须项，启用工具提示功能

title="标题"

必须项，提示框显示的内容

受插件冲突影响，以下参数可能会失效，仅做说明，点击展开/折叠

data-placement="top|right|bottom|left|auto"

可选项，控制提示框方形，（默认top）

data-trigger="click|hover|focus|manual"

可选项，触发方式（默认hover，多个用空格分隔如hover hover）

data-delay="毫秒数"

可选项，显示/隐藏延迟（如data-delay="500"）

data-html="true|false"

可选项，是否解析 html 内容（默认false，有XSS风险需谨慎）

data-container="body"

可选项，指定挂载容器（解决位置异常时使用），默认弹窗加载在触发元素后，建议默认添加到body下避免异常情况

使用示例

代码	显示效果
<span class="btn btn-primary" data-toggle="tooltip" data-placement="right" data-container="body" title="这是右侧提示"> 右侧提示 </span>	右侧提示
<span data-toggle="tooltip" data-html="true" data-container="body" title="<nowiki><b>加粗</b> <i>斜体</i> <span class='text-danger'>红色文本</span></nowiki>"> html 内容提示 </span>	html 内容提示

JavaScript 初始化

// 初始化所有工具提示
$('[data-toggle="tooltip"]').tooltip();

模板实例

扩展应用

弹出框 popover.js

一个用于在元素旁显示浮动提示内容的组件，需依赖Tooltip插件实现。

注：该插件默认关闭，需使用 JavaScript 初始化，本页面已初始化。

html结构

<!-- 基本用法 -->
<span class="btn" data-toggle="popover" title="提示标题" data-content="提示内容">点击我</span>

<!-- 带 html 内容 -->
<span class="btn" data-toggle="popover" data-html="true" title="<nowiki><span class='glyphicon glyphicon-info-sign'></span> 富文本标题</nowiki>" data-content="<nowiki><b>加粗文本</b> <span class='text-danger'>支持html</span></nowiki>">
	复杂提示
</span>

<!-- 弹出框结构 -->
<div class="popover fade right in" role="tooltip" id="popoverxxxx">
	<div class="arrow"></div>
	<h3 class="popover-title">弹出框标题</h3>
	<div class="popover-content">弹出框内容</div>
</div>

参数说明

触发元素

data-toggle="popover"

必须项，标识该元素触发弹出框

title="提示标题"

可选项，弹出框标题文本

data-content="提示内容"

必须项，弹出框主体内容

data-placement="top|right|bottom|left"

可选项，控制弹出方向（默认right）

data-trigger="click|hover|focus|manual"

可选项，触发方式（默认click，多个用空格分隔如click hover）

data-html="true|false"

可选项，是否解析html内容（默认false，有XSS风险需谨慎）

data-delay="毫秒数"

可选项，显示/隐藏延迟（如data-delay="500"）

data-container="body"

可选项，指定挂载容器（解决位置异常时使用），默认弹出框加载在触发元素后，建议默认添加到body下避免异常情况

使用示例

代码
<span class="btn btn-info" data-toggle="popover" data-placement="bottom" title="提示标题" data-content="提示内容">点击我</span>
显示效果
点击我

复杂内容示例

代码
<span class="btn btn-warning" data-toggle="popover" data-html="true" title="<nowiki><span class='glyphicon glyphicon-info-sign'></span> 富文本标题</nowiki>" data-content="<nowiki><b>加粗文本</b> <span class='text-danger'>支持html</span></nowiki>"> 复杂提示 </span>
显示效果
复杂提示

JavaScript初始化

// 初始化所有弹出框
$('[data-toggle="popover"]').popover();

模板实例

扩展应用

警告框 alert.js

一个用于显示提示信息的可关闭警告框组件。

html结构

<!-- 标准警告框（带关闭按钮） -->
<div class="alert alert-success alert-dismissible" role="alert">
	<span class="close" data-dismiss="alert" aria-label="Close">&times;</span>
	这是一个可关闭的警告提示
</div>

<!-- 简化警告框（无关闭按钮） -->
<div class="alert alert-danger" role="alert">
	这是一个不可关闭的警告提示
</div>

参数说明

基础框架

class="alert"

必须项，标识该元素为警告框组件

class="alert-[类型]"

必须项，定义警告框的样式类型

可选值：

alert-success（绿色/成功）

alert-info（蓝色/信息）

alert-warning（黄色/警告）

alert-danger（红色/错误）

class="alert-dismissible"

可选项，添加此 class 时：

1. 为关闭按钮预留右侧间距

2. 必须配合关闭按钮使用

role="alert"

可选项，提高可访问性，标识该元素的用途

关闭按钮

class="close"

必须项，标识该按钮为关闭按钮

data-dismiss="alert"

必须项，启用警告框的关闭功能

aria-label="Close"

可选项，提高可访问性，描述按钮功能

×

可选项，关闭按钮的默认图标（×符号）

补充说明

• 关闭后元素会从DOM中移除
• 可以通过JavaScript手动控制显示/隐藏

使用示例

代码
<!-- 标准警告框（带关闭按钮） --> <div class="alert alert-success alert-dismissible" role="alert"> <span class="close" data-dismiss="alert" aria-label="Close">&times;</span> 这是一个可关闭的警告提示 </div> <!-- 简化警告框（无关闭按钮） --> <div class="alert alert-danger" role="alert"> 这是一个不可关闭的警告提示 </div>
显示
× 这是一个可关闭的警告提示 这是一个不可关闭的警告提示

JavaScript控制

// 关闭所有警告框
$('.alert').alert('close')

// 初始化并关闭指定警告框
$('#myAlert').alert().alert('close')

事件监听

// 关闭前触发
$('#myAlert').on('close.bs.alert', function(){
	console.log('警告框即将关闭');
});

// 关闭后触发
$('#myAlert').on('closed.bs.alert', function(){
	console.log('警告框已关闭');
});

模板实例

扩展应用

按钮 button.js

BWIKI不支持使用button标签，暂不编写

折叠 collapse.js

一个用于显示和隐藏内容的折叠组件，支持嵌套使用。
原版折叠组件结合了面板（panel）组件，结构相对复杂，已封装成模板（模板:折叠面板）可以直接使用，有需求的可以自行研究，这里只对简化版的结构作说明。

html结构

<!-- 触发元素 -->
<span data-toggle="collapse" data-target="#collapseExample">标题</span>
<!-- 折叠内容 -->
<div class="collapse in" id="collapseExample">内容</div>

参数说明

触发元素

注：可以使用 a 标签，此处使用 span 标签做示例

data-toggle="collapse"

必须项，标识该元素为折叠触发器

data-target="#collapseExample"

必须项，指向需要折叠的内容元素的 id（以 # 开头）或者指向对象元素的 class（以 . 开头，不推荐使用该方法，会对所有包含该class的元素生效，需要慎重使用）

href="#collapseExample"

必须项（当使用 a 标签时），等同于 data-target="#collapseExample" ，二者选一使用即可，不推荐使用

折叠内容

class="collapse"

必须项，标识该元素为折叠内容

class="in"

可选项，如果添加 in，则默认展开内容；如果不添加，则默认隐藏内容

id="collapseExample"

必须项，用于标识折叠内容，id无命名规则，需要有唯一识别id，如果触发元素使用 class 作为指向对象，可以不使用id，但建议保留

补充说明

1. 嵌套折叠

折叠组件支持嵌套使用，只需在折叠内容中再添加一个触发元素和折叠内容即可

2. 多目标控制

一个触发元素可以控制多个折叠内容，只需在 data-target 中使用逗号分隔多个 id 或者 class，例如：

<span data-toggle="collapse" data-target="#collapse1, #collapse2">标题</span>
<div class="collapse" id="collapse1">内容 1</div>
<div class="collapse" id="collapse2">内容 2</div>

3. 动态加载内容

折叠内容可以通过 JavaScript 动态加载，只需确保触发元素的 data-target 指向正确的 id 或者 class

使用示例

代码
<span data-toggle="collapse" data-target="#collapseExample">点击展开/隐藏内容</span> <div class="collapse" id="collapseExample"> <p>这里是折叠内容。</p> </div>
显示
点击展开/隐藏内容 这里是折叠内容。

嵌套折叠

代码
<span data-toggle="collapse" data-target="#collapseExample-1">一级标题</span> <div class="collapse" id="collapseExample-1"> <p>一级内容</p> <span data-toggle="collapse" data-target="#collapseExample-2">二级标题</span> <div class="collapse" id="collapseExample-2"> <p>二级内容</p> </div> </div>
显示
一级标题 一级内容 二级标题 二级内容

多目标控制

代码
<span data-toggle="collapse" data-target="#collapseExample-3, #collapseExample-4">展开多个内容</span> <div class="collapse" id="collapseExample-3"> <p>内容 1</p> </div> <div class="collapse" id="collapseExample-4"> <p>内容 2</p> </div>
显示
展开多个内容 内容 1 内容 2

模板实例

• 模板:折叠面板

扩展应用

• 模板:折叠框

轮播 carousel.js

一个用于循环元素（轮播）的幻灯片组件，不支持嵌套。

html结构

<!-- 外层框架 -->
<div id="Carousel1" class="carousel slide big-carousel" data-ride="carousel" data-interval="5000">
	<!-- 轮播内容 -->
	<div class="carousel-inner" role="listbox">
		<div class="item active">[[文件:预置banner1.jpg|center|link=]]
			<!-- 轮播标题 -->
			<div class="carousel-caption">标题1</div>
		</div>
		<div class="item ">[[文件:预置banner2.jpg|center|link=]]
			<div class="carousel-caption">标题2</div>
		</div>
	</div>
	<!-- 轮播指示器 -->
	<ol class="carousel-indicators">
		<li data-target="#Carousel1" data-slide-to="0" class="active"></li>
		<li data-target="#Carousel1" data-slide-to="1" class=""></li>
	</ol>
	<!-- 轮播左控制按钮 -->
	<div class="left carousel-control" data-target="#Carousel1" role="button" data-slide="prev">
		<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
	</div>
	<!-- 轮播右控制按钮 -->
	<div class="right carousel-control" data-target="#Carousel1" role="button" data-slide="next">
		<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
	</div>
</div>

参数说明

外层框架

id="Carousel1"

必须项，id无命名规则，需要有唯一识别id

class="carousel"

必须项，写在轮播组件的最外层元素，用来识别为轮播

class="slide"

可选项，设定切换轮播内容的方式，slide为滑动动画，不填写则无动画

class="big-carousel"

可选项，BWIKI补充样式，由于样式（css）加载顺序问题，导致轮播默认样式被覆盖，用来修正样式

data-ride="carousel"

可选项，字串符，是否启用自动播放

可选值：

carousel（页面加载时自动开始播放）

false（默认值，手动开启播放）

data-interval="5000"

可选项，数值或布尔值，设置自动播放的间隔时间（毫秒）

可选值：

数值（默认 5000）

false（禁用自动播放）

data-pause=""

可选项，字串符、空值或布尔值，指定暂停轮播的触发事件

可选值：

hover（默认值，鼠标悬浮时暂停）

null或false（无暂停效果）

data-wrap=""

可选项，布尔值，是否启用循环滚动，循环到第一张时，是否向左循环到最后一张，循环到最后一张时，是否向右循环到第一张

可选值：

true（默认值，启用循环滚动）

false（不启用循环滚动）

内容框架

class="carousel-inner" / class="item"

必须项，用来容纳轮播项（.item）的容器，轮播项需要初始内容展示（.active）

class="carousel-caption"

可选项，一个显示在轮播项上方固定位置的元素，可跟随轮播项一起轮播

控制框架

class="carousel-indicators"

可选项，显示一个轮播导航栏指示当前轮播位置，并且允许用户跳转到特定的轮播项，其中子元素的 data-target="" 为目标轮播的id，data-slide-to="" 为目标轮播项的顺序序号，从0开始，需跟随轮播项展示初始位置（.active）

class="carousel-control"

可选项，显示一个用于切换轮播项的控制按钮，需要使用 data-target="" 指定目标轮播的id，使用 .left 和 data-slide="prev" 定义该按钮为切换至上一张，使用 .right 和 data-slide="next" 定义该按钮为切换至下一张

该插件提供了两套按钮图标，需作为 .carousel-control 子元素使用：

.glyphicon图标：<span class="glyphicon glyphicon-chevron-left"></span><span class="glyphicon glyphicon-chevron-right"></span> →

<span class="icon-prev"></span><span class="icon-next"></span> →

补充说明

自定义动画

可以通过修改 CSS 或 JavaScript 实现自定义切换动画，例如淡入淡出效果

使用示例

代码
<div id="Carousel1" class="carousel slide big-carousel" data-ride="carousel" data-interval="5000"> <div class="carousel-inner" role="listbox"> <div class="item active">[[文件:预置banner1.jpg|center|link=]] <div class="carousel-caption">标题1</div> </div> <div class="item ">[[文件:预置banner2.jpg|center|link=]] <div class="carousel-caption">标题2</div> </div> <div class="item ">[[文件:预置banner1.jpg|center|link=]] <div class="carousel-caption">标题3</div> </div> <div class="item ">[[文件:预置banner2.jpg|center|link=]] <div class="carousel-caption">标题4</div> </div> </div> <ol class="carousel-indicators"> <li data-target="#Carousel1" data-slide-to="0" class="active" ></li> <li data-target="#Carousel1" data-slide-to="1" class=""></li> <li data-target="#Carousel1" data-slide-to="2" class=""></li> <li data-target="#Carousel1" data-slide-to="3" class=""></li> </ol> <div class="left carousel-control" data-target="#Carousel1" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> </div> <div class="right carousel-control" data-target="#Carousel1" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> </div> </div>
显示
标题1 标题2 标题3 标题4

模板实例

• 模板:轮播图

扩展应用

• 如我所书