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面向对象特性代码实例
Jun 12 Javascript
angularjs学习笔记之简单介绍
Sep 26 Javascript
多种JQuery循环滚动文字图片效果代码
Jun 23 Javascript
浅谈JS函数定义方式的区别
Oct 30 Javascript
微信小程序 wxapp内容组件 icon详细介绍
Oct 31 Javascript
Bootstrap 模态框(Modal)插件代码解析
Dec 21 Javascript
js中apply与call简单用法详解
Nov 06 Javascript
JS获取浏览器地址栏的多个参数值的任意值实例代码
Jul 24 Javascript
Javascript实现一朵从含苞到绽放的玫瑰
Mar 30 Javascript
解决一个微信号同时支持多个环境网页授权问题
Aug 07 Javascript
微信小程序12行js代码自己写个滑块功能(推荐)
Jul 15 Javascript
vue实现点击按钮“查看详情”弹窗展示详情列表操作
Sep 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
配置Apache2.2+PHP5+CakePHP1.2+MySQL5运行环境
2009/04/25 PHP
PHP 翻页 实例代码
2009/08/07 PHP
php无限遍历文件夹示例分享
2014/03/04 PHP
php中Array2xml类实现数组转化成XML实例
2014/12/08 PHP
php将数组存储为文本文件方法汇总
2015/10/28 PHP
Laravel实现短信注册的示例代码
2018/05/29 PHP
php实现支付宝当面付(扫码支付)功能
2018/05/30 PHP
PDO::getAvailableDrivers讲解
2019/01/28 PHP
javascript中运用闭包和自执行函数解决大量的全局变量问题
2010/12/30 Javascript
Bootstrap精简教程中秋大放送
2016/09/15 Javascript
JavaScript数据结构之二叉树的查找算法示例
2017/04/13 Javascript
详解vue.js 开发环境搭建最简单攻略
2017/06/12 Javascript
微信小程序模板和模块化用法实例分析
2017/11/28 Javascript
Phaser.js实现简单的跑酷游戏附源码下载
2018/10/26 Javascript
JavaScript使用类似break机制中断forEach循环的方法
2018/11/13 Javascript
微信小程序学习笔记之获取位置信息操作图文详解
2019/03/29 Javascript
在微信小程序中使用mqtt服务的方法
2019/12/13 Javascript
微信小程序仿抖音视频之整屏上下切换功能的实现代码
2020/05/24 Javascript
Python的Tornado框架实现异步非阻塞访问数据库的示例
2016/06/30 Python
Python使用matplotlib实现绘制自定义图形功能示例
2018/01/18 Python
python实现黑客字幕雨效果
2018/06/21 Python
python去除拼音声调字母,替换为字母的方法
2018/11/28 Python
通过Python编写一个简单登录功能过程解析
2019/09/04 Python
python中web框架的自定义创建
2019/09/08 Python
python的range和linspace使用详解
2019/11/27 Python
python 实现dict转json并保存文件
2019/12/05 Python
Pytorch 的损失函数Loss function使用详解
2020/01/02 Python
python读取多层嵌套文件夹中的文件实例
2020/02/27 Python
法国美发器材和产品购物网站:Beauty Coiffure
2016/12/05 全球购物
阿迪达斯俄罗斯官方商城:adidas俄罗斯
2017/03/08 全球购物
澳洲女装时尚在线:Blue Bungalow
2018/05/05 全球购物
高等教育学自荐书范文
2014/02/10 职场文书
高中课前三分钟演讲稿
2014/08/18 职场文书
小学生国庆节演讲稿
2014/09/05 职场文书
孔繁森观后感
2015/06/10 职场文书
MySQL数据库如何给表设置约束详解
2022/03/13 MySQL