bootstrap tab页 

  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
View Code

 

posted @ 2018-12-27 11:16  cunzhang1  阅读(89)  评论(0)    收藏  举报