星空网 > 软件开发 > 网页设计

基于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="collapase 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='/images/loading.gif' data-original="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>58 <script src='/images/loading.gif' data-original="http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>59 </body>60 </html>

效果图:

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

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




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

关键词:登录

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

疫情爆发3月有余,各大电商平台都推出了哪些有利卖家的举措?:https://www.ikjzd.com/articles/121089
VC巨蟒刚被曝,现在亚马逊自营又来跟卖搞事情了?:https://www.ikjzd.com/articles/12109
亚马逊负面卖家反馈移除方法:https://www.ikjzd.com/articles/121090
赶跟卖的七大致胜之法:https://www.ikjzd.com/articles/121092
亚马逊SEO优化,如何深度挖掘核心关键词!:https://www.ikjzd.com/articles/12110
敏哥:揭秘亚马逊review的那些高阶玩儿法:https://www.ikjzd.com/articles/121107
无锡旅游景点竹海 - 无锡的竹海:https://www.vstour.cn/a/363178.html
5月贾汪好玩的地方 贾汪哪有好玩的地方:https://www.vstour.cn/a/363179.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流