<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="X-UA-Compatible"content="IE-edge" />
<meta name="viewport"content="width=device-width,initial-scale=1.0" />
<title>Bootstrap历练实例：响应式导航(带有表单)</title>
<meta charset="utf-8" />
<!--[if lt IE 9]-->
<script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<script src="http://apps.bdimg.com/libs/respond.js/1.4.2/respond.js"></script>
<!--[endif]-->
<link rel="stylesheet"href="bootstrap-3.3.5/dist/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"data-toggle="collapse"data-target="#navbar">
<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="navbar-collapse collapse"id="navbar">
<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><a href="#">业务功能</a></li>
<li><a href="#">信息建立</a></li>
<li><a href="#">信息查询</a></li>
<li><a href="#">信息管理</a></li>
<li class="divider"></li>
<li><a href="#">系统功能</a></li>
<li><a href="#">系统设置</a></li>
</ul>
</li>
<li><a href="#">帮助</a></li>
</ul>
<form class="navbar-form navbar-right"role="form">
<div class="form-group">
<input type="text"class="form-control" placeholder="用户名"/>
<input type="text"class="form-control"placeholder="密码" />
</div>
<button type="submit" class="btn btn-default">登录</button>
</form>
</div>
</div>

</nav>
<script src="jQuery/jquery-2.1.4.js"></script>
<script src="bootstrap-3.3.5/dist/js/bootstrap.min.js"></script>
</body>
</html>

Bootstrap历练实例：响应式导航(带有表单)的更多相关文章

  1. Bootstrap历练实例：激活导航状态

    激活导航状态 您可以在激活状态的胶囊式导航和列表导航中放置徽章.通过使用 <span class="badge"> 来激活链接,如下面的实例所示: <!DOCTY ...

  2. 第二百五十节，Bootstrap项目实战--响应式导航

    Bootstrap项目实战--响应式导航 学习要点: 1.响应式导航 一．响应式导航 基本导航组件+响应式 第一步,声明导航区域,设置导航默认样式,设置导航条固定在顶部navbar样式class类,写 ...

  3. Bootstrap组件之响应式导航条

    响应式导航条:在PC和平板中默认要显示所有的内容:但在手机中导航条中默认只显示“LOGO/Brand”,以及一个“菜单折叠展开按钮”,只有单击折叠按钮后才显示所有的菜单项. 基础class: .nav ...

  4. BootStrap实现简单响应式导航菜单

    用BootStrap实现响应式导航栏,我会对其中的一些样式进行说明.   先上代码,是一个很简单的Demo. <!doctype html> <html> <head&g ...

  5. Bootstrap历练实例：响应式导航栏

    响应式的导航栏 为了给导航栏添加响应式特性,您要折叠的内容必须包裹在带有 classes .collapse..navbar-collapse 的 <div> 中.折叠起来的导航栏实际上是 ...

  6. Bootstrap历练实例：响应式导航

    <!DOCTYPE html><html lang="zh-cn"><head><meta http-equiv="Conten ...

  7. bootstrap历练实例：标签式的导航菜单

    本章将讲解bootstrap提供的用于定义导航元素的一些选项,它使用相同的标签和基类.nav.Bootsrtap也提供了一个用于共享标记和状态的帮助器类.改变修饰的class,可以在不同的样式间进行切 ...

  8. Bootstrap历练实例：导航中的表单

    Bootstrap历练实例:导航中的表单,它是使用class.navbar-form类,这确保了表单适当的垂直对齐和在较窄的视口中折叠的行为,使用这个对齐方式选项来决定导航栏中的内容放置在哪里. 实例 ...

  9. Bootstrap历练实例：带有下拉菜单的标签和胶囊导航

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

随机推荐

  1. 使用nsenter工具进入Docker容器

    查看本机装没有nsenter whereis nsenter或者whatis nsenter 未安装先安装,网上有很多这样的脚本 vi nsenter.sh #!/bin/bashcurl https ...

  2. Jmeter4.0----正则表达式提取器（12）

    1.说明 有时候需要将前一个请求返回的数据作为下一个请求的参数时,我们就需要正则表达式提取器.使用正则表达式提取器去提取我们想要的部分再传入后面的请求中. (之前看了一篇不错的博客,可以参考学习 ht ...

  3. 切换本地凭据（Windows上登录的GitHub账号）

    切换本地用户,可以向微软小娜搜索Windows凭据,这个步骤可以参考这篇博客 的说明.

  4. Java多线程与并发——进程与线程

    1.什么是进程 程序是指令和数据的有序集合,其本身没有任何运行的含义,是一个静态的概念.而进程是程序在处理机上的一次执行过程,它是一个动态的概念. 进程是一个具有一定独立功能的程序,一个实体,每一个进 ...

  5. Storm概念学习系列 之Worker工作者进程

    不多说,直接上干货! Worker工作者进程   工作者进程(Worker)是一个java进程,执行拓扑的一部分任务.一个Worker进程执行一个Topology的子集,它会启动一个或多个Execut ...

  6. c语言字符串操作总结(转)

    本文转自:http://www.jb51.net/article/37410.htm 1)字符串操作 strcpy(p, p1) 复制字符串 strncpy(p, p1, n) 复制指定长度字符串 s ...

  7. 读取java配置文件properties

    java项目里很多参数都是写在配置文件properties上,如果需要读取的话,可以使用jdk里提供的Properties类进行处理. 具体写法如下: public class PropertiesC ...

  8. 如何从MYSQL官方YUM仓库安装MYSQL5.x 原理一样只要获取对的仓库依赖安装对的仓库依赖就ok了，我就是用这种安装的5.7

    如何从MYSQL官方YUM仓库安装MYSQL5.6 2013年10月,MySQL开发团队正式宣布支持Yum仓库,这就意味着我们现在可以从这个Yum库中获得最新和最优版的MySQL安装包.本文将在一台全 ...

  9. wow.js+animate.css——有趣的页面滚动动画

    今天偶然间发现了一个使用特别简单的页面动画效果,还挺不错的,玩了一个上午,现在介绍一下这个滚动动画: 一.使用方法: 1.下载animate.css 2.下载wow.js 3.引用文件,像这样: &l ...

  10. EPSG:4326

    简单说,"EPSG:4326"指的就是WGS84坐标系 参考 http://blog.csdn.net/cloverwindy/article/details/8663968 AU ...