Bootstrap从入门到实战---下拉菜单

最新推荐文章于 2022-06-06 23:25:30 发布

i see the future

最新推荐文章于 2022-06-06 23:25:30 发布

阅读量130

点赞数

分类专栏： HTML/CSS/JS/Bootstrap 文章标签： bootstrap

本文链接：https://blog.csdn.net/m0_46629123/article/details/118558640

版权

HTML/CSS/JS/Bootstrap 专栏收录该内容

98 篇文章 8 订阅

订阅专栏

Bootstrap从入门到实战—下拉菜单
在这里插入图片描述

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

    <!-- 引入Bootstrap CSS -->
    <link rel="stylesheet" href="css/bootstrap.css">


    <style>
        body {
            padding:20px;
        }
    </style>
</head>

<body>
    
    <!--普通下拉菜单-->
    <div class="dropdown">
        <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Dropdown button
        </button>
        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
            <a href="#" class="dropdown-item">link1</a>
            <a href="#" class="dropdown-item">link2</a>
            <a href="#" class="dropdown-item">link3</a>
        </div>
    </div>

    <br>
    
    <!--split下拉菜单-->
    <div class="btn-group">
        <button type="button" class="btn btn-danger">action</button>
        <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
        <div class="dropdown-menu">
            <a href="https://www.baidu.com/" class="dropdown-item">百度</a>
            <a href="#" class="dropdown-item">link2</a>
            <a href="#" class="dropdown-item">link3</a>
            <div class="dropdown-divider"></div>
            <a href="#" class="dropdown-item">link4</a>
        </div>
    </div>

    <br>
    <br>
    <br>

    <!--含表格式下拉菜单-->
    <div class="dropdown dropright">
        <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            login
        </button>
        <div class="dropdown-menu">
            <form action="" class="px-4 py-3">
                <div class="form-group">
                    <label for="exampleDropdownFormEmail">Email address</label>
                    <input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="email@example.com">
                </div>
                <div class="form-group">
                    <label for="exampleDropdownFormPassword1">Password</label>
                    <input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Password">
                </div>
                <div class="form-group">
                    <div class="form-check">
                        <input type="checkbox" class="form-check-input" id="dropdownCheck">
                        <label class="form-check-label" for="dropdownCheck">Remember me</label>
                    </div>
                </div>
                <button type="submit" class="btn btn-primary">Sign in</button>
            </form>
            <div class="dropdown-divider"></div>
            <a href="#" class="dropdown-item">New around here? Sign up</a>
            <a href="#" class="dropdown-item">Forgot password?</a>
        </div>
    </div>


    
    

    <!-- 先引入 jQuery.js , 再引入 poppper.js 最后引入bootstrap.js -->
    <script src="js/jquery-3.4.1.slim.min.js"></script>
    <script src="js/bootstrap.bundle.js"></script>




</body>
</html>

在这里插入图片描述

i see the future

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap从入门到实战---下拉菜单

Bootstrap从入门到实战—下拉菜单<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title>  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-
复制链接

扫一扫