基于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的气泡提示效果
May 31 Javascript
判断javascript的数据类型(示例代码)
Dec 11 Javascript
JS实现静止元素自动移动示例
Apr 14 Javascript
浅谈javascript中自定义模版
Jan 29 Javascript
AngularJS控制器继承自另一控制器
May 09 Javascript
Javascript发送AJAX请求实例代码
Aug 21 Javascript
微信小程序实现滑动删除效果
May 19 Javascript
JavaScript根据json生成html表格的示例代码
Oct 24 Javascript
JavaScript键盘事件响应顺序详解
Sep 30 Javascript
阿望教你用vue写扫雷小游戏
Jan 20 Javascript
Vue实现图片轮播组件思路及实例解析
May 11 Javascript
Javascript节流函数throttle和防抖函数debounce
Dec 03 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
全国FM电台频率大全 - 20 广西省
2020/03/11 无线电
有道搜索和IP138的IP的API接口(PHP应用)
2012/11/29 PHP
php 模拟get_headers函数的代码示例
2013/04/27 PHP
PHP 5.5 创建和验证哈希最简单的方法详解
2013/11/07 PHP
laravel通用化的CURD的实现
2019/12/13 PHP
js 可拖动列表实现代码
2011/12/13 Javascript
js实现完全自定义可带多级目录的网页鼠标右键菜单方法
2015/02/28 Javascript
JavaScript声明变量名的语法规则
2015/07/10 Javascript
JavaScript检查子字符串是否在字符串中的方法
2016/02/03 Javascript
JavaScript递归操作实例浅析
2016/10/31 Javascript
JS作用域闭包、预解释和this关键字综合实例解析
2016/12/16 Javascript
JS实现求数组起始项到终止项之和的方法【基于数组扩展函数】
2017/06/13 Javascript
详解react-router如何实现按需加载
2017/06/15 Javascript
解决AjaxFileupload 上传时会出现连接重置的问题
2017/07/07 Javascript
JS设计模式之访问者模式定义与用法分析
2018/02/05 Javascript
详解React项目的服务端渲染改造(koa2+webpack3.11)
2018/03/19 Javascript
原生JS实现$.param() 函数的方法
2018/08/10 Javascript
详解create-react-app 2.0版本如何启用装饰器语法
2018/10/23 Javascript
基于vue开发微信小程序mpvue-docs跳转页面功能
2019/04/10 Javascript
python 多进程通信模块的简单实现
2014/02/20 Python
在Python中使用SQLite的简单教程
2015/04/29 Python
从CentOS安装完成到生成词云python的实例
2017/12/01 Python
python 实现手机自动拨打电话的方法(通话压力测试)
2019/08/08 Python
PyCharm配置anaconda环境的步骤详解
2020/07/31 Python
Python脚本调试工具安装过程
2021/01/11 Python
python利用appium实现手机APP自动化的示例
2021/01/26 Python
德国狗狗用品在线商店:Schecker
2017/03/17 全球购物
Ajax的优点和缺点
2014/11/21 面试题
文明家庭先进事迹材
2014/01/27 职场文书
基层工作经历证明
2015/06/19 职场文书
企业安全隐患排查治理制度
2015/08/05 职场文书
安全生产奖惩制度
2015/08/06 职场文书
SqlServer数据库远程连接案例教程
2021/07/15 SQL Server
十大最强奥特曼武器:怪兽战斗仪在榜,第五奥特之父只使用过一次
2022/03/18 日漫
ipad隐藏软件app图标方法
2022/04/19 数码科技
MySQL脏读,幻读和不可重复读
2022/05/11 MySQL