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 相关文章推荐
js 绑定带参数的事件以及手动触发事件
Apr 27 Javascript
最简单的js图片切换效果实现代码
Sep 24 Javascript
JS图片无缝滚动(简单利于使用)
Jun 17 Javascript
浏览器页面区域大小的js获取方法
Sep 21 Javascript
jQuery下拉美化搜索表单效果代码分享
Aug 25 Javascript
jQuery定义插件的方法
Dec 18 Javascript
jQuery图片轮播插件——前端开发必看
May 31 Javascript
JavaScript DOM 对象深入了解
Jul 20 Javascript
jquery实用技巧之输入框提示语句
Jul 28 Javascript
利用vue.js插入dom节点的方法
Mar 15 Javascript
微信小程序 POST请求的实例详解
Sep 29 Javascript
js循环map 获取所有的key和value的实现代码(json)
May 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
学习discuz php 引入文件的方法DISCUZ_ROOT
2009/06/21 PHP
PHP 翻页 实例代码
2009/08/07 PHP
数据库查询记录php 多行多列显示
2009/08/15 PHP
laravel 验证错误信息到 blade模板的方法
2019/09/29 PHP
汉化英文版的Dreamweaver CS5并自动提示jquery
2010/11/25 Javascript
解决javascript:window.close()在chrome,Firefox下失效的问题
2013/05/07 Javascript
javascript中的绑定与解绑函数应用示例
2013/06/24 Javascript
jquery通过visible来判断标签是否显示或隐藏
2014/05/08 Javascript
JavaScript组件焦点与页内锚点间传值的方法
2015/02/02 Javascript
JS+CSS实现DIV层的展开、收缩效果
2016/01/28 Javascript
使用jquery获取url以及jquery获取url参数的实现方法
2016/05/25 Javascript
JS简单实现点击复制链接的方法
2016/08/03 Javascript
AngularJS框架的ng-app指令与自动加载实现方法分析
2017/01/04 Javascript
es7学习教程之Decorators(修饰器)详解
2017/07/21 Javascript
JavaScript内存泄漏的处理方式
2017/11/20 Javascript
详解VSCode配置启动Vue项目
2019/05/14 Javascript
微信小程序基于Taro的分享图片功能实践详解
2019/07/12 Javascript
python Flask实现restful api service
2017/12/04 Python
Python 查看文件的编码格式方法
2017/12/21 Python
详解python函数传参是传值还是传引用
2018/01/16 Python
10分钟教你用python动画演示深度优先算法搜寻逃出迷宫的路径
2019/08/12 Python
用Python将Excel数据导入到SQL Server的例子
2019/08/24 Python
Pycharm+django2.2+python3.6+MySQL实现简单的考试报名系统
2019/09/05 Python
Python imageio读取视频并进行编解码详解
2019/12/10 Python
python操作gitlab API过程解析
2019/12/27 Python
基于pytorch的lstm参数使用详解
2020/01/14 Python
Pytorch转tflite方式
2020/05/25 Python
基于Pyinstaller打包Python程序并压缩文件大小
2020/05/28 Python
html5清空画布方法(三种)
2017/10/16 HTML / CSS
Bally澳大利亚官网:瑞士奢侈品牌
2018/11/01 全球购物
Unix如何在一行中运行多个命令
2015/05/29 面试题
学前教育教师求职自荐信
2013/09/22 职场文书
工商管理本科毕业生求职信范文
2013/10/05 职场文书
小学生母亲节演讲稿
2014/05/07 职场文书
毕业生见习报告总结
2014/11/08 职场文书
如何使用PostgreSQL进行中文全文检索
2021/05/27 PostgreSQL