BootstrapBootstrap 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

表单控件状态

除了 :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

相关文章