今天学习了Bootstrap的选项卡，在这里分享一下，具体解释代码中都有，不再重复了。
先看一下效果图吧，显目一些！
实现代码：
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <meta content="width=device-width,initial-scale=1.0"> <title>Bootstrap选项卡</title> <!-- 引入Bootstrap的样式表 --> <link type="text/css" href="https://www.jb51.net/css/bootstrap.min.css"> <link type="text/css" href="https://www.jb51.net/css/bootstrap-responsive.min.css"> </head> <body> <h1><i></i>Hello world!</h1> <!-- nav 清除li的默认样式 --> <!-- nav-tabs 定义选项卡的标题栏 --> <!-- tab-content 定义了选项卡的内容栏 --> <!-- 在内容栏中，每个子框都必须包含tab-pane类 --> <!-- a标签中的href必须要和内容栏中的子框的id对应 --> <!-- active表示活动中的标题栏和内容子框，且每个标签栏都必须对于一个data-toggle='tab' --> <ul> <li><a href="#tab1" data-toggle="tab">li1</a></li> <li><a href="#tab2" data-toggle="tab">li2</a></li> <li><a href="#tab3" data-toggle="tab">li3</a></li> <li><a href="#tab4" data-toggle="tab">li4</a></li> </ul> <div> <div><img src="https://www.jb51.net/img/1.png"></div> <div><img src="https://www.jb51.net/img/2.png"></div> <div><img src="https://www.jb51.net/img/3.png"></div> <div><img src="https://www.jb51.net/img/4.png"></div> </div> <!-- 引入Bootstrap的js文件 --> <script type="text/javascript" src="https://www.jb51.net/js/jquery.min.js"></script> <script type="text/javascript" src="https://www.jb51.net/js/bootstrap.min.js"></script> <script type="text/javascript" src="https://www.jb51.net/js/bootstrap-tab.js"></script> </body> </html>
如果大家还想深入学习，可以点击这里进行学习，再为大家附3个精彩的专题：