标签：
表单：
<!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-1.11.2.min.js" ></script> <script type="text/javascript" src="js/bootstrap.js" ></script> </head> <body> <div class="container"> <!-- class="container" 放在这里面的元素可以使它们居中--> <h1 class="panel-danger">用户登录</h1> <!-- class="form-horizontal" 设置当前表单为水平的，还可以设置其余样式class="form-xxx" 等 --> <form class="form-horizontal"> <!--文本框 class="col-md-4" 表示占用当前页面的纵向4个格 ，共有12个格子 --> <div class="form-group"> <div class="col-md-4"> <label for="exampleInputEmail1">用户名:</label> <input type="email" class="form-control" id="exampleInputEmail1" placeholder="用户名 / email"> </div> </div> <!--密码框 --> <div class="form-group"> <div class="col-md-4"> <label for="exampleInputPassword1">密码:</label> <input type="password" class="form-control" id="exampleInputPassword1" placeholder="请输入密码"> </div> </div> <!-- 文件上传 --> <div class="form-group"> <div class="col-md-4"> <label for="exampleInputFile">请选择文件：</label> <input type="file" id="exampleInputFile"> </div> </div> <!--复选框 --> <div class="checkbox"> <p class="help-block">兴趣/爱好 </p> <label> <input type="checkbox"> 复选框一 </label> <label> <input type="checkbox"> 复选框二 </label> </div> <br /> <!-- 提交（当前表当）按钮 class="btn btn-primary" 设置提交按钮的样式 --> <div class="container"> <div class="form-group"> <button type="submit" class="btn btn-primary"> 提 交 </button> </div> </div> </form> </div> </body> </html>
运行效果：
GCDCC$0}9$N@RC9{QJF.png){kind=small}
响应式导航菜单：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <!-- 引入jQuery以及bootstrap的类库 --> <link rel="stylesheet" href="css/bootstrap.min.css" /> </head> <body> <!-- bootstarp 的导航栏默认高度为 50px class="nav navbar-inverse" 设置导航的条样式（当前北京为黑色） 还可以写成class="nav navbar-default" role="navigation" 表示当前div 已设置为导航栏 class="container-fluid" 也就是告诉导航栏采用的是流布局方式 navbar-fixed-top 设置导航条始终显示在页面顶部 ，对应的navbar-fixed-bottom始终显示在下面 --> <div class="nav navbar-inverse navbar-fixed-top" role="navigation"> <div class="container-fluid"> <div class="navbar-header"> <!-- 隐藏按钮当页面小于默认为768像素时，隐藏响应式布局里的内容，显示此按钮 data-target=".nav-collapse" 找的是下面设置响应布局的 div --> <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span> <!--每一个”span 标签就是一个小横线 这里的按钮就是由3小横线组成“--> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <!-- 添加一个logo 因为导航栏的高度默认为50pk 为了以防外一将logo的高度设为50px--> <a href="#" class="navbar-brand"> <img src="img/{1Y(FB52``7)ZKN(0EYQUZY.jpg" style="height: 50px; margin-top:-15px;"/> </a> </div> <!-- class="collapse nav-collapse" 将当前div里的模块变成响应式布局 --> <div class="collapse navbar-collapse"> <!-- 导航列表--> <ul class="nav navbar-nav"> <!-- class="active" 为默认被选中的菜单 --> <li class="active"><a href="#">首页</a></li> <li><a href="#">导航一</a></li> <li><a href="#">导航二</a></li> </ul> <!--导航的搜索框 class="navbar-form navbar-right" 第一个类标签标记为搜索栏 第二个"navbar-right"设置为靠右显示 --> <div class="navbar-form navbar-right"> <input type="text" class="form-control" placeholder="请输入关键字"/> <button class="btn btn-primary">搜索</button> <a href="#" class="navbar-link" style="font-size: 18px; color: #FFFFFF">登 陆</a> <a href="#" class="navbar-link" style="font-size: 18px; color: #FFFFFF">注 册</a> </div> </div> </div> </div> <!-- 使用bootstrap框架的时候，把js文件放在叶下面引入可以提高页面的加载效率 因为bootstrap框架要依赖于jQuery所以在 引入 js文件前要先把jQuery.js引入进来 --> <script type="text/javascript" src="js/jquery-1.11.2.min.js" ></script> <script type="text/javascript" src="js/bootstrap.js" ></script> </body> </html>
运行效果：
将页面宽度调成小于默认宽度：
可以点击按钮（就是右上角3条小白条）进行显示和隐藏
前端框架bootstrap 表单和导航菜单的 Demo（第二篇）
标签：
原文地址：http://www.cnblogs.com/sunhaoyu/p/4275190.html
