功能强大的Bootstrap组件（结合js）

2024-03-14 19:47:04 35

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

1.模态框
2.滚动监听
3.标签页
4.工具提示
5.弹出框
6.按钮
7.堆叠
8.轮换页
9.侧边栏

首先导入css和js

<linkrel="stylesheet"type="text/css"href="css/bootstrap.min.css">
<linkrel="stylesheet"href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
<scriptsrc="js/jquery-3.1.0.min.js"></script>
<scriptsrc="js/bootstrap.min.js"></script>

1.模态框

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

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

<!--data-target是我们的模态框的id，data-whatever="@ime"是我们传入模态框的标签和值-->
<buttontype="button"class="btnbtn-primarybtn-lg"data-toggle="modal"data-target="#myModal"data-whatever="@ime">
打开模态框
</button>

然后写模态框

<divclass="modal"id="myModal"role="dialog"aria-label="myModalLabel"aria-hidden="true">
<!--这是小模态框，将modal-sm换成modal-lg是大模态框-->
<divclass="modal-dialogmodal-sm">
<divclass="modal-content">
<!--模态框头部-->
<divclass="modal-header">
<!--右上角的关闭按钮-->
<buttontype="button"class="close"data-dismiss="modal"aria-label="Close">
<spanaria-hidden="true">&times;</span>
</button>
<!--标题-->
<divclass="modal-title">Modaltitle</div>
</div>
<!--模态框内容-->
<divclass="modal-body">
<!--模态框内容可以是文字或表格-->
<!--<p>hello</p>-->
<form>
<divclass="form-group">
<labelclass="control-label">username</label>
<inputclass="form-control"type="text">
</div>
<divclass="form-group">
<labelclass="control-label">password</label>
<inputclass="form-control"type="password">
</div>
</form>
</div>
<!--模态框脚部-->
<divclass="modal-footer">
<buttontype="button"class="btnbtn-default"data-dismiss="modal">
Close
</button>
<buttontype="button"class="btnbtn-primary">
保存
</button>
</div>
</div>
</div>
</div>

如果是点击按钮然后向模态框的表格传入参数的话
在按钮的属性要加data-标签：值
以上面data-whatever=”@ime”为例加了一个标签为whatever，值为@ime的参数
下面是js操作

//绑定模态框展示的方法
$("#myModal").on("show.bs.modal",function(e){
//获得点击打开的按钮
varbutton=$(e.relatedTarget)
//根据标签获得按钮传入的参数
varrecipient=button.data("whatever")
//获得模态框本身
varmodal=$(this)
//更改将title的text
modal.find(".modal-title").text("Hello"+recipient);
//更改body里input的值
modal.find(".modal-bodyinput").val(recipient)
})

2.滚动监听

滑动到不同内容，标签页选中会变化
首先写body属性

<bodydata-spy="scroll"data-target=".navbar"data-offset="70">

然后写标签页

<!--标签栏固定的显示内容的顶部-->
<navclass="navbarnavbar-defaultnavbar-fixed-top"role="navigation">
<divclass="container-fluid">
<divclass="collapsenavbar-collapsejs-navbar-scrollyspy"id="myScrollspy">
<ulclass="navnavbar-nav">
<!--a标签中的连接是下面标题的id-->
<li><ahref="#iwen">iwen</a></li>
<li><ahref="#ime">ime</a></li>
<!--在标签页中嵌套下拉菜单-->
<liclass="dropdown">
<ahref="#"class="dropdown-toggle"data-toggle="dropdown">
下拉菜单
<spanclass="caret"></span>
</a>
<ulclass="dropdown-menu"role="menu">
<li><ahref="#one"tabindex="-1">one</a></li>
<li><ahref="#two"tabindex="-1">two</a></li>
<li><ahref="#three"tabindex="-1">three</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>

然后写内容

<h2id="iwen">@iwen</h2>
<p>这是一个人这是一个人</p>
<h2id="ime">@ime</h2>
<p>这是一个人这是一个人</p>
<h2id="one">@one</h2>
<p>这是一个人这是一个人</p>
<h2id="two">@two</h2>
<p>这是一个人这是一个人</p>
<h2id="three">@three</h2>
<p>这是一个人这是一个人</p>

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

还可以写一些js的方法

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

3.标签页

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

首先写标签栏

<ulid="myTab"class="navnav-tabs">
<!--a标签链接对应下面tab-pane的id-->
<li><ahref="#home"data-toggle="tab">Home</a></li>
<li><ahref="#profile"data-toggle="tab">Profile</a></li>
<liclass="dropdown">
<ahref="#"id="myTabdrop1"class="dropdown-toggle"data-toggle="dropdown">
下拉菜单
<spanclass="caret"></span>
</a>
<ulclass="dropdown-menu"role="menu">
<!--与普通下拉菜单不同，要加data-toggle="tab"-->
<li><ahref="#one"tabindex="-1"data-toggle="tab">one</a></li>
<li><ahref="#two"tabindex="-1"data-toggle="tab">two</a></li>
</ul>
</li>
</ul>

然后写不同标签的内容

<divid="myTabContent"class="tab-content">
<divclass="tab-panefade"id="home">
<p>home</p>
<divclass="tab-panefade"id="profile">
<p>profile</p>
<divclass="tab-panefade"id="one">
<p>one</p>
<divclass="tab-panefade"id="two">
<p>two</p>

可以用js初始化显示的标签页
有下面几种选择标签页的方式

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

