1 ---恢复内容开始--- 2 3 <!DOCTYPE html> 4 <html> 5 <head> 6 <title>Bootstrap 实例</title> 7 <meta charset="utf-8"> 8 <meta name="viewport" content="width=device-width, initial-scale=1"> 9 <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css"> 10 <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> 11 <script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script> 12 <script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script> 13 </head> 14 <body> 15 16 <div class="container"> 17 <h2>选项卡切换</h2> 18 <br> 19 <!-- Nav tabs --> 20 <ul class="nav nav-tabs" role="tablist"> 21 <li class="nav-item"> 22 <a class="nav-link active" data-toggle="tab" href="#home">Home</a> 23 </li> 24 <li class="nav-item"> 25 <a class="nav-link" data-toggle="tab" href="#menu1">Menu 1</a> 26 </li> 27 <li class="nav-item"> 28 <a class="nav-link" data-toggle="tab" href="#menu2">Menu 2</a> 29 </li> 30 </ul> 31 32 <!-- Tab panes --> 33 <div class="tab-content"> 34 <div id="home" class="container tab-pane active"><br> 35 <h3>HOME</h3> 36 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> 37 </div> 38 <div id="menu1" class="container tab-pane fade"><br> 39 <h3>Menu 1</h3> 40 <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 41 </div> 42 <div id="menu2" class="container tab-pane fade"><br> 43 <h3>Menu 2</h3> 44 <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p> 45 </div> 46 </div> 47 </div> 48 49 </body> 50 </html>2018-12-27 51 52 ---恢复内容结束--- 53 54 <!DOCTYPE html> 55 <html> 56 <head> 57 <title>Bootstrap 实例</title> 58 <meta charset="utf-8"> 59 <meta name="viewport" content="width=device-width, initial-scale=1"> 60 <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css"> 61 <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> 62 <script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script> 63 <script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script> 64 </head> 65 <body> 66 67 <div class="container"> 68 <h2>选项卡切换</h2> 69 <br> 70 <!-- Nav tabs --> 71 <ul class="nav nav-tabs" role="tablist"> 72 <li class="nav-item"> 73 <a class="nav-link active" data-toggle="tab" href="#home">Home</a> 74 </li> 75 <li class="nav-item"> 76 <a class="nav-link" data-toggle="tab" href="#menu1">Menu 1</a> 77 </li> 78 <li class="nav-item"> 79 <a class="nav-link" data-toggle="tab" href="#menu2">Menu 2</a> 80 </li> 81 </ul> 82 83 <!-- Tab panes --> 84 <div class="tab-content"> 85 <div id="home" class="container tab-pane active"><br> 86 <h3>HOME</h3> 87 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> 88 </div> 89 <div id="menu1" class="container tab-pane fade"><br> 90 <h3>Menu 1</h3> 91 <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 92 </div> 93 <div id="menu2" class="container tab-pane fade"><br> 94 <h3>Menu 2</h3> 95 <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p> 96 </div> 97 </div> 98 </div> 99 100 </body> 101 </html>2018-12-27