Bootstrap CSS 表单

表单布局

Bootstrap 提供了下列项目的表单布局:

  • 垂直表单(默认)
  • 内联表单
  • 水平表单

笔直或基本表单

中心的表单结构是 Bootstrap
自带的,个别的表单控件自动接收有大局样式。下面列有了创建基本表单的步调:

  • 朝父 <form> 元素添加 role=”form”
  • 把标签和控件放在一个涵盖 class .form-group 的 <div>
    中。这是获得最佳距离所不可或缺的。
  • 朝装有的公文元素 <input>、<textarea> 和 <select>
    添加 class .form-control



    这里是块级帮助文本的实例。


心想事成之意义使图:

Bootstrap 1

内联表单

假若欲创造一个表单,它的有所因素是内联的,向左对联合的,标签是一视同仁的,请向
<form> 标签添加 class .form-inline

<form class="form-inline" role="form">
   <div class="form-group">
      <label class="sr-only" for="name">名称</label>
      <input type="text" class="form-control" id="name" 
         placeholder="请输入名称">
   </div>
   <div class="form-group">
      <label class="sr-only" for="inputfile">文件输入</label>
      <input type="file" id="inputfile">
   </div>
   <div class="checkbox">
      <label>
      <input type="checkbox"> 请打勾
      </label>
   </div>
   <button type="submit" class="btn btn-default">提交</button>
</form>

结果如下所示:

Bootstrap 2

  • 默认情况下,Bootstrap 中之 input、select 和 textarea 有 100%
    宽度。在利用内联表单时,您需要在表单控件上安一个增幅。
  • 使用 class .sr-only,您可以隐蔽内联表单的竹签。

水平表单

水平表单与其它表单不仅标志的数量达到差,而且表单的显现形式为殊。如要创建一个程度布局的表单,请按照下的几只步骤进行:

  • 朝父 <form> 元素添加 class .form-horizontal
  • 将标签和控件放在一个蕴含 class .form-group 的 <div> 中。
  • 于标签上加 class .control-label

结果如下所示:

Bootstrap 3

支撑之表单控件

Bootstrap 支持太广的表单控件,主要是 input、textarea、checkbox、radio
和 select

输入框(Input)

极端普遍的表单文本字段是输入框
input。用户可以在里面输入大多数必不可少之表单数据。Bootstrap
提供了针对性持有原生的 HTML5 的 input
类型的支持,包括:text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel和 color。适当的 type 声明是少不了的,这样才能够让 input 获得完整的体制。

<form role="form">
  <div class="form-group">
    <label for="name">标签</label>
    <input type="text" class="form-control" placeholder="文本输入">
  </div>
 </form>

结果如下所示:

Bootstrap 4

文本框(Textarea)

当你需要开展多推行输入的时,则可采用文本框
textarea。必要常常可改变 rows 属性(较少的行 = 较小之盒子,较多的行 =
较生之盒子)。

form role="form">
  <div class="form-group">
    <label for="name">文本框</label>
    <textarea class="form-control" rows="3"></textarea>
  </div>
</form>

结果如下所示:

Bootstrap 5

复选框((Checkbox)和单选框(Radio)

复选框和单选按钮用于受用户从同多重预设置的挑选项中开展抉择。

  • 当创建表单时,如果您想让用户从列表中选择多只选择时,请以 checkbox。如果你限制用户只能挑一个精选,请动 radio
  • 本着同样层层复选框和单选框使用 .checkbox-inline 或 .radio-inline class,控制它们显示在与一行上。

下面的实例演示了马上点儿种档次(默认和内联):

<label for="name">默认的复选框和单选按钮的实例</label>
<div class="checkbox">
   <label><input type="checkbox" value="">选项 1</label>
</div>
<div class="checkbox">
   <label><input type="checkbox" value="">选项 2</label>
</div>

<div class="radio">
   <label>
      <input type="radio" name="optionsRadios" id="optionsRadios1" 
         value="option1" checked> 选项 1
   </label>
</div>
<div class="radio">
   <label>
      <input type="radio" name="optionsRadios" id="optionsRadios2" 
         value="option2">
         选项 2 - 选择它将会取消选择选项 1
   </label>
</div>
<label for="name">内联的复选框和单选按钮的实例</label>
<div>
   <label class="checkbox-inline">
      <input type="checkbox" id="inlineCheckbox1" value="option1"> 选项 1
   </label>
   <label class="checkbox-inline">
      <input type="checkbox" id="inlineCheckbox2" value="option2"> 选项 2
   </label>
   <label class="checkbox-inline">
      <input type="checkbox" id="inlineCheckbox3" value="option3"> 选项 3
   </label>
   <label class="checkbox-inline">
      <input type="radio" name="optionsRadiosinline" id="optionsRadios3" 
         value="option1" checked> 选项 1
   </label>
   <label class="checkbox-inline">
      <input type="radio" name="optionsRadiosinline" id="optionsRadios4" 
         value="option2"> 选项 2
   </label>
</div>

结果如下所示:

Bootstrap 6

选择框(Select)

当您想被用户从多个选择中展开分选,但是默认情况下只能挑一个增选时,则用选择框。

  • 采用 <select>
    展示列表选项,通常是那些用户非常熟稔的抉择列表,比如州要数字。
  • 使用 multiple=”multiple” 允许用户挑选多个选择。

脚的实例演示了就有限种类型(select 和 multiple):

<form role="form">
   <div class="form-group">
      <label for="name">选择列表</label>
      <select class="form-control">
         <option>1</option>
         <option>2</option>
         <option>3</option>
         <option>4</option>
         <option>5</option>
      </select>

      <label for="name">可多选的选择列表</label>
      <select multiple class="form-control">
         <option>1</option>
         <option>2</option>
         <option>3</option>
         <option>4</option>
         <option>5</option>
      </select>
   </div>
</form>

结果如下所示:

Bootstrap 7

静态控件

当你要在一个档次表单内之表单标签后停纯文本时,请以 <p> 上运
class .form-control-static

<form class="form-horizontal" role="form">
  <div class="form-group">
    <label class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <p class="form-control-static">email@example.com</p>
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword" class="col-sm-2 control-label">密码</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword" 
         placeholder="请输入密码">
    </div>
  </div>
</form>

结果如下所示:

Bootstrap 8

表单Bootstrap控件状态

除了 :focus 状态(即,用户点击 input 或使用 tab 键聚焦到 input
上),Bootstrap 还吧禁用的输入框定义了体,并提供了表单验证的 class。

输入框焦点

当输入框 input
接收至 :focus 时,输入框的轮廓会被移除,同时应用 box-shadow

夺的输入框 input

万一您想只要禁用一个输入框
input,只待简单地填补加 disabled 属性,这不只会受用输入框,还会转输入框的体和当鼠标的指针悬停于要素上时不时鼠标指针的样式。

夺的字段集 fieldset

本着 <fieldset> 添加 disabled 属性来剥夺 <fieldset>
内的有所控件。

证状态

Bootstrap
包含了错、警告以及成功消息的辨证样式。只待对父元素简单地抬高适当的
class(.has-warning、 .has-error 或 .has-success)即可使用验证状态。

脚的实例演示了装有控件状态:

<form class="form-horizontal" role="form">
   <div class="form-group">
      <label class="col-sm-2 control-label">聚焦</label>
      <div class="col-sm-10">
         <input class="form-control" id="focusedInput" type="text" 
            value="该输入框获得焦点...">
      </div>
   </div>
   <div class="form-group">
      <label for="inputPassword" class="col-sm-2 control-label">
         禁用
      </label>
      <div class="col-sm-10">
         <input class="form-control" id="disabledInput" type="text" 
            placeholder="该输入框禁止输入..." disabled>
      </div>
   </div>
   <fieldset disabled>
      <div class="form-group">
         <label for="disabledTextInput"  class="col-sm-2 control-label">
            禁用输入(Fieldset disabled)
         </label>
         <div class="col-sm-10">
            <input type="text" id="disabledTextInput" class="form-control" 
               placeholder="禁止输入">
         </div>
      </div>
      <div class="form-group">
         <label for="disabledSelect"  class="col-sm-2 control-label">
            禁用选择菜单(Fieldset disabled)
         </label>
         <div class="col-sm-10">
            <select id="disabledSelect" class="form-control">
               <option>禁止选择</option>
            </select>
         </div>
      </div>
   </fieldset>
   <div class="form-group has-success">
      <label class="col-sm-2 control-label" for="inputSuccess">
         输入成功
      </label>
      <div class="col-sm-10">
         <input type="text" class="form-control" id="inputSuccess">
      </div>
   </div>
   <div class="form-group has-warning">
      <label class="col-sm-2 control-label" for="inputWarning">
         输入警告
      </label>
      <div class="col-sm-10">
         <input type="text" class="form-control" id="inputWarning">
      </div>
   </div>
   <div class="form-group has-error">
      <label class="col-sm-2 control-label" for="inputError">
         输入错误
      </label>
      <div class="col-sm-10">
         <input type="text" class="form-control" id="inputError">
      </div>
   </div>
</form>

结果如下所示:

Bootstrap 9

表单控件大小

卿可以分别以
class .input-lg 和 *.col-lg-** 来设置表单的万丈和增幅。下面的实例演示了立即点:

<form role="form">
   <div class="form-group">
      <input class="form-control input-lg" type="text" 
         placeholder=".input-lg">
   </div>

   <div class="form-group">
      <input class="form-control" type="text" placeholder="默认输入">
   </div>

   <div class="form-group">
      <input class="form-control input-sm" type="text" 
         placeholder=".input-sm">
   </div>
   <div class="form-group">
   </div>
   <div class="form-group">
      <select class="form-control input-lg">
         <option value="">.input-lg</option>
      </select>
   </div>
   <div class="form-group">
      <select class="form-control">
         <option value="">默认选择</option>
      </select>
   </div>
   <div class="form-group">
      <select class="form-control input-sm">
         <option value="">.input-sm</option>
      </select>
   </div>

   <div class="row">
      <div class="col-lg-2">
         <input type="text" class="form-control" placeholder=".col-lg-2">
      </div>
      <div class="col-lg-3">
         <input type="text" class="form-control" placeholder=".col-lg-3">
      </div>
      <div class="col-lg-4">
         <input type="text" class="form-control" placeholder=".col-lg-4">
      </div>
   </div>
</form>

结果如下所示:

Bootstrap 10

表单帮助文本

Bootstrap 表单控件可以在输入框 input
上出一个块级帮助文本。为了丰富一个占整个宽度之始末块,请于
<input> 后采取 .help-block。下面的实例演示了当时点:

<form role="form">
   帮助文本实例
   <input class="form-control" type="text" placeholder="">
   一个较长的帮助文本块,超过一行,
   需要扩展到下一行。本实例中的帮助文本总共有两行。
</form>

结果如下所示:

Bootstrap 11

相关文章