简单登录界面 bootstrap实现 带导航栏、下拉菜单

  效果图如下：

HTML代码为：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Bootstrap</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <style type="text/css">
        .panel {
            padding: 10px 15px;
            width: 600px;
        }

        body{
            background:#e6ecf0;
        }
        nav{
            background:#ffffff;
        }
        .you{
            margin-right:100px ;
        }
        .zuo{
            margin-left: 100px;
        }
    </style>
</head>
<body>

<nav class="navbar" role="navigation" >
    <div>
        <div class="navbar-header zuo">
            <a class="navbar-brand" href="#">Home</a>
        </div>
        <div>
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">About</a></li>
            </ul>
        </div>
        <div class="you">
            <ul class="nav navbar-nav navbar-right">
                <li class="dropdown">
                    <span class="nav navbar-text">language:
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                        English&nbsp;&nbsp;&nbsp;<b class="caret"></b>
                    </a>
                    <ul class="dropdown-menu">
                        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Chinese</a></li>
                        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Japanese</a></li>
                    </ul>
                    </span>
                </li>
            </ul>
        </div>
    </div>
</nav>
<div align="center">
    <div class="panel panel-default" align="left">
        <div class="panel-body" >
            <h2><strong>Log in to Twitter</strong></h2>
            <br>
            <input type="text" class="form-control" placeholder="account">
            <br>

            <input type="password" class="form-control" placeholder="password">
            <br>
            <button type="button" class="btn btn-primary">Log in</button>&nbsp;&nbsp;&nbsp;
            <input type="checkbox">&nbsp;Remember me?&nbsp;<a href="#">Forget password?</a>
        </div>
        <div class="panel-footer">
            <h4>New to Twitter? <a href="#">Sign up now &gt&gt</a></h4>

            <h4>Already using Twitter via text message? <a href="#">Activate you account &gt&gt</a></h4>
        </div>
    </div>
</div>
</body>
</html>

其中有几个要注意的点：

1、在设置导航栏右对齐并留有一定的空间时，需要使用navbar-right属性使其向右对齐，然后在调整margin-right属性即可。

2、导航栏内要设置固定标签时，如label等，可以使用span标签使之与下拉框绑定。

<div class="you">
    <ul class="nav navbar-nav navbar-right">
        <li class="dropdown">
            <span class="nav navbar-text">language:
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                English&nbsp;&nbsp;&nbsp;<b class="caret"></b>
            </a>
            <ul class="dropdown-menu">
                <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Chinese</a></li>
                <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Japanese</a></li>
            </ul>
            </span>
        </li>
    </ul>
</div>
posted @ 2019-10-10 20:30  zju_cxl  阅读(402)  评论(0)    收藏  举报