Bootstrap表单_bootstrap基础表单有哪些-CSDN博客

本文链接：https://blog.csdn.net/liujing96/article/details/72630650

1、基础表单：

（1）表单中常见的元素主要包括：文本输入框、下拉选择框、单选按钮、复选按钮、文本域和按钮等。

（2）Bootstrap并未对其做太多的定制性效果设计，仅仅对表单内的fieldset、legend、label标签进行了定制。

（3）当然表单除了这几个元素之外，还有input、select、textarea等元素，在Bootstrap框架中，通过定制了一个类名 “form-control”，也就是说，如果这几个元素使用了类名“form-control”，将会实现一些设计上的定制效果。

宽度变成了100%
设置了一个浅灰色（#ccc）的边框
具有4px的圆角
设置阴影效果，并且元素得到焦点之时，阴影和边框效果会有所变化
设置了placeholder的颜色为#999

2、水平表单：

（1）Bootstrap框架默认的表单是垂直显示风格，但很多时候我们需要的水平表单风格（标签居左，表单控件居右）。

（2）在Bootstrap框架中要实现水平表单效果，必须满足以下两个条件：

在<form>元素是使用类名“form-horizontal”。
配合Bootstrap框架的网格系统

（3）在<form>元素上使用类名“form-horizontal”主要有以下几个作用：

设置表单控件padding和margin值。
改变“form-group”的表现形式，类似于网格系统的“row”。

</div>

</div>

<label>

<input type="checkbox">记住密码

</label>

</div>

</div>

</form>

3、内联表格：

在Bootstrap框架中实现这样的表单效果是轻而易举的，你只需要在<form>元素中添加类名“ form-inline”即可。

内联表单实现原理非常简单，欲将表单控件在一行显示，就需要将表单控件设置成内联块元素（display:inline-block）。

4、表单控件：input

（1）在Bootstrap中使用input时也必须添加 type类型，如果没有指定type类型，将无法得到正确的样式

（2）为了让控件在各种表单风格中样式不出错，需要添加类名“form-control”，如：

</div>

</form>

5、下拉框select：

（1）Bootstrap框架中的下拉选择框使用和原始的一致，多行选择设置multiple属性的值为 multiple。

</select>

</div>

</select>

</div>

</form>

6、文本域textarea：

文本域和原始使用方法一样，设置rows可定义其高度，设置cols可以设置其宽度。

但如果textarea元素中添加了类名“form-control”类名，则无需设置cols属性。

因为Bootstrap框架中的“form-control”样式的表单控件宽度为100%或auto。

</div>

</form>

7、复选框checkbox和单选钮radio：

<label>

记住密码

</label>

</div>

<label>

喜欢

</label>

</div>

<label>

不喜欢

</label>

</div>

</form>

不管是checkbox还是radio都使用label包起来了
checkbox连同label标签放置在一个名为“.checkbox”的容器内
radio连同label标签放置在一个名为“.radio”的容器内

8、水平排列复选框和单选钮：

如果checkbox需要水平排列，只需要在label标签上添加类名“checkbox-inline”
如果radio需要水平排列，只需要在label标签上添加类名“radio-inline”

<input type="checkbox" value="option1">游戏

</label>

<input type="checkbox" value="option2">摄影

</label>

<input type="checkbox" value="option3">旅游

</label>

</div>

<input type="radio" value="option1" name="sex">男性

</label>

<input type="radio" value="option2" name="sex">女性

</label>

<input type="radio" value="option3" name="sex">中性

</label>

</div>

</form>

9、按钮

10、表单控件大小：

Bootstrap框架还提供了两个不同的类名，用来控制表单控件的高度。这两个类名是：

input-sm:让控件比正常大小更小
input-lg:让控件比正常大小更大

这两个类适用于表单中的input，textarea和select控件，具体使用如下：

要控制表单宽度，可以像下面这样使用：需要借助网格系统

</div>

</div>

</div>

…

</form>

11、表单控制状态：焦点状态

焦点状态是通过伪类 “:focus”来实现。Bootstrap框架中表单控件的焦点状态删除了outline的默认样式，重新添加阴影效果。

</div>

</div>

</form>

12、表单禁用：

Bootstrap框架的表单控件的禁用状态和普通的表单禁用状态实现方法是一样的，在相应的表单控件上添加属性 “disabled”。

13、表单验证：

同样也需要提供验证状态样式，在Bootstrap框架中同样提供这几种效果。

.has-warning:警告状态（黄色）
.has-error：错误状态（红色）
.has-success：成功状态（绿色）

</div>

</div>

</div>

</form>

如果你想让表单在对应的状态下显示 icon 出来，只需要在对应的状态下添加类名 “has-feedback”。

请注意，此类名要与“has-error”、“has-warning”和“has-success”在一起：

<span class="glyphiconglyphicon-ok form-control-feedback"></span> //注意：要加上这句话，否则显示不出来

</div>

......

</div>

......

</div>

</form>

14、表单提示信息：

在Bootstrap框架中也提供了这样的效果。使用了一个 "help-block"样式，将提示信息以块状显示，并且显示在控件底部。

在Bootstrap V2.x版本中还提供了一个行内提示信息，其使用了类名“ help-inline”。

<span class="help-block">你输入的信息是正确的</span>

</div>

…

</form>

15、按钮button：

（1）注意在每个其他样式的按钮中必须添加“.btn”，否则不对。

<button class="btn btn-default" type="button">默认按钮.btn-default</button>

<button class="btn btn-primary" type="button">主要按钮.btn-primary</button>

<button class="btn btn-success" type="button">成功按钮.btn-success</button>

<button class="btn btn-warning" type="button">警告按钮.btn-warning</button>

<button class="btn btn-danger" type="button">危险按钮.btn-danger</button>

（2）多标签支持：

其他标签也可以时按钮样式：但是不建议这样做！！！

<button class="btn btn-default" type="button">button标签按钮</button>

<a href="##" class="btn btn-default">a标签按钮</a>

<span class="btn btn-default">span标签按钮</span>

<div class="btn btn-default">div标签按钮</div>

（3）按钮大小：

<button class="btn btn-primary btn-xs" type="button">超小型按钮.btn-xs</button>

（4）块状按钮：

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

（5）按钮状态：

在Bootstrap框架中针对按钮的状态效果主要分为两种：活动状态和禁用状态。

（1）Bootstrap按钮的活动状态主要包括按钮的悬浮状态( :hover)，点击状态( :active)和焦点状态（ :focus）几种。

（2）在Bootstrap框架中，要禁用按钮有两种实现方式：

方法1：在标签中添加disabled属性 ——不可禁止按钮的默认行为
方法2：在元素标签中添加类名“disabled”——可以禁止按钮的默认行为
“.disabled”样式不会禁止按钮的默认行为，比如说提交和重置行为等。如果想要让这样的禁用按钮也能禁止按钮的默认行为，则需要通过JavaScript这样的语言来处理。对于<a>标签也存在类似问题，如果通过类名“.disable”来禁用按钮，其链接行为是无法禁止。而在元素标签中添加“disabled”属性的方法是可以禁止元素的默认行为的。

16、图像：

图像在网页制作中也是常要用到的元素，在Bootstrap框架中对于图像的样式风格提供以下几种风格：