功能强大的Bootstrap组件（结合js）_Javascript教程-查字典教程网

摘要：上两篇只讲了组件如何使用，基本没有说js，这篇博客要结合js来讲讲主要讲解一下几个组件1.模态框2.滚动监听3.标签页4.工具提示5.弹出框...

上两篇只讲了组件如何使用，基本没有说js，这篇博客要结合js来讲讲

主要讲解一下几个组件

1.模态框

2.滚动监听

3.标签页

4.工具提示

5.弹出框

6.按钮

7.堆叠

8.轮换页

9.侧边栏

首先导入css和js

1.模态框

我们通常在登录注册，或者阅读某些条例时都是用这个模态框，所以模态框是非常常见的

首先写一个打开模态框的按钮

<> <button type="button" data-toggle="modal" data-target="#myModal" data-whatever="@ime"> 打开模态框 </button>

然后写模态框

<div id="myModal" role="dialog" aria-label="myModalLabel" aria-hidden="true"> <> <div> <div> <> <div> <> <button type="button" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> <> <div>Modal title</div> </div> <> <div> <> <> <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属性

然后写标签页

<> <nav role="navigation"> <div> <div id="myScrollspy"> <ul> <> <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 id="iwen">@iwen</h2> <p>这是一个人这是一个人</p> <h2 id="ime">@ime</h2> <p>这是一个人这是一个人</p> <h2 id="one">@one</h2> <p>这是一个人这是一个人</p> <h2 id="two">@two</h2> <p>这是一个人这是一个人</p> <h2 id="three">@three</h2> <p>这是一个人这是一个人</p>

建议把内容写得长一点，这样效果才会更加明显，这里演示不方便写太多无用的文字

还可以写一些js的方法

// 绑定标签切换时的方法 $("#myScrollspy").on("activate.bs.scrollspy",function(e){ alert("hello"); })

3.标签页

点击不同的标签可以显示不同的内容

首先写标签栏

<ul id="myTab"> <> <li ><a href="#home" data-toggle="tab">Home</a> </li> <li><a href="#profile" data-toggle="tab">Profile</a> </li> <li> <a href="#" id="myTabdrop1" data-toggle="dropdown"> 下拉菜单 <span></span> </a> <ul role="menu"> <> <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 id="myTabContent"> <div id="home"> <p>home</p> <div id="profile"> <p>profile</p> <div id="one"> <p>one</p> <div id="two"> <p>two</p>

可以用js初始化显示的标签页

有下面几种选择标签页的方式

$('#myTabs a[href="#profile"]').tab('show') // 根据名字选择 $('#myTabs a:first').tab('show') // 选择第一个标签页 $('#myTabs a:last').tab('show') // 选择最后一个标签页 $('#myTabs li:eq(2) a').tab('show') // 选择第三个标签页（因为0是第一个），如果是下拉菜单里的标签页，数字要加1

4.工具提示

然后要用js初始化，否则会没有任何效果

//初始化tooltip，指向则显示

$('[data-toggle="tooltip"]').tooltip();

5.弹出框

弹出框类似工具提示，但显示的内容比工具提示更加丰富，也比它常用

<> <> <button type="button" data-trigger="foucus" data-placement="bottom" data-toggle="popover" title="title" data-content="content"> 弹出框 </button>

然后要用js初始化

// 初始化popover

$(".js-popover").popover();

6.按钮

前2篇讲的是按钮的基本样式，这次是进阶使用，可以让按钮在加载时显示不同的文字

<> <button type="button" data-loading-text="Loding for 3s"> Loading Status </button>

然后要用js绑定点击事件

// 绑定按钮的点击事件 $(".js-loading-btn").on("click", function (e) { // 点击后设为loading状态，显示loading的文字 var btn = $(this).button("loading"); // 3s后恢复 setTimeout(function (e) { btn.button("reset") }, 3000) })

7.堆叠

堆叠效果可以节省大量的屏幕控件，非常实用

这是点击按钮打开堆叠的

<> <a data-toggle="collapse" href="#collapseExample">点击查看</a> <div id="collapseExample"> <div> Hello </div> </div>

这是面板组的堆叠

<div id="accordion" role="tablist"> <div> <div role="tab" id="headingOne"> <> <h4> <> <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">item1</a> </h4> </div> <> <div id="collapseOne" role="tabpanel"> <div> Hello<br> Hello<br> Hello<br> </div> </div> </div> <div> <div role="tab" id="headingTwo"> <h4> <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">item1</a> </h4> </div> <div id="collapseTwo" role="tabpanel"> <div> Hello<br> Hello<br> Hello<br> </div> </div> </div> <div> <div role="tab" id="headingThree"> <h4> <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">item1</a> </h4> </div> <div id="collapseThree" role="tabpanel"> <div> Hello<br> Hello<br> Hello<br> </div> </div> </div> </div>

8.轮换页

我们经常可以在网站的主页可以看到

<div id="carousel-example-generic"> <> <ol> <li data-target="#carousel-example-generic" data-slide-to="0"></li> <li data-target="#carousel-example-generic" data-slide-to="1"></li> <li data-target="#carousel-example-generic" data-slide-to="2"></li> </ol> <> <div> <div> <img src="images/4.jpg"> <> <div> <h3>U3D</h3> <p>新版本升级</p> </div> </div> <div> <img src="images/2.jpg"> <div> <h3>U3D</h3> <p>新品上线</p> </div> </div> <div> <img src="images/3.jpg"> <div> <h3>Apple</h3> <p>Apple手表</p> </div> </div> </div> <> <a href="#carousel-example-generic" data-slide="prew"> <span></span> </a> <a href="#carousel-example-generic" data-slide="next"> <span></span> </a> </div>

可以用js设置间隔和自动开始

//设置间隔为2s且自动轮播 $(".carousel").carousel({ interval:2000 })

9.侧边栏

侧边栏的主要内容是一个列表

<> <div> <ul> <a href="#">hello</a> <a href="#">hello</a> <a href="#">hello</a> <a href="#">hello</a> <a href="#">hello</a> <a href="#">hello</a> <a href="#">hello</a> <a href="#">hello</a> </ul> </div>

再写style

还要加一些js

$(".js-affixed-element-top").affix({ offset:{ } })

Boostrap的基本用法就这样，掌握后就可以做出很好的网页了。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持查字典教程网。