基于Bootstrap实现下拉菜单项和表单导航条(两个菜单项,一个下拉菜单和登录表单导航条)

转载  2016-07-22   作者:老_蜗牛   我要评论

这篇文章主要介绍了基于Bootstrap实现下拉菜单项和表单导航条(两个菜单项,一个下拉菜单和登录表单导航条)的相关资料,需要的朋友可以参考下

效果图如下所示:

实现代码如下:

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>导航条</title>
<link rel="stylesheet" href=" //netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#menu">
<span class="sr-only"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="" class="navbar-brand">某管理系统</a>
</div>
<div class="collapase navbar-collapse" id="menu">
<ul class="nav navbar-nav">
<li class="active"><a href="#">首页</a></li>
<li class="dropdown">
<a href="#" data-toggle="dropdown" role="button">
功能
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li class="dropdown-header">业务功能</li>
<li><a href="#">信息建立</a></li>
<li><a href="#">信息查询</a></li>
<li><a href="#">信息管理</a></li>
<li role="separetor" class="divider"></li>
<li class="dropdown-header">系统功能</li>
<li><a href="#">设置</a></li>
</ul>
</li>
<li><a href="#">帮助</a></li>
</ul>
<form class="navbar-form navbar-right">
<div class="form-group">
<input type="text" class="form-control" placeholder="username">
<input type="text" class="form-control" placeholder="password">
<button type="button" class="btn btn-default">登录</button>
</div>
</form>
</div>
</div>
</nav>
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>

以上所述是小编给大家介绍的基于Bootstrap实现下拉菜单项和表单导航条(两个菜单项,一个下拉菜单和登录表单导航条),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • Javascript中级语法快速入手

    Javascript中级语法快速入手

    本文是一篇关于Javascript的中级进阶总结。小编希望大家能够在30分钟之内阅读完并认真体会,多敲代码,多总结,毕竟Javascript本身并不难。
    2016-07-07
  • JavaScript实现统计文本框Textarea字数增强用户体验

    JavaScript实现统计文本框Textarea字数增强用户体验

    现在流行的Twitter等微博客网站,有一个很好的用户体验,就是在文本框中输入文字的时候,会自动统计输入的字符,并显示用户还能输入的字符,在限制了140个字的微博客中,这样的小提示可以很好的增强用户体验,本文也尝试着实现一下
    2012-12-12
  • JavaScript中的稀疏数组与密集数组[译]

    JavaScript中的稀疏数组与密集数组[译]

    一般来说,JavaScript中的数组是稀疏的,也就是说,数组中的元素之间可以有空隙,因为一个数组其实就是一个键值映射.本文解释了如何创建稀疏数组和不稀疏的数组
    2012-09-09
  • Bootstrap3下拉菜单的实现

    Bootstrap3下拉菜单的实现

    这篇文章主要介绍了Bootstrap3下拉菜单的实现方法,非常不错,具有参考借鉴价值,需要的朋友参考下
    2017-02-02
  • JavaScript设计模式之外观模式介绍

    JavaScript设计模式之外观模式介绍

    这篇文章主要介绍了JavaScript设计模式之外观模式介绍,外观模式是用于由于子系统或程序组成较复杂而提供的一个高层界面接口,使用客户端更容易访问底层的程序或系统接口,需要的朋友可以参考下
    2014-12-12
  • Bootstrap栅格系统的使用和理解2

    Bootstrap栅格系统的使用和理解2

    这篇文章主要为大家详细介绍了关于Bootstrap栅格系统的使用和理解的学习记录,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12
  • JavaScript极简入门教程(二):对象和函数

    JavaScript极简入门教程(二):对象和函数

    这篇文章主要介绍了JavaScript极简入门教程(二):对象和函数,本文讲解了对象基础知识、函数基础知识、函数调用、异常、继承等内容,需要的朋友可以参考下
    2014-10-10
  • javascript html5摇一摇功能的实现

    javascript html5摇一摇功能的实现

    这篇文章主要为大家详细介绍了javascript html5摇一摇功能的实现过程,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-04-04
  • addRule在firefox下的兼容写法

    addRule在firefox下的兼容写法

    addRule在firefox下的兼容写法...
    2006-11-11
  • 什么是cookie?js手动创建和存储cookie

    什么是cookie?js手动创建和存储cookie

    cookie 是存储于访问者的计算机中的变量,在这个例子中我们要创建一个存储访问者名字的 cookie,需要的朋友可以参考下
    2014-05-05

最新评论