bootstrap实现下拉菜单

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>

简单的下拉菜单框
效果如图:
bootstrap实现下拉菜单_第1张图片
1.title标签:该网页标题

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

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

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

5.div标签:

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

2)标签:定义无序列表,该列表中dropdown-menu类规定该列表是下拉菜单形式,aria-labelledy属性规定当获取鼠标焦点时,屏幕阅读器会读出指定id元素的文本内容;用

  • 标签将每一个菜单项目分开,divider类规定了一个分隔线。

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

  • 你可能感兴趣的:(bootstrap实现下拉菜单)