<!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>Hello World</title>

<link rel='stylesheet' href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
</head>

<body>
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">某管理系统</a>
</div>

<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">首页</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">功能<span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li class="disabled"><a href="#">业务功能</a></li>
<li><a href="#">信息建立</a></li>
<li><a href="#">信息查询</a></li>
<li><a href="#">信息管理</a></li>
<li class="divider"></li>

<li class="disabled"><a href="#">系统设置</a></li>
<li><a href="#">设置</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="用户名">

<input type="password" class="form-control" placeholder="密码">

</div>

<button type="submit" class="btn btn-default">登录</button>
</form>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</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导航菜单的更多相关文章

  1. bootstrap导航菜单，手机和PC端

    源代码 <!DOCTYPE html> <html> <head lang="en"> <meta name="viewport ...

  2. bootstrap导航菜单做active判断

    先创建2个文件,index 和about,导入bootstrap的css <div class="container"> <ul class="nav ...

  3. Angular+Bootstrap3导航菜单

    Angular+Bootstrap3导航菜单 AngularJS体验式编程系列文章,将介绍如何用angularjs构建一个强大的web前端系统.angularjs是由Google团队开发的一款非常优秀 ...

  4. 前端框架bootstrap 表单和导航菜单的 Demo（第二篇）

    表单: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <tit ...

  5. Bootstrap页面布局16 - BS导航菜单和其响应式布局以及导航中的下拉菜单

    代码: <div class='container-fluid'> <h2 class='page-header'>导航</h2> <!-- .navrbar ...

  6. Bootstrap -- 下拉菜单、输入框组、导航菜单

    Bootstrap -- 下拉菜单.输入框组.导航菜单 1. 下拉菜单 可以使用带有各种大小按钮的下拉菜单:.btn-lg..btn-sm 或 .btn-xs. 实现下拉菜单: <!DOCTYP ...

  7. BootStrap学习(3)_导航菜单

    一.导航元素 1.表格导航或标签 以一个带有 class .nav 的无序列表开始. 添加 class .nav-tabs. <!DOCTYPE html> <html xmlns= ...

  8. Bootstrap学习笔记（5）--实现Bootstrap导航条可点击和鼠标悬停显示下拉菜单

    实现Bootstrap导航条可点击和鼠标悬停显示下拉菜单 微笑的鱼 2014-01-03 Bootstrap 5,281 次围观 11条评论 使用Bootstrap导航条组件时,如果你的导航条带有下拉 ...

  9. Bootstrap学习-菜单-按钮-导航

    1.下拉菜单(基本用法) 在使用Bootstrap框架的下拉菜单时,必须调用Bootstrap框架提供的bootstrap.js文件.当然,如果你使用的是未编译版本,在js文件夹下你能找到一个名为“d ...

随机推荐

  1. 十三、python沉淀之路--文件操作

    一.文件的读操作 例1 f = open('学习',encoding='utf-8') #首先要打开文件,不然直接读,是读不出来的 data = f.read() #read后的括号里不添加任何东西 ...

  2. Python 函数 set()

    set() 功能:       set() 函数创建一个无序不重复元素集,可进行关系测试,删除重复数据,还可以计算交集.差集.并集等. iterable -- 可迭代对象对象:返回新的集合对象. 语法 ...

  3. find 使用指南

    find 使用方法整理 -name  按照文件名查找文件. -perm  按照文件权限来查找文件. -user  按照文件属主来查找文件. -group  按照文件所属的组来查找文件. - n表示文件 ...

  4. 【转】Jmeter内存溢出处理方式记录

    方法一: 使用jmeter进行压力测试时 遇到一段时间后报内存溢出outfmenmory错误,导致jmeter卡死了,先尝试在jmeter.bat中增加了JVM_ARGS="- Xmx204 ...

  5. java里的switch循环--你妹考试落榜了

    总结:switch循环,不用break.那么程序每一个case都会运行到,直到遇到break停止 package com.aa; //格子区域 //3行3列的格子 public class Bu { ...

  6. WIN10运行软件，窗口不显示（移动到屏幕外无法复原）的解决办法 Lebal:bug10解决方案

    双显示器切换回单显示器的时候,可能会遇到窗口移动到屏幕外不显示的情况 像这样虽然有缩略图但是点击无反应,并且平铺窗口也不管用,这个时候单击该窗口,Alt+space 执行最小化以及最大化操作即可复原

  7. 在rac集群上开启OEM

    由于安装rac的时候没有开启oem,这里开启oem,方便管理 [oracle@rac01 ~]$ emca -config dbcontrol db -repos create -cluster ST ...

  8. 不同浏览器对于html5 audio标签和音频格式的兼容性

    音频格式 Chrome Firefox IE9 Opera Safari OGG 支持 支持 支持 支持 不支持 MP3 支持 不支持 支持 不支持 支持 WAV 不支持 支持 不支持 支持 不支持 ...

  9. JS判断IE,FF,Opera,Safari等浏览器类型

    第一种,只区分浏览器,不考虑版本 function myBrowser(){ var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串 var ...

  10. 「小程序JAVA实战」微信小程序工程结构了解（五）

    转自:https://idig8.com/2018/08/09/xiaochengxu-chuji-05/ 微信小程序工程结构 audio,button,canvas,checkbox 都是由4个文件 ...