编程 Javascript

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

Posted in Javascript onJuly 22, 2016

效果图如下所示：

实现代码如下：

<!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实现下拉菜单项和表单导航条(两个菜单项，一个下拉菜单和登录表单导航条)，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持！

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

- Author -

老_蜗牛

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

jquery tools 系列 scrollable（2）

Sep 06 Javascript

jquery下将选择的checkbox的id组成字符串的方法

Nov 28 Javascript

基于jquery库的tab新形式使用

Nov 16 Javascript

JS Date函数整理方便使用

Oct 23 Javascript

jQuery中insertAfter()方法用法实例

Jan 08 Javascript

jQuery实现鼠标悬停背景翻转的黑色导航菜单代码

Sep 14 Javascript

在AngularJS中如何使用谷歌地图把当前位置显示出来

Jan 25 Javascript

javascript使用Promise对象实现异步编程

Mar 01 Javascript

js 动态给元素添加、移除事件的实现方法

Jul 19 Javascript

js获取当前时间(昨天、今天、明天)

Nov 23 Javascript

TypeScript之调用栈的实现

Dec 31 Javascript

AJAX实现省市县三级联动效果

Oct 16 Javascript

JavaScript中的Reflect对象详解(ES6新特性)

Jul 22 #Javascript

JavaScript结合Bootstrap仿微信后台多图文界面管理

Jul 22 #Javascript

详细探究ES6之Proxy代理

Jul 22 #Javascript

jquery常用的12个小功能

Jul 22 #Javascript

BootStrap 附加导航组件

Jul 22 #Javascript

jquery checkbox无法用attr()二次勾选问题的解决方法

Jul 22 #Javascript

Select下拉框模糊查询功能实现代码

Jul 22 #Javascript