使用bootstrap簡單製做Tab切換頁

時間 2019-11-12

標籤使用 bootstrap 簡單製做 tab 換頁欄目 Bootstarp 简体版

原文原文鏈接

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3個meta標籤*必須*放在最前面，任何其餘內容都*必須*跟隨其後！ -->
    <title>Bootstrap js</title>

    <!-- 新 Bootstrap 核心 CSS 文件 -->
  <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">

  <!-- 可選的Bootstrap主題文件（通常不用引入） -->
  <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">

  <!-- jQuery文件。務必在bootstrap.min.js 以前引入 -->
  <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>

  <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
  <script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>

     <div class="container">
       <div class="row">
        <div class="col-md-3">
          <H4>Tab頁</H4>
          <ul class="nav nav-tabs">
            <li class="active"><a href="#tab1" data-toggle="tab">tab1</a></li>
            <li><a href="#tab2" data-toggle="tab">tab2</a></li>
            <li><a href="#tab3" data-toggle="tab">tab3</a></li>
            <li><a href="#tab4" data-toggle="tab">tab4</a></li>
          </ul>
          <div class="tab-content">
            <div id="tab1" class="tab-pane active">tab1</div>
            <div id="tab2" class="tab-pane">tab2</div>
            <div id="tab3" class="tab-pane">tab3</div>
            <div id="tab4" class="tab-pane">tab4</div>
          </div>
        </div>
      </div><!-- end of row -->
    </div>
</body>
</html>

　　無需手工編寫代碼，須要更加本身的頁面修改tab樣式css

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。