Bootstrap插件
一、模态框（Modal） data-toggle="modal"
模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等
<!-- 按钮触发模态框 -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> //当用超链接代替button触发时，改data-target为href="#myModal"，以识别要加载的模态框目标;data-toggle用以打开modal
开始演示模态框
</button>
<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> //.modal识别为模态框，.fade当切换时会淡入淡出，id与上面的data-target对应，aria-labelledby引用模态框的标题，aria-hidden为true时窗口不可见，直到被触发
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header"> //.modal-header为头部定义样式
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"> //data-dismiss用以关闭模态框
×
</button>
<h4 class="modal-title" id="myModalLabel"> //.modal-title指定其为标题
模态框（Modal）标题
</h4>
</div>
<div class="modal-body"> //.modal-body为主体定义样式
在这里添加一些文本
</div>
<div class="modal-footer"> //.modal-footer为底部定义样式
<button type="button" class="btn btn-default" data-dismiss="modal">关闭
</button>
<button type="button" class="btn btn-primary">
提交更改
</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>
选项
data-backdrop
指定一个静态的背景，当用户点击模态框外部时不会关闭模态框。
boolean 或 string 'static' 默认值：true
data-keyboard
当按下 escape 键时关闭模态框，设置为 false 时则按键无效。
boolean 默认值：true
data-show
当初始化时显示模态框。
boolean 默认值：true
data-remote
使用 jQuery .load 方法，为模态框的主体注入内容。如果添加了一个带有有效 URL 的 href，则会加载其中的内容。
path 默认值：false
<a data-toggle="modal" href="remote.html" data-target="#modal">请点击我</a>
方法
<script>
$(function() {
$('#myModal').modal({
keyboard: true
})
});
</script>
$('#identifier').modal({keyboard: false})
$('#identifier').modal('toggle')
$('#identifier').modal('show')
$('#identifier').modal('hide')
事件
show.bs.modal
在调用 show 方法后触发。
$('#identifier').on('show.bs.modal', function () {
// 执行一些动作...
})
shown.bs.modal
当模态框对用户可见时触发（将等待 CSS 过渡效果完成）。
$('#identifier').on('shown.bs.modal', function () {
// 执行一些动作...
})
hide.bs.modal
当调用 hide 实例方法时触发。
$('#identifier').on('hide.bs.modal', function () {
// 执行一些动作...
})
hidden.bs.modal
当模态框完全对用户隐藏时触发。
$('#identifier').on('hidden.bs.modal', function () {
// 执行一些动作...
})
二、滚动监听（Scrollspy）
通常用于多个（超出展示区域）相似结构的模块内容在同一页面上展示，通过滚动条滚动，相应的导航栏项随之变化
//data-spy指定要监听的元素， data-target指定导航组件nav元素的id或class， data-offset当计算滚动位置时，距离顶部的偏移像素，默认为number：10
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li><a href="#section1">Section 1</a>
</li>
<li><a href="#section2">Section 2</a>
</li>
<li><a href="#section3">Section 3</a>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Section 4 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#section41">Section 4-1</a></li>
<li><a href="#section42">Section 4-2</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</nav>
<div id="section1">
...
</div>
<div id="section2">
...
</div>
<div id="section3">
...
</div>
<div id="section41">
...
</div>
<div id="section42">
...
</div>
</body>
方法
.scrollspy('refresh') 用于添加或移除DOM元素时使用
<div class="section">
<h4 id="jmeter">jMeter<small><a href="#" οnclick="removeSection(this);">× 删除该部分</a></small></h4>
<p>jMeter 是一款开源的测试软件。它是 100% 纯 Java 应用程序，用于负载和性能测试。</p>
</div>
<div class="section">
<h4 id="ejb">EJB</h4>
<p>Enterprise Java Beans（EJB）是一个创建高度可扩展性和强大企业（比如 JBOSS、Web Logic 等）的 J2EE 上。</p>
</div>
<script>
$(function(){
removeSection = function(e) {
$(e).parents(".section").remove();
$('[data-spy="scroll"]').each(function () {
var $spy = $(this).scrollspy('refresh')
});
}
$("#myScrollspy").scrollspy();
});
</script>
事件
activate.bs.scrollspy
每当一个新项目被滚动监听激活时，触发该事件。
$("#myScrollspy").on('activate.bs.scrollspy',function(){
// var currentItem = $(".nav li.active > a").text();
//$("#activeitem").html("目前您正在查看 - " + currentItem);
})
垂直滚动监听 （可参考最下面的附加导航Affix）
注意：需要将左边的胶囊标签位置固定 position: fixed; top: 20px;
<body data-spy="scroll" data-target="#myScrollspy">
<div class="container">
<div class="row">
<nav id="myScrollspy" class="col-md-3">
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="#sec1">Section 1</a></li>
<li><a href="#sec2">Section 2</a></li>
<li><a href="#sec3">Section 3</a></li>
<li><a href="#sec4">Section 4</a></li>
<li><a href="#sec5">Section 5</a></li>
</ul>
</nav>
<div class="col-md-9">
<div id="sec1">
...
</div>
<div id="sec2">
...
</div>
...
</div>
</div>
</div>
</body>
三、标签页（Tab） 切换时有动画效果 data-toggle="tab"或"pill"
需要添加 data-toggle="tab" 或 data-toggle="pill" 到锚文本链接中。
.nav .nav-tabs（水平式） .nav .nav-pills（胶囊式）
添加 .fade 到每个 .tab-pane 后面以为标签页设置淡入淡出效果，第一个标签页必须添加 .in 类，否则初始化时没有内容
<ul class="nav nav-tabs" id="myTab">
<li class="active"><a href="#home" data-toggle="tab">Home</a></li>
...
</ul>
<div class="tab-content">
<div class="tab-pane fade in active" id="home">...</div>
...
</div>
方法
$().tab('show') 用以激活标签页元素和内容容器
$(function () {
$('#myTab li:eq(1) a').tab('show');
});
事件
show.bs.tab
在标签页显示时触发，但是必须在新标签页被显示之前。分别使用 event.target 和 event.relatedTarget 来定位到激活的标签页和前一个激活的标签页。
shown.bs.tab
在标签页显示时触发，但是必须在某个标签页已经显示之后。分别使用 event.target 和 event.relatedTarget 来定位到激活的标签页和前一个激活的标签页。
<script>
$(function(){
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
// 获取已激活的标签页的名称
var activeTab = $(e.target).text();
// 获取前一个激活的标签页的名称
var previousTab = $(e.relatedTarget).text();
//$(".active-tab span").html(activeTab);
//$(".previous-tab span").html(previousTab);
});
});
</script>
四、提示工具（Tooltip） data-toggle="tooltip"
注意：该插件不是纯 CSS 插件。如需使用须用 jquery 激活它
<script>
$(function () { $("[data-toggle='tooltip']").tooltip(); });
</script>
<a href="#" data-toggle="tooltip" title="默认的">默认的Tooltip</a>
<a href="#" data-toggle="tooltip" title="左侧的" data-placement="left">左侧的Tooltip</a>
<a href="#" data-toggle="tooltip" title="右侧的" data-placement="right">右侧的Tooltip</a>
<a href="#" data-toggle="tooltip" title="上侧的" data-placement="top">上侧的Tooltip</a>
<a href="#" data-toggle="tooltip" title="下侧的" data-placement="bottom">下侧的Tooltip</a>
<button class="btn btn-success" data-toggle="tooltip" data-placement="bottom" title="向下的tooltip">底部的</button>
选项
data-animation
提示工具使用 CSS 渐变滤镜效果。
boolean 默认值：true
data-html
向提示工具插入 HTML。如果为 false，jQuery 的 text 方法将被用于向 dom 插入内容。如果您担心 XSS 攻击，请使用 text。
boolean 默认值：false
data-placement
定位提示工具（即 top|bottom|left|right|auto）例如，如果 placement 是 "auto left"，提示工具将会尽可能显示在左边，在情况不允许的情况下它才会显示在右边。
string|function 默认值：top
data-selector
如果提供了一个选择器，提示工具对象将被委派到指定的目标。
string 默认值：false
data-title
如果未指定 title 属性，则 title 选项是默认的 title 值。
string | function 默认值：''
data-trigger
定义如何触发提示工具： click| hover | focus | manual。您可以传递多个触发器，每个触发器之间用空格分隔。
string 默认值：'hover focus'
data-content
如果未指定 data-content 属性，则使用默认的 content 值。
string | function 默认值：''
data-delay
延迟显示和隐藏提示工具的毫秒数 - 对 manual 手动触发类型不适用。如果提供的是一个数字，那么延迟将会应用于显示和隐藏。如果提供的是对象，结构如下所示：
delay:{ show: 500, hide: 100 }
number | object 默认值：0
data-container
向指定元素追加提示工具。实例： container: 'body'
string | false 默认值：false
方法
<script>
$(function () { $('.tooltip-show').tooltip('show');}); //显示元素的提示工具。
$(function () { $('.tooltip-hide').tooltip('hide');}); //隐藏元素的提示工具。
$(function () { $('.tooltip-destroy').tooltip('destroy');}); //隐藏并销毁元素的提示工具。
$(function () { $('.tooltip-toggle').tooltip('toggle');}); //切换显示/隐藏元素的提示工具。
$(function () { $(".tooltip-options a").tooltip({html : true }); //向元素集合附加提示工具句柄。
</script>
事件
show.bs.tooltip
当调用 show 实例方法时立即触发该事件。
shown.bs.tooltip
当提示工具对用户可见时触发该事件（将等待 CSS 过渡效果完成）。
hide.bs.tooltip
当调用 hide 实例方法时立即触发该事件。
hidden.bs.tooltip
当提示工具对用户隐藏时触发该事件（将等待 CSS 过渡效果完成）。
例子：
$(function () { $('.tooltip-show').on('show.bs.tooltip', function () {
//alert("Alert message on show");
})
五、弹出框（Popover） data-toggle="popover"
类似上面的tooltip
需要js激活
<script>
$(function () { $("[data-toggle='popover']").popover(); });
</script>
<a href="#" data-toggle="popover" title="下侧的" data-content="底部的一些内容" data-placement="bottom">下侧的Popover</a>
<button class="btn btn-success" data-toggle="popover" title="向下的" data-content="底部的一些内容" data-placement="bottom">底部的</button>
选项
data-animation
data-html
data-placement
data-selector
data-title
data-trigger
data-delay
data-container
方法
$().popover(options);
$().popover('toggle');
$().popover('show');
$().popover('hide');
$().popover('destroy');
事件
show.bs.popover
shown.bs.popover
hide.bs.popover
hidden.bs.popover
六、警告框（Alert）
<div class="alert alert-warning fade in"> //注意此处并没有添加.alert-dismissible 添加两个类.fade & .in可在关闭时启用动画
<a href="#" class="close" data-dismiss="alert">×</a> //这个关闭（按钮）较之前button生成的颜色更深一些
<strong>警告！</strong>您的网络连接有问题。
</div>
方法
$('').alert();
让所有的警告框都带有关闭功能。
$('').alert('close');
关闭所有的警告框。
事件
close.bs.alert
当调用 close 实例方法时立即触发该事件。
closed.bs.alert
当警告框被关闭时触发该事件（将等待 CSS 过渡效果完成）。
七、按钮（Button）
显示加载状态信息
data-loading-text属性值为加载时显示的内容
<button id="fat-btn" class="btn btn-primary" data-loading-text="Loading..." type="button"> 加载状态 </button>
<script>
$(function() {
$(".btn").click(function(){
$(this).button('loading').delay(1000).queue(function() {
$(this).button('reset');
$(this).dequeue();
});
});
});
</script>
切换显示按压状态 data-toggle="button"
<button type="button" class="btn btn-primary" data-toggle="button"> 单个切换 </button>
单选按钮/复选按钮
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input type="radio" name="options"> 选项 1 //换为<input type="checkbox">
</label>
<label class="btn btn-primary">
<input type="radio" name="options"> 选项 2
</label>
<label class="btn btn-primary">
<input type="radio" name="options"> 选项 3
</label>
</div>
方法 （点击事件触发）
$(this).button('toggle');
切换按压状态。赋予按钮被激活的外观。可以使用 data-toggle 属性启用按钮的自动切换。
$(this).button('loading').delay(1000).queue(function() {});
当加载时，按钮是禁用的，且文本变为 button 元素的 data-loading-text 属性的值。
$(this).button('loading').delay(1000).queue(function() {
$(this).button('reset');
$(this).dequeue();
});
重置按钮状态，加载loading文本内容恢复为最初的内容。
$(this).button('loading').delay(1000).queue(function() {
$(this).button('complete'); //button需要设置自定义属性data-complete-text的值
$(this).dequeue();
});
该方法中的字符串是指由用户声明的任何字符串。使用该方法，重置按钮状态，并添加新的内容。
八、折叠（Collapse） （参考组件十九：面板）
<div class="panel-group" id="accordion"> //.panel-group多组折叠对象容器
<div class="panel panel-default"> //.panel需要折叠的对象
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> //data-toggle data-parent href|data-target
标题
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in"> //id对应上面的href 三个类名不可少
<div class="panel-body">
内容
</div>
</div>
</div>
...
</div>
选项
data-parent
如果提供了一个选择器，当可折叠项目显示时，指定父元素下的所有可折叠的元素将被关闭。
selector 默认值：false
data-toggle
切换调用可折叠元素。
boolean 默认值：true
方法
$('#identifier').collapse({toggle: false})
激活内容为可折叠元素。接受一个可选的 options 对象。
$('#identifier').collapse('toggle')
切换显示/隐藏可折叠元素。
$('#identifier').collapse('show')
显示可折叠元素。
$('#identifier').collapse('hide')
隐藏可折叠元素。
事件
show.bs.collapse
shown.bs.collapse
hide.bs.collapse
hidden.bs.collapse
九、轮播（Carousel）
<div id="myCarousel" class="carousel slide" data-ride="carousel" data-slide="next" data-interval="2000">
//属性 data-slide 接受关键字 prev 或 next，用来改变幻灯片相对于当前位置的位置。
//使用 data-slide-to 来向轮播传递一个原始滑动索引，data-slide-to="2" 将把滑块移动到一个特定的索引，索引从 0 开始计数。
//data-ride="carousel" 属性用于标记轮播在页面加载时就开始动画播放。
<!-- 轮播（Carousel）指标 -->
<ol class="carousel-indicators"> //轮播-指示器：下方的几个圆点
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- 轮播（Carousel）项目 -->
<div class="carousel-inner"> //循环的图片
<div class="item active">
<img src="/wp-content/uploads/2014/07/slide1.png" alt="First slide">
<div class="carousel-caption">标题 1</div> //在下方的圆点上面显示标题信息（任何html都可）
</div>
<div class="item">
<img src="/wp-content/uploads/2014/07/slide2.png" alt="Second slide">
<div class="carousel-caption">标题 2</div>
</div>
<div class="item">
<img src="/wp-content/uploads/2014/07/slide3.png" alt="Third slide">
<div class="carousel-caption">标题 3</div>
</div>
</div>
<!-- 轮播（Carousel）导航 --> //左右的导航（图标）
<a class="carousel-control left" href="#myCarousel"
data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel"
data-slide="next">›</a>
</div>
选项
data-interval
自动循环每个项目之间延迟的时间量。如果为 false，轮播将不会自动循环。
number 默认值：5000
data-pause
鼠标进入时暂停轮播循环，鼠标离开时恢复轮播循环。
string 默认值："hover"
data-wrap
轮播是否连续循环。
boolean 默认值：true
方法
$('#identifier').carousel({interval: 2000})
初始化轮播为可选的 options 对象，并开始循环项目。
$('#identifier').carousel('cycle')
从左到右循环轮播项目。
$('#identifier').carousel('pause')
停止轮播循环项目。
$('#identifier').carousel(number)
循环轮播到某个特定的帧（从 0 开始计数，与数组类似）。
$('#identifier').carousel('prev')
循环轮播到上一个项目。
$('#identifier').carousel('next')
循环轮播到下一个项目。
事件
slide.bs.carousel
当调用 slide 实例方法时立即触发该事件。
slid.bs.carousel
当轮播完成幻灯片过渡效果时触发该事件。
十、附加导航（Affix）
某个 <div> 固定在页面的某个位置，它们将在某个位置开始，但当页面点击某个标记，该 <div> 会锁定在某个位置，不会随着页面其他部分一起滚动。
<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"> //只需在此处添加 data-spy="affix" data-offset-top设置偏移
<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">
<h2 id="section-1">第一部分</h2>
...
<hr>
<h2 id="section-2">第二部分</h2>
...
<hr>
<h2 id="section-3">第三部分</h2>
...
<hr>
<h2 id="section-4">第四部分</h2>
...
<hr>
<h2 id="section-5">第五部分</h2>
...
</div>
</div>
</div>
</body>
$('#myAffix').affix({ //可不用设置data-spy及data-offset-top，可改由js实现
offset: {
top: 100, bottom: function () {
return (this.bottom =
$('.bs-footer').outerHeight(true))
}
}
})
Bootstrap学习笔记之插件（三）
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
Docker 安装最新的 JFrog Artifactory 制品仓库
Docker 安裝最新的 JFrog Artifactory 製品倉庫 1、前言 JFrog Artifactory 是目前全球唯一的支持所有開發語言，