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">×</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">×</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>
Bootstrap学习 - JavaScript插件的更多相关文章
- bootstrap学习——javascript插件篇
飞近期做的一个小项目须要用到一个模态框和一个图片浏览插件,并把二者结合,刚好bootstrap有相应插件,下面是学习应用流程: 1. 引入js文件: 能够单个引入相应插件文件,或一次所有引入.飞 ...
- bootstrap导入JavaScript插件
Bootstrap的JavaScript插件可以单独导入到页面中,也可以一次性导入到页面中.因为在Bootstrap中的JavaScript插件都是依赖于jQuery库,所以不论是单独导入还一次性导入 ...
- bootstrap学习笔记 插件概述
Bootstrap插件概览 在前面布局组件章节中所讨论的组件仅仅是个开始.Bootstrap自带的12种jQuery插件,扩展了功能,可以给站点添加更多的互动.即使您不是一名高级的js开发人员, 你也 ...
- [Bootstrap]7天深入Bootstrap(5)JavaScript插件
在bs3.X中,提供了12种JavaScript插件,分别是:动画过渡(Transition).模态弹窗(Modal).下拉菜单(Dropdown).滚动侦测(Scrollspy).选项卡(Tab). ...
- bootstrap学习之三—插件
一.模态框(modal)插件 1)为要触发模态框的组件添加data-toggle="modal",data-target="对应ID" 2)使用一个div实现m ...
- Bootstrap学习js插件篇之滚动监听
1.滚动监听 案例 滚动监听插件可以根据滚动条的位置自动更新所对应的导航标记.Bootstrap中文网左侧就是一个滚动监听的例子. 代码段: <nav id="navbar-examp ...
- Bootstrap学习js插件篇之标签页
简单的标签页 代码: <h1 class="page-header">4.3标签页</h1> <ul class="nav nav-tabs ...
- Bootstrap学习js插件篇之提示框
案例 受到Jason Frame开发的jQuery.tipsy插件的启发,我们才把这个工具提示插件做的更好,而且此插件不依赖图片,只是使用CSS3来实现动画效果,并使用data属性存储标题. 将鼠标悬 ...
- Bootstrap学习js插件篇之下拉菜单
案例 通过此插件可以为几乎所有东西添加下拉菜单,包括导航条.标签页.胶囊式按钮. 用于导航条 导航条分为四个部分.第一部分导航头,第二部分导航列,第三部分form查询表单,第四部分导航列. <n ...
随机推荐
- IE8"开发人员工具"使用详解下(浏览器模式、文本模式、JavaScript调试、探查器)
来源: http://www.cnblogs.com/JustinYoung/archive/2009/04/03/kaifarenyuangongju2.html 在上一篇文章IE8“开发人员工具” ...
- redis的主从复制与哨兵
主从复制的关键字是slaveof,有三种方法可以让一个redis数据库变成另一个redis数据库的从数据库: 1.修改redis的配置文件,添加#slaveof <masterip> &l ...
- 用yum安装JDK(CentOS)
1.查看yum库中都有哪些jdk版本 [root@localhost ~]# yum search java|grep jdk 2.选择版本,进行安装 [root@localhost ~]# yum ...
- Android:assests和raw的区别
转自:http://www.cnblogs.com/lianghui66/p/3248636.html ------------------------------------------------ ...
- 查看Linux系统文本编码-方便修改ssh编码一致
首先,Linux系统发行的时候全世界都一样,系统是中文的还是英文的完全取决于你选择的语言包.不同国家的人在安装使用的时候选择属于自己国家的语言包,应用程序中的语言也不是写死的,它根据系统的设置来调用相 ...
- caffe+NVIDIA安装+CUDA-7.5+ubuntu14.04(显卡GTX1080)
首先强调,我们实验室的机器是3.3w的机器,老板专门买来给我们搞深度学习,其中显卡是NVIDIA GeForce GTX1080(最近新出的,装了两块),cpu是intel i7处理器3.3Ghz, ...
- iosOC可变数组选择,冒泡排序
#pragma mark 可变数组的排序 NSMutableArray * array = [NSMutableArray arrayWithObjects: @"1",@&quo ...
- 用js 将long类型转换成日期格式
//扩展Date的format方法 Date.prototype.format = function (format) { var o = { "M+": this.getMont ...
- hdu_5683_zxa and xor(非正解的暴力)
题目连接:http://acm.hdu.edu.cn/showproblem.php?pid=5683 题意: 问题描述 zxa最近对按位异或(exclusive disjunction)产生了极大的 ...
- Bank Interest
Bank Interest Time Limit : 2000/1000ms (Java/Other) Memory Limit : 131072/65536K (Java/Other) Tota ...