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 相关文章推荐
jquery.AutoComplete.js中文修正版(支持firefox)
Apr 09 Javascript
编写js扩展方法判断一个数组中是否包含某个元素
Nov 08 Javascript
JS替换字符串中字符即替换全部而不是第一个
Jun 04 Javascript
jQuery+html5+css3实现圆角无刷新表单带输入验证功能代码
Aug 21 Javascript
jQuery EasyUI编辑DataGrid用combobox实现多级联动
Aug 29 Javascript
js中class的点击事件没有效果的解决方法
Oct 13 Javascript
使用angular帮你实现拖拽的示例
Jul 05 Javascript
vue音乐播放器插件vue-aplayer的配置及其使用实例详解
Jul 10 Javascript
React实践之Tree组件的使用方法
Sep 30 Javascript
Angular移动端页面input无法输入的解决方法
Nov 14 Javascript
微信小程序实现炫酷的弹出式菜单特效
Jan 28 Javascript
vue+mock.js实现前后端分离
Jul 24 Javascript
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
php 大数据量及海量数据处理算法总结
2011/05/07 PHP
PHP创建自己的Composer包方法
2018/04/09 PHP
JavaScript中的prototype使用说明
2010/04/13 Javascript
javascript之AJAX框架使用说明
2010/04/24 Javascript
JQuery浮动DIV提示信息并自动隐藏的代码
2010/08/29 Javascript
jquery监控数据是否变化(修正版)
2011/04/12 Javascript
jquery实现弹出层完美居中效果
2014/03/03 Javascript
Js实现中国公民身份证号码有效性验证实例代码
2017/05/03 Javascript
深入理解Node.js中通用基础设计模式
2017/09/19 Javascript
NodeJS实现自定义流的方法
2018/08/01 NodeJs
vue自定义指令实现方法详解
2019/02/11 Javascript
vue input输入框关键字筛选检索列表数据展示
2020/10/26 Javascript
layui 点击重置按钮, select 并没有被重置的解决方法
2019/09/03 Javascript
JavaScript实现图片上传并预览并提交ajax
2019/09/30 Javascript
浅谈TypeScript的类型保护机制
2020/02/23 Javascript
[50:15]VP vs Mineski 2018国际邀请赛淘汰赛BO3 第二场 8.22
2018/08/23 DOTA
Python多线程、异步+多进程爬虫实现代码
2016/02/17 Python
Python爬虫包 BeautifulSoup  递归抓取实例详解
2017/01/28 Python
Python装饰器实现几类验证功能做法实例
2017/05/18 Python
Python中defaultdict与lambda表达式用法实例小结
2018/04/09 Python
python3使用腾讯企业邮箱发送邮件的实例
2019/06/28 Python
Python3 合并二叉树的实现
2019/09/30 Python
在脚本中单独使用django的ORM模型详解
2020/04/01 Python
Python定义一个函数的方法
2020/06/15 Python
python实现双人五子棋(终端版)
2020/12/30 Python
CSS3 Calc实现滚动条出现页面不跳动问题
2017/09/14 HTML / CSS
10种CSS3实现的loading动画,挑一个走吧?
2020/11/16 HTML / CSS
Carolina Lemke Berlin澳大利亚官网:时尚太阳镜品牌
2019/09/17 全球购物
新学期班主任寄语
2014/01/18 职场文书
《彭德怀和他的大黑骡子》教学反思
2014/04/12 职场文书
文秘专业应届生求职信
2014/05/26 职场文书
市政工程技术专业自荐书
2014/07/06 职场文书
学校党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
大学军训的体会
2014/11/08 职场文书
tensorflow学习笔记之tfrecord文件的生成与读取
2021/03/31 Python
写一个Python脚本下载哔哩哔哩舞蹈区的所有视频
2021/05/31 Python