学弟教程-Bootstrap-实现选项卡

最新推荐文章于 2021-12-06 14:29:51 发布

「已注销」

最新推荐文章于 2021-12-06 14:29:51 发布

阅读量1k

点赞数 3

分类专栏： Bootstarp 文章标签： bootstrap

本文链接：https://blog.csdn.net/qq_41452937/article/details/106319918

版权

本教程介绍了如何使用Bootstrap框架创建一个选项卡页面，包括在head部分引入必要的库，设置带有active状态的nav-link选项卡，通过href和data-toggle属性实现页面切换。

摘要由CSDN通过智能技术生成

一、目的

使用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