正文

bootstrap_下拉菜单+头部

IP云
IP云V管理员/5 阅读
12/01
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示
<!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>

相关阅读

目录[+]