基于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的图片剪切插件
Aug 03 Javascript
angularjs基础教程
Dec 25 Javascript
jQuery下拉友情链接美化效果代码分享
Aug 26 Javascript
Document.body.scrollTop的值总为零的快速解决办法
Jun 09 Javascript
js 动态给元素添加、移除事件的实现方法
Jul 19 Javascript
bootstrap选项卡扩展功能详解
Jun 14 Javascript
JavaScript解析任意形式的json树型结构展示
Jul 23 Javascript
Vue+mui实现图片的本地缓存示例代码
May 24 Javascript
vue中子组件调用兄弟组件方法
Jul 06 Javascript
Vue触发式全局组件构建的方法
Nov 28 Javascript
微信小程序公用参数与公用方法用法示例
Jan 09 Javascript
JavaScript设计模式之装饰者模式实例详解
Jan 17 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
1982年日本摄影师镜头下的中国孩子 那无忧无虑的童年
2020/03/12 杂记
一个多文件上传的例子(原创)
2006/10/09 PHP
小偷PHP+Html+缓存
2006/11/25 PHP
动易数据转成dedecms的php程序
2007/04/07 PHP
PHP 强制性文件下载功能的函数代码(任意文件格式)
2010/05/26 PHP
PHP MemCached 高级缓存应用代码
2010/08/05 PHP
允许phpmyadmin空密码登录的配置方法
2011/05/29 PHP
redis 队列操作的例子(php)
2012/04/12 PHP
详谈PHP文件目录基础操作
2014/11/11 PHP
php实现比较两个文件夹异同的方法
2015/06/18 PHP
WordPress开发中用于获取近期文章的PHP函数使用解析
2016/01/05 PHP
php实现购物车功能(以大苹果购物网为例)
2017/03/09 PHP
PHP中error_reporting函数用法详细介绍
2017/06/11 PHP
PHP基于session.upload_progress 实现文件上传进度显示功能详解
2019/08/09 PHP
Javascript日期对象的dateAdd与dateDiff方法
2008/11/18 Javascript
EXTJS FORM HIDDEN TEXTFIELD 赋值 使用value不好用的问题
2011/04/16 Javascript
BootStrap智能表单实战系列(四)表单布局介绍
2016/06/13 Javascript
Vuejs第九篇之组件作用域及props数据传递实例详解
2016/09/05 Javascript
JS防止网页被嵌入iframe框架的方法分析
2016/09/13 Javascript
BootStrap Datepicker 插件修改为默认中文的实现方法
2017/02/10 Javascript
Bootstrap table 定制提示语的加载过程
2017/02/20 Javascript
vue实现条件判断动态绑定样式的方法
2018/09/29 Javascript
[00:32]2018DOTA2亚洲邀请赛出场——LGD
2018/04/04 DOTA
浅谈numpy中np.array()与np.asarray的区别以及.tolist
2020/06/03 Python
python PIL模块的基本使用
2020/09/29 Python
python list的index()和find()的实现
2020/11/16 Python
html5定制表单_动力节点Java学院整理
2017/07/11 HTML / CSS
英国最大的汽车交易网站:Auto Trader UK
2016/09/23 全球购物
法国春天百货官网:Printemps.com
2020/06/29 全球购物
澳大利亚女装精品店:Alannah Hill
2020/07/29 全球购物
英语老师推荐信
2014/02/26 职场文书
社会治安综合治理管理责任书
2014/04/16 职场文书
五分钟演讲稿
2014/04/30 职场文书
支部书记四风问题自我剖析材料
2014/09/29 职场文书
母亲去世追悼词
2015/06/23 职场文书
Nginx反向代理配置的全过程记录
2021/06/22 Servers