Bootstrap實現選項卡

一、 目的

使用Bootstrap框架編制一個選項卡頁面

二、 效果預覽

三、 代碼實現

3.1 head部分

<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>

引入相關的庫

3.2 選項卡部分

<nav class="navbar nav-tabs" role="navigation">
    <ul class="nav nav-tabs">
        <li class="nav-item ">
            <a class="nav-link active" href="#tab_login" data-toggle="tab">登錄</a>
            </li>
        <li class="nav-item">
            <a class="nav-link" href="#tab_register" data-toggle="tab">註冊</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#tab_modify" data-toggle="tab">修改</a>
        </li>
        </ul>
</nav>

• nav-link active 即默認選擇的選項卡
• href 後跟選項卡對應頁面的id
• data-toggle=“tab” 用以綁定觸發事件,即點擊不同選項卡時切換頁面

3.3 頁面部分

<div class="tab-content">

    <!--第一個頁面,注意id要和選項卡定義的href一致-->
    <div id="tab_login" class="tab-pane  in active">
        <form action="" method="POST">
            <div class="input-group mb-3">
                <div class="input-group-prepend">                        
                    <span class="input-group-text">用戶名</span>
                </div>
                 <label for="id"></label>
                <input type="text" class="form-control" id="name" name="name" placeholder="請輸入用戶名">
            </div>

            <div class="input-group mb-3">
                <div class="input-group-prepend">
                    <span class="input-group-text">密   碼</span>
                </div>
                <label for="pwd"></label>
                <input type="password" class="form-control" id="pwd" name="pwd" placeholder="請輸入密碼">
            </div>
            <button type="submit" class="btn btn-primary">登錄</button>
        </form>
    </div>

    <!--第二個頁面,注意id要和選項卡定義的href一致-->
    <div id="tab_register" class="tab-pane fade">
        <form action="" method="POST">
            <div class="input-group mb-3">
                <div class="input-group-prepend">
                    <span class="input-group-text">用戶名</span>
                </div>
                <label for="regname"></label>
                <input type="text" class="form-control" id="regname" name="regname" placeholder="請輸入用戶名">
            </div>

            <div class="input-group mb-3">
                <div class="input-group-prepend">
                    <span class="input-group-text">密碼</span>
                </div>
                <label for="name"></label>
                <label for="regpwd"></label>                    <input type="password" class="form-control" id="regpwd" name="regpwd" placeholder="請輸入密碼">
                </div>
            <div class="input-group mb-3">
                <div class="input-group-prepend">
                    <span class="input-group-text">確認密碼</span>
                </div>
                <label for="name"></label>
                <label for="regpwds"></label>
                <input type="password" class="form-control" id="regpwds" name="regpwds" placeholder="請輸入密碼">
            </div>

            <div class="input-group mb-3">
                <div class="input-group-prepend">
                    <span class="input-group-text">郵箱</span>
                </div>
                <label for="email"></label>
                <input type="text" class="form-control" id="email" name="email" placeholder="請輸入郵箱">
            </div>

            <div class="input-group mb-3">
                <div class="input-group-prepend">
                    <span class="input-group-text">身份</span>
                </div>
                <select class="form-control" name="identify">
                    <option value="student">學生</option>
                    <option value="teacher">教師</option>
                </select>
            </div>
            <button type="submit" class="btn btn-primary">提交</button>
        </form>
    </div>

    <!--第三個頁面,注意id要和選項卡定義的href一致-->
    <div id="tab_modify" class="tab-pane fade">
        <form action="" method="POST">
        </form>
        </div>
</div>

四、 全部代碼

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>

    <style>
        .container {
            width: 500px;
            height: 1000px;
        }
    </style>
</head>

<body>

<div class="container" style="margin-top:80px">
    <!--選項卡部分-->
    <nav class="navbar nav-tabs" role="navigation">
        <ul class="nav nav-tabs">
            <li class="nav-item ">
                <a class="nav-link active" href="#tab_login" data-toggle="tab">登錄</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#tab_register" data-toggle="tab">註冊</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#tab_modify" data-toggle="tab">修改</a>
            </li>
        </ul>
    </nav>

    <!--頁面部分-->
    <div class="tab-content">
        
        <!--頁面一-->
        <div id="tab_login" class="tab-pane  in active">
            <form action="" method="POST">
                <div class="input-group mb-3">
                    <div class="input-group-prepend">
                        <span class="input-group-text">用戶名</span>
                    </div>
                    <label for="id"></label>
                    <input type="text" class="form-control" id="name" name="name" placeholder="請輸入用戶名">
                </div>

                <div class="input-group mb-3">
                    <div class="input-group-prepend">
                        <span class="input-group-text">密   碼</span>
                    </div>
                    <label for="pwd"></label>
                    <input type="password" class="form-control" id="pwd" name="pwd" placeholder="請輸入密碼">
                </div>
                <button type="submit" class="btn btn-primary">登錄</button>
            </form>
        </div>

         <!--頁面二-->
        <div id="tab_register" class="tab-pane fade">
            <form action="" method="POST">
                <div class="input-group mb-3">
                    <div class="input-group-prepend">
                        <span class="input-group-text">用戶名</span>
                    </div>
                    <label for="id"></label>
                    <label for="regname"></label>
                    <input type="text" class="form-control" id="regname" name="regname" placeholder="請輸入用戶名">
                </div>

                <div class="input-group mb-3">
                    <div class="input-group-prepend">
                        <span class="input-group-text">密碼</span>
                    </div>
                    <label for="name"></label>
                    <label for="regpwd"></label>
                    <input type="password" class="form-control" id="regpwd" name="regpwd" placeholder="請輸入密碼">
                </div>
                <div class="input-group mb-3">
                    <div class="input-group-prepend">
                        <span class="input-group-text">確認密碼</span>
                    </div>
                    <label for="name"></label>
                    <label for="regpwds"></label>
                    <input type="password" class="form-control" id="regpwds" name="regpwds" placeholder="請輸入密碼">
                </div>

                <div class="input-group mb-3">
                    <div class="input-group-prepend">
                        <span class="input-group-text">郵箱</span>
                    </div>
                    <label for="email"></label>
                    <input type="text" class="form-control" id="email" name="email" placeholder="請輸入郵箱">

                </div>
                <div class="input-group mb-3">
                    <div class="input-group-prepend">
                        <span class="input-group-text">身份</span>
                    </div>
                    <select class="form-control" name="identify">
                        <option value="student">學生</option>
                        <option value="teacher">教師</option>
                    </select>

                </div>
                <button type="submit" class="btn btn-primary">提交</button>
            </form>
        </div>

         <!--頁面三-->
        <div id="tab_modify" class="tab-pane fade">
            <form action="" method="POST">
            </form>
        </div>
    </div>
</div>
</body>
</html>