<!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. 非常好用的css代码格式化工具

    http://tool.lanrentuku.com/cssformat/ 可以横向排列和竖向排列,感谢互联网,让我找到你了.

  2. LINUX 11G RAC ASM磁盘组在线增加磁盘扩容

    LINUX 11G RAC ASM磁盘组在线增加磁盘扩容 1.操作系统版本 OEL 6.1 [root@cqltjcpt1 ~]# more /etc/redhat-release Red Hat E ...

  3. 关于Apache Phoenix和Cloudera结合

    1. 安装: phoenix的官网最新版4.13.2是有parcle版本的,并不需要从cloudera的labs(实验室)中下载.安装完成后,可以运行一下phoenix的shell来简单验证一下:/o ...

  4. 用Toast来增加调试效率的小技巧

    import android.content.Context; import android.widget.Toast; /** * Created by apple on 10/7/15. */ p ...

  5. syslogd日志简介***

    1.什么是syslogd syslogd是一个守护进程,这个守护进程提供了一个记录特殊事件和消息的标准机制.通俗的讲,syslogd守护进程用于解决系统守护进程的日志记录问题. syslogd记录的日 ...

  6. JSONObject转换Int类型--java.lang.Integer cannot be cast to java.lang.String

    参数 params={"abc":0} JSONObject转换Int类型 JSONObject json = JSONObject.fromObject(params); if ...

  7. linux的审计功能（audit）

    为了满足这样的需求:记录文件变化.记录用户对文件的读写,甚至记录系统调用,文件变化通知.什么是auditThe Linux Audit Subsystem is a system to Collect ...

  8. 【转】Jmeter笔记：响应断言详解

    平时我们使用jmeter进行性能测试时,经常会用到断言.jmeter提供了很多种断言,本来想全都写一下,但发现每一个断言里面的东西都很多,所以就先写一下我们经常使用的响应断言. 第一次在cnblog上 ...

  9. 事务之二：spring事务（事务管理方式，事务5隔离级别，7个事务传播行为，spring事务回滚条件）

    事物管理对于企业应用来说是至关重要的,好使出现异常情况,它也可以保证数据的一致性. spring支持编程式事务管理和声明式事务管理两种方式. 编程式事务管理使用TransactionTemplate或 ...

  10. 参数传递中编码问题（Get/Post 方式）（三）

    自己总结的:     GET方式:      1.提交方式为GET时,数据是放在请求HEADER头中的,且将数据与URL拼接后,浏览器会对拼接后的url进行编码,编码方式为浏览器默认的编码,      ...