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 tab

  e.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,auto

	selector: 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..

})

bootstrap读书笔记的更多相关文章

  1. 【读书笔记《Bootstrap 实战》】6.单页营销网站

    我们已经掌握了很多实用 Bootstrap  的重要技能.现在,是时候拿出更多的创意来帮助客户实现他们全方位在线营销的愿望了.此次将带领大家做一个漂亮的单页高端营销网站. 主要任务如下: □ 一个大型 ...

  2. 《深入理解bootstrap》读书笔记：第一章 入门准备

    一.bootstrap框架简介 Bootstrap是最流行的前端开发框架. 什么是框架:开发过程的半成品. bootstrap具有以下重要特性: (1)完整的CSS样式插件 (2)丰富的预定义样式表 ...

  3. how tomcat works 读书笔记四 tomcat的默认连接器

    事实上在第三章,就已经有了连接器的样子了,只是那仅仅是一个学习工具,在这一章我们会開始分析tomcat4里面的默认连接器. 连接器 Tomcat连接器必须满足下面几个要求 1 实现org.apache ...

  4. 《Apache kafka实战》读书笔记-kafka集群监控工具

    <Apache kafka实战>读书笔记-kafka集群监控工具 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 如官网所述,Kafka使用基于yammer metric ...

  5. 《Apache kafka实战》读书笔记-管理Kafka集群安全之ACL篇

    <Apache kafka实战>读书笔记-管理Kafka集群安全之ACL篇 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 想必大家能看到这篇博客的小伙伴,估计你对kaf ...

  6. 读书笔记汇总 - SQL必知必会（第4版）

    本系列记录并分享学习SQL的过程,主要内容为SQL的基础概念及练习过程. 书目信息 中文名:<SQL必知必会(第4版)> 英文名:<Sams Teach Yourself SQL i ...

  7. 读书笔记--SQL必知必会18--视图

    读书笔记--SQL必知必会18--视图 18.1 视图 视图是虚拟的表,只包含使用时动态检索数据的查询. 也就是说作为视图,它不包含任何列和数据,包含的是一个查询. 18.1.1 为什么使用视图 重用 ...

  8. 《C#本质论》读书笔记（18）多线程处理

    .NET Framework 4.0 看(本质论第3版) .NET Framework 4.5 看(本质论第4版) .NET 4.0为多线程引入了两组新API:TPL(Task Parallel Li ...

  9. C#温故知新：《C#图解教程》读书笔记系列

    一.此书到底何方神圣? 本书是广受赞誉C#图解教程的最新版本.作者在本书中创造了一种全新的可视化叙述方式,以图文并茂的形式.朴实简洁的文字,并辅之以大量表格和代码示例,全面.直观地阐述了C#语言的各种 ...

随机推荐

  1. Android ActionBar详解(二)--->使用ActionBar显示选项菜单

    MainActivity如下: package cc.testsimpleactionbar1; import android.os.Bundle; import android.app.Activi ...

  2. jQuery 图表

    开源网jQuery图表: http://www.oschina.net/project/tag/275/jquery-chart jqGrid(表格) 官网: http://www.jqgrid.co ...

  3. ASPから広がり

    ASP是动态服务器页面(Active Server Page)外语缩写.[1]是微软公司开发的代替CGI脚本程序的一种应用,它可以与数据库和其它程序进行交互,是一种简单.方便的编程工具.ASP的网页文 ...

  4. Lavarel(-) windows 部署

    使用 Lavarel 开发完全可以抛开wamp,phpstudy等一键环境.因为lavarel 内置的artisan 整合了php5.4 内置的webserver ,甚至可以使用artisan 命令指 ...

  5. WireShark抓包时TCP数据包出现may be caused by ip checksum offload

    最近用WireShark抓包时发现TCP数据包有报错:IP Checksum Offload,经过查阅资料终于找到了原因 总结下来就是wireshark抓到的数据包提示Checksum错误,是因为它截 ...

  6. Qt项目管理（33个规则）

    2016-06-20 花莫弦 小小杂货铺LY 一.qmake的介绍 qmake是Trolltech公司创建的用来为不同的平台和编译器书写Makefile的工具. 手写Makefile是比较困难并且容易 ...

  7. flume 日志采集工具

    Flume是Cloudera提供的一个高可用的,高可靠的,分布式的海量日志采集.聚合和传输的系统,Flume支持在日志系统中定制各类数据发送方,用于收集数据:同时,Flume提供对数据进行简单处理,并 ...

  8. rsyslog 基本组成

    Facility 定义日志消息的来源,以方便对日志进行分类,facility 有以下几种: --kern 内核消息 --user 用户级消息 --mail 邮件系统消息 --daemon 系统服务消息 ...

  9. linux环境变量配置总结

    LD_LIBRARY_PATH: 动态库的查找路径设置:方法一: export  LD_LIBRARY_PATH=LD_LIBRARY_PATH:/XXX 但是登出后就失效方法二: 修改~/.bash ...

  10. xsoup,Jsoup

    Xsoup 0.2.0 Xsoup 的详细介绍:请点这里 Xsoup 的下载地址:请点这里 https://github.com/code4craft/xsoup http://www.oschina ...