1. 引入bootstrap.js或单个插件的js文件
    若引入单个插件的js文件，注意插件之间的依赖关系
  2. data属性api
    data属性的api很方便，但我们也可以选择关闭这个功能：$(document).off('.data-api');
    $(document).off('.alert.data-api')
  3. js的api
    js的api支持链式调用，如：$('.btn.danger').button('toggle').addClass('fat');
    所有插件方法都支持多种参数形式：
  • $('#mymodal').modal() 无参数，则采用默认值调用
  • $('#mymodal').modal('show') 代表方法的字符串
  • $('#mymodal').modal({keybord: false}) options参数对象

插件方法通过 Constructor属性暴露其构造函数如： $.fn.popover.Constructor
可以通过页面元素获取某个插件的实例，如：$('[rel="popover"]').data('popover'); ~~插件实例被缓存起来了。

修改插件的默认设置
通过修改插件的 Constructor.DEFAULTS 对象，如：

    $.fn.modal.Constructor.DEFAULTS.keyboard = true

避免命名空间冲突
要避免Bootstrap插件和其他UI框架命名空间冲突，可以调用 noConflict 方法:

    var bootstrapBtn = $.fn.button.noConflict(); //$.fn.button恢复之前的值$.fn.bootstrapBtn = bootstrapBtn; //button插件用新的命名

事件
Bootstrap为大部分插件所具有的动作提供了自定义事件，一般这些事件有两种形式：

  • 不定式 如：show, 表示事件开始被触发
  • 过去式 如：shown, 表示在动作执行完毕后触发

