Bootstrap学习笔记系列3-------Bootstrap简单表单显示
表单布局
垂直或基本表单
基本的表单结构时BootStrap自带的,创建基本表单的步骤如下:
- 向父
<form>
元素添加role = “form”
; - 为了获取最佳的间距,把标签和控件放在一个
div.form-group
中,div放在父form下; - 向所有的文本元素
<input>
、<textarea>
和<select>
添加.form-control
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 模板</title>
<meta charset="utf-8">
<!-- 引入 Bootstrap -->
<link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<form role="form">
<div class="form-group">
<label for="name">名称</label>
<input type="text" class="form-control" id="name" name="name-text" placeholder="请输入你的名称">
</div>
</form>
<!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- 包括所有已编译的插件 -->
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
添加了form-control
Class的input会和label分为两行,并且获得焦点时会有蓝色的边框样式。
内联表单
内联表单中所有的元素都是内联的,标签都是并排的
- 向
<form>
标签中添加classfrom-inline
; - 每个表单需要被包含在
div.form-group
,checkbox可以包含在div.checkbox
,radio可以包含在div.radio
; - 默认情况下,bootstrap中的
input
、select
和textarea
有100%宽度,使用内联表单时,可以设置表单控件的宽度来设置; - 对标签描述添加
sr-only
可以隐藏标签描述。
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 模板</title>
<meta charset="utf-8">
<!-- 引入 Bootstrap -->
<link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<form class="form-inline" role="form">
<div class="form-group">
<label class = "sr-only" for="name">名称</label>
<input type="text" class="form-control" id="name" name="name-text" placeholder="请输入你的名称" style="width: 170px">
</div>
<div class="form-group">
<input type="file" name="inputfile" style="width: 170px">
</div>
<label>
<input type="checkbox" class="checkbox">请打勾
</label>
</form>
<!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- 包括所有已编译的插件 -->
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
水平表单
- 向父
<form>
添加类form-horizontal
; - 把标签和空间放在一个
div,form-group
的<div>
中; - 向标签添加class
control-label
.
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 模板</title>
<meta charset="utf-8">
<!-- 引入 Bootstrap -->
<link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!--父元素添加form-horizontal类-->
<form class="form-horizontal" role="form">
<!--标签和控件放在一个带有 class .form-group 的 <div> 中-->
<div class="form-group">
<!--向标签添加 class .control-label。-->
<label for="username" class="col-sm-2 control-label">名字:</label>
<!--控制表单的宽度-->
<div class="col-sm-3">
<input type="text" class="form-control" id="username" placeholder="请输入用户名">
</div>
</div>
<div class="form-group">
<label for="password" class="col-sm-2 control-label">密码:</label>
<div class="col-sm-3">
<input type="password" class="form-control" id="password" placeholder="请输入密码">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox">请记住我
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">登录</button>
</div>
</div>
</form>
<!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- 包括所有已编译的插件 -->
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
支持表单的控件
bootstrap支持常见的表单控件,主要是input,textarea,checkbox,radio和select。
输入框(input)
Bootstrap提供了对所有原生的HTML5的input类型的支持,包括:text
、password
、datetime
、datetime-local
、date
、month
、time
、week
、number
、url
、search
、tel
、color
。
文本框(Textarea)
需要进行多行的输入时,则可以使用文本框textarea。必要时改变rows属性(较少的行 = 较少的盒子,较多的行 = 较多的盒子)。
复选框(Checkbox)和单选框(Radio)
- 创建表单时,如果想让用户从列表中选择若干选项时,请使用checkbox。如果想限制用户只能选择一个选项,就使用radion
- 对于一些列的复选框和单选框使用Checkbox-inline或radio-inlie,控制它们显示在同一行上。
<label class="checkbox-inline">
<input type="radio" name="optionsRadiosinline" id="optionsRaios1" value="option1" >选项1
</label>
<label class="checkbox-inline">
<!--设置checked属性来表示默认被选中-->
<input type="radio" name="optionsRadiosinline" id="optionsRaios2" value="option2" checked="">选项2
</label>
选择框(select)
想让用户从多个选项中进行选择,但是默认的情况下只能选择一个选项时,则使用选择框
- 使用
<select>
展示列表选项 - 使用multiple=“multiple”允许用户选择多个选项
静态控件
当在一个水平表单标签后放置纯文本时,在<p>
上使用form-control-static
表单控件状态
- :focus 状态(即,用户点击 input 或使用 tab 键聚焦到 input 上)时,输入框的轮廓会被移除,同时应用box-shadow。
- 禁用输入框input,要想禁用一个输入框input,只需要简单的添加
disable
属性,就会禁用输入框,还会改变输入框的样式和鼠标悬停的样式。 - 禁用字段集fieldset,对
<fieldset>
添加disable属性来禁用<fieldset>
内的所有控件。 - 验证状态,对父元素
简单的添加
has-waring
,has-error
,has-success
即可使用验证状态。<form class="form-horizontal" role="form">
<div class="form-group">
<label for="inputPassword" class="col-sm-2 control-label">禁用</label>
<div class="col-sm-10"> <!--通过对<input>标签简单的添加disbale属性,就能禁止该控件-->
<input class="form-control" id="disabledInput" type="text" placeholder="该输入框禁止输入..." disabled>
</div>
</div> <!--对<fieldset>添加disabled属性禁用<fieldset>内的所有组件-->
<fieldset disabled>
<div class="form-group">
<label for="disabledTextInput" class="col-sm-2 control-label">禁用输入(Fieldset disabled)</label>
<div class="col-sm-10">
<input type="text" id="disabledTextInput" class="form-control" placeholder="禁止输入">
</div>
</div>
<div class="form-group">
<label for="disabledSelect" class="col-sm-2 control-label">禁用选择菜单(Fieldset disabled)</label>
<div class="col-sm-10">
<select id="disabledSelect" class="form-control">
<option>禁止选择</option>
</select>
</div>
</div>
</fieldset> <!--对父元素添加has-success类用于成功消息的验证样式-->
<div class="form-group has-success">
<label class="col-sm-2 control-label" for="inputSuccess">输入成功</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputSuccess">
</div>
</div> <!--对父元素添加has-warning类用于警告消息的验证样式-->
<div class="form-group has-warning">
<label class="col-sm-2 control-label" for="inputWarning">输入警告</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputWarning">
</div>
</div> <!--对父元素添加has-error类用错误消息的验证样式-->
<div class="form-group has-error">
<label class="col-sm-2 control-label" for="inputError">输入错误</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputError">
</div>
</div>
</form>
表单控件的大小
使用
input-lg
(lg可以替换成md、sm下同)和col-lg-*
来设置表单的高度和宽度。表单帮助文本
表单控件可以在输入框上有一个块级的帮助文本,为了添加一个占用整个宽度的内容快, 在
input
后使用help-block
。<form role="form">
<span>帮助文本实例</span>
<input class="form-control" type="text">
<p class="help-block">一个较长的文本,超过一行,需要扩展到下一行</p>
</form>
Bootstrap学习笔记系列3-------Bootstrap简单表单显示的更多相关文章
- Bootstrap学习笔记(3)--表格\表单\图片
Bootstrap表格 表格类: .table只会在表行之间增加横线; .table-striped会在表格行之间增减斑马线; .table-hover会给表设置鼠标悬停状态; ...
- Django学习笔记(6)——Form表单
知识储备:HTML表单form学习 表单,在前端页面中属于最常见的一个东西了.基本上网站信息的提交都用到了表单,所以下面来学习Django中优雅的表单系统:Form 表单的主要作用是在网页上提供一个图 ...
- Bootstrap学习笔记系列1-------Bootstrap网格系统
Bootstrap网格系统 学习笔记 [TOC] 简单网格 先上代码再解释 <!DOCTYPE html> <html> <head> <title>B ...
- bootstrap学习笔记系列4------bootstrap按钮
按钮标签 在<a>,<button>或input元素上使用按钮class.但是为了避免跨浏览器的不一致性,建议使用<button>标签. <!DOCTYPE ...
- bootstrap学习笔记<八>(bootstrap核心布局风格——栅格系统)
栅格系统(bootstrap的核心之一,也是bootstrap的主要布局风格) 栅格系统是对原有div布局的升级版.打破了传统div模式只能纵向垂直排列的弊端,大大提高了页面布局的速度和效果,也很好的 ...
- bootstrap学习笔记<一>(bootstrap用法)
首先引入bootstrap官网链接:http://www.bootcss.com/ bootstrap 3下载地址:http://v3.bootcss.com/getting-started/#dow ...
- AngularJS1.X学习笔记5-加强版的表单
大家愚人节快乐!表单是沟通服务器端和客户端的桥梁,为数据从客户端传到服务端打开了一扇大门.AngularJS增加了一些新特性,使我们能够更加方便的操作表单.OK!开始学习!学习使我快乐. 一.双向数据 ...
- Node.js学习笔记(2)--提交表单
说明(2017-5-2 11:42:33): 1. index.html <!DOCTYPE html> <html lang="en"> <head ...
- Servlet学习笔记(二):表单数据
很多情况下,需要传递一些信息,从浏览器到 Web 服务器,最终到后台程序.浏览器使用两种方法可将这些信息传递到 Web 服务器,分别为 GET 方法和 POST 方法. 1.GET 方法:GET 方法 ...
随机推荐
- js模版引擎handlebars.js实用教程——with-终极this应用
返回目录 <!DOCTYPE html> <html> <head> <META http-equiv=Content-Type content=" ...
- HTML5触屏版多线程渲染模板技术分享
前言: 了解js编译原理的屌丝们都知道,js是单线程的,想当年各路神仙为了实现js的多线程,为了解决innerHTML输出大段HTML卡页面的顽疾,纷纷设计了诸如假冒的“多线程“实现,我自己也在写开源 ...
- 判断当前日期是否在[startDate, endDate]区间
/** * 判断当前日期是否在[startDate, endDate]区间 * * @param startDate 开始日期 * @param endDate 结束日期 * @author jqli ...
- 关于js内部运行机制的一本好书
读<单页Web应用一书>,第二章讲了js内部运行机制,感觉棒极了.之前读<你不知道的js>,看的云里雾里,似懂非懂.没想到单页Web一书将此内容讲的如此通俗易懂,好多困惑已久的 ...
- Java中常用修饰符使用汇总
修饰符汇总: 一:public protected default private 修饰类,修饰方法,修饰属性,修饰代码块. 类: 顶级类只能用public 修饰,顶级类不能使用private 和p ...
- Eloquent ORM笔记
基本操作 新增 $user = new User; $user->name = 'John'; $user->save(); $insertedId = $user->id;//从对 ...
- easyui扩展正则验证,函数验证
用easyui做业务系统,对于默认的几个验证规则,肯定是不够的,难免会增加几种规则.可是问题来了,往往是我们在开发会遇到很多各种各样的验证,时间久了才发现,这些扩展的正则无非就是添加一个正则验证规则, ...
- winform 程序制作自己的数字签名(续)
在上一篇文章<winform 程序制作自己的数字签名>中我们已经可以得到我们程序定制的数字签名了,但是比较讨厌的是每次编译之后,数字签名需要重新手动添加. 我们需要的是在程序编译时自动添加 ...
- C++学习之重载、覆盖与隐藏
MaiziTest12.cpp : 定义控制台应用程序的入口点. 1.重载特征 1)相同的范围(在同一个类中): 2)函数名相同: 3)参数不同: 4)virtual关键字可有可无. 2.覆盖 指的是 ...
- IllegalStateException : Web app root system property already set to different value问题详解
一.问题描述 最近公司有了一个新项目,这个项目最近部署到测试服务器上的时候出现了一个问题. 严重: Exception sending context initialized event to ...
- Bootstrap学习笔记(3)--表格\表单\图片