4.工具提示

<p>
<!--若title内容为空则显示data-original-title的内容，placement为显示的位置，可设为top|bottom|left|right-->
<!--参数可以以data-****的方式设置-->
欢迎来到<adata-animation="false"id="myTooltip"href="#"data-toggle="tooltip"title="title"
data-placement="bottom"data-original-title="www.jk.com">jack'spage</a>
</p>

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

//初始化tooltip，指向则显示
$('[data-toggle="tooltip"]').tooltip();

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

<!--data-trigger="foucus"点击空白可消失，不加的话点击按钮消失，设为hover的话鼠标移动的按钮显示，移开消失-->
<!--这个弹出框标题为title，内容为content-->
<buttontype="button"class="btnbtn-defaultjs-popover"data-trigger="foucus"data-placement="bottom"data-toggle="popover"title="title"data-content="content">
弹出框
</button>

然后要用js初始化

// 初始化popover
$(".js-popover").popover();

6.按钮

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

<!--可以设置按钮在loading时的文字-->
<buttontype="button"data-loading-text="Lodingfor3s"class="btnbtn-primaryjs-loading-btn">
LoadingStatus
</button>

然后要用js绑定点击事件

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

7.堆叠

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

这是点击按钮打开堆叠的

<!--href为显示内容的id-->
<aclass="btnbtn-primary"data-toggle="collapse"href="#collapseExample">点击查看</a>
<divclass="collapse"id="collapseExample">
<divclass="well">
Hello
</div>
</div>

这是面板组的堆叠

<divclass="panel-group"id="accordion"role="tablist">
<divclass="panelpanel-default">
<divclass="panel-heading"role="tab"id="headingOne">
<!--显示的标题-->
<h4class="panel-title">
<!--data-parent要是panel-group的id-->
<adata-toggle="collapse"data-parent="#accordion"href="#collapseOne">item1</a>
</h4>
</div>
<!--加了in表示打开，不加表示隐藏-->
<divid="collapseOne"class="panel-collapsecollapsein"role="tabpanel">
<divclass="panel-body">
Hello<br>
Hello<br>
Hello<br>
</div>
</div>
</div>
<divclass="panelpanel-default">
<divclass="panel-heading"role="tab"id="headingTwo">
<h4class="panel-title">
<adata-toggle="collapse"data-parent="#accordion"href="#collapseTwo">item1</a>
</h4>
</div>
<divid="collapseTwo"class="panel-collapsecollapse"role="tabpanel">
<divclass="panel-body">
Hello<br>
Hello<br>
Hello<br>
</div>
</div>
</div>
<divclass="panelpanel-default">
<divclass="panel-heading"role="tab"id="headingThree">
<h4class="panel-title">
<adata-toggle="collapse"data-parent="#accordion"href="#collapseThree">item1</a>
</h4>
</div>
<divid="collapseThree"class="panel-collapsecollapse"role="tabpanel">
<divclass="panel-body">
Hello<br>
Hello<br>
Hello<br>
</div>
</div>
</div>
</div>

8.轮换页

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

<divid="carousel-example-generic"class="carouselslide">
<!--这是下面那三个白色圆indicator-->
<olclass="carousel-indicators">
<lidata-target="#carousel-example-generic"data-slide-to="0"class="active"></li>
<lidata-target="#carousel-example-generic"data-slide-to="1"></li>
<lidata-target="#carousel-example-generic"data-slide-to="2"></li>
</ol>
<!--轮换页的内容-->
<divclass="carousel-inner">
<divclass="itemactive">
<imgsrc="images/4.jpg">
<!--添加文字-->
<divclass="carousel-caption">
<h3>U3D</h3>
<p>新版本升级</p>
</div>
</div>
<divclass="item">
<imgsrc="images/2.jpg">
<divclass="carousel-caption">
<h3>U3D</h3>
<p>新品上线</p>
</div>
</div>
<divclass="item">
<imgsrc="images/3.jpg">
<divclass="carousel-caption">
<h3>Apple</h3>
<p>Apple手表</p>
</div>
</div>
</div>
<!--轮换页左边和右边的箭头-->
<aclass="leftcarousel-control"href="#carousel-example-generic"data-slide="prew">
<spanclass="glyphiconglyphicon-chevron-left"></span>
</a>
<aclass="rightcarousel-control"href="#carousel-example-generic"data-slide="next">
<spanclass="glyphiconglyphicon-chevron-right"></span>
</a>
</div>

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

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

9.侧边栏

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

<!--要设置宽度，在手机屏幕上隐藏-->
<divclass="col-md-3col-sm-4hidden-xs">
<ulclass="list-groupaffixed-element-topjs-affixed-element-top">
<ahref="#"class="list-group-item">hello</a>
<ahref="#"class="list-group-item">hello</a>
<ahref="#"class="list-group-item">hello</a>
<ahref="#"class="list-group-item">hello</a>
<ahref="#"class="list-group-item">hello</a>
<ahref="#"class="list-group-item">hello</a>
<ahref="#"class="list-group-item">hello</a>
<ahref="#"class="list-group-item">hello</a>
</ul>
</div>

再写style

<style>
.affixed-element-top.affix{
/*如果想在底部的话可以改为bottom:10px;*/
top:10px;
}
.affixed-element-top.affix-bottom{
position:relative;
}
</style>

还要加一些js

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

}
})

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

功能强大的Bootstrap组件（结合js）

热门推荐

随机推荐