<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8">

		<title></title>

		<link rel="stylesheet" href="css/bootstrap.min.css" />

		<script type="text/javascript" src="js/jquery.min.js" ></script>

		<script type="text/javascript" src="js/bootstrap.min.js" ></script>

	</head>

	<body>

	<nav class="nav navbar-default navbar-fixed-top" role="navigation">

		<div class="container-fluid">

			<div class="navbar-header">

				<button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">

					<span class="icon-bar"></span>

					<span class="icon-bar"></span>

					<span class="icon-bar"></span>

				</button>

				<a href="#" class="navbar-brand">

					<img src="img/mylogo.png" style="height: 50px;margin-top: -15px;"/>

				</a>

			</div>

			<div class="collapse navbar-collapse">

			<ul class="nav navbar-nav">

				<li class="active"><a href="#">首页</a></li>

				<li><a href="#">新闻</a></li>

				<li><a href="#">产品</a></li>

				<li class="dropdown">

					<a href="#" class="dropdown-toggle" data-toggle="dropdown">服务<span class="caret"></span></a>

					<ul class="dropdown-menu">

						<li><a href="#">客服在线</a></li>

						<li class="divider"></li>

						<li><a href="#">常见问答</a></li>

						<li class="divider"></li>

						<li><a href="#">地址电话</a></li>

					</ul>

				</li>

				<li><a href="#">商城</a></li>

			</ul>

			<div class="navbar-form navbar-right">

				<a href="#" class="navbar-link">登陆</a>

				<a href="#" class="navbar-link">注册</a>

				<input type="text" class="form-control" placeholder="请输入关键字"/>

				<button class="btn btn-primary">搜索</button>

			</div>

			</div>

		</div>

	</nav>	

		<div style="height: 50px;"></div>

		<div class="container">

			<h1 class="page-header"><span class="glyphicon glyphicon-user"></span>用户登录</h1>

			<form class="form-horizontal">

				<div class="form-group">

					<div class="col-md-5">

						<input type="text" class="form-control" placeholder="用户名/email"/>

					</div>

				</div>

				<div class="form-group">

					<div class="col-md-5">

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

					</div>

				</div>

				<div class="form-group">

					<div class="col-md-5">

					   <button class="btn btn-primary">登陆</button>

					</div>

				</div>

			</form>

		</div>

		<div style="height: 1500px;"></div>

	</body>

</html>

　　

Bootstrap 导航栏和登陆框的更多相关文章

  1. BootStrap导航栏的使用

    默认的导航栏 创建一个默认的导航栏的步骤如下: 向 <nav> 标签添加 class .navbar..navbar-default. 向上面的元素添加 role="naviga ...

  2. 自定义bootstrap样式-9行样式自定义漂亮大气bootstrap导航栏

    有人说前端发展太快,框架太多,各有所需,各有所长.看看这幅图,估计都知道这些框架,但是大部分公司中实际要用到的也就那么几个. 发展再快,框架再多.还是得回到原点,不就是Html+Css+JavaScr ...

  3. Bootstrap -- 导航栏样式、分页样式、标签样式、徽章样式

    Bootstrap -- 导航栏样式.分页样式.标签样式.徽章样式 1. 使用图标的导航栏 使用导航栏样式: <!DOCTYPE html> <html> <head&g ...

  4. Bootstrap导航栏实例讲解

    导航栏是一个很好的功能,是 Bootstrap 网站的一个突出特点.导航栏是响应式元组件就,作为应用程序或网站的导航标题.导航栏在移动设备的视图中是折叠的,随着可用视口宽度的增加,导航栏也会水平展开. ...

  5. Bootstrap导航栏navbar源码分析

    1.本文目地:分析bootstrap导航栏及其响应式的实现方式,提升自身css水平 先贴一个bootstrap的导航栏模板 http://v3.bootcss.com/examples/navbar- ...

  6. bootstrap导航栏.nav与.navbar区别

    刚刚看了bootstrap的导航栏,发现有点弄混了,现在来整理一下: 一.简单的ul,li组成的导航: <ul class="nav nav-pills justify-content ...

  7. Bootstrap导航栏

    导航栏: <div id="menu-nav" class="navbar navbar-default navbar-inverse navbar-fixed-t ...

  8. bootstrap导航栏的辛酸史

    昨天本来想完成test10的页面内容的,但是给老铁拉出去打麻将呢.不过还好昨天写了一些内容.现在奉上.不作更改. 今天完成的事情:(实现了test9的响应式导航栏的垂直平分和下拉列表的居中问题.) 我 ...

  9. bootstrap导航栏PC端移动端之不同样式

    在此之前,我先说我之所以要改变网站PC移动双端不同样式的原因. 首先我的网站用到了bootstrap响应式布局,这是我网站的PC端导航栏: 这是我网站的移动端导航栏,看着就难受: 我用谷歌浏览器F12 ...

随机推荐

  1. Android内部自带的SQLite数据库操作dos命令

    1:什么叫做SQLite数据库 Android系统内核是Linux系统,Android系统很特殊,他自带了一个SQLite数据库,轻量型的一款嵌入式的数据库 它占用资源非常的低,在嵌入式设备中,可能只 ...

  2. SVN和CVS的区别

    对版本控制就有了一定的理解,同时也应该知道SVN与CVS是比较流行的两款SCM工具.那么到底这两款工具有什么区别呢? 1.版本编号方面 例如,我们的版本库为A,其中有文件a,b,c. 在SVN中,新版 ...

  3. C#(asp.net )读取ASHX文件（一般处理程序）

    c#后台获取asxh的返回数据,后台创建一个请求实例,获取请求实例的返回值 public string GetResponseByPost(string apiUrl, string queryStr ...

  4. js从服务器下载文件

    通常,将文件绝对路径url作为超链接<a>的链接地址href的值,点击<a>后,浏览器将会尝试请求文件资源,如果浏览器能够辨认文件类型,则将会以预设的打开方式直接打开下载的文件 ...

  5. Linux 流程控制语句 if else、for、while、until

    1. 单分支if条件语句 书写方式1: if [ 条件判断式 ]; then 执行程序代码 fi 书写方式2: if [ 条件判断式 ] then 执行程序代码 fi 举例: if [ $rate - ...

  6. hihoCoder 1309:任务分配 贪心 优先队列

    #1309 : 任务分配 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 给定 N 项任务的起至时间( S1, E1 ), ( S2, E2 ), ..., ( SN,  ...

  7. WINDOWS下绑定ARP绑定网关

    一.WINDOWS下绑定ARP绑定网关步骤一:在能正常上网时,进入MS-DOS窗口,输入命令:arp -a,查看网关的IP对应的正确MAC地址, 并将其记录下来.注意:如果已经不能上网,则先运行一次命 ...

  8. win10+vs2015+opencv3.0 x86/x64配置（debug+release）

    最近做一些图像识别的项目,用到了opencv,opencv3.1没有x86版本,所以只能用opencv3.0来完成,下面介绍一下在window10下vs2015 配置opencv3.0的过程(x86和 ...

  9. Maven入门示例(3)：自动部署至外部Tomcat

    Maven入门示例(3):自动部署至外部Tomcat 博客分类:  maven 2012原创   Maven入门示例(3):自动部署至外部Tomcat 上一篇,介绍了如何创建Maven项目以及如何在内 ...

  10. Scatterplots 散点图

    Simple Scatterplot # Simple Scatterplot attach(mtcars)plot(wt, mpg, main="Scatterplot Example&q ...