表单：

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="utf-8" />
  5. 		<title></title>
  6. 		<link rel="stylesheet" href="css/bootstrap.min.css" />
  7. 		<script type="text/javascript" src="js/jquery-1.11.2.min.js" ></script>
  8. 		<script type="text/javascript" src="js/bootstrap.js" ></script>
  9. 	</head>
  10. 	<body>
  11. 		<div class="container"> <!-- class="container"  放在这里面的元素可以使它们居中-->
  12. 			<h1 class="panel-danger">用户登录</h1>
  13.  
  14. 		<!-- class="form-horizontal" 设置当前表单为水平的，还可以设置其余样式class="form-xxx" 等  -->
  15. 		<form class="form-horizontal">
  16. 			<!--文本框
  17. 				class="col-md-4" 表示占用当前页面的纵向4个格 ，共有12个格子
  18. 				-->
  19. 			<div class="form-group">
  20. 				<div class="col-md-4">
  21. 					<label for="exampleInputEmail1">用户名:</label>
  22. 					<input type="email" class="form-control" id="exampleInputEmail1" placeholder="用户名 / email">
  23. 				</div>
  24. 			</div>
  25. 			<!--密码框 -->
  26. 			<div class="form-group">
  27. 				<div class="col-md-4">
  28. 					<label for="exampleInputPassword1">密码:</label>
  29. 					<input type="password" class="form-control" id="exampleInputPassword1" placeholder="请输入密码">
  30. 				</div>
  31. 			</div>
  32. 			<!--  文件上传   -->
  33. 			<div class="form-group">
  34. 				<div class="col-md-4">
  35. 					<label for="exampleInputFile">请选择文件：</label>
  36. 					<input type="file" id="exampleInputFile">
  37. 				</div>
  38. 			</div>
  39. 			<!--复选框    -->
  40. 			<div class="checkbox">
  41. 					<p class="help-block">兴趣/爱好 </p>
  42. 					<label>
  43. 						<input type="checkbox">
  44. 						复选框一
  45. 					</label>
  46. 					<label>
  47. 						<input type="checkbox">
  48. 						复选框二
  49. 					</label>
  50. 			</div>
  51. 			<br />
  52. 			<!-- 提交（当前表当）按钮
  53. 				class="btn btn-primary"  设置提交按钮的样式
  54. 				-->
  55. 			<div class="container">
  56. 				<div class="form-group">
  57. 					<button type="submit" class="btn btn-primary"> 提 交 </button>
  58. 				</div>
  59. 			</div>
  60. 		</form>
  61. 		</div>
  62. 	</body>
  63. </html>

运行效果：

响应式导航菜单：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8" />
  5.         <title></title>
  6.                 <!-- 引入jQuery以及bootstrap的类库 -->
  7.                 <link rel="stylesheet" href="css/bootstrap.min.css" />
  8.  
  9.     </head>
  10.     <body>
  11.         <!-- bootstarp 的导航栏默认高度为 50px
  12.             class="nav navbar-inverse" 设置导航的条样式（当前北京为黑色） 还可以写成class="nav navbar-default"
  13.             role="navigation" 表示当前div 已设置为导航栏
  14.             class="container-fluid"  也就是告诉导航栏采用的是流布局方式
  15.             navbar-fixed-top  设置导航条始终显示在页面顶部 ，对应的navbar-fixed-bottom始终显示在下面
  16.         -->
  17.         <div class="nav navbar-inverse navbar-fixed-top" role="navigation">
  18.             <div class="container-fluid">
  19.  
  20.                         <div class="navbar-header">
  21.                             <!-- 隐藏按钮当页面小于默认为768像素时，隐藏响应式布局里的内容，显示此按钮
  22.                                  data-target=".nav-collapse" 找的是下面设置响应布局的 div
  23.                              -->
  24.                             <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
  25.                                 <span class="icon-bar"></span>  <!--每一个”span 标签就是一个小横线  这里的按钮就是由3小横线组成“-->
  26.                                 <span class="icon-bar"></span>
  27.                                 <span class="icon-bar"></span>
  28.                             </button>
  29.                             <!-- 添加一个logo  因为导航栏的高度默认为50pk 为了以防外一将logo的高度设为50px-->
  30.                             <a href="#" class="navbar-brand">
  31.                                 <img src="img/{1Y(FB52``7)ZKN(0EYQUZY.jpg" style="height: 50px; margin-top:-15px;"/>
  32.                             </a>
  33.                         </div>
  34.  
  35.                 <!--
  36.                     class="collapse nav-collapse" 将当前div里的模块变成响应式布局
  37.                 -->
  38.                 <div class="collapse navbar-collapse">
  39.                         <!-- 导航列表-->
  40.                         <ul class="nav navbar-nav">
  41.                             <!-- class="active"  为默认被选中的菜单 -->
  42.                             <li class="active"><a href="#">首页</a></li>
  43.                             <li><a href="#">导航一</a></li>
  44.                             <li><a href="#">导航二</a></li>
  45.                         </ul>
  46.  
  47.                         <!--导航的搜索框
  48.                             class="navbar-form navbar-right"  第一个类标签标记为搜索栏
  49.                                                                 第二个"navbar-right"设置为靠右显示
  50.                         -->
  51.                         <div class="navbar-form navbar-right">
  52.                             <input type="text" class="form-control" placeholder="请输入关键字"/>
  53.                             <button class="btn btn-primary">搜索</button>
  54.                             &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  55.                             <a href="#" class="navbar-link" style="font-size: 18px; color: #FFFFFF">登 陆</a>
  56.                             &nbsp;&nbsp;&nbsp;&nbsp;
  57.                             <a href="#" class="navbar-link" style="font-size: 18px; color: #FFFFFF">注 册</a>
  58.                             &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  59.                         </div>
  60.                 </div>
  61.             </div>
  62.         </div>
  63.  
  64.                     <!--
  65.                     使用bootstrap框架的时候，把js文件放在叶下面引入可以提高页面的加载效率
  66.                     因为bootstrap框架要依赖于jQuery所以在 引入 js文件前要先把jQuery.js引入进来
  67.                      -->
  68.                 <script type="text/javascript" src="js/jquery-1.11.2.min.js" ></script>
  69.                 <script type="text/javascript" src="js/bootstrap.js" ></script>
  70.     </body>
  71. </html>

运行效果：

　　
　　

将页面宽度调成小于默认宽度：

可以点击按钮（就是右上角3条小白条）进行显示和隐藏

前端框架bootstrap 表单和导航菜单的 Demo（第二篇）的更多相关文章

  1. 前端框架bootstrap(响应式布局)入门

    Bootstrap,是基于HTML,CSS.javascript的前端框架 该框架已经预定义了一套CSS样式和与样式相对应的js代码(对应的样式有对应的特效.) 开发人员只需要编写HTML结构,添加b ...

  2. 详解Bootstrap表单组件

    表单常见的元素主要包括:文本输入框.下拉选择框.单选框.复选框.文本域.按钮等.下面是不同的bootstrap版本: LESS:  forms.less SASS:  _forms.scss boot ...

  3. Flask10 登录模块、表单框架、表单渲染、表单验证、bookie、请求之前钩子、g对象、编写装饰器

    from flask import Flask from flask import request from flask import render_template from flask_wtf i ...

  4. Bootstrap 表单控件状态(禁用状态)

    Bootstrap框架的表单控件的禁用状态和普通的表单禁用状态实现方法是一样的,在相应的表单控件上添加属性“disabled”.和其他表单的禁用状态不同的是,Bootstrap框架做了一些样式风格的处 ...

  5. Bootstrap表单

    Bootstrap 提供了下列类型的表单布局: 垂直表单(默认) -> 这个不好看,都是手机版了,PC版占一排不好看: 内联表单 -> 我相信这个才是你想要的,PC版响应横排,手机版响应竖 ...

  6. bootstrapValidator.js，最好用的bootstrap表单验证插件

    前言:做Web开发的我们,表单验证是再常见不过的需求了.友好的错误提示能增加用户体验.博主搜索bootstrap表单验证,搜到的结果大部分都是文中的主题:bootstrapvalidator.今天就来 ...

  7. bootstrap表单带验证

    <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8& ...

  8. 前端框架Bootstrap

    前端框架Bootstrap http://www.bootcss.com/ Bootstrap 编码规范 http://codeguide.bootcss.com/

  9. bootstrap 表单控件 控件状态 控件大小 help-block

    bootstrap 表单控件 控件状态 控件大小 help-block <!DOCTYPE html> <html lang="en"> <head& ...

随机推荐

  1. JSON和JS对象之间的互转

    1. jQuery插件支持的转换方式 $.parseJSON( jsonstr ); //jQuery.parseJSON(jsonstr),可以将json字符串转换成json对象 2. 浏览器支持的 ...

  2. ModelDataExchange - Import

    ModelDataExchange - Import eryar@163.com Abstract. The ModelDataExchange import utility enables the ...

  3. MVC实用架构设计（三）——EF-Code First（4）：数据查询

    前言 首先对大家表示抱歉,这个系列已经将近一个月没有更新了,相信大家等本篇更新都等得快失望了.实在没办法,由于本人水平有限,写篇博客基本上要大半天的时间,最近实在是抽不出这么长段的空闲时间来写.另外也 ...

  4. 生成Kindle可读的mobi和PDF电子书

    购买kindle之后,自然欣喜万分,不来自于工具本身,而来自于发现自己能够静下心来阅读长篇和复杂的文字了,可喜可贺.更重要的是,kindle减轻了我眼睛的莫大的压力.但马上就出现几个问题: 不是所有的 ...

  5. Icinga使用总结

    1. 在定义命令的时候,往往需要修改commands.cfg配置文件,如果使用NPRE插件监控远程服务器,其实,定义命令也没这么复杂 commands.cfg中有关check_nrpe的命令定义如下: ...

  6. objective-c 语法快速过（2）

    oc类的声明和定义的常见错误 1.只有类的声明,没有类的实现 2.漏了@end 3.@interface和@implementation嵌套,也就是@interface或者@implementatio ...

  7. JavaWeb:EL表达式

    JavaWeb:EL表达式 说明 1.Expression Language语言,一种用于JSP文件中的数据访问的语言. 2.能够简化JSP文件中该数据访问的代码,可用来替代传统的基于<%= % ...

  8. linux dd命令详解

    Linux-dd命令详解 dd 是 Linux/UNIX 下的一个非常有用的命令,作用是用指定大小的块拷贝一个文件,并在拷贝的同时进行指定的转换. 名称: dd 使用权限: 所有使用者dd 这个指令在 ...

  9. Oracle 10g安全加固(审计、监听密码)

    环境: Linux 6.4 + Oracle 10.2.0.4 1. Oracle 10g 审计功能 2. 对数据库监听器的关闭和启动设置密码 1. Oracle 10g 审计功能 Oracle 10 ...

  10. WIFI网络操作

    WIFI网卡状态(不可用状态值为1,正在关闭值为0,可用状态值为3,正在打开值为2) WIFI网卡状态是由一系列的整型常量表示,这一系列的整型常量都存储于WifiManager的类中 1.WIFI_S ...