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查看html源文件
Nov 08 Javascript
baidu博客的编辑友情链接的新的层窗口!经典~支持【FF】
Feb 09 Javascript
JavaScript 计算当天是本年本月的第几周
Mar 22 Javascript
JavaScript this调用规则说明
Mar 08 Javascript
6个DIV 135或246间隔一秒轮番显示效果
Jul 24 Javascript
jQuery获取同级元素的简单代码
Jul 09 Javascript
Angular2实现自定义双向绑定属性
Mar 22 Javascript
理解Angular的providers给Http添加默认headers
Jul 04 Javascript
angularjs数组判断是否含有某个元素的实例
Feb 27 Javascript
Node批量爬取头条视频并保存方法
Sep 20 Javascript
详解auto-vue-file:一个自动创建vue组件的包
Apr 26 Javascript
Vue和Flask通信的实现
May 19 Vue.js
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实现将上传word文件转为html的方法
2015/06/03 PHP
PHP 进度条函数的简单实例
2017/09/19 PHP
Laravel框架基于中间件实现禁止未登录用户访问页面功能示例
2019/01/17 PHP
JQuery 学习笔记 选择器之六
2009/07/23 Javascript
Extjs学习笔记之四 工具栏和菜单
2010/01/07 Javascript
关于JavaScript中var声明变量作用域的推断
2010/12/16 Javascript
jquery中get和post的简单实例
2014/02/04 Javascript
javascript的回调函数应用示例
2014/02/20 Javascript
JS的事件绑定深入认识
2014/06/26 Javascript
在for循环中length值是否需要缓存
2015/07/27 Javascript
基于JS如何实现给字符加千分符(65,541,694,158)
2016/08/03 Javascript
jQuery中$.ajax()方法参数解析
2016/10/22 Javascript
JS 在数组指定位置插入/删除数据的方法
2017/01/12 Javascript
Spring shiro + bootstrap + jquery.validate 实现登录、注册功能
2017/06/02 jQuery
react-native DatePicker日期选择组件的实现代码
2017/09/12 Javascript
js限制input只能输入有效的数字(第一个不能是小数点)
2018/09/28 Javascript
JS实现计算小于非负数n的素数的数量算法示例
2019/02/26 Javascript
vue路由跳转传参数的方法
2019/05/06 Javascript
vue 子组件watch监听不到prop的解决
2020/08/09 Javascript
详解Python文本操作相关模块
2017/06/22 Python
pandas 条件搜索返回列表的方法
2018/10/30 Python
pygame游戏之旅 调用按钮实现游戏开始功能
2018/11/21 Python
对Python的多进程锁的使用方法详解
2019/02/18 Python
Django中ajax发送post请求 报403错误CSRF验证失败解决方案
2019/08/13 Python
详解python安装matplotlib库三种失败情况
2020/07/28 Python
Ramy Brook官网:美国现代女装品牌
2019/06/18 全球购物
温泉秘密:Onsen Secret
2020/07/06 全球购物
电子商务专业个人的自我评价
2013/11/19 职场文书
年度评优评先方案
2014/06/03 职场文书
记账会计岗位职责
2014/06/16 职场文书
会议室标语
2014/06/21 职场文书
校本教研活动总结
2014/07/01 职场文书
向国旗敬礼学生寄语大全
2014/09/30 职场文书
python 爬取天气网卫星图片
2021/06/07 Python
Spring boot应用启动后首次访问很慢的解决方案
2021/06/23 Java/Android
Go Plugins插件的实现方式
2021/08/07 Golang