基于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 相关文章推荐
dreamweaver 安装Jquery智能提示
Apr 02 Javascript
JavaScript 用Node.js写Shell脚本[译]
Sep 20 Javascript
jquery+php实现搜索框自动提示
Nov 28 Javascript
jQuery团购倒计时特效实现方法
May 07 Javascript
在JavaScript中如何解决用execCommand(
Oct 19 Javascript
jQuery的三种bind/One/Live/On事件绑定使用方法
Feb 23 Javascript
Hexo已经看腻了,来手把手教你使用VuePress搭建个人博客
Apr 26 Javascript
vue.js实现带日期星期的数字时钟功能示例
Aug 28 Javascript
微信小程序授权登录及解密unionId出错的方法
Sep 26 Javascript
Vue项目中如何使用Axios封装http请求详解
Oct 23 Javascript
解决vue+ element ui 表单验证有值但验证失败问题
Jan 16 Javascript
Vue组件间的通信pubsub-js实现步骤解析
Mar 11 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
新浪微博OAuth认证和储存的主要过程详解
2015/03/27 PHP
php cli配置文件问题分析
2015/10/15 PHP
php 猴子摘桃的算法
2017/06/20 PHP
PHP实现获取毫秒时间戳的方法【使用microtime()函数】
2019/03/01 PHP
laravel框架使用极光推送消息操作示例
2020/02/15 PHP
JS 遮照层实现代码
2010/03/31 Javascript
jquery控制左右箭头滚动图片列表的实例
2013/05/20 Javascript
JavaScript Array对象扩展indexOf()方法
2014/05/09 Javascript
JS+DIV实现鼠标划过切换层效果的方法
2015/05/25 Javascript
jquery获取当前元素索引值用法实例
2015/06/10 Javascript
window.onload使用指南
2015/09/13 Javascript
BootstrapTable与KnockoutJS相结合实现增删改查功能【二】
2016/05/10 Javascript
url传递的参数值中包含&amp;时,url自动截断问题的解决方法
2016/08/02 Javascript
JS使用正则实现去掉字符串左右空格的方法
2016/12/27 Javascript
Node接收电子邮件的实例代码
2017/07/21 Javascript
Node.js五大应用性能技巧小结(必须收藏)
2017/08/09 Javascript
通过V8源码看一个关于JS数组排序的诡异问题
2017/08/14 Javascript
探讨Vue.js的组件和模板
2017/10/27 Javascript
完美解决axios跨域请求出错的问题
2018/02/05 Javascript
JS实现简单随机3D骰子
2019/10/24 Javascript
[40:19]完美世界DOTA2联赛PWL S3 Rebirth vs CPG 第二场 12.18
2020/12/19 DOTA
python数据结构之二叉树的建立实例
2014/04/29 Python
python3使用scrapy生成csv文件代码示例
2017/12/28 Python
Anaconda入门使用总结
2018/04/05 Python
在Python中定义一个常量的方法
2018/11/10 Python
解决django前后端分离csrf验证的问题
2019/02/03 Python
Jacobi迭代算法的Python实现详解
2019/06/29 Python
python进行参数传递的方法
2020/05/12 Python
python实现KNN近邻算法
2020/12/30 Python
英国潮流网站:END.(全球免邮)
2017/01/16 全球购物
ProBikeKit英国:在线公路自行车之家
2017/02/10 全球购物
Laura Mercier官网:彩妆大师罗拉玛斯亚的化妆品牌
2018/01/04 全球购物
大学应届生求职简历的自我评价
2013/10/08 职场文书
事业单位辞职信范文
2014/01/19 职场文书
综合实践活动方案
2014/02/14 职场文书
工程承包协议书
2014/10/20 职场文书