大学生就可以看懂的bootstrap基础实战系列，pre标签里是笔记总结，动手实际操作一下会加强理解。有疑问留言交流哦。
bootstrap是进阶html5很基础常用的前端框架，可以做自适应漂亮的界面，再坚持一下，前端知识的大门就会打开了。
本节内容有动态显示效果，建议实际操作一下。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link href="lib/node_modules/bootstrap/dist/css/bootstrap.css" rel="stylesheet"> <style> .row { margin-top: 10px; padding-top: 10px; margin-bottom: 15px; padding-bottom: 15px; border-bottom: rgba(38, 42, 40, 0.98) 1px dashed; } </style> </head> <body> <pre class="pre-scrollable"> 导航栏:ul:nav nav-tabs li组件里面包含a组件 nav-tabs:标签式 nav-pills:胶囊式 a链接点击切换tab,需要jquery和bootstrap的js,这个地方的动态是通过js操作css一起完成的. 设置:data-toggle="tab" href="#tab1aaa" tab标签内容:tab-content tab-pane fade in active tab-pane fade </pre> <div class="container"> <div class="row"> <div class="col-md-2 "> nav导航栏 nav-tab </div> <div class="col-md-10 "> <ul class="nav nav-tabs"> <li class="active"><a data-toggle="tab" href="#tab1">tab1</a></li> <li><a data-toggle="tab" href="#tab2">tab2</a></li> <li><a data-toggle="tab" href="#tab3">tab3</a></li> </ul> <div class="tab-content"> <div id="tab1" class="tab-pane fade in active"> <h3>tab1</h3> <p>hi tab1 <button class="bt btn-success">bt</button> </p> </div> <div id="tab2" class="tab-pane fade"> <h3>tab2</h3> <p>hi tab2 <button class="bt btn-success">bt</button> </p> </div> <div id="tab3" class="tab-pane fade"> <h3>tab3</h3> <p>hi tab3 <button class="bt btn-success">bt</button> </p> </div> </div> </div> </div> <div class="row"> <div class="col-md-2 "> nav导航栏 nav-pills </div> <div class="col-md-10 "> <ul class="nav nav-pills"> <li class="active"><a data-toggle="tab" href="#tab1a">tab1</a></li> <li><a data-toggle="tab" href="#tab2a">tab2</a></li> <li><a data-toggle="tab" href="#tab3a">tab3</a></li> </ul> <div class="tab-content"> <div id="tab1a" class="tab-pane fade in active"> <h3>tab1</h3> <p>hi tab1 <button class="bt btn-success">bt</button> </p> </div> <div id="tab2a" class="tab-pane fade"> <h3>tab2</h3> <p>hi tab2 <button class="bt btn-success">bt</button> </p> </div> <div id="tab3a" class="tab-pane fade"> <h3>tab3</h3> <p>hi tab3 <button class="bt btn-success">bt</button> </p> </div> </div> </div> </div> <div class="row"> <div class="col-md-2 "> nav导航栏 nav-stacked垂直 </div> <div class="col-md-10 "> <ul class="nav nav-pills nav-stacked"> <li class="active"><a data-toggle="tab" href="#tab1aa">tab1</a></li> <li><a data-toggle="tab" href="#tab2aa">tab2</a></li> <li><a data-toggle="tab" href="#tab3aa">tab3</a></li> </ul> <div class="tab-content"> <div id="tab1aa" class="tab-pane fade in active"> <h3>tab1</h3> <p>hi tab1 <button class="bt btn-success">bt</button> </p> </div> <div id="tab2aa" class="tab-pane fade"> <h3>tab2</h3> <p>hi tab2 <button class="bt btn-success">bt</button> </p> </div> <div id="tab3aa" class="tab-pane fade"> <h3>tab3</h3> <p>hi tab3 <button class="bt btn-success">bt</button> </p> </div> </div> </div> </div> <div class="row"> <div class="col-md-2 "> nav导航栏 nav-justified </div> <div class="col-md-10 "> <ul class="nav nav-pills nav-justified"> <li class="active"><a data-toggle="tab" href="#tab1aaa">tab1</a></li> <li><a data-toggle="tab" href="#tab2aaa">tab2</a></li> <li><a data-toggle="tab" href="#tab3aaa">tab3</a></li> </ul> <div class="tab-content"> <div id="tab1aaa" class="tab-pane fade in active"> <h3>tab1</h3> <p>hi tab1 <button class="bt btn-success">bt</button> </p> </div> <div id="tab2aaa" class="tab-pane fade"> <h3>tab2</h3> <p>hi tab2 <button class="bt btn-success">bt</button> </p> </div> <div id="tab3aaa" class="tab-pane fade"> <h3>tab3</h3> <p>hi tab3 <button class="bt btn-success">bt</button> </p> </div> </div> </div> </div> </div> </body> <script src="//img.anhuiqq.cn/jquery.js"></script> <script src="//img.anhuiqq.cn/lib/node_modules/bootstrap/dist/js/bootstrap.js"></script> </html>
