Bootstrap CSS——下拉菜单

来源:互联网 发布:阿里云 系统盘 数据盘 编辑:程序博客网 时间:2024/05/29 09:15

http://v3.bootcss.com/components/#dropdowns
mark

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <link href="css/bootstrap.min.css" rel="stylesheet"></head><body>    <div class="container">        <!--添加pull-right即可将按钮置于右边-->        <!--<div class="dropdown pull-right">-->        <div class="dropdown">            <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">                下拉菜单                <!--小箭头-->                <span class="caret"></span>            </button>            <!--下拉菜单内部内容,添加dropdown-menu-right即可将下拉菜单放置于右边,代码如下-->            <!--<ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="dropdownMenu1">-->            <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">                <!--添加header类似iOStableview的section header-->                <!--<li role="presentation" class="dropdown-header">大写的一到四</li>-->                <li><a href="#" role="menuitem"></a> </li>                <li><a href="#" role="menuitem"></a> </li>                <!--添加分隔线,如下代码是在二和三之间添加分隔线-->                <!--<li role="presentation" class="divider"></li>-->                <li><a href="#" role="menuitem"></a> </li>                <!--禁用某一个菜单,如下代码是禁用了第四项-->                <!--<li class="disabled"><a href="#" role="menuitem">四</a> </li>-->                <li><a href="#" role="menuitem"></a> </li>            </ul>        </div>    </div></body>    <script src="js/jquery-2.1.4.min.js"></script>    <script src="js/bootstrap.min.js"></script></html>
0 0