ACCP8.0Y2Web前端框架与移动应用开发第4章Bootstrap的JavaScript插件

杂记

插件之间的依赖关系

某些插件和 CSS 组件依赖于其它插件。如果你是单个引入每个插件的，请确保在文档中检查插件之间的依赖关系。注意，所有插件都依赖 jQuery （也就是说，jQuery必须在所有插件之前引入页面）。 bower.json 文件中列出了 Bootstrap 所支持的 jQuery 版本。

data 属性

你可以仅仅通过 data 属性 API 就能使用所有的 Bootstrap 插件，无需写一行 JavaScript 代码。这是 Bootstrap 中的一等 API，也应该是你的首选方式。

话又说回来，在某些情况下可能需要将此功能关闭。因此，我们还提供了关闭 data 属性 API 的方法，即解除以 data-api 为命名空间并绑定在文档上的事件。就像下面这样：

$(document).off('.data-api')

另外，如果是针对某个特定的插件，只需在 data-api 前面添加那个插件的名称作为命名空间，如下：

$(document).off('.alert.data-api')

编程方式的 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 方法

每个插件还通过 Constructor 属性暴露了其原始的构造函数：$.fn.popover.Constructor。如果你想获取某个插件的实例，可以直接通过页面元素获取：$('[rel="popover"]').data('popover')。

默认设置

每个插件都可以通过修改其自身的 Constructor.DEFAULTS 对象从而改变插件的默认设置：

$.fn.modal.Constructor.DEFAULTS.keyboard = false // 将模态框插件的 `keyboard` 默认选参数置为 false

一.单词部分

modal模态框 transition动画过渡效果插件 carousel旋转轮播

indicators指针 scroll滚动

二.预习部分

1.bootstrap有哪些插件？分别是什么

动画过渡，警告框，提示框，按钮

2.动画过渡插件应用在其他那些插件中

①模态框的滑动和渐变效果

②选项卡的渐变效果

③旋转轮播的滑动效果

三.练习部分

1.制作百度登录框

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>百度一下</title></head>
<body>
<div class="container"><br><br><br><div class="row"><div class="col-md-2 col-md-push-10"><button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-sm">登录</button></div></div><br><br><div class="row"><div class="col-md-10 col-md-push-1"><div class="input-group"><input type="text" class="form-control" placeholder=""><span class="input-group-addon">百度一下</span></div></div></div><!--fade过渡效果--><!-- <div class="modal fade bs-example-sm" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"><div class="modal-dialog modal-sm"><div class="modal-content">这是小的</div></div></div>--><div class="modal fade bs-example-sm" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModal" aria-hidden="true"><div class="modal-dialog modal-sm"><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="myMti">登录百度账号</h4></div><div class="modal-body"><div class="input-group"><input type="text" class="form-control" placeholder="手机/邮箱/用户名"><input type="password" class="form-control" placeholder="密码"></div><input type="radio">下次自动登录<br><div class="container"><div class="row"><div class="col-md-3 col-md-push-0"><button type="button" class="btn btn-danger" style="width: 200px;">登录</button></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" data-dismiss="modal">Save</button>--></div></div></div></div>
</div>
<script src="../jquery-3.2.1.min.js"></script>
<link rel="stylesheet" href="../css/bootstrap.min.css">
<script src="../js/bootstrap.min.js"></script>
</body>
</html>

2.制作搜狐新闻选项卡

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.container{border: 1px rgba(222,180,233,0.95) solid;margin-top: 50px;}.img-rounded{margin-top: 20px;margin-left: 20px;}</style>
</head>
<body>
<div class="container"><ul id="myTab" class="nav nav-tabs"><li class="active"><a href="#news" data-toggle="tab" id="one">新闻</a></li><li><a href="#play" data-toggle="tab">娱乐</a></li><li><a href="#war" data-toggle="tab">军事</a></li><li><a href="#society" data-toggle="tab">社会</a></li><li><a href="#phy" data-toggle="tab">体育</a></li></ul>
<div id="myTabContent" class="tab-content"><div class="tab-pane fade in active" id="news"><img src="data:image/1.jpg" class="img-rounded"><ul><li>村主任看风水收费一万不算违纪？</li><li>女经理色诱警官卖17台伪劣安检机？</li><li>男子

yiyeqing

后疑染病将女子推下楼？</li> <li>网传四川成都一女性头部被人割掉？</li> <li>游客遭老虎咬死专家称园方无责任？</li> </ul> </div> <div class="tab-pane fade" id="play"> <img src="data:image/2.jpg" class="img-rounded"> <ul> <li>村主任看风水收费一万不算违纪？</li> <li>女经理色诱警官卖17台伪劣安检机？</li> <li>男子

yiyeqing

