杂记
插件之间的依赖关系
某些插件和 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">×</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=" 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="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="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="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="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="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="image/img1.jpg"> <div class="carousel-caption"></div> </div> <div class="item"> <img src="image/img2.jpg"> <div class="carousel-caption"></div> </div> <div class="item"> <img src="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=" 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="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="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="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="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="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="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="image/peng.jpg" id="guanyu"></div> <div class="col-md-4"><img src="image/shengchao.jpg"></div> <div class="col-md-4"><img src="image/shengchao.jpg"></div><div class="col-md-4"><img src="image/shengchao.jpg"></div> <div class="col-md-4"><img src="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> <div class="form-group"> <input class="input-lg" type="text" placeholder="电话"> </div> <div class="form-group"> <input class="input-lg" type="text" placeholder="地址"> </div> <div class="form-group"> <input class="input-lg" type="text" placeholder="电话"> </div> <div class="form-group"> <input class="input-lg" type="text" placeholder="地址"> </div> <div class="form-group"> <input class="input-lg" type="text" placeholder="电话"> </div> <div class="form-group"> <input class="input-lg" type="text" placeholder="电话"> </div> <div class="form-group"> <input class="input-lg" type="text" placeholder="地址"> </div> <div class="form-group"> <input class="input-lg" type="text" placeholder="电话"> </div> <div class="form-group"> <input class="input-lg" type="text" placeholder="电话"> </div> <div class="form-group"> <input class="input-lg" type="text" placeholder="地址"> </div> <div class="form-group"> <input class="input-lg" type="text" placeholder="电话"> </div> <div class="form-group"> <input class="input-lg" type="text" placeholder="电话"> </div> <div class="form-group"> <input class="input-lg" type="text" placeholder="地址"> </div> <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