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 preload&amp;lazy load
May 13 Javascript
jQuery EasyUI API 中文文档 DateTimeBox日期时间框
Oct 16 Javascript
[JSF]使用DataModel处理表行事件的实例代码
Aug 05 Javascript
js获取鼠标点击的位置实现思路及代码
May 09 Javascript
JavaScript的各种常见函数定义方法
Sep 16 Javascript
jQuery height()、innerHeight()、outerHeight()函数的区别详解
May 23 Javascript
使用vue编写一个点击数字计时小游戏
Aug 31 Javascript
js HTML5手机刮刮乐代码
Sep 29 Javascript
Canvas实现放射线动画效果
Feb 15 Javascript
js脚本编写简单刷票投票系统
Jun 27 Javascript
解决vue2中使用axios http请求出现的问题
Mar 05 Javascript
在mpvue框架中使用Vant WeappUI组件库的注意事项【推进】
Jun 09 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实现字符串翻转的方法
2015/03/27 PHP
PHP使用OB缓存实现静态化功能示例
2019/03/23 PHP
laravel框架数据库操作、查询构建器、Eloquent ORM操作实例分析
2019/12/20 PHP
动态为事件添加js代码示例
2009/02/15 Javascript
JavaScript 参数中的数组展开 [译]
2012/09/21 Javascript
onmouseover和onmouseout的一些问题思考
2013/08/14 Javascript
javascript使用百度地图api和html5特性获取浏览器位置
2014/01/10 Javascript
js charAt的使用示例
2014/02/18 Javascript
node.js中的fs.fstat方法使用说明
2014/12/15 Javascript
JSONP之我见
2015/03/24 Javascript
详解JavaScript基于面向对象之继承实例
2015/12/16 Javascript
js实现图片无缝滚动
2015/12/23 Javascript
移动端滑动插件Swipe教程
2016/10/16 Javascript
Javascript中的神器——Promise
2017/02/08 Javascript
Javascript前端经典的面试题及答案
2017/03/14 Javascript
Angular模板表单校验方法详解
2017/08/11 Javascript
浅谈vue的props,data,computed变化对组件更新的影响
2018/01/16 Javascript
基于webpack.config.js 参数详解
2018/03/20 Javascript
JavaScript+HTML5 canvas实现放大镜效果完整示例
2019/05/15 Javascript
element-ui 中使用upload多文件上传只请求一次接口
2019/07/19 Javascript
JavaScript设计模式之门面模式原理与实现方法分析
2020/03/09 Javascript
详解uniapp的全局变量实现方式
2021/01/11 Javascript
[04:13]2014DOTA2国际邀请赛 专访DC目前形势不容乐观
2014/07/12 DOTA
[01:18:45]DOTA2-DPC中国联赛 正赛 DLG vs Dragon BO3 第三场2月1日
2021/03/11 DOTA
python实现爬虫统计学校BBS男女比例(一)
2015/12/31 Python
Python单元和文档测试实例详解
2019/04/11 Python
Python实现多态、协议和鸭子类型的代码详解
2019/05/05 Python
Python实现通过解析域名获取ip地址的方法分析
2019/05/17 Python
python用线性回归预测股票价格的实现代码
2019/09/04 Python
如何用Python进行时间序列分解和预测
2021/03/01 Python
巴西Mr. Cat在线商店:购买包包和鞋子
2019/09/08 全球购物
精彩广告词大全
2014/03/19 职场文书
大学第二课堂活动总结
2014/07/08 职场文书
2014年药店店长工作总结
2014/11/17 职场文书
Redis基本数据类型String常用操作命令
2022/06/01 Redis
macos系统如何实现微信双开? mac登录两个微信以上微信的技巧
2022/07/23 数码科技