后疑染病将女子推下楼？</li> <li>网传四川成都一女性头部被人割掉？</li> <li>游客遭老虎咬死专家称园方无责任？</li> </ul> </div> <div class="tab-pane fade" id="war"> <img src="data:image/3.jpg" class="img-rounded"> <ul> <li>村主任看风水收费一万不算违纪？</li> <li>女经理色诱警官卖17台伪劣安检机？</li> <li>男子

yiyeqing

后疑染病将女子推下楼？</li> <li>网传四川成都一女性头部被人割掉？</li> <li>游客遭老虎咬死专家称园方无责任？</li> </ul> </div> <div class="tab-pane fade" id="society"> <img src="data:image/4.jpg" class="img-rounded"> <ul> <li>村主任看风水收费一万不算违纪？</li> <li>女经理色诱警官卖17台伪劣安检机？</li> <li>男子yiyeqing后疑染病将女子推下楼？</li> <li>网传四川成都一女性头部被人割掉？</li> <li>游客遭老虎咬死专家称园方无责任？</li> </ul> </div> <div class="tab-pane fade" id="phy"> <img src="data:image/5.jpg" class="img-rounded"> <ul> <li>村主任看风水收费一万不算违纪？</li> <li>女经理色诱警官卖17台伪劣安检机？</li> <li>男子

yiyeqing

后疑染病将女子推下楼？</li> <li>网传四川成都一女性头部被人割掉？</li> <li>游客遭老虎咬死专家称园方无责任？</li> </ul> </div> </div> </div> <script src="../jquery-3.2.1.min.js"></script> <link rel="stylesheet" href="../css/bootstrap.min.css"> <script src="../js/bootstrap.min.js"></script> <script> $(function () { $('#one').tab('show'); }); </script> </body> </html>

3.制作美联英语在线VIP轮播图

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>美联英语</title><style>.row{background-color: rgba(142,131,132,0.95);}#ulli li{float: left;list-style: none;margin-left: 10px;margin-top: 5px;}#ullii li{float: left;list-style: none;}</style></head>
<body><div class="row"><div class="col-md-3"><ul id="ulli"><li><span class="glyphicon glyphicon-phone-alt"></span>400-777-8828</li><li>中文</li><li>英文</li></ul></div><div class="col-md-3 col-md-push-6"><ul id="ullii"><li><button type="button" class="btn btn-danger btn-sm">免费注册</button> </li><li><button type="button" class="btn btn-danger btn-sm">登录</button></li></ul></div></div><div id="myCarousel" class="carousel slide"><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="data:image/img1.jpg"><div class="carousel-caption"></div></div><div class="item"><img src="data:image/img2.jpg"><div class="carousel-caption"></div></div><div class="item"><img src="data:image/img3.jpg"><div class="carousel-caption"></div></div></div><a class="carousel-control leftt" href="#myCarousel"data-slide="prev"></a><a class="carousel-control rightt" href="#myCarousel"data-slide="next"></a>
</div><script src="../jquery-3.2.1.min.js"></script><link rel="stylesheet" href="../css/bootstrap.css"><!--<script src="../js/bootstrap.min.js"></script>--><script src="../js/bootstrap.js"></script><script>$(".carousel").carousel({interval:2000})</script>
</body></html>

