bootstrap框架--js插件
- javascript的js文件可以单个引入，也可以一次性全部引入，不过无论是哪种引入方式，都是依赖于jquery（1.9.1以上），所以要先插入jquery再引入js插件
- data属性指向的是js单个插件名，例如data-toggle="dropdown"，指向的是下拉菜单这个js插件
- transition:
- 模态框
-
1 <button class="btn btn-warning active" data-toggle="modal" data-target="#modal">button触发模态框</button> 2 <!-- 用button和a链接触发模态框都可以，不过a链接可以用href，少了一个data-target的代码 --> 3 <a href="#modal" class="btn btn-primary active" data-toggle="modal" >a链接触发模态框</a> 4 <!-- data-toggle 是点击事件 data-target是指指向的对象 --> 5 <div class="modal" id="modal" data-backdrop="static"> 6 <!-- modal的作用的固定布局 上下左右为0表示充满全屏 支持移动上的触摸方式进行滚动 data-backdrop="static"设置了，点击空白处就不会关闭弹出窗--> 7 <div class="modal-dialog"> 8 <!-- modal-dialog 默认的是相对定位 自适应宽度 大于768px时，宽度就会变成600px 并且居中--> 9 <div class="modal-content"> 10 <!-- 边框 背景 圆角 阴影 --> 11 <div class="modal-header"> 12 <button class="close" data-dismiss="modal">×</button> 13 <h3>标题</h3> 14 </div> 15 <div class="modal-body"> 16 <p>klsjdflskdfj</p> 17 </div> 18 <div class="modal-footer"> 19 <button class="btn btn-default" data-dismiss="modal">关闭</button> 20 <button class="btn btn-success" >保存</button> 21 </div> 22 </div> 23 </div> 24 </div>
- 事件：
- show.bs.modal 模态框出来前
- shown.bs.modal 模态框出来后
- hide.bs.modal模态框关闭前
- hidden.bs.modal模态框关闭后
-
- 轮播图
- 事件：
- data-interval="1000"改成1秒执行一次
- slide实现图片滑动的动态效果
- pause鼠标停在图片上就会停止（默认的是hover）
- carousel（number）从哪一张开始
- slide.bs.carouse图片轮播前
- slid.bs.carousel图片轮播后
-
1 <div class="container"> 2 <div class="col-lg-6 col-lg-offset-3"> 3 <div class="carousel" id="pic" data-ride="carousel"> 4 <!-- 圆圈指示符 --> 5 <ol class="carousel-indicators"> 6 <li class="active" data-slide-to="0" data-target="#pic"></li> 7 <li data-slide-to="1" data-target="#pic"></li> 8 <li data-slide-to="2" data-target="#pic"></li> 9 </ol> 10 <!-- 图片 --> 11 <div class="carousel-inner"> 12 <div class="item active"> 13 <img src="img/img1/1.jpg" alt=""> 14 </div> 15 <div class="item"> 16 <img src="img/img1/2.jpg" alt=""> 17 </div> 18 <div class="item"> 19 <img src="img/img1/3.jpg" alt=""> 20 </div> 21 </div> 22 <!-- 按钮 --> 23 <a href="#pic" class="left carousel-control" data-slide="prev"> 24 <span class="glyphicon glyphicon-chevron-left"></span> 25 </a> 26 <a href="#pic" class="right carousel-control" data-slide="next"> 27 <span class="glyphicon glyphicon-chevron-right"></span> 28 </a> 29 </div> 30 </div> 31 </div>
- 事件：
- 选项卡
-
1 <div class="container"> 2 <!-- <div class="col-lg-4 col-lg-offset-4"> --> 3 <nav class="nav nav-tabs"> 4 <li class="active"><a href="#pane1" data-toggle="tab">首页</a></li> 5 <li><a href="#pane2" data-toggle="tab">技能课</a></li> 6 <li><a href="#pane3" data-toggle="tab">关于我们</a></li> 7 </nav> 8 <div class="tab-content"> 9 <div class="tab-pane fade in active" id="pane1"> 10 <img src="img/img1/1.jpg" alt=""> 11 <p>首页</p> 12 </div> 13 <div class="tab-pane fade" id="pane2"> 14 <img src="img/img1/2.jpg" alt=""> 15 <p>技能课</p> 16 </div> 17 <div class="tab-pane fade" id="pane3"> 18 <img src="img/img1/3.jpg" alt=""> 19 <p>关于我们</p> 20 </div> 21 </div> 22 <!-- </div> --> 23 </div>
-
- 折叠
- 动画过度
- 模态框
- transition:
