Bootstrap 3 之 Bootstrap 表单

Bootstrap 提供了一套易于使用和美观的表单样式,可以帮助开发者快速构建各种类型的表单。在本章节中,我们将介绍如何使用 Bootstrap 来创建表单。

基本表单

要创建一个基本的表单,只需要简单的将表单元素放在 .form-group 类下即可。例如,下面是一个包含文本输入框和提交按钮的基本表单:

------
  ---- -------------------
    ------ ---------------------------
    ------ ----------- -------------------- --------------
  ------
  ------- ------------- ---------- ------------------------
-------

在上面的例子中,我们使用了 .form-group 类来包裹表单元素,并使用了 .form-control 类来添加表单元素的样式。

表单布局

Bootstrap 还提供了一些布局类来帮助开发者创建多列的表单。例如,可以使用 .form-inline 类来创建行内表单,或者使用 .form-horizontal 类来创建水平排列的表单。

----- --------------------
  ---- -------------------
    ------ -----------------------
    ------ ------------ -------------------- -----------
  ------
  ------- ------------- ---------- ------------------------
-------

表单控件

Bootstrap 还提供了许多表单控件,如下拉框、复选框、单选框等。这些控件可以通过添加相应的类来实现样式。

---- -------------------
  ------ ------------------------
  ------- -------------------- ------------
    ------------------
    ------------------
  ---------
------

---- -----------------
  ------------- ---------------------------
------

---- --------------
  ------------- ------------ -------------------- ------------------- --------------- ---------- ---------
------
---- --------------
  ------------- ------------ -------------------- ------------------- ------------------ ---------
------

以上就是关于 Bootstrap 表单的介绍,希望能帮助你更好地使用 Bootstrap 来创建各种类型的表单。


上一篇:Bootstrap 表格
下一篇:Bootstrap 按钮