1、介绍
bootstrap中提供了12中jq插件，大部分插件可以在不编写任何代码的情况下触发
引用boostrap插件的方式有两种
-单独引用：使用其js文件，通过.插件名进行引用
-data属性
在boostrap中，自定义了data属性，可以通过该属性直接引用插件，不需要js语句
2、模态框
模态框是覆盖在父元素上的一个子界面，主要用来显示单独的内容，可以在不离开父元素的基础上进行交互
1）用法
在控制元素中（比如按钮或超链接）设置data-toggle="modal"属性，同时需要设置data-target="#id"或href="#id"用于绑定某元素的id值
通过.modal创建模态框，同时可以添加一些类表示动画方式
2）通过js绑定模态框
在按钮的点击事件中添加代码
$("#id值").modal("show");用于显示
$("#modal1").modal("hide");用于隐藏
$("#modal1").modal("toggle");手动显示或隐藏模态框
3）事件
在模态框加载或消失的过程中，系统提供了相应的触发事件
show.bs.modal 在模态框显示时后触发
shown.bs.modal 当用户可以完全看到模态框时触发
hide.bs.modal 当模态框消失时触发
hidden.bs.modal 当完全消失触发，动画执行完毕后触发
1、工具提示
就是当鼠标悬停在连接、按钮等元素上时，弹出一个提示性控件
1）使用
默认情况下，可以通过给元素添加属性data-toggle = "tootlip"即可，通过title属性设置提示的内容
可以通过data-placement设置提示工具的位置，可取值right/left/top/bottom
2）通过js
jq对象.tooltip();
可以通过js对提示工具进行配置
.tooltip({
palcement:left/right/bottom/top, 提示的位置
title:提示信息，当元素中未设置title属性值，会使用该参数
})2、弹出框
当点击元素时，弹出一个对话框，类似于工具提示
1）使用
通过给元素添加data-toggle="popover"实现一个弹出框，可以通过data-placement设置其位置
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale = 1">
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<script src="jquery-3.1.1.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<!-- 提示工具 -->
<br>
<a href="" data-toggle="tooltip" title="这是" data-placement="top">提示工具</a>
<br><br>
<button type="button" class="btn" id="btn1">提示信息</button>
<script>
$("#btn1").tooltip({
placement:"top",
title:"1000"
});
</script>
<!-- 弹出框 -->
<input type="button" class="btn" title="弹出框" value="按钮" id="btn2">
<script>
$("#btn2").popover({
placement:"bottom",
content:"弹出框的内容",//弹出框的内容
delay:1000,//延迟时间
trigger:"click", //修改弹出框的触发方式吗，可以为click/hover/focus
title:"标题" //设置标题，当元素中未设置title属性时，会使用该内容
});
</script>
</body>
</html>1、滚动监听
可以根据滚动条的位置自动更新所对应的导航标签
1）使用
可以通过给元素添加.data-spy="scroll"就可以为顶部导航条添加滚动监听功能，然后再添加data-target属性
2、轮播图
基本上所有的网站都会应用到轮播图
给元素添加类.class-carousel作为轮播控件，设置class=carousel-indicators的列表作为轮播的导航，通过给列表项设置data-target设置为轮播控件的id，设置一个新元素，class为carousel-inner作为盛放图片的元素；设置轮播按钮，通过两个a元素，class分别为carousel-control left和carousel-control right,href设置为轮播控件id，再设置data-side属性，分标委pre和next
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale = 1">
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<script src="jquery-3.1.1.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<style>
#nav1{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 40px;
}
#div1{
margin-top: 65px;
height: 400px;
overflow: auto;
}
#item1 img,#item2 img,#item3 img,#item4 img{
width: 100%;
height: 500px;
}
</style>
</head>
<body>
<!-- <nav class="navbar navbar-default" id="nav1">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#menu1">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="" class="navbar-brand">商标</a>
</div>
<div class="collapse navbar-collapse" id="menu1">
<ul class="nav navbar-nav">
<li><a href="#n1">导航一</a></li>
<li><a href="#n2">导航二</a></li>
<li><a href="#n3">导航三</a></li>
<li><a href="#n4">导航四</a></li>
</ul>
</div>
</nav> -->
<!-- 滚动监听的元素 -->
<!-- <div data-spy="scroll" data-target="#nav1" id="div1" data-offset="0">
<h3 id="n1">导航1</h3>
<p>
we8udwioejdiowejdoiwjediowj iijoiwjedoi欧改文件都改我就饿哦地点为单位 递交文件敌我二季度 打击我IE哦对今晚给偶尔京东到家围殴的降温哦打击我IE打击我IE节点
</p>
<br><br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br><br>
<br>
<br>
<br>
<br>
<h3 id="n2">导航二</h3>
我激动给文件都未接到打击我IE的囧文件的等我给就都文件的打击我给哦基调文件核对文化IEU盾
<br>
<br>
<br>
<br>
<br>
<br>
<h3 id="n3">导航三</h3>
我就饿哦低价位激动都给文件而动给为将诶都为大家哦迪欧未接地欧文基调单位低价位
<br>
<br>
<br>
<br>
<br>
<br>
<br><br>
<br>
<br>
<br>
<br>
<br>
<br><br>
<br>
<br>
<br>
<br>
<br>
<br>
<h4 id="n4">导航四</h4>
都给文件而动给我就饿哦ID京东到家围殴ID价我IE 都给文件都文件的味道哦 第五单位ed 单位一文化队伍害得我单位
<br>
<br>
<br>
<br>
<br>
</div>
-->
<!-- 轮播图 -->
<div class="carousel slide" id="carousel1">
<!-- 轮播导航 -->
<ol class="carousel-indicators">
<!--每个列表项对应一个图片 data-slide-to属性表示对应第几个图-->
<li data-target="#carousel1" data-slide-to="0" class="active"></li>
<li data-target="#carousel1" data-slide-to="1"></li>
<li data-target="#carousel1" data-slide-to="2"></li>
<li data-target="#carousel1" data-slide-to="3"></li>
</ol>
<!-- 轮播图图片 -->
<div class="carousel-inner">
<div class="item active" id="item1">
<img src="10.jpeg" alt="">
</div>
<div class="item" id="item2">
<img src="11.jpeg" alt="">
</div>
<div class="item" id="item3">
<img src="12.jpeg" alt="" >
</div>
<div class="item" id="item4">
<img src="13.jpeg" alt="" >
</div>
</div>
<!-- 轮播按钮 -->
<a href="#carousel1" class="carousel-control left" data-slide="prev" style="line-height: 500px;">上一页</a>
<a href="#carousel1" class="carousel-control right" data-slide="next">下一页</a>
</div>
</body>
</html>
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
