Bootstrap插件
1 BootStrap插件使用规则1.1 单个引入JavaScript 插件可以单个引入(使用 Bootstrap 提供的单个?
1.2 data属性你可以仅仅通过 data 属性 API 就能使用所有的 Bootstrap 插件,无需写一行 JavaScript 代码。这是 Bootstrap 中的一等 API,也应该是你的首选方式。 话又说回来,在某些情况下可能需要将此功能关闭。因此,我们还提供了关闭 data 属性 API 的方法,即解除以? $(document).off(‘.data-api‘)
另外,如果是针对某个特定的插件,只需在? $(document).off(‘.alert.data-api‘)
1.3 编程方式的 API我们为所有 Bootstrap 插件提供了纯 JavaScript 方式的 API。所有公开的 API 都是支持单独或链式调用方式,并且返回其所操作的元素集合(注:和jQuery的调用形式一致)。 $(‘.btn.danger‘).button(‘toggle‘).addClass(‘fat‘)
所有方法都可以接受一个可选的 option 对象作为参数,或者一个代表特定方法的字符串,或者什么也不提供(在这种情况下,插件将会以默认值初始化): $(‘#myModal‘).modal() // 以默认值初始化 $(‘#myModal‘).modal({ keyboard: false }) // initialized with no keyboard $(‘#myModal‘).modal(‘show‘) // 初始化后立即调用 show 方法
每个插件还通过? 默认设置 每个插件都可以通过修改其自身的? $.fn.modal.Constructor.DEFAULTS.keyboard = false // 将模态框插件的 `keyboard` 默认选参数置为 false
1.4 避免命名空间冲突某些时候可能需要将 Bootstrap 插件与其他 UI 框架共同使用。在这种情况下,命名空间冲突随时可能发生。如果不幸发生了这种情况,你可以通过调用插件的? var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value $.fn.bootstrapBtn = bootstrapButton // give $().bootstrapBtn the Bootstrap functionality
1.5 事件Bootstrap 为大部分插件所具有的动作提供了自定义事件。一般来说,这些事件都有不定式和过去式两种动词的命名形式,例如,不定式形式的动词(例如? 从 3.0.0 版本开始,所有 Bootstrap 事件的名称都采用命名空间方式。 所有以不定式形式的动词命名的事件都提供了? $(‘#myModal‘).on(‘show.bs.modal‘,function (e) { if (!data) return e.preventDefault() // 阻止模态框的展示 }) 1.6 版本号每个 Bootstrap 的 jQuery 插件的版本号都可以通过插件的构造函数上的? $.fn.tooltip.Constructor.VERSION // => "3.3.7" 2 过渡效果 transition.js2.1 关于过渡效果对于简单的过渡效果,只需将? 2.3 包含的内容Transition.js 是针对? 2.4 禁用过度效果通过下面的 JavaScript 代码可以在全局范围禁用过渡效果,并且必须将此代码放在? $.support.transition = false 3 模态框 modal.js
3.1 模态框定义<!-- Modal --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="myModalLabel">Modal title</h4> </div> <div class="modal-body"> ... </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> </div> </div>
3.2 按钮<!-- Button trigger modal --> <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> Launch demo modal </button>
3.3 模态框尺寸<!-- 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"> <div class="modal-dialog modal-lg" role="document"> <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"> <div class="modal-dialog modal-sm" role="document"> <div class="modal-content"> ... </div> </div> </div>
3.4 禁止动画效果如果你不需要模态框弹出时的动画效果(淡入淡出效果),删掉? <div class="modal" tabindex="-1" role="dialog" aria-labelledby="..."> ... </div>
3.5 模态框中使用栅格系统<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="gridSystemModalLabel">Modal title</h4> </div> <div class="modal-body"> <div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div> </div> <div class="row"> <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div> <div class="col-md-2 col-md-offset-4">.col-md-2 .col-md-offset-4</div> </div> <div class="row"> <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div> </div> <div class="row"> <div class="col-sm-9"> Level 1: .col-sm-9 <div class="row"> <div class="col-xs-8 col-sm-6"> Level 2: .col-xs-8 .col-sm-6 </div> <div class="col-xs-4 col-sm-6"> Level 2: .col-xs-4 .col-sm-6 </div> </div> </div> </div> </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 -->
3.6 基于触发器按钮的不同模态内容<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">Open modal for @getbootstrap</button> ...more buttons... <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="exampleModalLabel">New message</h4> </div> <div class="modal-body"> <form> <div class="form-group"> <label for="recipient-name" class="control-label">Recipient:</label> <input type="text" class="form-control" id="recipient-name"> </div> <div class="form-group"> <label for="message-text" class="control-label">Message:</label> <textarea class="form-control" id="message-text"></textarea> </div> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Send message</button> </div> </div> </div> </div>
$(‘#exampleModal‘).on(‘show.bs.modal‘,function (event) { var button = $(event.relatedTarget) // Button that triggered the modal var recipient = button.data(‘whatever‘) // Extract info from data-* attributes // If necessary,you could initiate an AJAX request here (and then do the updating in a callback). // Update the modal‘s content. We‘ll use jQuery here,but you could use a data binding library or other methods instead. var modal = $(this) modal.find(‘.modal-title‘).text(‘New message to ‘ + recipient) modal.find(‘.modal-body input‘).val(recipient) })
3.7 通过JavaScript处理模态框打开$(‘#myModal‘).modal(options)
参数
方法
将页面中的某块内容作为模态框激活。接受可选参数? $(‘#myModal‘).modal({ keyboard: false })
手动打开或关闭模态框。在模态框显示或隐藏之前返回到主调函数中(也就是,在触发? $(‘#myModal‘).modal(‘toggle‘)
手动打开模态框。在模态框显示之前返回到主调函数中?(也就是,在触发? $(‘#myModal‘).modal(‘show‘)
手动隐藏模态框。在模态框隐藏之前返回到主调函数中?(也就是,在触发? $(‘#myModal‘).modal(‘hide‘)
整模态的定位,以对抗滚动条,以防出现一个模式,这会使模态向左跳 只需要当模态的高度在打开时改变。 $(‘#myModal‘).modal(‘handleUpdate‘) 事件Bootstrap 的模态框类提供了一些事件用于监听并执行你自己的代码。
$(‘#myModal‘).on(‘hidden.bs.modal‘,function (e) { // do something... })
4 下拉菜单 dropdown.js4.1 JavaScript调用$(‘.dropdown-toggle‘).dropdown()
方法
Toggles the dropdown menu of a given navbar or tabbed navigation. 事件
$(‘#myDropdown‘).on(‘show.bs.dropdown‘,function () { // do something… })
5 滚动监听 scrollspy.js滚动监听插件是用来根据滚动条所处的位置来自动更新导航项的。滚动导航条下面的区域并关注导航项的变化。下拉菜单中的条目也会自动高亮显示。
5.1 基本调用body { position: relative; }
<body data-spy="scroll" data-target="#navbar-example"> ... <div id="navbar-example"> <ul class="nav nav-tabs" role="tablist"> ... </ul> </div> ... </body>
5.2 JavaScript调用$(‘body‘).scrollspy({ target: ‘#navbar-example‘ })
方法
当使用滚动监听插件的同时在 DOM 中添加或删除元素后,你需要像下面这样调用此刷新( refresh) 方法: $(‘[data-spy="scroll"]‘).each(function () { var $spy = $(this).scrollspy(‘refresh‘) })
参数可以通过 data 属性或 JavaScript 传递参数。对于 data 属性,其名称是将参数名附着到?
事件
$(‘#myScrollspy‘).on(‘activate.bs.scrollspy‘,function () { // do something… })
6 标签页 tab.js6.1 基本使用<div> <!-- Nav tabs --> <ul class="nav nav-tabs" role="tablist"> <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li> <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li> <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li> <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li> </ul> <!-- Tab panes --> <div class="tab-content"> <div role="tabpanel" class="tab-pane active" id="home">...</div> <div role="tabpanel" class="tab-pane" id="profile">...</div> <div role="tabpanel" class="tab-pane" id="messages">...</div> <div role="tabpanel" class="tab-pane" id="settings">...</div> </div> </div>
6.2 Fade特效<div class="tab-content"> <div role="tabpanel" class="tab-pane fade in active" 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>
6.3 JavaScript调用$(‘#myTabs a‘).click(function (e) { e.preventDefault() $(this).tab(‘show‘) })
$(‘#myTabs a[href="#profile"]‘).tab(‘show‘) // Select tab by name $(‘#myTabs a:first‘).tab(‘show‘) // Select first tab $(‘#myTabs a:last‘).tab(‘show‘) // Select last tab $(‘#myTabs li:eq(2) a‘).tab(‘show‘) // Select third tab (0-indexed)
方法
该方法可以激活标签页元素和内容容器。标签页需要用一个?data-target?或者一个指向 DOM 中容器节点的?href。
Selects the given tab and shows its associated content. Any other tab that was previously selected becomes unselected and its associated content is hidden.?Returns to the caller before the tab pane has actually been shown?(i.e. before the? $(‘#someTab‘).tab(‘show‘)
事件
$(‘a[data-toggle="tab"]‘).on(‘shown.bs.tab‘,function (e) { e.target // newly activated tab e.relatedTarget // previous active tab })
7 工具提示 tooltips.js7.1 基本使用<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>
7.2 JavaScript调用$(‘#example‘).tooltip(options)
参数
方法
$(‘#element‘).tooltip(‘destroy‘)
事件
$(‘#myTooltip‘).on(‘hidden.bs.tooltip‘,function () { // do something… })
8 弹出框 popover.js8.1 基本使用基本<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here‘s some amazing content. It‘s very engaging. Right?">点我弹出/隐藏弹出框</button>
弹出方向<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> Popover on 左侧 </button> <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> Popover on 顶部 </button> <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> Popover on 底部 </button> <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> Popover on 右侧 </button>
点击并让弹出框消失通过使用?
<a 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?">可消失的弹出框</a>
8.2 javaScript调用$(‘#example‘).popover(options)
参数可以通过 data 属性或 JavaScript 传递参数。对于 data 属性,将参数名附着到?
方法
$(‘#element‘).popover(‘destroy‘)
事件
$(‘#myPopover‘).on(‘hidden.bs.popover‘,function () { // do something… }) 9 警告信息 alert.js9.1 基本使用当使用? 为关闭按钮添加? <button type="button" class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true">×</span> </button>
为了让警告框在关闭时表现出动画效果,请确保为其添加了? 9.2 JavaScript调用方法
让警告框监听具有?
关闭警告框并从 DOM 中将其删除。如果警告框被赋予了? 事件Bootstrap 的警告框插件对外暴露了一些可以被监听的事件。
$(‘#myAlert‘).on(‘closed.bs.alert‘,function () { // do something… }) 10 按钮 button.js10.1 加载状态<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>
10.2 独立的按钮切换状态<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off"> Single toggle </button>
10.3 Checkbox和Radio<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>
10.4 JavaScript方法
<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>
11 折叠 collapse.js11.1 基本使用<a class="btn btn-primary" role="button" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample"> Link with href </a> <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample"> Button with data-target </button> <div class="collapse" id="collapseExample"> <div class="well"> ... </div> </div>
11.2 手风琴菜单<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 role="button" 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 terry richardson ad squid. 3 wolf moon officia aute,non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor,sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica,craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,raw denim aesthetic synth nesciunt you probably haven‘t heard of them accusamus labore sustainable VHS. </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingTwo"> <h4 class="panel-title"> <a class="collapsed" role="button" 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,raw denim aesthetic synth nesciunt you probably haven‘t heard of them accusamus labore sustainable VHS. </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingThree"> <h4 class="panel-title"> <a class="collapsed" role="button" 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,raw denim aesthetic synth nesciunt you probably haven‘t heard of them accusamus labore sustainable VHS. </div> </div> </div> </div>
It‘s also possible to swap out? 11.3 JavaScript调用$(‘.collapse‘).collapse()
选项
方法
事件
$(‘#myCollapsible‘).on(‘hidden.bs.collapse‘,function () { // do something… })
12 轮播 carousel.js12.1 基本使用<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" aria-hidden="true"></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" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div>
12.2 每个项目的标题<div class="item"> <img src="..." alt="..."> <div class="carousel-caption"> <h3>...</h3> <p>...</p> </div> </div>
12.3 JavaScript 调用$(‘.carousel‘).carousel()
选项
方法
事件
$(‘#myCarousel‘).on(‘slide.bs.carousel‘,function () { // do something… })
13 附加 affix.js12.1 基本使用To easily add affix behavior to any element,just add? <div data-spy="affix" data-offset-top="60" data-offset-bottom="200"> ... </div>
13.2 JavaScript调用Call the affix plugin via JavaScript: $(‘#myAffix‘).affix({ offset: { top: 100,bottom: function () { return (this.bottom = $(‘.footer‘).outerHeight(true)) } } })
选项Options can be passed via data attributes or JavaScript. For data attributes,append the option name to?
方法
Activates your content as affixed content. Accepts an optional options? $(‘#myAffix‘).affix({ offset: 15 })
Recalculates the state of the affix based on the dimensions,position,and scroll position of the relevant elements. The? $(‘#myAffix‘).affix(‘checkPosition‘) 事件Bootstrap‘s affix plugin exposes a few events for hooking into affix functionality. ?
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |