bootstrap实现下拉菜单_bootstrap将有序列表中的每一项设置下拉菜单 ---CSDN博客

本文链接：https://blog.csdn.net/qq_43039693/article/details/82708879

bootstrap布局组件

<html>
<head>
    <title>下拉菜单</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="dropdown">
    <button type="button" class="btn dropdown-toggle" id="downMenu1"  data-toggle="dropdown">
        目的地
    </button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="downMenu1">
        <li role="presentation">
            <a role="menuitem" href="">热门搜索</a>
        <li role="presentation" class="divider"></li> 
        <li role="presentation">
            <a role="menuitem" href="">杭州</a>
        </li>
        <li role="presentation">
            <a role="menuitem" href="">北京</a>
        </li>
        <li role="presentation">
            <a role="menuitem" href="">上海</a>
        </li>
        <li role="presentation">
            <a role="menuitem" href="">南京</a>
        </li>
        <li role="presentation">
            <a role="menuitem" href="">西安</a>
        </li>
    </ul>
</div>

</body>
</html>

简单的下拉菜单框
效果如图：
这里写图片描述
1.title标签：该网页标题

2.link标签：引用外部样式表，需要使用href属性定义外部链接，该链接指向一个css文件；rel属性指定被链接文档与当前文档的关系，stylesheet指定被链接文档是外部样式表。

3.scripet标签：引入脚本，本例中引入javascript代码，在引入bootstrap之前需要先用script引入jQuery.

4.引入外部样式表需要在head标签里定义。

5.div标签：

1）<botton>标签：定义一个按钮，在button元素内，可以放入图片和文本，与<input type="button">不同的是，<button> 与 </button>之间的所有内容都是按钮的内容，包括任何可接受的正文内容，如文本或多媒体。最好为button组件规定type属性。class 属性引用了bootstrap辅助类，该类中规定了按钮的样式，data-toggle属性规定了将该按钮属性转换成下拉菜单属性，点击按钮时会出现下拉菜单。caret类在按钮中插入下拉箭头。

2）<ui>标签：定义无序列表，该列表中dropdown-menu类规定该列表是下拉菜单形式，aria-labelledy属性规定当获取鼠标焦点时，屏幕阅读器会读出指定id元素的文本内容；用<li>标签将每一个菜单项目分开，divider类规定了一个分隔线。

**利用bootstrap编写页面可以使用事先规定好的辅助类，这些辅助类事先规定好了相关样式，可以减少很多代码段。