gpt4 book ai didi

BootStrap笔记-导航

转载 作者:知者 更新时间:2024-03-13 08:59:28 27 4
gpt4 key购买 nike

运行截图如下:

源码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CN_TEST1</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<!--    bootstrap css核心文件-->
    <link rel="stylesheet" href="bootstrap-4.4.1-dist/css/bootstrap.min.css">
<!--    bootstrap使用到了jquery,需要提前引用-->
    <script src="js/jquery-3.5.1.min.js"></script>
<!--    弹窗、提示、下拉菜单-->
    <script src="bootstrap-4.4.1-dist/js/bootstrap.bundle.js"></script>
<!--    bootstrap核心文件-->
    <script src="bootstrap-4.4.1-dist/js/bootstrap.min.js"></script>

</head>
<body>

    <div class="container-fluid">

        <ul class="nav">
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link disabled" href="#">Link</a>
            </li>
        </ul>

        <ul class="nav justify-content-center">
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link disabled" href="#">Link</a>
            </li>
        </ul>

        <ul class="nav justify-content-end">
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link disabled" href="#">Link</a>
            </li>
        </ul>

        <ul class="nav flex-column">
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link disabled" href="#">Link</a>
            </li>
        </ul>

<!--        左列的-->
        <ul class="nav flex-column">
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link disabled" href="#">Link</a>
            </li>
        </ul>

        <!--        选项卡-->
        <ul class="nav nav-tabs">
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link disabled" href="#">Link</a>
            </li>
        </ul>

<!--        胶囊导航-->
        <ul class="nav nav-pills">
            <li class="nav-item">
                <a class="nav-link active" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link disabled" href="#">Link</a>
            </li>
        </ul>

<!--        胶囊下拉菜单-->
        <ul class="nav nav-pills">
            <li class="nav-item">
                <a class="nav-link active" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link disabled" href="#">Link</a>
            </li>

            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Dropdown</a>
                <div class="dropdown-menu">
                    <a class="dropdown-item" href="#">Link 1</a>
                    <a class="dropdown-item" href="#">Link 2</a>
                    <a class="dropdown-item" href="#">Link 3</a>
                </div>
            </li>

        </ul>

        <!--        选项卡-->
        <ul class="nav nav-tabs">
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link disabled" href="#">Link</a>
            </li>

            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Dropdown</a>
                <div class="dropdown-menu">
                    <a class="dropdown-item" href="#">Link 1</a>
                    <a class="dropdown-item" href="#">Link 2</a>
                    <a class="dropdown-item" href="#">Link 3</a>
                </div>
            </li>
        </ul>

<!--        动态选项卡-->
        <ul class="nav nav-tabs">
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link disabled" href="#">Link</a>
            </li>

            <div class="tab-content">
                <div class="tab-pane active container" id="home">...</div>
                <div class="tab-pane container" id="menu">...</div>
                <div class="tab-pane container" id="menu2">...</div>
            </div>
        </ul>

        <ul class="nav nav-pills">
            <li class="nav-item">
                <a class="nav-link active" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link disabled" href="#">Link</a>
            </li>

            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Dropdown</a>
                <div class="dropdown-menu">
                    <a class="dropdown-item" href="#">Link 1</a>
                    <a class="dropdown-item" href="#">Link 2</a>
                    <a class="dropdown-item" href="#">Link 3</a>
                </div>
            </li>

        </ul>

    </div>

</body>
</html>

解释:

①在ul元素上添加nav类,li上添加nav-item就可以实现导航的功能;

②ul上添加nav类后还可以添加justify-content-center和justify-content-end,设置导航为居中和右对齐;

③flex-column用于创建垂直导航;

④ul上添加nav类后,再添加nav-tabs就是选项卡了,可以使用li中可以添加active作为选中。

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com