专注收集记录技术开发学习笔记、技术难点、解决方案
网站信息搜索 >> 请输入关键词:
您当前的位置: 首页 > HTML/CSS

基于Bootstrap实现下图所示成效的页面,一个白底的带有两个菜单项、一个下拉菜单和一个登录表单的基本导航条

发布时间:2010-05-20 14:01:29 文章来源:www.iduyao.cn 采编人员:星星草
基于Bootstrap实现下图所示效果的页面,一个白底的带有两个菜单项、一个下拉菜单和一个登录表单的基本导航条
 1 <!DOCTYPE html> 2 <html lang="zh-cn"> 3 <head> 4 <meta charset="utf-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1"> 7 <title>导航条</title> 8 <link rel="stylesheet" href=" //netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> 9 10 </head>11 12 <body>13 <nav class="navbar navbar-default navbar-fixed-top" role="navigation">14   <div class="container">15     <div class="navbar-header">16       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#menu">17         <span class="sr-only"></span>18         <span class="icon-bar"></span>19         <span class="icon-bar"></span>20         <span class="icon-bar"></span>21       </button>22       <a href="" class="navbar-brand">某管理系统</a>23     </div>24 25     <div class="collapse navbar-collapse" id="menu">26       <ul class="nav navbar-nav">27         <li class="active"><a href="#">首页</a></li>28         <li class="dropdown">29           <a href="#" data-toggle="dropdown" role="button">30             功能31             <span class="caret"></span>32           </a>33           <ul class="dropdown-menu">34             <li class="dropdown-header">业务功能</li>35             <li><a href="#">信息建立</a></li>36             <li><a href="#">信息查询</a></li>37             <li><a href="#">信息管理</a></li>38             <li role="separetor" class="divider"></li>39             <li class="dropdown-header">系统功能</li>40             <li><a href="#">设置</a></li>41           </ul>42         </li>43         <li><a href="#">帮助</a></li>44       </ul>45       <form class="navbar-form navbar-right">46         <div class="form-group">47           <input type="text" class="form-control" placeholder="username">48           <input type="text" class="form-control" placeholder="password">49           <button type="button" class="btn btn-default">登录</button>50         </div>51       </form>52     </div>53   </div>54 </nav>55 56 57 <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>58 <script src="http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>59 </body>60 </html>

效果图:

此文学习于慕课网,仅供自己学习记录,如有不对请纠正。

友情提示:
信息收集于互联网,如果您发现错误或造成侵权,请及时通知本站更正或删除,具体联系方式见页面底部联系我们,谢谢。

其他相似内容:

热门推荐: