首页 > 代码库 > bootstrap02导航菜单
bootstrap02导航菜单
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>登录界面</title> <!--01.引入需要的css样式文件--> <link rel="stylesheet" href="css/bootstrap.css"> <!--02.引入我们的jQuery库--> <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script> <!--03.引入bootstrap的js库--> <script type="text/javascript" src="js/bootstrap.js"></script></head><body><!--导航菜单 默认的高度是50px navbar-fixed-top 始终位于网页的头部--><nav class="navbar navbar-default navbar-fixed-top" role="navigation"> <!--设置文字不显示时候的标签--> <div class="navbar-header"> <!--这里网页中也可以设置成一个图片 但是 需要设置图片的大小--> <a class="navbar-brand">请选择姓名</a> <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-collapse"> <!--书写 横线--> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse"> <!-- navbar-nav 这是我们的li左浮动--> <ul class="nav navbar-nav"> <li><a href="#">小强</a></li> <li><a href="#">小红</a></li> <li><a href="#">小白</a></li> </ul> <!--书写登录 注册 搜索框--> <div class="navbar-form navbar-right"> <a href="#">登录</a> <a href="#">注册</a> <input type="text" class="form-control" placeholder="请输入关键字"> <button class="btn btn-primary">搜索</button> </div> </div></nav><!--为了不遮盖后面的内容 设置一个div高度为50px--><div style="height: 50px"></div><!--container:我们的代码写在这个容器中 就会具有一些样式--><div class="container"> <!--设置字体图标 class="glyphicon glyphicon-user"--> <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="text" class="form-control" placeholder="请输入密码"> </div> </div> <div class="form-group"> <div class="col-md-5"> <input type="button" class="btn btn-primary" value="登录"> </div> </div> </form> <!--验证能固定在网页的顶部--> <div style="height: 1000px"></div></div></body></html>
效果图
bootstrap02导航菜单
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。