Boostrap 中的 CSS - 表格 form

1. 基础表单

在Bootstrap框架中，通过定制了一个类名 form-control，也就是说，使用了类名form-control，将会实现一些设计上的定制效果。

1. 宽度变成了100%
2. 设置了一个浅灰色#ccc的边框
3. 具有 4p x的圆角
4. 设置阴影效果，并且元素得到焦点之时，阴影和边框效果会有所变化
5. 设置了placeholder(输入框的提示文字)的颜色为 #999 这个类一般用于输入框

1.1 内联表单

只需要给form加上下面.form-inline这个类就可以实现表单元素在一行排列

1.2 水平表单

待添加

2. input 输入框

为了让控件在各种表单风格中样式不出错，需要添加类名form-control，如：<input type="email" class="form-control" placeholder="请输入您的邮箱">

3. 按钮 Button

• input[type="submit"]：提交按钮
• input[type="button"]：普通按钮
• input[type="reset"]：重置按钮
• <button></button>：按钮元素，（默认行为是提交）

在Bootstrap框架中的按钮都是采用<button>来实现。

3.1 情景按钮

注：
Bootstrap中的按钮，第一前提是必须添加 btn 这个类，其他的各种类，都只能添加到其后。所以一个按钮应该是这个样子的：<button class="btn btn-info" >信息按钮</button>，若还有其他的样式，往btn-info后添加，充分利用 css 的层叠特性。

3.2 按钮大小

3.3 块状按钮

Bootstrap框架中提供了一个类名btn-block。使用这个类名就可以让按钮充满整个容器，并且这个按钮不会有任何的padding和margin值。在实际当中，常把这种按钮称为块状按钮。同样添加到btn类后即可生效。

3.4 活动与禁用状态

活动状态
Bootstrap 按钮的活动状态主要包括按钮的悬浮状态:hover，点击状态:active和焦点状态:focus几种。
通过在源码中我们可以看到，Bootstrap对于每一种风格的按钮都做了单独的定制。需要进行修改的话可以参考源码！

禁用状态
在Bootstrap框架中，要禁用按钮有两种实现方式：

• 在标签中添加disabled属性
• 在元素标签中添加类名.disabled