前端框架bootstrap 表单和导航菜单的 Demo（第二篇）
表单：
<!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)
响应式导航菜单：
<!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（第二篇）的更多相关文章
- 前端框架bootstrap(响应式布局)入门
Bootstrap,是基于HTML,CSS.javascript的前端框架 该框架已经预定义了一套CSS样式和与样式相对应的js代码(对应的样式有对应的特效.) 开发人员只需要编写HTML结构,添加b ...
- 详解Bootstrap表单组件
表单常见的元素主要包括:文本输入框.下拉选择框.单选框.复选框.文本域.按钮等.下面是不同的bootstrap版本: LESS: forms.less SASS: _forms.scss boot ...
- Flask10 登录模块、表单框架、表单渲染、表单验证、bookie、请求之前钩子、g对象、编写装饰器
from flask import Flask from flask import request from flask import render_template from flask_wtf i ...
- Bootstrap 表单控件状态(禁用状态)
Bootstrap框架的表单控件的禁用状态和普通的表单禁用状态实现方法是一样的,在相应的表单控件上添加属性“disabled”.和其他表单的禁用状态不同的是,Bootstrap框架做了一些样式风格的处 ...
- Bootstrap表单
Bootstrap 提供了下列类型的表单布局: 垂直表单(默认) -> 这个不好看,都是手机版了,PC版占一排不好看: 内联表单 -> 我相信这个才是你想要的,PC版响应横排,手机版响应竖 ...
- bootstrapValidator.js，最好用的bootstrap表单验证插件
前言:做Web开发的我们,表单验证是再常见不过的需求了.友好的错误提示能增加用户体验.博主搜索bootstrap表单验证,搜到的结果大部分都是文中的主题:bootstrapvalidator.今天就来 ...
- bootstrap表单带验证
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8& ...
- 前端框架Bootstrap
前端框架Bootstrap http://www.bootcss.com/ Bootstrap 编码规范 http://codeguide.bootcss.com/
- bootstrap 表单控件 控件状态 控件大小 help-block
bootstrap 表单控件 控件状态 控件大小 help-block <!DOCTYPE html> <html lang="en"> <head& ...
随机推荐
- OPEN CASCADE BSpline Curve Interpolation
OPEN CASCADE BSpline Curve Interpolation eryar@163.com Abstract. Global curve interpolation to point ...
- 关于在BAE上部署ThinkPHP框架的问题
现在有点小兴奋,因为在在BAE上部署ThinkPHP框架的问题快折腾一天了,午觉都没睡,不过没白整总算有点结果.不扯淡了,直入正题吧. 之前熟悉ThinkPHP框架,想在BAE上用ThinkPHP做点 ...
- 高级javascript---严格模式
严格模式 (JavaScript) 严格模式是一种将更好的错误检查引入代码中的方法. 在使用严格模式时,你无法使用隐式声明的变量.将值赋给只读属性或将属性添加到不可扩展的对象等. 本主题后面的代码 ...
- EF Code First 主键对应多个外键
这是一位朋友提出的疑问,EF 映射主键可以对应多个外键吗?如果外键设置级联删除会发生什么情况?下面做一个测试,示例实体代码: public class Blog { public Blog() { P ...
- 2015-10-22 前思后想，决定重构表结构，免得这个APP死在数据表设计上
新的设计稿出来了,如下,原来旧的是第二张 ------- 原来的评论级数只有2级,现在是不限,2级的意思是,用户评论该帖是一级,用户的评论能被人评论,这是第2级,评论评论的评论不能够再被 ...
- jQuery的事件模型
前几天自己着重读了jQuery1.11.1的源码,又结合了之前对DE事件模型的分析,最后也实现一个简陋的事件模型. jQuery的事件系统离不开jQuery的缓存系统. jQuery的第一代缓存是直接 ...
- [Data Structure & Algorithm] Hash那点事儿
哈希表(Hash Table)是一种特殊的数据结构,它最大的特点就是可以快速实现查找.插入和删除.因为它独有的特点,Hash表经常被用来解决大数据问题,也因此被广大的程序员所青睐.为了能够更加灵活地使 ...
- ORA-01439: 要更改数据类型, 则要修改的列必须为空
此方法有3处update操作,建议根据实际情况的数据量测试评估效率后选用. 思路:定义要更新数据类型的列为[col_old],数据类型为[datatype_old],临时列为[col_temp],数据 ...
- 求一个数组的最大子数组（C/C++实现）
最大子数组:要求相连,加起来的和最大的子数组就是一个数组的最大子数组.编译环境:VS2012,顺便说句其实我是C#程序员,我只是喜欢学C++. 其实这是个半成品,还有些BUG在里面,不过总体的思路是这 ...
- Android 源码下载方法（Git 方式clone）
Android源码对于Android开发者来说,迟早有一天你会用到的,所以就记录一下,分享给读者,希望对读者有用 这里需要使用到Git相关知识,不清楚的可以先阅读,了解的可以跳过 Git-Tortoi ...