目录

Bootstrap - Forms

在本章中,我们将学习如何使用Bootstrap轻松创建表单。 Bootstrap使用简单的HTML标记和扩展类可以轻松实现不同样式的表单。 在本章中,我们将学习如何使用Bootstrap轻松创建表单。

表格布局

Bootstrap为您提供以下类型的表单布局 -

  • 垂直(默认)表单
  • In-line form
  • 横向形式

垂直或基本形式

基本的表单结构附带Bootstrap; 单独的表单控件自动接收一些全局样式。 要创建基本表单,请执行以下操作 -

  • 将角色form添加到父“form”元素。

  • 使用.form-group类在<div>中包装标签和控件。 这是最佳间距所必需的。

  • .form-control类添加到所有文本“input”,“textarea”和“select”元素。

<form role = "form">
   <div class = "form-group">
      <label for = "name">Name</label>
      <input type = "text" class = "form-control" id = "name" placeholder = "Enter Name">
   </div>
   <div class = "form-group">
      <label for = "inputfile">File input</label>
      <input type = "file" id = "inputfile">
      <p class = "help-block">Example block-level help text here.</p>
   </div>
   <div class = "checkbox">
      <label><input type = "checkbox"> Check me out</label>
   </div>
   <button type = "submit" class = "btn btn-default">Submit</button>
</form>
新页面打开

内联表格

要创建一个所有元素都是内联,左对齐和标签的表单,请将.form-inline类添加到“form”标记中。

<form class = "form-inline" role = "form">
   <div class = "form-group">
      <label class = "sr-only" for = "name">Name</label>
      <input type = "text" class = "form-control" id = "name" placeholder = "Enter Name">
   </div>
   <div class = "form-group">
      <label class = "sr-only" for = "inputfile">File input</label>
      <input type = "file" id = "inputfile">
   </div>
   <div class = "checkbox">
      <label><input type = "checkbox"> Check me out</label>
   </div>
   <button type = "submit" class = "btn btn-default">Submit</button>
</form>
新页面打开
  • 默认情况下,输入,选择和textareas在Bootstrap中具有100%的宽度。 使用内联表单时,需要在表单控件上设置宽度。

  • 使用.sr-only类,您可以隐藏内联表单的标签。

横向表格

水平形式与其他形式不同,不仅在标记量方面,而且在形式的呈现方面。 要创建使用水平布局的表单,请执行以下操作 -

  • 将一个.form-horizontal类添加到父“form”元素。

  • 使用.form-group类在<div>中包装标签和控件。

  • 在标签中添加一类.control-label

<form class = "form-horizontal" role = "form">
   <div class = "form-group">
      <label for = "firstname" class = "col-sm-2 control-label">First Name</label>
      <div class = "col-sm-10">
         <input type = "text" class = "form-control" id = "firstname" placeholder = "Enter First Name">
      </div>
   </div>
   <div class = "form-group">
      <label for = "lastname" class = "col-sm-2 control-label">Last Name</label>
      <div class = "col-sm-10">
         <input type = "text" class = "form-control" id = "lastname" placeholder = "Enter Last Name">
      </div>
   </div>
   <div class = "form-group">
      <div class = "col-sm-offset-2 col-sm-10">
         <div class = "checkbox">
            <label><input type = "checkbox"> Remember me</label>
         </div>
      </div>
   </div>
   <div class = "form-group">
      <div class = "col-sm-offset-2 col-sm-10">
         <button type = "submit" class = "btn btn-default">Sign in</button>
      </div>
   </div>
</form>
新页面打开

支持的表单控件

Bootstrap本身支持最常见的表单控件,主要是input, textarea, checkbox, radio, and select.

Inputs

最常见的表单文本字段是输入字段。 这是用户输入大部分基本表单数据的地方。 Bootstrap支持所有原生HTML5输入类型: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel,color 。 需要正确的type声明才能使Inputs完全样式化。

<form role = "form">
   <div class = "form-group">
      <label for = "name">Label</label>
      <input type = "text" class = "form-control" placeholder = "Text input">
   </div>
</form>
新页面打开

Textarea

当您需要多行输入时,将使用textarea。 根据需要更改rows属性(更少的行=更小的框,更多行=更大的框)。

<form role = "form">
   <div class = "form-group">
      <label for = "name">Text Area</label>
      <textarea class = "form-control" rows = "3"></textarea>
   </div>
</form>
新页面打开

复选框和单选按钮

当您希望用户从预设选项列表中进行选择时,复选框和单选按钮非常棒。

  • 构建表单时,如果希望用户从列表中选择任意数量的选项,请使用checkbox 。 如果要将用户限制为仅一个选择,请使用radio

  • .checkbox-inline.radio-inline类用于一系列复选框或控件的无线电显示在同一行上。

以下示例演示了(默认和内联)类型 -

<label for = "name">Example of Default Checkbox and radio button </label>
<div class = "checkbox">
   <label>
      <input type = "checkbox" value = "">Option 1
   </label>
</div>
<div class = "checkbox">
   <label>
      <input type = "checkbox" value = "">Option 2
   </label>
