bootstrap入门【下拉菜单】

最新推荐文章于 2024-06-03 20:31:46 发布

小章鱼哥

最新推荐文章于 2024-06-03 20:31:46 发布

阅读量816

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript

本文链接：https://blog.youkuaiyun.com/u014787301/article/details/43990443

javascript 专栏收录该内容

107 篇文章

订阅专栏

本文详细介绍了Bootstrap框架中下拉菜单的创建与应用，包括基本结构、响应式设计和自定义样式。通过实例代码，读者将学会如何在网页中实现功能丰富的导航栏下拉菜单，提升用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<link href="bootstrap.min.css" rel="stylesheet">  引入bootstrap外部样式表

<script src="jquery-2.1.3.min.js"></script>
<script src="bootstrap.min.js"></script>    为使下拉菜单能够下拉，添加两个js文件
pull-right   下拉菜单按钮靠右
dropdown-toggle    表示可选
data-toggle="dropdown"    可选的形式是下拉选择
class="caret"     倒三角图标
dropdown-menu-right    下拉小菜单靠右（注意不要遮挡按钮哦）
<li role="presentation" class="dropdown-header">diyizu</li>  可选项分类，提示形式
<li role="presentation" class="dropdown-header">dierzu</li>    也是可选项分类，横线形式
<li class="disabled"><a href="#" role="menuitem">a</a></li>     不可选的菜单项

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link href="bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <p>字体图标  span标签  基类图标类</p>
    <p>下拉菜单</p>
    <div class="conainer">
        <div class="dropdown pull-right">
            <button class="btn btn-default dropdown-toggle " type="button" data-toggle="dropdown">
            下拉菜单
                 <span class="caret"></span>
            </button>
            <ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="dropdownMenu1">
                <li role="presentation" class="dropdown-header">diyizu</li>
                <li><a href="#" role="menuitem">1</a></li>
                <li><a href="#" role="menuitem">2</a></li>
                <li><a href="#" role="menuitem">3</a></li>
                <li><a href="#" role="menuitem">4</a></li>
                <li role="presentation" class="dropdown-header">dierzu</li>
                <li role="presentation" class="divider"></li>
                <li class="disabled"><a href="#" role="menuitem">a</a></li>
                <li><a href="#" role="menuitem">b</a></li>
                <li><a href="#" role="menuitem">c</a></li>
                <li><a href="#" role="menuitem">d</a></li>
            </ul>
        </div>
    </div>
    <script src="jquery-2.1.3.min.js"></script>
    <script src="bootstrap.min.js"></script>
    <p>对齐方式</p>
    <p>避免下拉列表对按钮覆盖</p>
    <p>添加标题声明一组的动作  分割线  禁用菜单项</p>
</body>
</html>