一、 目的
使用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-p