Bootstrap学习笔记-下拉框

最新推荐文章于 2023-02-22 12:53:35 发布

斗木獬

最新推荐文章于 2023-02-22 12:53:35 发布

阅读量205

点赞数

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

本文链接：https://blog.csdn.net/qq_37791322/article/details/79747770

版权

BootStrap 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1.源码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
    <script type="text/javascript" src="js/Popper.min.js"></script>
    <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
    <script type="text/javascript" src="js/bootstrap.min.js"></script>

    <title>Title</title>
</head>
<body>

<!--图片标签-->
<!--<span class="glyphicon glyphicon-search"></span>-->

<div class="container">
    <!--pull-right右侧显示，要与ul标签里面的dropdown-menu-right搭配使用-->
    <div class="dropdown pull-right">
        <button  class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
            下拉菜单
            <span class="caret" ></span>
            <ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="dropdownmenu1">
                <!--分割-->
                <!--<li role="presentation" class="dropdown-header">大写的一到四</li>-->
                <li><a href="#" role="menuitem">一</a> </li>
                <li><a href="#" role="menuitem">二</a> </li>
                <li><a href="#" role="menuitem">三</a> </li>
                <li><a href="#" role="menuitem">四</a> </li>
                <!--分割-->
                <!--<li role="presentation" class="dropdown-header">1-4</li>-->
                <li role="presentation" class="divider"></li>
                <li><a href="#" role="menuitem">1</a> </li>
                <li><a href="#" role="menuitem">2</a> </li>
                <!--class="disabled"禁止使用-->
                <li class="disabled"><a href="#" role="menuitem">3</a> </li>
                <li><a href="#" role="menuitem">4</a> </li>
            </ul>
        </button>
    </div>
</div>
</body>
</html>

2.界面

斗木獬

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap学习笔记-下拉框

1.源码&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;script type="text/javascript" src="js/jquery-3.1.1.min.js"&gt;&lt;/sc
复制链接

扫一扫

专栏目录