Bootstrap学习笔记—关于表单

Bootstrap学习笔记—关于表单

1、水平表单效果

Bootstrap框架默认的表单是垂直显示风格，如果想要实现水平表单风格，需要满足两个条件：
（1）在元素是使用类名“form-horizontal”；
（2）配合Bootstrap框架的网格系统。

在元素上使用类名“form-horizontal”主要有以下几个作用：
（1）设置表单控件padding和margin值；
（2）改变“form-group”的表现形式，类似于网格系统的“row”。

举例：

 <form class="form-horizontal" role="form">
     <div class="form-group">
       <label for="inputEmail3" class="col-sm-2 control-label">用户名</label>
       <div class="col-sm-10">
         <input type="email" class="form-control" id="inputEmail3" placeholder="请输入您的邮箱地址">
       </div>
     </div>
   </form>

2、内联表单

将表单的控件都在一行内显示，需要将表单控件设置成内联块元素（display:inline-block），在元素中添加类名”form-inline”。

举例：

<form class="form-inline" role="form">
     <div class="form-group">
      <label class="sr-only" for="exampleInputEmail2">邮箱    </label>
        <input type="email" class="form-control" id="exampleInputEmail2" placeholder="请输入你的邮箱地址">
     </div>
     <div class="form-group">
      <label class="sr-only" for="exampleInputPassword2">密码</label>
       <input type="password" class="form-control" id="exampleInputPassword2" placeholder="请输入你的邮箱密码">
     </div>
     <div class="checkbox">
      <label>
       <input type="checkbox">记住密码
      </label>
     </div>
     <button type="submit" class="btnbtn-default">进入邮箱     </button>
   </form>

注：因为在label标签中运用了一个类名”sr-only”（关于该样式的修饰在bootstrap.css中）将标签隐藏起来了，所以label标签没有显示出来。

3、表单控件

（1）输入框input（在Bootstrap中使用input时必须添加type类型）

单行输入框，常见的文本输入框，input的type属性值为text

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

举例：

 <form role="form">
  <div class="form-group">
   <input type="text" class="form-control" placeholder="Please input the name">
  </div>
 </form>

（2）下拉选择框select（Bootstrap框架的下拉选择框使用与原始一致）

多行选择设置multiple属性值为multiple

举例：

<form role="form">
  <div class="form-group">
    <select class="form-control"> <!-- 单选 -->
      <option>1</option> 
      <option>2</option> 
      <option>3</option> 
      <option>4</option> 
      <option>5</option> 
    </select>
  </div>
  <div class="form-group">
    <select multiple class="form-control"> <!-- 多选 -->
      <option>football</option>
      <option>swimming</option>
      <option>running</option>
      <option>dance</option>
    </select>
  </div>
 </form> 

（3）文本域textarea（Bootstrap框架的文本域使用与原始一致）

设置rows定义高度

设置cols设置宽度

如果textarea元素中添加类名”form-control”类名，则无需设置cols属性（Bootstrap框架中的”form-control”样式表单控件宽度为100%或auto）

举例：

<form role="form">
  <div class="form-group">
    <textarea class="form-control" rows="3"></textarea>
  </div>
 </form>

（4）复选框checkbox与单选择按钮radio

<1>checkbox与radio使用label包起来

<2>checkbox连同label标签放置在一个名为“.checkbox”的容器内

<3>radio连同label标签放置在一个名为“.radio”的容器内

在Bootstrap框架中，主要借助“.checkbox”和“.radio”样式，来处理复选框、单选按钮与标签的对齐方式。

举例：

 <form role="form">
  <div class="checkbox">
   <label>
    <input type="checkbox" value=""> 记住密码
   </label>
  </div>
  <div class="radio">
   <label>
    <input type="radio" name="optionsRadios" id="optionsRadios1" value="love" checked> 喜欢
   </label>
  </div>
  <div class="radio">
   <label>
    <input type="radio" name="optionsRadios" id="optionsRadios2" value="hate"> 不喜欢
   </label>
  </div>
 </form>

（5）复选框和单选按钮水平排列

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

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

举例：

<form role="form">
 <div class="form-group">
    <label class="radio-inline">
        <input type="radio" value="option1" name="sex"> 男性
    </label>
    <label class="radio-inline">
        <input type="radio" value="optio21" name="sex"> 女性
    </label>
    <label class="radio-inline">
        <input type="radio" value="option3" name="sex"> 中性
    </label>
 </div>
</form>

