bootstrap_下拉菜单+头部

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了bootstrap_下拉菜单+头部相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- 处理低版本IE 4.0不考虑IE8 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 移动端视口的设置 -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 引入bootstrap.css -->
    <link rel="stylesheet" href="css/bootstrap.css">
    <script src="js/jquery-1.11.3.min.js"></script>
    <script src="js/bootstrap.js"></script>

    <style>
        #login{ 
            width:400px;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="dropdown">
        <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
        Dropdown
        <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li><a href="#">Separated link</a></li>
        </ul>
    </div>
</div>
<br>
<br>
<div class="container">
    <ul class="nav nav-tabs">
        <li class="active"><a href="#">one</a></li>
        <li><a href="#">two</a></li>
        <li><a href="#">three</a></li>
    </ul>
    <br>
    <ul class="nav nav-tabs" style="width:400px;">
        <li class="active"><a href="#">one</a></li>
        <li><a href="#">two</a></li>
        <li><a href="#">three</a></li>
    </ul>
    <br>
    <ul class="nav nav-tabs nav-justified" style="width:400px;">
        <li class="active"><a href="#">one</a></li>
        <li><a href="#">two</a></li>
        <li><a href="#">three</a></li>
    </ul>
    <br>
    <ul class="nav nav-tabs nav-tabs-justified">
        <li class="active"><a href="#">one</a></li>
        <li><a href="#">two</a></li>
        <li><a href="#">three</a></li>
    </ul>
    <br>
    <ul class="nav nav-pills">
        <li class="active"><a href="#">one</a></li>
        <li><a href="#">two</a></li>
        <li><a href="#">three</a></li>
    </ul>
</div>
</body>
<script>
    /*
         下拉菜单
             属性
                 — data-*
                 — aria-*
                 — rolr
                 open                显示下拉菜单
                 dropdown-menu-right   下拉菜单右浮动
                 dropdown-header   下拉头部
                 divider  分割线
        标签页
            头部
                — nav
                — nav-tabs 不适合竖状展示
                — nav-justified 端点对齐
                — nav-tabs-justified 
                — nav-pills 圆角
                — nav-stacked 竖状菜单
                — 带下拉菜单的头部
                
     */
</script>

 

以上是关于bootstrap_下拉菜单+头部的主要内容，如果未能解决你的问题，请参考以下文章

BootStrap笔记-下拉菜单的使用

Bootstrap 下拉菜单在悬停时关闭

[Bootstrap入门][组件-下拉菜单]

Bootstrap 下拉菜单显示在右侧

Bootstrap 4 导航栏下拉菜单链接

动画下拉菜单 Bootstrap 4