Boostrap基础教程之JavaScript插件篇


Posted in Javascript onSeptember 08, 2016

Boostrap提供了12种JavaScript插件,包括:

动画过渡 Transition

模态 Modal

下拉菜单 Dropdown

滚动侦测 Scrollspy

选项卡 Tab

提示框 Tooltip

弹出框 Popover

警告框 Alert

按钮 Button

折叠 Collapse

旋转轮播 Carousel

自动定位浮标 Affix

模态弹窗

<div class="modal show">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
×
</button>
<h4 class="modal-title">Modal标题</h4>
</div>
<div class="modal-body">
<p>这里是弹窗显示的内容...........</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary" data-dismiss="modal">保存</button>
</div>
</div>
</div>
</div>

Boostrap基础教程之JavaScript插件篇

下拉菜单

声明式用法

一般下拉菜单都是在导航条(navbar)和选项卡(tab)上实现

<div class="nav navbar-default" id="nav-example">
<A href="#" class="navbar-brand">Project Name</A>
<ul role="navigation" class="nav navbar-nav">
<li class="dropdown">
<A data-toggle="dropdown" class="dropdown-toggle" role="button" href="#" id="drop1">
Dropdown<b class="caret"></b>
</A>
<ul aria-labelledby="drop1" role="menu" class="dropdown-menu">
<li role="presentation"><a href="#" tabindex="-1" role="menuitem">Action1</a> </li>
<li role="presentation"><a href="#" tabindex="-1" role="menuitem">Action2</a> </li>
<li role="presentation"><a href="#" tabindex="-1" role="menuitem">Action3</a> </li>
</ul>
</li>
<li class="dropdown open">
<A data-toggle="dropdown" class="dropdown-toggle" role="button" href="#" id="drop2">
Dropdown2<b class="caret"></b>
</A>
<ul aria-labelledby="drop2" role="menu" class="dropdown-menu">
<li role="presentation"><a href="#" tabindex="-1" role="menuitem">Action4</a> </li>
<li role="presentation"><a href="#" tabindex="-1" role="menuitem">Action5</a> </li>
<li role="presentation"><a href="#" tabindex="-1" role="menuitem">Action6</a> </li>
</ul>
</li>
</ul>
</div>

Boostrap基础教程之JavaScript插件篇

选项卡

<%--导航条选项卡--%>
<ul class="nav nav-tabs">
<li><a href="#home" data-toggle="tab">Home</a> </li>
<li><a href="#profile" data-toggle="tab">Profile</a> </li>
<li><a href="#messages" data-toggle="tab">Messages</a> </li>
<li><a href="#settings" data-toggle="tab">Settings</a> </li>
</ul>
<%--选项卡面板--%>
<div class="tab-content">
<div class="tab-pane active" id="home">home...</div>
<div class="tab-pane" id="profile">profile...</div>
<div class="tab-pane" id="messages">messages...</div>
<div class="tab-pane" id="settings">settings...</div>
</div>

Boostrap基础教程之JavaScript插件篇

提示框

<button data-original-title="Tooltip on left" class="btn btn-default" data-toggle="tooltip"
data-placement="left">左侧Tooltip</button>
<button data-original-title="Tooltip on top" class="btn btn-default" data-toggle="tooltip"
data-placement="top">上方Tooltip</button>
<button data-original-title="Tooltip on bottom" class="btn btn-default" data-toggle="tooltip"
data-placement="bottom">下方Tooltip</button>
<button data-original-title="Tooltip on right" class="btn btn-default" data-toggle="tooltip"
data-placement="right">右侧Tooltip</button>

警告框

<div class="alert alert-warning fade in">
<button data-mismiss="alert" class="close" type="button">X</button>
<h4>警告标题</h4>
<p>Change this and that and try aggin。 </p>
</div>

Boostrap基础教程之JavaScript插件篇

折叠

<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="#accordion">触发元素#1</A>
</h4>
</div>
<div class="panel-collapse collapse in" id="collapseOne">
<div class="panel-body">
折叠内容......
</div>
</div>
</div>
</div>

Boostrap基础教程之JavaScript插件篇

旋转轮播

<div data-ride="carouse1" class="carousel cameraSlide" id="container">
<%--图片容器--%>
<div class="carousel-inner">
<div class="item active"><img src="images/banner_slide_01.jpg"></div>
<div class="item "><img src="images/banner_slide_02.jpg"></div>
<div class="item"><img src="images/banner_slide_03.jpg"></div>
</div>
<%--圆圈指示符--%>
<ol class="carousel-indicators">
<li data-slide-to="0" data-target="#container" class="active"></li>
<li data-slide-to="1" data-target="#container"></li>
<li data-slide-to="2" data-target="#container"></li>
</ol>
<%--左右控制按钮--%>
<a data-slide="prev" href="#container" class="left carousel-control">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a data-slide="prev" href="#container" class="right carousel-control">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>

