Bootstrap组件--下拉菜单

最新推荐文章于 2023-10-12 15:58:24 发布

柯如暮_小兵

最新推荐文章于 2023-10-12 15:58:24 发布

阅读量478

点赞数

分类专栏：前端学习文章标签： bootstrap

本文链接：https://blog.csdn.net/cromma/article/details/53046691

版权

前端学习专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、HTML结构

首先编写基本的HTML结构：
利用Emmet输入html:5得到html的基本结构：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

</body>
</html>

得到html的基本结构之后，就可以在<body>中编写具体的html内容了。

二、引入Bootstrap和Jquery的代码

在head标签中引入bootstrap.min.css：、

<head>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
</head>

在body标签的最后引入jquery、和bootstrap的js文件：

<body>
    <script src="jquery/jquery.min.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>
</body>

注意文件的引入路径一定要正确，不然不会起作用。一个验证的方法就是查看网页的源代码，如果这个引入的文件连接能够打开并看到对应的引入文件，那么路径就是正确的。

三、下拉菜单的实现

直接代码：

<div class="container">
    <div class="dropdown">
        <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
            下拉菜单
            <span class="caret"></span>
        </button>
            <ul class="dropdown-menu" role="menu">
                <li><a href="#" role="menuitem">1</a></li>
                <li><a href="#" role="menuitem">2</a></li>
                <li class="divider" role="presentation"></li>
                <li><a href="#" role="menuitem">3</a></li>
                <li><a href="#" role="menuitem">4</a></li>
            </ul>
    </div>
</div>