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


Posted in Javascript onJuly 22, 2016

效果图如下所示:

基于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 相关文章推荐
jQuery学习笔记之Helloworld
Dec 22 Javascript
jQuery 数据缓存模块进化史详细介绍
Nov 19 Javascript
解析javascript 实用函数的使用详解
May 10 Javascript
JQuery拖动表头边框线调整表格列宽效果代码
Sep 10 Javascript
基于Bootstrap3表格插件和分页插件实例详解
May 17 Javascript
JQuery实现DIV其他动画效果的简单实例
Sep 18 Javascript
VUE JS 使用组件实现双向绑定的示例代码
Jan 10 Javascript
利用Plupload.js解决大文件上传问题, 带进度条和背景遮罩层
Mar 15 Javascript
vue实现在表格里,取每行的id的方法
Mar 09 Javascript
vue移动端轻量级的轮播组件实现代码
Jul 12 Javascript
vue实现select下拉显示隐藏功能
Sep 30 Javascript
JavaScript实现单点登录的示例
Sep 23 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
You might like
php循环创建目录示例分享(php创建多级目录)
2014/03/04 PHP
php实现随机显示图片方法汇总
2015/05/21 PHP
PHP 使用 Imagick 裁切/生成缩略图/添加水印自动检测和处理 GIF
2016/02/19 PHP
使用php完成常见的文件上传功能(推荐)
2017/01/13 PHP
javascript dom代码应用 简单的相册[firefox only]
2010/06/12 Javascript
JavaScript中常用的运算符小结
2012/01/18 Javascript
JavaScript生成GUID的多种算法小结
2013/08/18 Javascript
让jQuery与其他JavaScript库并存避免冲突的方法
2013/12/23 Javascript
javascript中Function类型详解
2015/04/28 Javascript
confirm确认对话框的实现方法总结
2016/06/17 Javascript
Angularjs使用ng-repeat中$even和$odd属性的注意事项
2016/12/31 Javascript
如何使用Bootstrap 按钮实例详解
2017/03/29 Javascript
jQuery实现可编辑表格并生成json结果(实例代码)
2017/07/19 jQuery
jQuery实现的页面详情展开收起功能示例
2018/06/11 jQuery
JS中比较两个Object数组是否相等方法实例
2019/11/11 Javascript
微信小程序实现单个卡片左滑显示按钮并防止上下滑动干扰功能
2019/12/06 Javascript
浅谈JavaScript 声明提升
2020/09/14 Javascript
python创建线程示例
2014/05/06 Python
CentOS中升级Python版本的方法详解
2017/07/10 Python
Python列表list排列组合操作示例
2018/12/18 Python
python下的opencv画矩形和文字注释的实现方法
2019/07/09 Python
如何通过python的fabric包完成代码上传部署
2019/07/29 Python
python调用jenkinsAPI构建jenkins,并传递参数的示例
2020/12/09 Python
举例讲解Python装饰器
2020/12/24 Python
荷兰在线啤酒店:Beerwulf
2019/08/26 全球购物
四年大学自我鉴定
2014/02/17 职场文书
计算机通信专业推荐信
2014/02/22 职场文书
环卫工人先进事迹材料
2014/06/02 职场文书
经营目标管理责任书
2014/07/25 职场文书
计划生育证明格式范本
2014/09/12 职场文书
有限责任公司股东合作协议书范本
2014/10/30 职场文书
2014年转正工作总结
2014/11/08 职场文书
勤俭节约倡议书范文
2015/04/29 职场文书
高老头读书笔记
2015/06/30 职场文书
mysql升级到5.7时,wordpress导数据报错1067的问题
2021/05/27 MySQL
html5+实现plus.io进行拍照和图片等获取
2022/06/01 HTML / CSS