Bootstrap编写导航栏和登陆框
作者：a-z 发布时间：2023-08-16 19:08:42
标签：Bootstrap,导航栏,登陆框
本文实例为大家分享了Bootstrap导航栏和登陆框的具体代码，供大家参考，有不足的地方请大家谅解，大家共同学习进步。
<!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>
0
投稿猜你喜欢
- 有时候，我们需要替换指定标签外的内容，而保留标签里面的内容不替换。比如当我们要在浏览器中显示出编辑器显示的原始格式时、需要将普通换行符“\n
- 由于现在在公司负责制作标准的静态页面，为了增强客户体验，所以经常要做些AJAX效果，也学你也和我一样在，学习AJAX。而设计AJAX时使用的
- XML Web Service 是在 Internet 上进行分布式计算的基本构造块。开放的标准以及对用户和应用程序之间的通信和协作的关注产
- JavaScript Length 字符长度函数,在很多时间我们会用length函数了,因为你得前台判断一个用户输入
- //设置已存在表中字段为auto_incrementALTER TABLE tablename change id id int(2) no
- 下面列出了asp远程网页数据采集程序中经常用到的函数，很实用，特别是正则表达式过滤函数。包括了使用xmlhttp采集远程网页内容，使用ado
- 如何制作一个股票滚屏显示面板？<html> <head> <script
- 许多 Microsoft 的编程语言，如 Visual Basic、VBScript 和 Jscript，都提供集合（collection）
- mssql的每个varchar、text字段都被自动插入一段js代码，即使删除这段代码，如果没有从源头上解决，几分钟后，js代码就又会自动插
- 前两天研究了一下textarea的直观行的换行规律，挺复杂啊：直观行怎样取不光要看cols大小，还要看网页编码方式。cols="3
* 前，我在公司做设计，当时就已经做到技术总监，Photoshop是自学的，当时觉得全世界比我Photoshop强的人也不在多数。七年前，- 对于个人用户来说，除了病毒和木马，网页中的隐形代码也开始严重地威胁着我们的安全，但大多数人却缺乏自我保护意识，对隐形代码的危害认识不够，甚至
- 突然发现自己对Web前端技术掌握得很少很少，就是自己最感兴趣的XHTML+CSS部分知道也不算多。在XHTML 1.1规定的诸多元素中，我平
- 并行查询其优势就是可以通过多个线程来处理查询作业，从而提高查询的效率。SQL Server数据库为具有多个CPU的数据库服务器提供并行查询的
- 三遍记忆,让你记住海量素材的准确位置和用途,提高其可用性.这仅仅是一个示意图.在以往的日子里,我做到了只要脑袋里冒出一个想法,立刻就能知道我
- 使用SQLSERVER的应该经常遇到“Unable to read local eventlog (reason:事件日志文件已在读取时间更
- SQL Server 2005相对于SQL Server 2000做了很大的改进，许些新特性是非常实用的。本文中将通过几个具体示例进行详细的
- 细线边框是网页中定位区分内容常用的一种方法，配合特定图片的使用，往往能够达到不错的效果，那么如何制作细线边框呢？asp之家注：现在要实现这个
- 计算机键盘每天用得太多了，以致于我们无视它的存在（盲打），当然也很少有人去问这样一个问题——为什么键盘字母的排列方式是QWERTY而不是AB
- 一直以来，ACCESS数据库中的申报数据在分公司与总公司之间传递，用EXCEL或DBASE、TXT甚至ACCESS等格式，我总觉得不太理想。
