Bootstrap学习 - JavaScript插件

模态框

<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="meLabel" aria-hidden="true"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button><h4 class="modal-title" id="myModalLabel">Title</h4><div class="modal-body">Content</div><div class="modal-footer"><button type="button" class="btn btn-info" data-dismiss="modal">Close</button><button type="button" class="btn btn-danger">Save</button></div></div></div></div>
</div>调用方式一：
<button type="button" data-toggle="modal" data-target="#myModal" >启动Modal
</button>
方式二：
<script>$("#myModal").modal('show');   //其他方法   hide  toggle   {keyboard: false}
</script>

事件

$('#identifier').on('show.bs.modal', function () { // 执行一些动作... })

show.bs.modal shown.bs.modal

hide.bs.modal hidden.bs.modal

loaded.bs.modal

下拉菜单

<button data-toggle="dropdown">Dropdown <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu"><li><a>Python</a></li><li><a>Python</a></li><li><a>Python</a></li>
</ul>

事件：　　show.bs.dropdown   shown.bs.dropdown   hide.bs.dropdown  hiden.bs.dropdown

监听滚动

<body data-spy="scroll" data-target=".navbar" data-offset="70"><div class="container"><nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"><div class="container-fluid"><div class="collapse navbar-collapse js-navbar-scrollpy" id="myScrollpy"><ul class="nav navbar-nav"><li><a href="#python">Python</a></li><li><a href="#php">PHP</a></li><li><a href="#java">Java</a></li><li class="dropdown"><a href="#" data-toggle="dropdown">JavaScript <span class="caret"></span></a><ul class="dropdown-menu" role="menu"><li><a href="#jquery">jQuery</a></li><li><a href="#angular">AngularJS</a></li><li><a href="#node">NodeJS</a></li></ul></li></ul></div></div></nav>

　　　　<h2 id="Python">Python</h2>

　　　　　　...

事件：

　　<script>　　　　$("#myScrollpy").on('activate.bs.scrollspy', function() {　　　　　//do something 　　})   </srcipt>

标签页

<ul id="myTab" class="nav nav-tabs"><li class="active"><a href="#home" data-toggle="tab">Home</a></li><li><a href="#profile" data-toggle="tab">Profile</a></li>
</ul>
<div  class="tab-content"><div id="home" class="tab-pane">        //   fade in active  <p>I am in home page</p></div><div id="profile" class="tab-pane"><p>Now I am in profile page</p></div>
</div>

事件：

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { ...})

show.bs.tab  shown.bs.tab  hide.bs.tab  hiden.bs.tab

工具提示

<a href="#" data-toggle="tooltip" title="索隆" data-placement="bottom">Roronoa zoro</a><script>$(a[data-toggle="tooltip"]').tooltip("show");
</script>

事件：

show.bs.tooltip ...

弹出框

<button type="button" class="btn btn-info btn-lg" data-toggle="popover" \title="popover title" data-content="popover content" data-placement="bottom" \data-trigger="focus"
>Popover</button>    //尽量用a代替button，但要加tabindex="0"属性<script>$('[data-toggle="popover"]').popover();
</script>

事件： show.bs.popover ...

警告框定时关闭实例（jQuery方法）

    <script>$(document).ready(function() {setTimeout(function() {$("#flash").alert('close');}, 3000);})</script>

警告框

<div class="alert alert-danger fade in "><button type="button" class="close" data-dismiss="alert"><span aria-hiden="true">&times;</span></button>some text
</div>事件：
close.bs.alert  closed.bs.alert

折叠

<a href="#collapseExample" class="btn btn-info" data-toggle="collapse">打开折叠</a>
<div class="collapse" id="collapseExample"><p class="well">Hello</p>
</div>

手风琴效果

<div class="panel-group" id="accordion"><div class="panel panel-default"><div class="panel-heading"><h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapse1">Title1</a></h4></div><div id="collapse1" class="panel-collapse collapse"><div class="panel-body">Hello</div></div></div><div class="panel panel-default"><div class="panel-heading"><h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Title2</a></h4></div><div id="collapse2" class="panel-collapse collapse"><div class="panel-body">Hello</div></div></div>
</div>

事件： show shown hide hiden...

轮播

<div id="myCarousel" class="carousel slide">    默认属性 data-interval="5000"  data-pause="hover"  data-wrap="true"<!--轮播指标--><ol class="carousel-indicators"><li data-target="#myCarousel" data-slide-to="0" class="active"></li><li data-target="#myCarousel" data-slide-to="1"></li><li data-target="#myCarousel" data-slide-to="2"></li></ol><!--轮播项目--><div class="carousel-inner"><div class="item active"><img src="src/img/bg1.jpg" alt="bg1">　　　　　　　<div class="calsourel-caption">　　　　　　　　  <h3>标题</h3>　　　　　　　　　<p>描述</p>　　　　　　　</div></div><div class="item"><img src="src/img/bg2.jpg" alt="bg2"></div><div class="item"><img src="src/img/bg3.jpg" alt="bg3"></div></div><!--轮播导航--><a class="carousel-control left" data-slide="prev" href="#myCarousel"><span class="glyphicon glyphicon-chevron-left"></span></a><a class="carousel-control right" data-slide="next" href="#myCarousel"><span class="glyphicon glyphicon-chevron-right"></span></a>
</div>

自动开始：

<script>    $(".carousel").carousel({interval: 2000});</script>

事件： slide.bs.carousel   slid.bs.carousel

附加菜单(侧边栏停靠)

<div class="container" ><div class="col-md-2"><ul class="list-group affixed-element-top js-affixed-element-top" ><li class="list-group-item"><a href="#">Python1</a></li><li class="list-group-item"><a href="#">Python2</a></li><li class="list-group-item"><a href="#">Python3</a></li></ul></div><div class="col-md-8">...</div><div class="col-md-2 js-content"><ul class="list-group affixed-element-bottom js-affixed-element-bottom" ><li class="list-group-item"><a href="#">Python1</a></li><li class="list-group-item"><a href="#">Python2</a></li><li class="list-group-item"><a href="#">Python3</a></li></ul></div>
</div><style>.affixed-element-top.affix {top: 10px;}.affixed-element-top.affix-bottom {position: relative;}.affixed-element-bottom.affix {bottom: 10px;}.affixed-element-bottom.affix-bottom {position: relative;}</style><script>$(function () {$(".js-affixed-element-top").affix({offset:{}})})$(function () {$(".js-affixed-element-bottom").affix({offset:{bottom:100}})})</script>

转载于:https://www.cnblogs.com/roronoa-sqd/p/5410985.html

Bootstrap学习 - JavaScript插件相关推荐

ACCP8.0Y2Web前端框架与移动应用开发第4章Bootstrap的JavaScript插件
杂记插件之间的依赖关系某些插件和 CSS 组件依赖于其它插件.如果你是单个引入每个插件的,请确保在文档中检查插件之间的依赖关系.注意,所有插件都依赖 jQuery (也就是说,jQuery必须在所 ...
Bootstrap学习js插件篇之提示框
案例受到Jason Frame开发的jQuery.tipsy插件的启发,我们才把这个工具提示插件做的更好,而且此插件不依赖图片,只是使用CSS3来实现动画效果,并使用data属性存储标题. 将鼠标悬 ...
Bootstrap学习笔记系列1-------Bootstrap网格系统
目录 Bootstrap网格系统学习笔记简单网格偏移列嵌套列列排序 Bootstrap网格系统学习笔记简单网格先上代码再解释 <!DOCTYPE html> <htm ...
BootStrap学习(1)
一.Bootstrap简介 BootStrap是由Twitter推出的前端框架,2011 年八月在 GitHub 上发布,BootStrap是基于Html,Css,Javascript的,可用于快速开 ...
玩转Bootstrap（JS插件篇）
模态弹出框一次性导入: Bootstrap提供了一个单一的文件,这个文件包含了Bootstrap的所有JavaScript插件,即bootstrap.js(压缩版本:bootstrap.min.js ...
Bootstrap学习笔记02【全局CSS样式、组件和插件、案例_黑马旅游网_首页】
Java后端学习路线笔记汇总表[黑马程序员] Bootstrap学习笔记01[快速入门.栅格布局][day01] Bootstrap学习笔记02[全局CSS样式.组件和插件.案例_黑马旅游网][d ...
Bootstrap学习（三）——Bootstrap 插件
Bootstrap学习(三)--Bootstrap 插件 Bootstrap 插件 Bootstrap 自带 12 种 jQuery 插件,扩展了功能,可以给站点添加更多的互动. 站点引用 Boots ...
推荐13款优秀的Twitter Bootstrap JavaScript插件
Bootstrap是基于HTML,CSS和JavaScript的简洁灵活的流行前端框架及交互组件集,由微博先驱Twitter在2011年8月开源的整套前端解决解决方案,拥有非常完备和详尽的开发文档,有 ...
BootStrap学习笔记，优缺点总结
本篇约定Bootstrap简写为BT BT的受欢迎程度是大家有目共睹的,用它可以快速的搭建出网站.很早就接触过这个框架,其中的栅格系统,css模块化以及js插件做的相当不错,由于工作中较少使用也一直没 ...
Bootstrap学习笔记01【快速入门、栅格布局】
Java后端学习路线笔记汇总表[黑马程序员] Bootstrap学习笔记01[快速入门.栅格布局][day01] Bootstrap学习笔记02[全局CSS样式.组件和插件.案例_黑马旅游网][d ...

Bootstrap学习 - JavaScript插件

Bootstrap学习 - JavaScript插件相关推荐

最新文章

热门文章