bootstrap

来源：互联网发布：网络强迫症编辑：程序博客网时间：2024/06/05 18:41
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>下拉菜单</title>    <link rel="stylesheet" type="text/css" href="../CSS/bootstrap.css">    <script src="../JS/jquery-3.2.1.min.js"></script>    <script src="../JS/bootstrap.js"></script></head><body>    <div class="container">        <div class="dropdown">            <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">Dropdown            <span class="caret"></span></button>        <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">            <li><a href="#">Action</a></li>            <li><a href="#">Another action</a></li>            <li><a href="#">Something else here</a></li>            <li role="separator" class="divider"></li>            <li><a href="#">Separated link</a></li>         </ul><!-- 简化版 -->         <br><br>        <div class="dropdown"><!-- class="dropdown"默认是隐藏菜单  class="dropdown open"显示菜单-->            <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Dropdown            <span class="caret"></span></button>        <ul class="dropdown-menu">            <li><a href="#">Action</a></li>            <li><a href="#">Another action</a></li>            <li><a href="#">Something else here</a></li>            <li role="separator" class="divider"></li>            <li><a href="#">Separated link</a></li>         </ul>         </div>         <br><br>         <div class="row">            <div class="col-lg-4">                <div class="dropup"><!-- class="dropup"菜单向上 -->                    <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Dropdown                    <span class="caret"></span><!-- 箭头 --></button>                    <ul class="dropdown-menu">                        <li><a href="#">Action</a></li>                        <li><a href="#">Another action</a></li>                        <li><a href="#">Something else here</a></li>                        <li><a href="#">Separated link</a></li>                     </ul>                </div>            </div>            <div class="col-lg-4">                <div class="dropdown pull-right">                    <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Dropdown                    <span class="caret"></span></button>                    <ul class="dropdown-menu dropdown-menu-right "><!-- dropdown-menu-right 菜单靠右 -->                        <li class="dropdown-header">第一部分</li>                        <li class="active"><a href="#">Action</a></li><!-- class="active" 选中模式-->                        <li class="text-conter"><a href="#">Another action</a></li><!-- class="text-conter" 文字居中-->                        <li><a href="#">Something else here</a></li>                        <li><a href="#">Separated link</a></li>                        <li class="divider"></li><!-- 分为两部分，有分割线 -->                        <li class="dropdown-header">第一部分</li>                        <li class="disabled"><a href="#">Action</a></li><!-- class="disabled" 禁用模式-->                        <li><a href="#">Another action</a></li>                        <li><a href="#">Something else here</a></li>                        <li><a href="#">Separated link</a></li>                     </ul>                </div>            </div>         </div>    </div></body></html><!-- 下拉菜单中的自定义属性：data-*：是与JavaScript交互有关的data-toggle="dropdown"内容不能变  toggle是切换的意思aria-haspopup="true"和role="separator"和aria-labelledby="dropdownMenu1"为特定的人群服务aria-expanded="true"菜单是否展开的状态，当菜单收起打开动态变化时，它也会自动变化dropdown-menu-right: 下拉菜单展开默认是靠左的，使用它可以是菜单展开靠右class="active" 选中模式class="text-conter" 文字居中class="divider"有分割线class="disabled" 禁用模式class="dropdown-header" 菜单的第一行下拉菜单的要求：四个个class：    class="dropdown"    class="btn btn-default dropdown-toggle    class="caret"    class="dropdown-menu"触发：dropdown-toggle，谁触发就加在谁的class -->
阅读全文
0 0