</div>
<div class = "radio">
   <label>
      <input type = "radio" name = "optionsRadios" id = "optionsRadios1" value = "option1" checked> Option 1
   </label>
</div>
<div class = "radio">
   <label>
      <input type = "radio" name = "optionsRadios" id = "optionsRadios2" value = "option2">
      Option 2 - selecting it will deselect option 1
   </label>
</div>
<label for = "name">Example of Inline Checkbox and radio button </label>
<div>
   <label class = "checkbox-inline">
      <input type = "checkbox" id = "inlineCheckbox1" value = "option1"> Option 1
   </label>
   <label class = "checkbox-inline">
      <input type = "checkbox" id = "inlineCheckbox2" value = "option2"> Option 2
   </label>
   <label class = "checkbox-inline">
      <input type = "checkbox" id = "inlineCheckbox3" value = "option3"> Option 3
   </label>
   <label class = "checkbox-inline">
      <input type = "radio" name = "optionsRadiosinline" id = "optionsRadios3" value = "option1" checked> Option 1
   </label>
   <label class = "checkbox-inline">
      <input type = "radio" name = "optionsRadiosinline" id = "optionsRadios4" value = "option2"> Option 2
   </label>
</div>
新页面打开

Selects

如果要允许用户从多个选项中进行选择,则使用选择,但默认情况下只允许选择一个选项。

  • 使用

  • 使用multiple = "multiple"允许用户选择多个选项。

以下示例演示了(选择和多个)类型 -

<form role = "form">
   <div class = "form-group">
      <label for = "name">Select list</label>
      <select class = "form-control">
         <option>1</option>
         <option>2</option>
         <option>3</option>
         <option>4</option>
         <option>5</option>
      </select>
      <label for = "name">Mutiple Select list</label>
      <select multiple class = "form-control">
         <option>1</option>
         <option>2</option>
         <option>3</option>
         <option>4</option>
         <option>5</option>
      </select>
   </div>
</form>
新页面打开

静态控制

当您需要在水平表单中的表单标签旁边放置纯文本时,请在“p”上使用.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">Password</label>
      <div class = "col-sm-10">
         <input type = "password" class = "form-control" id = "inputPassword" placeholder = "Password">
      </div>
   </div>
</form>
新页面打开

表格控制国

除了:focus (即用户点击输入或其中的选项卡)状态之外,Bootstrap还为禁用的输入和类提供样式以进行表单验证。

输入焦点

当输入接收:focus ,将删除输入的轮廓并应用box-shadow

禁用输入

如果您需要禁用输入,只需添加disabled属性不仅会禁用它; 当光标悬停在元素上时,它也会改变样式和鼠标光标。

禁用的字段集

将disabled属性添加到

以立即禁用
中的所有控件。

验证国家

Bootstrap包含错误,警告和成功消息的验证样式。 要使用,只需将适当的类( .has-warning, .has-error, or .has-success )添加到父元素即可。

以下示例演示了所有表单控件状态 -

<form class = "form-horizontal" role = "form">
   <div class = "form-group">
      <label class = "col-sm-2 control-label">Focused</label>
      <div class = "col-sm-10">
         <input class = "form-control" id = "focusedInput" type = "text" value = "This is focused...">
      </div>
   </div>
   <div class = "form-group">
      <label for = "inputPassword" class = "col-sm-2 control-label">Disabled</label>
      <div class = "col-sm-10">
         <input class = "form-control" id = "disabledInput" type = "text" placeholder = "Disabled input here..." disabled>
      </div>
   </div>
   <fieldset disabled>
      <div class = "form-group">
         <label for = "disabledTextInput"  class = "col-sm-2 control-label">
            Disabled input (Fieldset disabled)
         </label>
         <div class = "col-sm-10">
            <input type = "text" id = "disabledTextInput" class = "form-control" placeholder = "Disabled input">
         </div>
      </div>
      <div class = "form-group">
         <label for = "disabledSelect"  class = "col-sm-2 control-label">
            Disabled select menu (Fieldset disabled)
         </label>
         <div class = "col-sm-10">
            <select id = "disabledSelect" class = "form-control">
               <option>Disabled select</option>
            </select>
         </div>
      </div>
   </fieldset>
   <div class = "form-group has-success">
      <label class = "col-sm-2 control-label" for = "inputSuccess">
         Input with success
      </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">
         Input with warning
      </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">
         Input with error
      </label>
      <div class = "col-sm-10">
         <input type = "text" class = "form-control" id = "inputError">
      </div>
   </div>
</form>
新页面打开

表格控制尺寸

您可以分别使用.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 = "Default input">
   </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 = "">Default select</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表单控件可以具有与输入一起流动的块级帮助文本。 要添加全宽度的内容.help-block ,请在“输入”后使用.help-block 。 以下示例演示了这一点 -

<form role = "form">
   <span>Example of Help Text</span>
   <input class = "form-control" type = "text" placeholder = "">
   <span class = "help-block">
      A longer block of help text that breaks onto a new line and may extend beyond one line.
   </span>
</form>
新页面打开
↑回到顶部↑
WIKI教程 @2018