zoukankan      html  css  js  c++  java
  • 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="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="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>
  • 相关阅读:
    站立会议 第十天
    站立会议 第十天
    找水王
    购买《哈利波特》书籍
    站立会议第三天
    站立会议第二天
    冲刺会议第一天
    补发《超级迷宫》站立会议五
    补发《超级迷宫》站立会议四
    课堂练习之求1到N之间的数里面含有1的个数
  • 原文地址:https://www.cnblogs.com/xiaozhishang/p/5280434.html
Copyright © 2011-2022 走看看