Bootstrap历练实例：响应式导航(带有表单)
<!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历练实例：响应式导航(带有表单)的更多相关文章
- Bootstrap历练实例：激活导航状态
激活导航状态 您可以在激活状态的胶囊式导航和列表导航中放置徽章.通过使用 <span class="badge"> 来激活链接,如下面的实例所示: <!DOCTY ...
- 第二百五十节，Bootstrap项目实战--响应式导航
Bootstrap项目实战--响应式导航 学习要点: 1.响应式导航 一．响应式导航 基本导航组件+响应式 第一步,声明导航区域,设置导航默认样式,设置导航条固定在顶部navbar样式class类,写 ...
- Bootstrap组件之响应式导航条
响应式导航条:在PC和平板中默认要显示所有的内容:但在手机中导航条中默认只显示“LOGO/Brand”,以及一个“菜单折叠展开按钮”,只有单击折叠按钮后才显示所有的菜单项. 基础class: .nav ...
- BootStrap实现简单响应式导航菜单
用BootStrap实现响应式导航栏,我会对其中的一些样式进行说明. 先上代码,是一个很简单的Demo. <!doctype html> <html> <head&g ...
- Bootstrap历练实例：响应式导航栏
响应式的导航栏 为了给导航栏添加响应式特性,您要折叠的内容必须包裹在带有 classes .collapse..navbar-collapse 的 <div> 中.折叠起来的导航栏实际上是 ...
- Bootstrap历练实例：响应式导航
<!DOCTYPE html><html lang="zh-cn"><head><meta http-equiv="Conten ...
- bootstrap历练实例：标签式的导航菜单
本章将讲解bootstrap提供的用于定义导航元素的一些选项,它使用相同的标签和基类.nav.Bootsrtap也提供了一个用于共享标记和状态的帮助器类.改变修饰的class,可以在不同的样式间进行切 ...
- Bootstrap历练实例：导航中的表单
Bootstrap历练实例:导航中的表单,它是使用class.navbar-form类,这确保了表单适当的垂直对齐和在较窄的视口中折叠的行为,使用这个对齐方式选项来决定导航栏中的内容放置在哪里. 实例 ...
- Bootstrap历练实例：带有下拉菜单的标签和胶囊导航
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...
随机推荐
- Jdk升级到11引起的问题：程序包javax.xml.bind.annotation不存在
Jdk12 都发布了, 我也下载一个玩一玩吧.刚准备要下载,发现之前已经下载了一个11, 那就11 吧,也不用太新了. 安装了jdk11,习惯性的设置了一下环境变量: JAVA_HOME=D:\too ...
- Python制作NTF传递函数工况文件和后处理文件
摘要:在平时工作中,TB车身的传递函数分析,涉及到大量重复行的工作,费时费力.在学习python基础后,希望通过代码解决这部分重复工作.基础入门级操作,但是能够解决很大一部分工作内容.日后,待pyth ...
- EIGRP-2-EIGRP的度量
EIGRP使用多种类型的度量值来描述一条路由的不同技术属性,称为组合度量或度量组合.这些组合度量参数包括带宽.延迟.可靠性.负载.MTU和跳数.这6个参数中的前4个通过一个著名的公式组合在一起,计算出 ...
- Luogu P3546 [POI2012]PRE-Prefixuffix 神奇的递推+哈希
设$f[i]$表示切掉前$i$位和后$i$位后,即剩下$s[i+1]到s[n-i]$,的公共前后缀长度.此时我们发现,$f[i-1]$相对于$f[i]$少切了两个$char$,所以有$f[i-1]\l ...
- UVa11093
//当汽车从第i个加油站到第j个加油站无法继续走下去的时候,这时候[i,j]区间的所有加油站都无法作为起点,因为当我们到第k个加油站的时候,起码是带着>=0的油去的,现在不带油直接从第k个开始肯 ...
- 在Scala IDEA for Eclipse或IDEA里程序编译实现与在Spark Shell下的对比（其实就是那么一回事）
不多说,直接上干货! 比如,我这里拿主成分分析(PCA). 1.主成分分析(PCA)的概念介绍 主成分分析(PCA) 是一种对数据进行旋转变换的统计学方法,其本质是在线性空间中进行一个基变换,使得变换 ...
- SpringBoot源码篇：深度分析SpringBoot如何省去web.xml
一.前言 从本博文开始,正式开启Spring及SpringBoot源码分析之旅.这可能是一个漫长的过程,因为本人之前阅读源码都是很片面的,对Spring源码没有一个系统的认识.从本文开始我会持续更新, ...
- Maven基本使用汇总
1. 基础问题 0.eclipse工程转maven工程:工程->右键->configure->convert to maven project 1.pom.xml总是在项目的根目录. ...
- Spring4.x、SpringMVC和DButils整合
tomcat 8.Spring 4.X.JDK1.8 需要jar包: 1)日志组件:log4j # debug < info < warn < error log4j.rootLog ...
- mysql连接error，Establishing SSL connection without server's identity verification is not recommended. According to MySQL 5.5.45+, 5.6.26+ and 5.7.6+ requirements SSL connection .....
完整error Establishing SSL connection without server's identity verification is not recommended. Accor ...