上两篇只讲了组件如何使用，基本没有说js，这篇博客要结合js来讲讲
主要讲解一下几个组件
1.模态框
2.滚动监听
3.标签页
4.工具提示
5.弹出框
6.按钮
7.堆叠
8.轮换页
9.侧边栏
首先导入css和js
<link type="text/css" href="https://www.jb51.net/css/bootstrap.min.css"> <link href="https://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css"> <script src="https://www.jb51.net/js/jquery-3.1.0.min.js"></script> <script src="https://www.jb51.net/js/bootstrap.min.js"></script>
1.模态框
我们通常在登录注册，或者阅读某些条例时都是用这个模态框，所以模态框是非常常见的
首先写一个打开模态框的按钮
<!--data-target是我们的模态框的id，data-whatever="@ime"是我们传入模态框的标签和值--> <button type="button" data-toggle="modal" data-target="#myModal" data-whatever="@ime"> 打开模态框 </button>
然后写模态框
<div role="dialog" aria-label="myModalLabel" aria-hidden="true"> <!--这是小模态框，将modal-sm换成modal-lg是大模态框--> <div> <div> <!--模态框头部--> <div> <!--右上角的关闭按钮--> <button type="button" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> <!--标题--> <div>Modal title</div> </div> <!--模态框内容--> <div> <!--模态框内容可以是文字或表格--> <!--<p>hello</p>--> <form> <div> <label>username</label> <input type="text"> </div> <div> <label>password</label> <input type="password"> </div> </form> </div> <!--模态框脚部--> <div> <button type="button" data-dismiss="modal"> Close </button> <button type="button"> 保存 </button> </div> </div> </div> </div>
如果是点击按钮然后向模态框的表格传入参数的话
在按钮的属性要加data-标签：值
以上面data-whatever=”@ime”为例加了一个标签为whatever，值为@ime的参数
下面是js操作
// 绑定模态框展示的方法 $("#myModal").on("show.bs.modal",function(e){ // 获得点击打开的按钮 var button=$(e.relatedTarget) // 根据标签获得按钮传入的参数 var recipient=button.data("whatever") // 获得模态框本身 var modal=$(this) // 更改将title的text modal.find(".modal-title").text("Hello"+recipient); // 更改body里input的值 modal.find(".modal-body input").val(recipient) })
2.滚动监听
滑动到不同内容，标签页选中会变化
首先写body属性
<!--offset设为70，这个值是经过测试最佳的值-->
<body data-spy="scroll" data-target=".navbar" data-offset="70">
然后写标签页
<!--标签栏固定的显示内容的顶部--> <nav role="navigation"> <div> <div> <ul> <!--a标签中的连接是下面标题的id--> <li><a href="#iwen">iwen</a> </li> <li><a href="#ime">ime</a> </li> <!--在标签页中嵌套下拉菜单--> <li> <a href="#" data-toggle="dropdown"> 下拉菜单 <span></span> </a> <ul role="menu"> <li><a href="#one" tabindex="-1">one</a> </li> <li><a href="#two" tabindex="-1">two</a> </li> <li><a href="#three" tabindex="-1">three</a> </li> </ul> </li> </ul> </div> </div> </nav>
然后写内容
<h2>@iwen</h2> <p>这是一个人 这是一个人</p> <h2>@ime</h2> <p>这是一个人 这是一个人</p> <h2>@one</h2> <p>这是一个人 这是一个人</p> <h2>@two</h2> <p>这是一个人 这是一个人</p> <h2>@three</h2> <p>这是一个人 这是一个人</p>
建议把内容写得长一点，这样效果才会更加明显，这里演示不方便写太多无用的文字
还可以写一些js的方法
// 绑定标签切换时的方法 $("#myScrollspy").on("activate.bs.scrollspy",function(e){ alert("hello"); })
3.标签页
点击不同的标签可以显示不同的内容
首先写标签栏
<ul> <!--a标签链接对应下面tab-pane的id--> <li ><a href="#home" data-toggle="tab">Home</a> </li> <li><a href="#profile" data-toggle="tab">Profile</a> </li> <li> <a href="#" data-toggle="dropdown"> 下拉菜单 <span></span> </a> <ul role="menu"> <!--与普通下拉菜单不同，要加data-toggle="tab"--> <li><a href="#one" tabindex="-1" data-toggle="tab">one</a> </li> <li><a href="#two" tabindex="-1" data-toggle="tab">two</a> </li> </ul> </li> </ul>
然后写不同标签的内容
<div> <div> <p>home</p> <div> <p>profile</p> <div> <p>one</p> <div> <p>two</p>
可以用js初始化显示的标签页
有下面几种选择标签页的方式