bootstrap快速入门笔记（七）-表格,表单

一，表格

1，<table>中加.table类

2，条纹表格：通过

.table-striped

类可以给

<tbody>

之内的每一行增加斑马条纹样式。

　　**跨浏览器兼容性：条纹状表格是依赖

:nth-child

CSS 选择器实现的，而这一功能不被 Internet Explorer 8 支持。

3，带边框的表格.table-bordered:

<table class="table table-bordered"> ... </table>

4,鼠标悬停：

.table-hover

类可以让

<tbody>

中的每一行对鼠标悬停状态作出响应。

5，紧缩表格 .table-condensed：让表格更加紧凑

6.状态类

通过这些状态类可以为行或单元格设置颜色。

Class	描述
.active	鼠标悬停在行或单元格上时所设置的颜色
.success	标识成功或积极的动作
.info	标识普通的提示信息或动作
.warning	标识警告或需要用户注意
.danger	标识危险或潜在的带来负面影响的动作

7，响应式表格：将

.table

元素包裹在

.table-responsive

元素内，即可创建响应式表格，其会在小屏幕设备上（小于768px）水平滚动。当屏幕大于 768px 宽度时，水平滚动条消失。

　　a,垂直方向的内容截断:

　　　　响应式表格使用了

overflow-y: hidden

属性，这样就能将超出表格底部和顶部的内容截断。特别　　　　是，也可以截断下拉菜单和其他第三方组件。

　　b,Firefox 和

fieldset

元素:

　　　　Firefox 浏览器对

fieldset

元素设置了一些影响

width

属性的样式，导致响应式表格出现问题。　　　　除非使用我们下面提供的针对 Firefox 的 hack 代码，否则无解：

　　　　　　

@-moz-document url-prefix() { fieldset { display: table-cell; } }

二，表单

1，基本实例：所有设置了

.form-control

类的

<input>

、

<textarea>

和

<select>

元素都将被默认设置宽度属性为

width: 100%;

。 将

label

元素和前面提到的控件包裹在

.form-group

中可以获得最好的排列。

　　.form-group也可以；

2，内联表单：

<form>

元素添加

.form-inline

类可使其内容左对齐并且表现为

inline-block

级别的控件。只适用于视口（viewport）至少在 768px 宽度时

　　a,可能需要手动设置宽度:

　　　　在 Bootstrap 中，输入框和单选/多选框控件默认被设置为

width: 100%;

宽度。在内联表单，我　　　　们将这些元素的宽度设置为

width: auto;

，因此，多个控件可以排列在同一行。根据你的布局需　　　　　　求，可能需要一些额外的定制化组件。

　　b,一定要添加

label

标签:

3,水平排列的表单

.form-horizontal

类:联合使用 Bootstrap 预置的栅格类，可以将

label

标签和控件组水平并排布局。这样做将改变

.form-group

的行为，使其表现为栅格系统中的行（row），因此就无需再额外添加

.row

了

　　

<form class="form-horizontal">

　　　　<div class="form-group">

　　　　　　<label for="inputEmail3" class="col-sm-2 control-label">Email</label>

　　　　<div class="col-sm-10">

　　　　　　<input type="email" class="form-control" id="inputEmail3" placeholder="Email">

　　　　</div>

　　</form>

4,被支持的控件

　　1），输入框：包括大部分表单控件、文本输入域控件，还支持所有 HTML5 类型的输入控件：

text

、

password

、

datetime

、

datetime-local

、

date

、

month

、

time

、

week

、

number

、

email

、

url

、

search

、

tel

和

color

　　**必须添加类型声明有正确设置了

type

属性的输入控件才能被赋予正确的样式。

　　2），输入控件组：如需在文本输入域

<input>

前面或后面添加文本内容或按钮控件，请参考输入控件组。

　　3），文本域：支持多行文本的表单控件。可根据需要改变

rows

属性。

　　4），单选和多选：.

disabled禁止点击;.checkbox-inline或.radio-inline可以使这些控件排列在一行。

　　5),下拉列表（select）：对于标记了

multiple

属性的

<select>

控件来说，默认显示多选项。

　　　　

<select multiple class="form-control"> <option>1</option>

</select>

　　6)，静态控件：如果需要在表单中将一行纯文本和

label

元素放置于同一行，为

<p>

元素添加

.form-control-static

类即可

　　7），焦点状态：我们将某些表单控件的默认

outline

样式移除，然后对

:focus

状态赋予

box-shadow

属性。

　　8），禁用状态：disabled---

<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>

　　9），只读状态：

readonly

　　10），控件尺寸：

.input-lg

类似的类可以为控件设置高度，

.col-lg-*

类似的类可以为控件设置宽度