从3.0版本起，事件采用命名空间的形式，如：show.bs.modal

    $('#mymodal').on('show.bs.modal', function(e){if(!data) return e.preventDefault(); //阻止模态框的显示});

  1. 过渡效果 transition.js
    对于简单的过渡效果，只需引入 transition.js 即可， bootstrap.js 默认包含了transition.js

  2. 模态框 modal.js
  • 模态框不支持嵌套，需要嵌套模态框的话，只能自己实现
  • 模态框包含的html最好尽量作为body的直接子元素
    <!-- Button trigger modal --><button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Launch demo modal</button><div class="modal fade" id="myModal"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button><h4 class="modal-title">Modal title</h4></div><div class="modal-body"><p>One fine body&hellip;</p></div><div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal">Close</button><button type="button" class="btn btn-primary">Save changes</button></div></div><!-- /.modal-content --></div><!-- /.modal-dialog --></div><!-- /.modal -->

  • 模态框的大小
    可为 .modal-dialog添加调整样式类.modal-lg或.modal-sm实现大小调整
    .modal.fade是实现淡入淡出的动画效果的，若无需动画，去掉.fade即可。

        <!-- Large modal --><button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button><div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true"><div class="modal-dialog modal-lg"><div class="modal-content">...</div></div></div><!-- Small modal --><button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">Small modal</button><div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true"><div class="modal-dialog modal-sm"><div class="modal-content">...</div></div></div>

  • 用法
    可以通过data属性或js调用模态对话框，当模态框弹出时，会为body添加.modal-open样式类，让页面不可滚动，同时添加一个.modal-backdrop元素，提供一个可点击背景

        <!-- 参数也可以通过 data属性设置 如 data-backdrop="static" --><button type="button" data-toggle="modal" data-target="#myModal" data-backdrop="static">Launch modal</button>
        $('#myModal').modal(options); //options传入参数
  • 参数
    • backdrop: true/false/'static' 背景遮罩的显示与否
    • keyboard: true/false 键盘上的esc键可否关闭模态框
    • show：true/false 模态框是否初始好了就立即显示
    • remote: path 用jquery的load方法加载指定url的内容到 .modal-content中
  • 方法
    $('#myModal').modal(option); //显示模态框$('#myModal').modal('toggle'); //切换模态框的显示和隐藏$('#myModal').modal('show'); //显示$('#myModal').modal('hide'); //隐藏
  • 事件

    • show.bs.modal //模态框显示前
    • shown.bs.modal //模态框已经显示后
    • hide.bs.modal //隐藏前
    • hidden.bs.modal //已隐藏
    • loaded.bs.modal //远端数据已加载完
        $('#myModal').on('hidden.bs.modal', function(e){//do something ..})
  1. 滚动监听scrollSpy.js
body {position: relative;
}
<body data-spy="scroll" data-target=".navbar-example">...<div class="navbar-example"><ul class="nav nav-tabs" role="tablist">...</ul></div>...
</body>
//参数
$('body').scrollspy({ target: '.navbar-example' }); //options
$('body').scrollspy({offset: 30});  //对应 data-offset="30"//方法
$('[data-spy="scroll"]').each(function () {var $spy = $(this).scrollspy('refresh'); //refresh方法
})//事件
$('#myScrollSpy').on('activate.bs.scrollspy', function(){//do something...
})
  1. 选项卡tab.js
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist"><li role="presentation" class="active"><a href="#home" role="tab" data-toggle="tab">Home</a></li><li role="presentation"><a href="#profile" role="tab" data-toggle="tab">Profile</a></li><li role="presentation"><a href="#messages" role="tab" data-toggle="tab">Messages</a></li><li role="presentation"><a href="#settings" role="tab" data-toggle="tab">Settings</a></li>
</ul><!-- Tab panes -->
<div class="tab-content"><div role="tabpanel" class="tab-pane fade inactive" id="home">...</div><div role="tabpanel" class="tab-pane fade" id="profile">...</div><div role="tabpanel" class="tab-pane fade" id="messages">...</div><div role="tabpanel" class="tab-pane fade" id="settings">...</div>
</div>
//激活选项卡
$('#myTab a').click(function (e) {e.preventDefault()$(this).tab('show')
})$('#myTab a[href="#profile"]').tab('show') // Select tab by name
$('#myTab a:first').tab('show') // Select first tab
$('#myTab a:last').tab('show') // Select last tab
$('#myTab li:eq(2) a').tab('show') // Select third tab (0-indexed)$(function () {
$('#myTab a:last').tab('show')
})//事件 show.bs.tab, shown.bs.tab, hide.bs.tab, hidden.bs.tab
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {e.target // newly activated tabe.relatedTarget // previous active tab
})
  1. 工具提示tooltip.js
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button><button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button><button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button><button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>

Tooltip和Popover插件虽然用了data-api(data-toggle="tooltip", data-toggle="popover"), 但还需要手动去初始化它们，如：$('[data-toggle="tooltip"]').tooltip({container:'body'}).tooltip('fixTitle');

不要对display:none的元素，使用tooltip, 如：$('..').tooltip('show');

//初始化插件
$('#example').tooltip(options);
options = {animation: true, //使用渐现动画container: string|false, 生成的tooltip元素append到哪里，false则放置在当前元素后delay: number|object, 显示和隐藏的延时 500， {show:200, hide:100}html: boolean, tooltip的内容是否html  title="some text" title="<span> some html</span>"placement: string|fn, top,right,bottom,left,autoselector: string|false, $('.container').tooltip({selector:'.triggerTooltipEle',container:'body'}), 类似事件委托，在父容器上调用tooltip, 对动态内容十分有用template: htmlStr,  可指定生成tooltip的html片段 它的默认值参考下面html代码title: string|fn, 提示内容trigger: string, 默认'hover focus', 触发事件viewport: string | object, 默认 {selector: 'body', padding:0}, 限制tooltip元素在某个元素的范围内
}
//方法
$('#element').tooltip('show'); //显示元素的工具提示
$('#element').tooltip('hide');
$('#element').tooltip('toggle');
$('#element').tooltip('destroy'); //隐藏并删除元素的工具提示相关DOM//事件  show, shown, hide, hidden
$('#myTooltip').on('show.bs.tooltip', function(e){//do something..
});

<!-- HTML to write -->
<a href="#" data-toggle="tooltip" title="Some tooltip text!">Hover over me</a><!-- Generated markup by the plugin -->
<div class="tooltip top" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner">Some tooltip text!</div>
</div>
  1. 弹出框popover.js popover插件依赖tooltip插件 需要自行手动初始化插件，才会起作用。
    popover的方法和事件基本和tooltip一样，但是要隐藏弹出框只能再次点击触发元素，若要跨平台跨浏览器实现点击任意地方隐藏弹出框(实际上是删除了DOM),
    需要使用a标签，并且添加 tabindex="0"属性，如下：
<a href="#" tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover
</a>
$('#example').popover(options);//选项同tooltip
//方法
$('#element').popover('show');
$('#element').popover('hide');
$('#element').popover('toggle');
$('#element').popover('destroy');
//事件
$('#myPopover').on('show.bs.popover', function(){//do something...
})
  1. 警告框alert.js
    若要关闭alert有动画效果，则需要加上.alert.fade.in
<div class="alert alert-warning alert-dismissible fade in" role="alert"><button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button><strong>Holy guacamole!</strong> Best check yo self, you're not looking too good.
</div><div class="alert alert-danger alert-dismissible fade in" role="alert"><button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button><h4>Oh snap! You got an error!</h4><p>Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.</p><p><button type="button" class="btn btn-danger">Take this action</button><button type="button" class="btn btn-default">Or do this</button></p>
</div>
//方法
$('.alert').alert();
$('.alert').alert('close'); //从DOM中删除alert组件//事件 close closed
$('#myAlert').on('close.bs.alert', function(){//do something...
});
  1. 按钮button.js
    按钮显示loading状态 data-loading-text="loading.." $('#myButton').button('loading') $('#myButton').button('reset')
<button type="button" id="myButton" data-loading-text="Loading..." class="btn btn-primary" autocomplete="off">Loading state
</button><script>$('#myButton').on('click', function () {var $btn = $(this).button('loading')// business logic...$btn.button('reset')})
</script>

按钮在按下和弹起两种样式间切换, data-toggle="button" 添加样式.active可以激活按钮(or checkbox radio) 的选中状态

<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">Single toggle
</button>

多选按钮组

<div class="btn-group" data-toggle="buttons"><label class="btn btn-primary active"><input type="checkbox" autocomplete="off" checked> Checkbox 1 (pre-checked)</label><label class="btn btn-primary"><input type="checkbox" autocomplete="off"> Checkbox 2</label><label class="btn btn-primary"><input type="checkbox" autocomplete="off"> Checkbox 3</label>
</div>

单选按钮组

<div class="btn-group" data-toggle="buttons"><label class="btn btn-primary active"><input type="radio" name="options" id="option1" autocomplete="off" checked> Radio 1 (preselected)</label><label class="btn btn-primary"><input type="radio" name="options" id="option2" autocomplete="off"> Radio 2</label><label class="btn btn-primary"><input type="radio" name="options" id="option3" autocomplete="off"> Radio 3</label>
</div>
$('#myButton').button('toggle'); //切换按钮的按下状态( toggle .active)
$('#myButton').button('reset'); //重置按钮状态(即重置样式)$('#myButton').button(string); //string 为表示状态的字符串 如 loading compelete 参见下面代码 
<button type="button" id="myStateButton" data-complete-text="finished!" class="btn btn-primary" autocomplete="off">...
</button><script>$('#myStateButton').on('click', function () {$(this).button('complete') // button text will be "finished!"})
</script>
  1. 折叠collapse.js 依赖于transition.js(默认已内置于bootstrap.js中)
    用于给手风琴和导航等折叠效果基本和灵活的支持
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"><div class="panel panel-default"><div class="panel-heading" role="tab" id="headingOne"><h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">Collapsible Group Item #1</a></h4></div><div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne"><div class="panel-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus </div></div></div><div class="panel panel-default"><div class="panel-heading" role="tab" id="headingTwo"><h4 class="panel-title"><a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">Collapsible Group Item #2</a></h4></div><div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo"><div class="panel-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry </div></div></div><div class="panel panel-default"><div class="panel-heading" role="tab" id="headingThree"><h4 class="panel-title"><a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">Collapsible Group Item #3</a></h4></div><div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree"><div class="panel-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry</div></div></div>
</div>

注意属性 data-parent data-toggle data-target

$('#myCollapsible').collapse({toggle:false});
$('#myCollapsible').collapse('toggle');
$('#myCollapsible').collapse('show');
$('#myCollapsible').collapse('hide');//事件 hide hidden show shown
$('#myCollapsible').on('hidden.bs.collapse', function(){//do something..
});
  1. 轮播插件carousel.js
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel"><!-- Indicators --><ol class="carousel-indicators"><li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li><li data-target="#carousel-example-generic" data-slide-to="1"></li><li data-target="#carousel-example-generic" data-slide-to="2"></li></ol><!-- Wrapper for slides --><div class="carousel-inner" role="listbox"><div class="item active"><img src="..." alt="..."><div class="carousel-caption">...</div></div><div class="item"><img src="..." alt="..."><div class="carousel-caption">...</div></div>...</div><!-- Controls --><a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span><span class="sr-only">Previous</span></a><a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span><span class="sr-only">Next</span></a>
</div>
$('.carousel').carousel();
$('.carousel').carousel(options);
//选项
options = {interval:5000, //自动播放的时间间隔pause:'hover', //鼠标悬停 暂停播放wrap:true, //循环切换，最后一张到第一张keyboard:true //是否响应键盘事件
}//方法
$('.carousel').carousel({interval:2000});
$('.carousel').carousel('toggle');
$('.carousel').carousel('pause');
$('.carousel').carousel('cycle');
$('.carousel').carousel(number);
$('.carousel').carousel('prev');
$('.carousel').carousel('next');//事件 slide slid
$('#myCarousel').on('slide.bs.carousel', function(){//do something...
});
  1. 吸附组件affix.js
<!-- 当这个设置 data-spy="affix"的元素 距离浏览器窗口顶部小于60时 .affix-top->.affix(需要自行设置 .affix为固定定位), 当元素距离窗口底部小于200时，则.affix->.affix-bottom(改为绝对定位 避免遮挡footer) -->
<div data-spy="affix" data-offset-top="60" data-offset-bottom="200">...
</div>
$('#myAffix').affix({offset:{top:100,bottom:function(){return (this.bottom = $('.footer').outerHeight(false));}}
});//options:
offset: number|object|fn  如：100, {top:100,bottom:200}
target: selector |node|jqObject 指定需要吸附的目标元素 ~~~吸附的元素不就是带data-spy="affix"的元素么？//事件 affix affixed, affix-top affixed-top, affix-bottom affixed-bottom
$('.myaffix').on('affixed-top.bs.affix', function(){//do something..
})

转载于:https://www.cnblogs.com/stephenykk/p/4125888.html

bootstrap读书笔记相关推荐

  1. 行人检测 读书笔记 综述

    行人检测 读书笔记 综述(1) 朱文佳-基于机器学习的行人检测关键技术研究 本文是博主对上海交通大学的朱文佳的硕士毕业论文的学习笔记,如果不当或理解错误之处,敬请指导,不胜感激. 绪论 1.1 典型应 ...

  2. 《How Tomcat Works》读书笔记（三）Connector

    为什么80%的码农都做不了架构师?>>>    3.1 StringManager 为啥要先讲StringManager呢? 话说tomcat算是一个大型项目了(最新的tomcat7 ...

  3. 《Hands-On Machine Learning with Scikit-Learn TensorFlow》读书笔记（二）：端到端的机器学习

    最近有时间看书了,把以前想看的书捡一下,翻译中顺便加上自己的理解,写个读书笔记. 假装最近聘请了一家房地产公司的数据科学家,然后通过一个示例项目,从头至尾了解机器学习. 以下是要完成的主要步骤: 查看 ...

  4. 期权、期货及其他衍生产品 第四章读书笔记 利率

    期权.期货及其他衍生产品 第四章读书笔记 利率 利率的种类 我国的利率体系 中央银行利率 金融机构利率 金融市场利率 利率的度量 连续复利利率和与之等价的每年m次复利利率的关联 零息利率 债券定价 债 ...

  5. Build Your Own Angularjs 读书笔记（AngularJS牛逼的地方在于它内嵌了一个表达式到Function对象的编译器。。。当然还有DI框架）

    Build Your Own Angularjs 读书笔记 目录 [隐藏] 1 项目配置 2 作用域 3 表达式与过滤器 4 模块与依赖注入 5 辅助函数 6 指令 项目配置[编辑] npm pack ...

  6. Apache Kafka实战读书笔记（推荐指数：☆☆☆☆☆）

    Apache Kafka实战读书笔记(推荐指数:☆☆☆☆☆) 认识AK 快速入门 安装和启动 小案例 消息引擎系统 消息引擎范型 AK的概要设计 吞吐量/延时 消息持久化 负载均衡和故障转移: 伸缩性 ...

  7. 《How Tomcat Works》读书笔记(三)--Connector(连接器)

    <How Tomcat Works>读书笔记(三)--Connector(连接器) 这是<How Tomcat Works>第三四章的读书笔记.主要写了Tomcat4.0默认的 ...

  8. 【Python自然语言处理】读书笔记：第四章：编写结构化程序

    4 编写结构化程序 4.1 回到基础 1.赋值: 列表赋值是"引用",改变其中一个,其他都会改变 foo = ["1", "2"] bar ...

  9. 深入分析java web技术内幕----读书笔记（三）

     claasloader读书笔记 claasloader 1.classloader将class加载到jvm中. 2.父优先的等级加载,双亲委派模型. 3.defineclass用于将字节流解析成 ...

最新文章

  1. matlab画复变函数,科学网—复数复变函数的Matlab计算与绘图 - 周铁戈的博文
  2. Python 数据结构视频教程一
  3. Matplotlib实例教程 | 句子长度累积分布函数图
  4. INLINE HOOK过驱动保护的理论知识和大概思路
  5. iOS10 NSURLErrorDomain Code 1200
  6. quill鼠标悬浮 出现提示_外设报道——DELUX多彩M618X垂直鼠标颠覆创新
  7. python-temp-0626随堂
  8. 什么是 Python 自省？
  9. python 线程通信 会涉及到拷贝吗_Python如何实现线程间通信
  10. java map对象排序输出_java实现对象的排序（List和Map）
  11. java异常练习：要求用户输入数字，捕获并处理用户输入错误的异常，给用户进行提示
  12. 网上购物系统的设计与实现
  13. 开源GIS的一些理解和介绍
  14. win10 实现远程连接linux系统
  15. java批量打包下载网络图片
  16. 理解什么叫“自然拼读”
  17. 给出一个不多于5位的整数，要求 1、求出它是几位数 2、分别输出每一位数字 3、按逆序输出各位数字，例如原数为321,应输出123。
  18. 【ML on Kubernetes】第 3 章：探索 Kubernetes
  19. ltsc系统升级为服务器,微软宣布Windows Server 2022开始转向LTSC 不再发布半年频道更新...
  20. 如何在AndroidStudio中使用GitHub

热门文章

  1. 一文告诉你胜任力模型对企业有多重要
  2. 用户功能设计与实现--Django播客系统(六)
  3. 2021年5月22日 星期六 霾 高温
  4. 天天动听皮肤、歌手头像、字体等的使用方法
  5. RT-Thread Studio环境下lwIP+ENC28J60的启用与调试
  6. 一文了解蛋白功能结构域预测与分析
  7. python统计套利
  8. 陈凯歌： 大创意大《无极》
  9. 疫后如何激活消费？上海和阿里打了个样板
  10. 深入浅出讨论6LowPan技术