19.选项卡

2024-04-27 15:12:01

字体：大中小

来源：转载

供稿：网友

<!doctype html><html><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap</title> <link rel="stylesheet" href="CSS/bootstrap.css" /> <style> .tab1{ border:1px solid #ddd; border-top:none; padding:30px; border-radius:0 0 5px 5px;/*把边框变为圆角：top-left、top-right、bottom-right、bottom-left*/ } </style></head><body>  <div class="container"> <div class="row"> <ul class="nav nav-tabs"> <li><a href="#con1" data-toggle="tab">苹果</a></li> <li><a href="#con2" data-toggle="tab">香蕉</a></li> <li><a href="#con3" data-toggle="tab">橘子</a></li> </ul> <div class="tab-content"> <div id="con1" class="tab-pane">html</div> <div id="con2" class="tab-pane">css</div> <div id="con3" class="tab-pane">javascript</div> </div> </div> <div class="row"> <div class="col-lg-4"> <ul class="nav nav-tabs"> <li><a href="#con4" data-toggle="tab">苹果</a></li> <li><a href="#con5" data-toggle="tab">香蕉</a></li> <li><a href="#con6" data-toggle="tab">橘子</a></li> </ul> <div class="tab-content tab1"> <div id="con4" class="tab-pane">html</div> <div id="con5" class="tab-pane">css</div> <div id="con6" class="tab-pane">Javascript</div> </div> </div> </div> </div> <script src="js/jquery-2.1.0.js"></script> <script src="js/bootstrap.js"></script></body></html>

这里写图片描述