Bootstrap编写导航栏和登陆框


Posted in Javascript onMay 30, 2016

本文实例为大家分享了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个精彩的专题:

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

Javascript 相关文章推荐
JavaScript实现快速排序的方法
Jul 31 Javascript
bootstrap fileinput完整实例分享
Nov 08 Javascript
正则验证小数点后面只能有两位数的方法
Feb 28 Javascript
JavaScript设计模式之单例模式详解
Jun 09 Javascript
微信小程序图片宽100%显示并且不变形
Jun 21 Javascript
详解Vue-Cli 异步加载数据的一些注意点
Aug 12 Javascript
深入理解Node.js中通用基础设计模式
Sep 19 Javascript
jQuery 获取除某指定对象外的其他对象 ( :not() 与.not())
Oct 10 jQuery
JS前端知识点offset,scroll,client,冒泡,事件对象的应用整理总结
Jun 27 Javascript
JS 实现发送短信验证码的“59秒后重新发送验证短信”功能
Aug 23 Javascript
JS阻止事件冒泡的方法详解
Aug 26 Javascript
vue项目中监听手机物理返回键的实现
Jan 18 Javascript
Bootstrap+jfinal退出系统弹出确认框的实现方法
May 30 #Javascript
Bootstrap+jfinal实现省市级联下拉菜单
May 30 #Javascript
基于Bootstrap里面的Button dropdown打造自定义select
May 30 #Javascript
BootStrap下jQuery自动完成的样式调整
May 30 #Javascript
JavaScript常用判断写法大全(推荐)
May 30 #Javascript
基于AngularJs + Bootstrap + AngularStrap相结合实现省市区联动代码
May 30 #Javascript
基于Angularjs实现分页功能
May 30 #Javascript
You might like
PHP数组对比函数,存在交集则返回真,否则返回假
2011/02/03 PHP
Java中final关键字详解
2015/08/10 PHP
php的PDO事务处理机制实例分析
2017/02/16 PHP
javascript 动态添加表格行
2006/06/22 Javascript
滚动经典最新话题[prototype框架]下编写
2006/10/03 Javascript
Add Formatted Data to a Spreadsheet
2007/06/12 Javascript
window.onbeforeunload方法在IE下无法正常工作的解决办法
2010/01/23 Javascript
javascript与CSS复习(《精通javascript》)
2010/06/29 Javascript
jquery插件珍藏(图片局部放大/信息提示框)
2013/01/08 Javascript
解决checkbox的attr(checked)一直为undefined问题
2014/06/16 Javascript
jQuery类选择器用法实例
2014/12/23 Javascript
js实现屏幕自适应局部代码分享
2015/01/30 Javascript
JS截取字符串实例详解
2015/11/24 Javascript
jquery实现删除一个元素后面的所有元素功能
2015/12/21 Javascript
微信小程序 教程之小程序配置
2016/10/17 Javascript
Angularjs过滤器实现动态搜索与排序功能示例
2017/12/13 Javascript
Vue-CLI3.x 设置反向代理的方法
2018/12/06 Javascript
js回调函数原理与用法案例分析
2020/03/04 Javascript
详解Vue3 Composition API中的提取和重用逻辑
2020/04/29 Javascript
jQuery实现鼠标滑动切换图片
2020/05/27 jQuery
微信小程序实现音乐播放页面布局
2020/12/11 Javascript
[09:43]DOTA2每周TOP10 精彩击杀集锦vol.5
2014/06/25 DOTA
跟老齐学Python之集合的关系
2014/09/24 Python
python中numpy.zeros(np.zeros)的使用方法
2017/11/07 Python
python 装饰器功能与用法案例详解
2020/03/06 Python
解决Alexnet训练模型在每个epoch中准确率和loss都会一升一降问题
2020/06/17 Python
Python‘==‘ 及 ‘is‘相关原理解析
2020/09/05 Python
新西兰最大的在线设计师眼镜店:SmartBuyGlasses新西兰
2017/10/20 全球购物
工地资料员岗位职责
2013/12/31 职场文书
法制宣传月活动方案
2014/05/11 职场文书
青春飞扬演讲稿
2014/09/11 职场文书
竞选学委演讲稿
2014/09/13 职场文书
趣味运动会广播稿
2014/09/13 职场文书
秋季运动会开幕词
2015/01/28 职场文书
2015年学校团委工作总结
2015/05/26 职场文书
2019年消防宣传标语集锦
2019/11/21 职场文书