<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基础表单</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
</head>
<body>
</body>
</html>
1 表单
表单主要功能是用来与用户做交流的一个网页控件,良好的表单设计能够让网页与用户更好的沟通。
表单中常见的元素主要包括:文本输入框、下拉选择框、单选按钮、复选按钮、文本域和按钮等。
其中每个控件所起的作用都各不相同,而且不同的浏览器对表单控件渲染的风格都各有不同。
1.1 基础表单
对于基础表单,Bootstrap并未对其做太多的定制性效果设计,仅仅对表单内的fieldset、legend、label标签进行了定制。主要将这些元素的margin、padding和border等进行了细化设置。
当然表单除了这几个元素之外,还有input、select、textarea等元素,在Bootstrap框架中,通过定制了一个类名form-control
,也就是说,如果这几个元素使用了类名“form-control”,将会实现一些设计上的定制效果。
- 1、宽度变成了100%
- 2、设置了一个浅灰色(#ccc)的边框
- 3、具有4px的圆角
- 4、设置阴影效果,并且元素得到焦点之时,阴影和边框效果会有所变化
- 5、设置了placeholder的颜色为#999
代码演示:
<body>
<form role="form">
<div class="form-group">
<label for="exampleInputEmail1">邮箱:</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="请输入您的邮箱地址">
</div>
<div class="form-group">
<label for="exampleInputPassword1">密码</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="请输入您的邮箱密码">
</div>
<div class="checkbox">
<label>
<input type="checkbox"> 记住密码
</label>
</div>
<button type="submit" class="btn btn-default">进入邮箱</button>
</form>
1.2 水平表单
Bootstrap框架默认的表单是垂直显示风格,但很多时候我们需要的水平表单风格(标签居左,表单控件居右)见下图。
而不是如1.1基础表单中的那样垂直显示风格.
在Bootstrap框架中要实现水平表单效果,必须满足以下两个条件:
1、在元素是使用类名“form-horizontal”。
2、配合Bootstrap框架的网格系统(网格布局)。
在<form>
元素上使用类名“form-horizontal”主要有以下几个作用:
1、设置表单控件padding和margin值。
2、改变“form-group”的表现形式,类似于网格系统的“row”。
<body>
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">邮箱</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="请输入您的邮箱地址">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">密码</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" 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>
</body>
显示效果:
注意:如果将类.form-group去掉也能产生水平表单效果,只是行之间表达太紧凑。显示效果非常差。
1.3 内联表单
通过在<form>
元素中添加类名“form-inline”即可实现表单控件在一行显示——将表单控件设置成内联块元素(display:inline-block)。
具体详细其他案例可以参考http://www.imooc.com/code/2344
2 表单控件
每一个表单都是由表单控件组成。离开了控件,表单就失去了意义。
2.1 表单控件(输入框input)
单行输入框,常见的文本输入框,也就是input的type属性值为text。
在Bootstrap中使用input时也必须添加type类型,如果没有指定type类型,将无法得到正确的样式,因为Bootstrap框架都是通过input[type=“?”]
(其中?号代表type类型,比如说text类型,对应的是input[type=“text”])的形式来定义样式的。
为了让控件在各种表单风格中样式不出错,需要添加类名“form-control”,如:
<body>
<form role="form">
<div class="form-group">
<input type="email" class="form-control" placeholder="Enter email">
</div>
</form>
</body>
form-group和form-control有什么实质的区别呢?
form-group一般用于div,form-control一般用于置于div中的标签元素(如input)
<form role = "form">//这里的 role = “form” 强调这个元素是表单让其更容易匹配读屏软件
<div class = "form-group">//这里的class = "form-group"相当于段落标签 让段落之间距离增大15px 更好看
<label for= "value">zhanghao<label>//这里的for指向input的id使其点击文字和点击输入框一样的功能
<input type = "text" id = "value" placeholder = "姓名">
http://wenda.jikexueyuan.com/question/9680/
2.2 表单控件(下拉选择框select)
Bootstrap框架中的下拉选择框使用和原始的一致,多行选择设置multiple属性的值为multiple。Bootstrap框架会为这些元素提供统一的样式风格。如:
<body>
<form role="form">
<div class="form-group">
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<div class="form-group">
<select multiple="mutiple" class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4