您的位置：首页 > Web前端 > BootStrap

《玩转Bootstrap（JS插件篇）》笔记

2016-07-20 23:15 176 查看

导入JavaScript插件

不论是单独导入还一次性导入之前必须先导入jQuery库。

一次性导入

<script src="js/bootstrap.min.js"></script>


单独导入，可到github去下载

动画过渡（Transitions）: 
transition.js


模态弹窗（Modal）: 
modal.js


下拉菜单（Dropdown）： 
dropdown.js


滚动侦测（Scrollspy）： 
scrollspy.js


选项卡（Tab）： 
tab.js


提示框（Tooltips）： 
tooltop.js


弹出框（Popover）： 
popover.js


警告框（Alert）： 
alert.js


按钮（Buttons）： 
button.js


折叠/手风琴（Collapse）： 
collapse.js


图片轮播Carousel： 
carousel.js


自动定位浮标Affix： 
affix.js


动画过渡

都是采用CSS3来实现的，所以IE6-8浏览器是不具备这些过渡动画效果。

默认情况之下，Bootstrap框架中以下组件使用了过渡动画效果：

模态弹出窗（Modal）的滑动和渐变效果；

选项卡（Tab）的渐变效果；

警告框（Alert）的渐变效果；

图片轮播（Carousel）的滑动效果。

模态弹出框

模态弹出框统一称为 Modal

结构分析

分别运用了
modal
、
modal-dialog
和
modal-content
样式

弹出窗真正的内容都放置在
modal-content
中，其主要又包括三个部分：

1 弹出框头部，一般使用
modal-header
表示，主要包括标题和关闭按钮

2 弹出框主体，一般使用
modal-body
表示，弹出框的主要内容

3 弹出框脚部，一般使用
modal-footer
表示，主要放置操作按钮

实现原理解析

bootstrap中的“模态弹出框”有以下几个特点：

1、模态弹出窗是固定在浏览器中的。

2、模态弹出窗宽度是自适应的，而且
modal-dialog
水平居中。

3、当浏览器视窗大于768px时，模态弹出窗的宽度为600px。

尺寸选择

modal-lg
大尺寸

modal-sm
小尺寸（默认）

触发模态弹出窗2种方法

1、模态弹出窗声明，只需要自定义两个必要的属性：
data-toggle
（必须为modal）和
data-target
（ID值）

2、触发模态弹出窗也可以是一个链接
<a>
元素，那么可以使用链接元素自带的
href
属性替代
data-target
属性

不过建议还是使用统一使用data-target的方式来触发。

为弹出框增加过度动画效果

可通过给
.modal
增加类名
fade
为模态弹出框增加一个过渡动画效果。

data参数说明

属性名称类型默认值描述
data-toggle字符modal必须且为
modal
，用来控制模态弹出窗的显示
data-target字符用户自己定义必须，定义要触发的弹出窗是哪一个。其值可以
div.modal
元素独有类名，或ID值
data-backdrop布尔值true是否包含一个背景
div
元素，如果为true，则单击该背景时关闭弹出窗，如果取值为static，则单击背景
div
时不会关闭
data-keyboard布尔值true按键盘的ESC键可以关闭弹出窗。如果值为
false
，则不会关闭
data-show布尔值true初始化时，弹出窗是否显示
hrefURL路径空值如果通过
a
元素触发模态弹出窗，其
href
值不是一个以#开头的值，则表示是一个url地址，模态弹出窗先加载其内容，然后替换原有的
modal-content
中的内容。如果
href
设置了地址，那么
data-target
则必须填写制定ID值
JavaScript触发

反转(如果当前为显示，则将其关闭；如果为关闭，则将其显示)：
$("#themodal").modal("toggle");


显示：
$("#themodal").modal("show");


关闭：
$("#themodal").modal("hide");


JavaScript触发时的参数设置

$(function () {
$(".btn").click(function () {
$("#mymodal").modal({
backdrop: false, // 相当于data-backdrop
keyboard: false, // 相当于data-keyboard
show: true, // 相当于data-show
remote: "" // 相当于a标签的href
});
});
});


JavaScript触发时的事件

模态弹出窗支持四种类型的事件，分别是模态弹出窗的弹出前、弹出后，关闭前、关闭后

事件类型描述
show.bs.modal在show方法调用时立即触发（尚未显示之前）；如果单击了一个元素，那么该元素将作为事件relatedTarget事件
shown.bs.modal该事件在模态窗完全显示给用户之后（并且等CSS动画完成之后）触发；如果单击了一个元素，那么该元素将作为事件relatedTarget事件
hide.bs.modal在hide方法调用时（但还未关闭隐藏）立即触发
hidden.bs.modal该事件在模态弹出窗完全隐藏之后（并CSS动画漂亮完成之后）触发
$('#myModal').on('hidden.bs.modal', function (e) {
// 处理代码...
})


示例

<!-- data-toggle必须为modal -->
<!-- data-target为div.modal元素独有类名，或ID值 -->
<button class="btn btn-primary" data-toggle="modal" data-target="#mymodal-data" data-backdrop="static" data-keyboard="false" type="button">通过data-target触发</button>
<!-- 模态弹出窗，由modal、modal-dialog和modal-content组成 -->
<!-- modal-lg大尺寸，还有modal-sm -->
<!-- fade弹出框过度动画效果 -->
<div class="modal fade modal-lg" id="mymodal-data" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<!-- modal-header弹出框头部 -->
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">模态弹出窗标题</h4>
</div>
<!-- modal-body弹出框主体 -->
<div class="modal-body">
<p>模态弹出窗主体内容</p>
</div>
<!-- modal-footer弹出框脚部 -->
<div class="modal-footer">
<!--  data-dismiss="modal"关闭模态弹出窗 -->
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary">保存</button>
</div>
</div>
</div>
</div>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航