1、导入Javascript插件
Bootstrap的Javascript插件可以单独导入到页面中&＃xff0c;也可以一次性导入到页面中。因为在Bootstrap中的Javascript插件都是依赖于jQuery库&＃xff0c;所以不论是单独导入还一次性导入之前必须先导入jQuery库。
一次性导入&＃xff1a;
Bootstrap提供了一个单一的文件&＃xff0c;这个文件包含了Bootstrap的所有Javascript插件&＃xff0c;即bootstrap.js&＃xff08;压缩版本&＃xff1a;bootstrap.min.js&＃xff09;。
单独导入&＃xff1a;
为方便单独导入特效文件&＃xff0c;Bootstrap V3.2中提供了12种Javascript插件&＃xff0c;他们分别是&＃xff1a;
☑ 动画过渡&＃xff08;Transitions&＃xff09;:对应的插件文件“transition.js”
☑ 模态弹窗&＃xff08;Modal&＃xff09;:对应的插件文件“modal.js”
☑ 下拉菜单&＃xff08;Dropdown&＃xff09;&＃xff1a;对应的插件文件“dropdown.js”
☑ 滚动侦测&＃xff08;Scrollspy&＃xff09;&＃xff1a;对应的插件文件“scrollspy.js”
☑ 选项卡&＃xff08;Tab&＃xff09;&＃xff1a;对应的插件文件“tab.js”
☑ 提示框&＃xff08;Tooltips&＃xff09;&＃xff1a;对应的插件文件“tooltop.js”
☑ 弹出框&＃xff08;Popover&＃xff09;&＃xff1a;对应的插件文件“popover.js”
☑ 警告框&＃xff08;Alert&＃xff09;&＃xff1a;对应的插件文件“alert.js”
☑ 按钮&＃xff08;Buttons&＃xff09;&＃xff1a;对应的插件文件“button.js”
☑ 折叠/手风琴&＃xff08;Collapse&＃xff09;&＃xff1a;对应的插件文件“collapse.js”
☑ 图片轮播Carousel&＃xff1a;对应的插件文件“carousel.js”
☑ 自动定位浮标Affix&＃xff1a;对应的插件文件“affix.js”
2、动画过渡&＃xff08;Transitions&＃xff09;
Bootstrap框架中以下组件使用了过渡动画效果&＃xff1a;
☑ 模态弹出窗&＃xff08;Modal&＃xff09;的滑动和渐变效果&＃xff1b;
☑ 选项卡&＃xff08;Tab&＃xff09;的渐变效果&＃xff1b;
☑ 警告框&＃xff08;Alert&＃xff09;的渐变效果&＃xff1b;
☑ 图片轮播&＃xff08;Carousel&＃xff09;的滑动效果。
<button class&＃61;"btn btn-primary" type&＃61;"button">点击我button>
<div class&＃61;"modal fade" id&＃61;"mymodal"><div class&＃61;"modal-dialog"><div class&＃61;"modal-content"><div class&＃61;"modal-header"><button type&＃61;"button" class&＃61;"close" data-dismiss&＃61;"modal"><span aria-hidden&＃61;"true">×span><span class&＃61;"sr-only">Closespan>button><h4 class&＃61;"modal-title">模态弹出窗标题h4>div><div class&＃61;"modal-body"><p>模态弹出窗主体内容p>div><div class&＃61;"modal-footer"><button type&＃61;"button" class&＃61;"btn btn-default" data-dismiss&＃61;"modal">关闭button><button type&＃61;"button" class&＃61;"btn btn-primary">保存button>div>div>div>
div>
Bootstrap框架中的模态弹出框&＃xff0c;分别运用了“modal”、“modal-dialog”和“modal-content”样式&＃xff0c;而弹出窗真正的内容都放置在“modal-content”中&＃xff0c;其主要又包括三个部分&＃xff1a;
☑ 弹出框头部&＃xff0c;一般使用“modal-header”表示&＃xff0c;主要包括标题和关闭按钮
☑ 弹出框主体&＃xff0c;一般使用“modal-body”表示&＃xff0c;弹出框的主要内容
☑ 弹出框脚部&＃xff0c;一般使用“modal-footer”表示&＃xff0c;主要放置操作按钮
bootstrap中的“模态弹出框”有以下几个特点&＃xff1a;
1、模态弹出窗是固定在浏览器中的。
2、单击右侧全屏按钮&＃xff0c;在全屏状态下&＃xff0c;模态弹出窗宽度是自适应的&＃xff0c;而且modal-dialog水平居中。
3、当浏览器视窗大于768px时&＃xff0c;模态弹出窗的宽度为600px。
<button class&＃61;"btn btn-primary" data-toggle&＃61;"modal" data-target&＃61;"#mymodal-data" type&＃61;"button">通过data-target触发button>
<div class&＃61;"modal" id&＃61;"mymodal-data" tabindex&＃61;"-1" role&＃61;"dialog" aria-labelledby&＃61;"mySmallModalLabel" aria-hidden&＃61;"true"><div class&＃61;"modal-dialog"><div class&＃61;"modal-content"><div class&＃61;"modal-header"><button type&＃61;"button" class&＃61;"close" data-dismiss&＃61;"modal"><span aria-hidden&＃61;"true">×span><span class&＃61;"sr-only">Closespan>button><h4 class&＃61;"modal-title">模态弹出窗标题h4>div><div class&＃61;"modal-body"><p>模态弹出窗主体内容p>div><div class&＃61;"modal-footer"><button type&＃61;"button" class&＃61;"btn btn-default" data-dismiss&＃61;"modal">关闭button><button type&＃61;"button" class&＃61;"btn btn-primary">保存button>div>div>div>
div>
模态弹出窗在页面加载完成时&＃xff0c;是被隐藏在页面中的&＃xff0c;只有通过一定的动作&＃xff08;事件&＃xff09;才能触发模态弹出窗的显示。在Bootstrap框架中实现方法有2种&＃xff0c;接下来分别来介绍这2种触发模态弹出窗的使用方法。
声明式触发方法&＃xff1a;
方法一&＃xff1a;模态弹出窗声明&＃xff0c;只需要自定义两个必要的属性&＃xff1a;data-toggle和data-target&＃xff08;bootstrap中声明式触发方法一般依赖于这些自定义的data-xxx 属性。比如data-toggle&＃61;"" 或者 data-dismiss&＃61;""&＃xff09;
注意以下事项&＃xff1a;
1、data-toggle必须设置为modal(toggle中文翻译过来就是触发器)&＃xff1b;
2、data-target可以设置为CSS的选择符&＃xff0c;也可以设置为模态弹出窗的ID值&＃xff0c;一般情况设置为模态弹出窗的ID值&＃xff0c;因为ID值是唯一的值。
方法二&＃xff1a;触发模态弹出窗也可以是一个链接元素&＃xff0c;那么可以使用链接元素自带的href属性替代data-target属性
<a class&＃61;"btn btn-primary" data-toggle&＃61;"modal" href&＃61;"#mymodal-link">通过链接href属性触发a>
<button class&＃61;"btn btn-primary" type&＃61;"button" data-toggle&＃61;"modal" data-target&＃61;"#mymodal-data">通过data-target触发button>
为模态弹出框增加过度动画效果&＃xff1a;
可通过给“.modal”增加类名“fade”为模态弹出框增加一个过渡动画效果
使用Javascript触发模态弹出窗时&＃xff0c;Bootstrap框架提供了一些设置&＃xff0c;主要包括属性设置、参数设置和事件设置。
属性设置
模态弹出窗默认支持的自定义属性主要有
参数设置&＃xff1a;
在Bootstrap框架中还为模态弹出窗提供了三种参数设置:
事件设置&＃xff1a;
模态弹出窗还支持四种类型的事件&＃xff0c;分别是模态弹出窗的弹出前、弹出后&＃xff0c;关闭前、关闭后&＃39;
京公网安备 11010802041100号