Bootstrap编写导航栏和登陆框

2019-11-20 09:51:13

字体：大中小

来源：转载

供稿：网友

本文实例为大家分享了Bootstrap导航栏和登陆框的具体代码，供大家参考，有不足的地方请大家谅解，大家共同学习进步。

<!DOCTYPE html><html> <head>  <meta charset="utf-8">  <title></title>  <link rel="stylesheet" href="css/bootstrap.min.css" />  <script type="text/javascript" src="js/jquery.min.js" ></script>  <script type="text/javascript" src="js/bootstrap.min.js" ></script> </head>   <body> <nav class="nav navbar-default navbar-fixed-top" role="navigation">  <div class="container-fluid">   <div class="navbar-header">    <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">     <span class="icon-bar"></span>     <span class="icon-bar"></span>     <span class="icon-bar"></span>    </button>    <a href="#" class="navbar-brand">     <img src="img/mylogo.png" style="height: 50px;margin-top: -15px;"/>    </a>   </div>   <div class="collapse navbar-collapse">   <ul class="nav navbar-nav">    <li class="active"><a href="#">首页</a></li>    <li><a href="#">新闻</a></li>    <li><a href="#">产品</a></li>    <li class="dropdown">     <a href="#" class="dropdown-toggle" data-toggle="dropdown">服务<span class="caret"></span></a>     <ul class="dropdown-menu">      <li><a href="#">客服在线</a></li>      <li class="divider"></li>      <li><a href="#">常见问答</a></li>      <li class="divider"></li>             <li><a href="#">地址电话</a></li>     </ul>          </li>    <li><a href="#">商城</a></li>   </ul>       <div class="navbar-form navbar-right">    <a href="#" class="navbar-link">登陆</a>    <a href="#" class="navbar-link">注册</a>    <input type="text" class="form-control" placeholder="请输入关键字"/>    <button class="btn btn-primary">搜索</button>   </div>   </div>  </div> </nav>      <div style="height: 50px;"></div>     <div class="container">      <h1 class="page-header"><span class="glyphicon glyphicon-user"></span>用户登录</h1>   <form class="form-horizontal">    <div class="form-group">     <div class="col-md-5">      <input type="text" class="form-control" placeholder="用户名/email"/>     </div>    </div>    <div class="form-group">     <div class="col-md-5">      <input type="password" class="form-control" placeholder="密码"/>     </div>    </div>    <div class="form-group">     <div class="col-md-5">      <button class="btn btn-primary">登陆</button>     </div>    </div>           </form>  </div>  <div style="height: 1500px;"></div> </body></html>

如果大家还想深入学习，可以点击这里进行学习，再为大家附3个精彩的专题：

Bootstrap学习教程

Bootstrap实战教程

Bootstrap插件使用教程

以上就是本文的全部内容，希望对大家学习JavaScript程序设计有所帮助。

上一篇：JavaScript编写带旋转+线条干扰的验证码脚本实例

下一篇：Bootstrap+jfinal退出系统弹出确认框的实现方法