a-z

do you never to do
博客园 首页 新随笔 联系 订阅 管理
Bootstrap 导航栏和登陆框 
 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6         <link rel="stylesheet" href="css/bootstrap.min.css" />
 7         <script type="text/javascript" src="js/jquery.min.js" ></script>
 8         <script type="text/javascript" src="js/bootstrap.min.js" ></script>
 9     </head>
10     
11     <body>
12     <nav class="nav navbar-default navbar-fixed-top" role="navigation">
13         <div class="container-fluid">
14             <div class="navbar-header">
15                 <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
16                     <span class="icon-bar"></span>
17                     <span class="icon-bar"></span>
18                     <span class="icon-bar"></span>
19                 </button>
20                 <a href="#" class="navbar-brand">
21                     <img src="img/mylogo.png" style="height: 50px;margin-top: -15px;"/>
22                 </a>
23             </div>
24             <div class="collapse navbar-collapse">
25             <ul class="nav navbar-nav">
26                 <li class="active"><a href="#">首页</a></li>
27                 <li><a href="#">新闻</a></li>
28                 <li><a href="#">产品</a></li>
29                 <li class="dropdown">
30                     <a href="#" class="dropdown-toggle" data-toggle="dropdown">服务<span class="caret"></span></a>
31                     <ul class="dropdown-menu">
32                         <li><a href="#">客服在线</a></li>
33                         <li class="divider"></li>
34                         <li><a href="#">常见问答</a></li>
35                         <li class="divider"></li>
36                         
37                         <li><a href="#">地址电话</a></li>
38                     </ul>
39                     
40                 </li>
41                 <li><a href="#">商城</a></li>
42             </ul>
43             
44             <div class="navbar-form navbar-right">
45                 <a href="#" class="navbar-link">登陆</a>
46                 <a href="#" class="navbar-link">注册</a>
47                 <input type="text" class="form-control" placeholder="请输入关键字"/>
48                 <button class="btn btn-primary">搜索</button>
49             </div>
50             </div>
51         </div>
52     </nav>    
53         
54         <div style="height: 50px;"></div>
55         
56         <div class="container">            
57             <h1 class="page-header"><span class="glyphicon glyphicon-user"></span>用户登录</h1>
58             <form class="form-horizontal">
59                 <div class="form-group">
60                     <div class="col-md-5">
61                         <input type="text" class="form-control" placeholder="用户名/email"/>
62                     </div>
63                 </div>
64                 <div class="form-group">
65                     <div class="col-md-5">
66                         <input type="password" class="form-control" placeholder="密码"/>
67                     </div>
68                 </div>
69                 <div class="form-group">
70                     <div class="col-md-5">
71                        <button class="btn btn-primary">登陆</button>
72                     </div>
73                 </div>                                
74             </form>
75         </div>
76         <div style="height: 1500px;"></div>
77     </body>
78 </html>

 

posted on 2015-10-05 15:50  a-z  阅读(897)  评论(0)    收藏  举报