$('#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.工具提示
<p> <!--若title内容为空则显示data-original-title的内容，placement为显示的位置，可设为top|bottom|left|right--> <!--参数可以以data-****的方式设置--> 欢迎来到<a data-animation="false" href="#" data-toggle="tooltip" title="title" data-placement="bottom" data-original-title="www.jk.com">jack's page</a> </p>
然后要用js初始化，否则会没有任何效果
//初始化tooltip，指向则显示
$('[data-toggle="tooltip"]').tooltip();
5.弹出框
弹出框类似工具提示，但显示的内容比工具提示更加丰富，也比它常用
<!--data-trigger="foucus"点击空白可消失，不加的话点击按钮消失，设为hover的话鼠标移动的按钮显示，移开消失--> <!--这个弹出框标题为title，内容为content--> <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篇讲的是按钮的基本样式，这次是进阶使用，可以让按钮在加载时显示不同的文字
<!--可以设置按钮在loading时的文字--> <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.堆叠
堆叠效果可以节省大量的屏幕控件，非常实用
这是点击按钮打开堆叠的
<!--href为显示内容的id--> <a data-toggle="collapse" href="#collapseExample">点击查看</a> <div> <div> Hello </div> </div>
这是面板组的堆叠
<div role="tablist"> <div> <div role="tab"> <!--显示的标题--> <h4> <!--data-parent要是panel-group的id--> <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">item1</a> </h4> </div> <!--加了in表示打开，不加表示隐藏--> <div role="tabpanel"> <div> Hello<br> Hello<br> Hello<br> </div> </div> </div> <div> <div role="tab"> <h4> <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">item1</a> </h4> </div> <div role="tabpanel"> <div> Hello<br> Hello<br> Hello<br> </div> </div> </div> <div> <div role="tab"> <h4> <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">item1</a> </h4> </div> <div role="tabpanel"> <div> Hello<br> Hello<br> Hello<br> </div> </div> </div> </div>
8.轮换页
我们经常可以在网站的主页可以看到
<div> <!--这是下面那三个白色圆indicator--> <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="https://www.jb51.net/images/4.jpg"> <!--添加文字--> <div> <h3>U3D</h3> <p>新版本升级</p> </div> </div> <div> <img src="https://www.jb51.net/images/2.jpg"> <div> <h3>U3D</h3> <p>新品上线</p> </div> </div> <div> <img src="https://www.jb51.net/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.侧边栏
侧边栏的主要内容是一个列表