bootstrap读书笔记

引入bootstrap.js或单个插件的js文件
若引入单个插件的js文件，注意插件之间的依赖关系
data属性api
data属性的api很方便，但我们也可以选择关闭这个功能：$(document).off('.data-api');
$(document).off('.alert.data-api')
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(); //阻止模态框的显示
	});

过渡效果 transition.js
对于简单的过渡效果，只需引入 transition.js 即可， bootstrap.js 默认包含了transition.js
模态框 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 ..
	})
```

滚动监听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...
})

选项卡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
})

工具提示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>

弹出框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...
})

警告框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...
});

按钮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>

折叠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..
});

轮播插件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...
});

吸附组件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..
})

posted @ 2014-11-27 11:02 stephenykk 阅读(667) 评论(0) 编辑收藏举报

刷新页面返回顶部

stephenykk

bootstrap读书笔记

公告