（6）按钮（在Bootstrap框架中按钮都采用实现）

通常使用以下代码：

input[type=“submit”]
input[type=“button”]
input[type=“reset”]
<button>

（7）控件的大小

可以通过设置控件的height，line-height，padding和font-size等属性来实现控件的高度设置。

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

<1>input-sm:让控件比正常大小更小
<2>input-lg:让控件比正常大小更大

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

<form role="form">
  <div class="form-group">
    <label class="control-label">控件变大</label>
    <input class="form-control input-lg" type="text" placeholder="添加.input-lg，控件变大">
  </div>
  <div class="form-group">
    <label class="control-label">正常大小</label>
    <input class="form-control" type="text" placeholder="正常大小">
  </div>  
  <div class="form-group">
    <label class="control-label">控件变小</label>
    <input class="form-control input-sm" type="text" placeholder="添加.input-sm，控件变小">
  </div> 
 </form> 

不管是“input-sm”还是“input-lg”仅对控件高度做了处理。如果想要对控件宽度做一定的变化处理，要借住Bootstrap框架的网格系统。

要控制表单宽度，可以像下面这样使用：

<form role="form" class="form-horizontal">
  <div class="form-group">
    <div class="col-xs-4">
      <input class="form-control input-lg" type="text" placeholder=".col-xs-4">
    </div>
    <div class="col-xs-4">
      <input class="form-control input-lg" type="text" placeholder=".col-xs-4">
    </div>
    <div class="col-xs-4">
      <input class="form-control input-lg" type="text" placeholder=".col-xs-4">
    </div>
  </div>
  <div class="form-group">
    <div class="col-xs-6"><input class="form-control" type="text" placeholder=".col-xs-6"></div>
    <div class="col-xs-6"><input class="form-control" type="text" placeholder=".col-xs-6"></div>

  </div>  
  <div class="form-group">
    <div class="col-xs-5">
      <input class="form-control input-sm" type="text" placeholder=".col-xs-5">
    </div>
    <div class="col-xs-7">
      <input class="form-control input-sm" type="text" placeholder=".col-xs-7">
    </div>
  </div> 
</form>

（8）控件的状态（焦点状态）

表单状态的作用（每一种状态都能给用户传递不同的信息）：

<1>禁用状态可以告诉用户不可以输入或选择东西（在相应的表单控件上添加属性”disabled”）。如果控件中不使用类名“form-control”，禁用的控件只会有一个不准输入的手型出来。

在Bootstrap框架中，如果fieldset设置了disabled属性，整个域都将处于被禁用状态（对于整个禁用的域中，如果legend中有输入框的话，这个输入框虽然颜色变灰了，但是没被禁用）。

 <label for="disabledTextInput">禁用的输入框</label>

<fieldset disabled>

<2>表单控件验证状态，可以告诉用户的操作是否正确等。

在Bootstrap框架中提供以下几种验证状态效果：

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

使用的时候只需要在form-group容器上对应添加状态类名。

举例：

<div class="form-group has-success">
      <label class="control-label" for="inputSuccess1"> 成功状态         </label>
       <input type="text" class="form-control" id="inputSuccess1" placeholder="成功状态" >
    </div>

在表单验证时，不同的状态会提供不同的 icon，比如成功是一个对号（√），错误是一个叉号（×）等。在Bootstrap框中也提供了这样的效果。如果你想让表单在对应的状态下显示 icon 出来，只需要在对应的状态下添加类名“has-feedback”。请注意，此类名要与“has-error”、“has-warning”和“has-success”在一起。

举例：

<div class="form-group has-success has-feedback">
      <label class="control-label" for="inputSuccess1"> 成功状态      </label>
       <input type="text" class="form-control" id="inputSuccess1" placeholder="成功状态" >
         <span class="glyphiconglyphicon-ok form-control-feedback"></span>
    </div>    

<3>焦点状态,通过伪类“:focus”来实现。

Bootstrap框架中表单控件的焦点状态删除了outline的默认样式，重新添加阴影效果。要让控件在焦点状态下有样式效果，需要给控件添加类名“form-control”。

<4>提示信息

使用了一个”help-block”样式，将提示信息以块状显示，并且显示在控件底部。

在Bootstrap V2.x版本中提供了一个行内提示信息，其使用了类名“help-inline”。一般让提示信息显示在控件的后面，也就是同一水平显示。

如果觉得表单效果并非所需，可以通过forms.less或者_forms.scss文件进行定制，然后重新编译即可得到需要的表单效果。