4.制作所问数据页面

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>所问数据</title><link rel="stylesheet" href="../css/bootstrap.min.css">
</head>
<body data-spy="scroll" data-target="#myScrollspy" data-offset="0"><nav class="nav navbar-inverse navbar-static navbar-fixed-top" id="myScrollspy" role="navigation"><div class="navbar-header"><button class="navbar-toggle" data-toggle="collapse" type="button"data-target=".navbar-collapse"><span class="icon-bar active"></span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><h4 style="color: white;margin-top: 15px;margin-left: 20px;">所问数据</h4></div><div class="collapse navbar-collapse navbar-right"><ul class="nav navbar-nav"><li  class="active"><a href="#chanpin">产品优势</a></li><li><a href="#jiejue">解决方案</a></li><li><a href="#guanyu">关于我们</a></li><li><a href="#lianxi">联系我们</a></li></ul></div></nav>
<br><br><br>
<div class="container"><div  id="chanpin" class="row"><div class="col-md-10 col-xs-10"  style="width: 1200px;height: 1250px; background-image: url('image/header-bg.jpg'); background-size: cover"></div></div><div class="row" style="background-color: rgba(153,159,148,0.95)"><div class="col-md-5 col-md-offset-4 col-xs-12"><h1>行业解决方案</h1><h4  id="jiejue">数据分析，未来市场预判</h4></div><br><br><br></div><div class="row" id="row"><div class="col-md-4 col-xs-12"><div class="thumbnail"><img src="data:image/analysis.jpg"><div class="caption"><p>kbhkbkjkjbhkbhbkhbhkb</p></div></div></div><div class="col-md-4 col-xs-12"><div class="thumbnail"><img src="data:image/antiterrorism.jpg"><div class="caption"><p>kbhkbkjkjbhkbhbkhbhkb</p></div></div></div><div class="col-md-4 col-xs-12"><div class="thumbnail"><img src="data:image/financial.jpg"><div class="caption"><p>kbhkbkjkjbhkbhbkhbhkb</p></div></div></div><div class="col-md-4 col-xs-12"><div class="thumbnail"><img src="data:image/forecast.jpg"><div class="caption"><p>kbhkbkjkjbhkbhbkhbhkb</p></div></div></div><div class="col-md-4 col-xs-12"><div class="thumbnail"><img src="data:image/gov.jpg"><div class="caption"><p>kbhkbkjkjbhkbhbkhbhkb</p></div></div></div><div class="col-md-4 col-xs-12"><div class="thumbnail"><img src="data:image/medical.jpg"><div class="caption"><p>kbhkbkjkjbhkbhbkhbhkb</p></div></div></div></div><div class="row"><div class="col-md-4 col-md-offset-2"><img src="data:image/peng.jpg" id="guanyu"></div><div class="col-md-4"><img src="data:image/shengchao.jpg"></div><div class="col-md-4"><img src="data:image/shengchao.jpg"></div><div class="col-md-4"><img src="data:image/shengchao.jpg"></div><div class="col-md-4"><img src="data:image/shengchao.jpg"></div></div>
<div class="row"><form action="#" style="background-color: white"  id="lianxi">
<h1  style="display: none">jnjknjknknkj</h1><div class="form-group"><input class="input-lg" type="text" placeholder="联系我们"></div><div class="form-group"><input class="input-lg" type="text" placeholder="地址"></div>&nbsp;&nbsp;&nbsp;<div class="form-group"><input class="input-lg" type="text" placeholder="电话"></div><div class="form-group"><input class="input-lg" type="text" placeholder="地址"></div>&nbsp;&nbsp;&nbsp;<div class="form-group"><input class="input-lg" type="text" placeholder="电话"></div><div class="form-group"><input class="input-lg" type="text" placeholder="地址"></div>&nbsp;&nbsp;&nbsp;<div class="form-group"><input class="input-lg" type="text" placeholder="电话"></div>&nbsp;&nbsp;&nbsp;<div class="form-group"><input class="input-lg" type="text" placeholder="电话"></div><div class="form-group"><input class="input-lg" type="text" placeholder="地址"></div>&nbsp;&nbsp;&nbsp;<div class="form-group"><input class="input-lg" type="text" placeholder="电话"></div>&nbsp;&nbsp;&nbsp;<div class="form-group"><input class="input-lg" type="text" placeholder="电话"></div><div class="form-group"><input class="input-lg" type="text" placeholder="地址"></div>&nbsp;&nbsp;&nbsp;<div class="form-group"><input class="input-lg" type="text" placeholder="电话"></div>  &nbsp;&nbsp;&nbsp;<div class="form-group"><input class="input-lg" type="text" placeholder="电话"></div><div class="form-group"><input class="input-lg" type="text" placeholder="地址"></div>&nbsp;&nbsp;&nbsp;<div class="form-group"><input class="input-lg" type="text" placeholder="电话"></div><br></form>
</div>
</div>
<script>$(function(){$("#myScrollspy").scrollspy();});
</script>
<script src="../jquery-3.2.1.min.js"></script><script src="../js/bootstrap.min.js"></script></body></html>

四.总结部分

事件

Bootstrap 为大部分插件所具有的动作提供了自定义事件。一般来说，这些事件都有不定式和过去式两种动词的命名形式，例如，不定式形式的动词（例如 show）表示其在事件开始时被触发；而过去式动词（例如 shown ）表示在动作执行完毕之后被触发。

从 3.0.0 版本开始，所有 Bootstrap 事件的名称都采用命名空间方式。

所有以不定式形式的动词命名的事件都提供了 preventDefault 功能。这就赋予你在动作开始执行前将其停止的能力。

$('#myModal').on('show.bs.modal', function (e) {if (!data) return e.preventDefault() // 阻止模态框的展示
})

未对禁用 JavaScript 的浏览器提供补救措施

Bootstrap 插件未对禁用 JavaScript 的浏览器提供补救措施。如果你对这种情况下的用户体验很关心的话，请添加<noscript> 标签向你的用户进行解释（并告诉他们如何启用 JavaScript），或者按照你自己的方式提供补救措施。

欢迎提问，欢迎指错，欢迎讨论学习信息有需要的私聊发布评论即可都能回复的

原文在博客园http://www.cnblogs.com/a782126844/有需要可以联系扣扣：2265682997

转载于:https://www.cnblogs.com/a782126844/p/7199312.html