【12】Bootstrap — 下拉菜单

来源：互联网发布：淘宝客服规范编辑：程序博客网时间：2024/06/06 03:24

下拉菜单

<!DOCTYPE html><html lang="zh-CN">    <head>        <meta charset="utf-8" />        <meta http-equiv="X-UA-Compatible" content="IE=edge">        <meta name="viewport" content="width=device-width, initial-scale=1">        <title>Bootstrap</title>        <link rel="stylesheet" href="css/bootstrap.css" />        <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>        <script type="text/javascript" src="js/bootstrap.js"></script>    </head>    <body style="padding: 20px;">        <div class="dropdown">            <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">                Dropdown                <span class="caret"></span>            </button>            <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">                <li role="presentation">                    <a role="menuitem" tabindex="-1" href="#">Action</a>                </li>                <li role="presentation">                    <a role="menuitem" tabindex="-1" href="#">Another action</a>                </li>                <li role="presentation">                    <a role="menuitem" tabindex="-1" href="#">Something else here</a>                </li>                <li role="presentation">                    <a role="menuitem" tabindex="-1" href="#">Separated link</a>                </li>            </ul>        </div>    </body></html>

下拉菜单

菜单对齐

<!DOCTYPE html><html lang="zh-CN">    <head>        <meta charset="utf-8" />        <meta http-equiv="X-UA-Compatible" content="IE=edge">        <meta name="viewport" content="width=device-width, initial-scale=1">        <title>Bootstrap</title>        <link rel="stylesheet" href="css/bootstrap.css" />        <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>        <script type="text/javascript" src="js/bootstrap.js"></script>    </head>    <body style="padding: 20px;">        <div class="dropdown" style="width: 250px">            <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">                Dropdown                <span class="caret"></span>            </button>            <ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="dropdownMenu1">                <li role="presentation">                    <a role="menuitem" tabindex="-1" href="#">Action</a>                </li>                <li role="presentation">                    <a role="menuitem" tabindex="-1" href="#">Another action</a>                </li>                <li role="presentation">                    <a role="menuitem" tabindex="-1" href="#">Something else here</a>                </li>                <li role="presentation">                    <a role="menuitem" tabindex="-1" href="#">Separated link</a>                </li>            </ul>        </div>    </body></html>

菜单右对齐

菜单标题

<!DOCTYPE html><html lang="zh-CN">    <head>        <meta charset="utf-8" />        <meta http-equiv="X-UA-Compatible" content="IE=edge">        <meta name="viewport" content="width=device-width, initial-scale=1">        <title>Bootstrap</title>        <link rel="stylesheet" href="css/bootstrap.css" />        <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>        <script type="text/javascript" src="js/bootstrap.js"></script>    </head>    <body style="padding: 20px;">        <div class="dropdown">            <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">                Dropdown                <span class="caret"></span>            </button>            <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu2">                <li role="presentation" class="dropdown-header">Dropdown header</li>                <li role="presentation">                    <a role="menuitem" tabindex="-1" href="#">Action</a>                </li>                <li role="presentation">                    <a role="menuitem" tabindex="-1" href="#">Another action</a>                </li>                <li role="presentation">                    <a role="menuitem" tabindex="-1" href="#">Something else here</a>                </li>                <li role="presentation" class="dropdown-header">Dropdown header</li>                <li role="presentation">                    <a role="menuitem" tabindex="-1" href="#">Separated link</a>                </li>            </ul>        </div>    </body></html>

菜单标题

菜单分割线

<!DOCTYPE html><html lang="zh-CN">    <head>        <meta charset="utf-8" />        <meta http-equiv="X-UA-Compatible" content="IE=edge">        <meta name="viewport" content="width=device-width, initial-scale=1">        <title>Bootstrap</title>        <link rel="stylesheet" href="css/bootstrap.css" />        <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>        <script type="text/javascript" src="js/bootstrap.js"></script>    </head>    <body style="padding: 20px;">        <div class="dropdown" style="width: 250px">            <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">                Dropdown                <span class="caret"></span>            </button>            <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenuDivider">                <li role="presentation">                    <a role="menuitem" tabindex="-1" href="#">Action</a>                </li>                <li role="presentation">                    <a role="menuitem" tabindex="-1" href="#">Another action</a>                </li>                <li role="presentation">                    <a role="menuitem" tabindex="-1" href="#">Something else here</a>                </li>                <li role="presentation" class="divider"></li>                <li role="presentation">                    <a role="menuitem" tabindex="-1" href="#">Separated link</a>                </li>            </ul>        </div>    </body></html>

菜单分割线

禁用的菜单项

<!DOCTYPE html><html lang="zh-CN">    <head>        <meta charset="utf-8" />        <meta http-equiv="X-UA-Compatible" content="IE=edge">        <meta name="viewport" content="width=device-width, initial-scale=1">        <title>Bootstrap</title>        <link rel="stylesheet" href="css/bootstrap.css" />        <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>        <script type="text/javascript" src="js/bootstrap.js"></script>    </head>    <body style="padding: 20px;">        <div class="dropdown" style="width: 250px">            <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">                Dropdown                <span class="caret"></span>            </button>            <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu3">                <li role="presentation">                    <a role="menuitem" tabindex="-1" href="#">Regular link</a>                </li>                <li role="presentation" class="disabled">                    <a role="menuitem" tabindex="-1" href="#">Disabled link</a>                </li>                <li role="presentation">                    <a role="menuitem" tabindex="-1" href="#">Another link</a>                </li>            </ul>        </div>    </body></html>

禁用的菜单项

阅读全文

0 0