Boostrap基础教程之JavaScript插件篇

以上所述是小编给大家介绍的Boostrap基础教程之JavaScript插件篇,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JS 自动安装exe程序
Nov 30 Javascript
js使用removeChild方法动态删除div元素
Aug 01 Javascript
基于Javascript实现返回顶部按钮
Feb 29 Javascript
jQuery简单实现仿京东分类导航层效果
Jun 07 Javascript
Bootstrap简单表单显示学习笔记
Nov 15 Javascript
JS开发中百度地图+城市联动实现实时触发查询地址功能
Apr 13 Javascript
layui的table单击行勾选checkbox功能方法
Aug 14 Javascript
layui获取多选框中的值方法
Aug 15 Javascript
详解几十行代码实现一个vue的状态管理
Jan 28 Javascript
vue实现搜索过滤效果
May 28 Javascript
JS中作用域以及变量范围分析
Jul 18 Javascript
vue中父子组件的参数传递和应用示例
Jan 04 Vue.js
jQuery实现邮箱下拉列表自动补全功能
Sep 08 #Javascript
JS图片放大效果简单实现代码
Sep 08 #Javascript
Angularjs 实现一个幻灯片示例代码
Sep 08 #Javascript
利用Vue.js指令实现全选功能
Sep 08 #Javascript
AngularJS 实现JavaScript 动画效果详解
Sep 08 #Javascript
javascript使用 concat 方法对数组进行合并的方法
Sep 08 #Javascript
jQuery插入节点和移动节点用法示例(insertAfter、insertBefore方法)
Sep 08 #Javascript
You might like
Ping服务的php实现方法,让网站快速被收录
2012/02/04 PHP
解析如何在PHP下载文件名中解决乱码的问题
2013/06/20 PHP
PHP mkdir()无写权限的问题解决方法
2014/06/19 PHP
jQuery(1.3.2) 7行代码搞定跟随屏幕滚动的层
2009/05/21 Javascript
json 入门基础教程 推荐
2009/10/31 Javascript
javascript之典型高阶函数应用介绍二
2013/01/10 Javascript
raphael.js绘制中国地图 地图绘制方法
2014/02/12 Javascript
JS+CSS实现自动切换的网页滑动门菜单效果代码
2015/09/14 Javascript
jQuery展示表格点击变色、全选、删除
2017/01/05 Javascript
jQuery tip提示插件(实例分享)
2017/04/28 jQuery
vue 的keep-alive缓存功能的实现
2018/03/22 Javascript
javascript验证form表单数据的案例详解
2019/03/25 Javascript
Vue.js构建你的第一个包并在NPM上发布的方法步骤
2019/05/01 Javascript
iphone刘海屏页面适配方法
2019/05/07 Javascript
vue下使用nginx刷新页面404的问题解决
2019/08/02 Javascript
如何对react hooks进行单元测试的方法
2019/08/14 Javascript
python编写爬虫小程序
2015/05/14 Python
用Python操作字符串之rindex()方法的使用
2015/05/19 Python
解决Python中字符串和数字拼接报错的方法
2016/10/23 Python
Python异常对代码运行性能的影响实例解析
2018/02/08 Python
详解Python学习之安装pandas
2019/04/16 Python
Python Web框架之Django框架文件上传功能详解
2019/08/16 Python
解决Tensorflow sess.run导致的内存溢出问题
2020/02/05 Python
Django查询优化及ajax编码格式原理解析
2020/03/25 Python
python中matplotlib实现随鼠标滑动自动标注代码
2020/04/23 Python
增大python字体的方法步骤
2020/07/05 Python
Python hashlib和hmac模块使用方法解析
2020/12/08 Python
Django中如何用xlwt生成表格的方法步骤
2021/01/31 Python
资产评估专业大学生求职信
2013/09/29 职场文书
电气工程师岗位职责
2014/01/01 职场文书
经典婚礼主持开场白
2014/03/13 职场文书
秋天的图画教学反思
2014/05/01 职场文书
学校安全责任书范本
2014/07/23 职场文书
新闻简讯格式及范文
2015/07/22 职场文书
我对PyTorch dataloader里的shuffle=True的理解
2021/05/20 Python
Mysql分库分表之后主键处理的几种方法
2022/02/15 MySQL