bootstrap入门【下拉菜单】

bootstrap入门【下拉菜单】_第1张图片



<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>



你可能感兴趣的:(bootstrap入门【下拉菜单】)