Bootstrap学习笔记（一）-----表单

一、水平表单效果

在Bootstrap框架中要实现水平表单效果，必须满足以下两个条件：
1、在<form>元素上使用类名“form-horizontal”。
2、配合Bootstrap框架的网格系统。

 

二、内联表单效果

有时候我们需要将表单的控件都在一行内显示，只需要在<form>元素上添加类名“form-inline”即可

 

三、select多行显示

<select class="multiple form-control"></select>

 

四、表单控件大小

.input-lg 大

.input-sm 小

可用来控制<select><textarea><text>

<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> 

form>form-group>form-control

 

五、表单控件(复选框和单选按钮水平排列)

在input的父级label加上类"checkbox-inline"或"radio-inline"

<label  class="checkbox-inline">
       <input type="checkbox" value="游戏"/>游戏
</label>

<label  class="radio-inline">
       <input type="radio" value="游戏"/>游戏 
</label>

<form role="form">
    <div class="form-group">
        <label  class="checkbox-inline">
            <input type="checkbox" value="游戏"/>游戏
        </label>

 　　　　<label  class="checkbox-inline">
            <input type="checkbox" value="影视"/>影视
        </label>

</div> </form>

<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="option2" name="sex">女性
    </label>
    <label class="radio-inline">
      <input type="radio"  value="option3" name="sex">中性
    </label>
  </div>
</form>

 

六、表单控件样式（焦点状态）

需要加上“form-control”,表单focus时才有bootstap样式：

1、宽度变成了100%

2、设置了一个浅灰色（#ccc）的边框

3、具有4px的圆角

4、设置阴影效果，并且元素得到焦点之时，阴影和边框效果会有所变化

5、设置了placeholder的颜色为#999

 

七、表单控件样式（禁用状态）

<input class="form-control input-lg" id="disabledInput" type="text" placeholder="表单已被禁用，不可输入" disabled>

 

八、表单控件样式（验证状态）

在制作表单时，不免要做表单验证。同样也需要提供验证状态样式，在Bootstrap框架中同样提供这几种效果。
1、.has-warning:警告状态（黄色）
2、.has-error：错误状态（红色）
3、.has-success：成功状态（绿色）
使用的时候只需要在form-group容器上对应添加状态类名。

<form role="form">
  <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="glyphicon glyphicon-ok form-control-feedback"></span>
  </div>
  <div class="form-group has-warning has-feedback">
    <label class="control-label" for="inputWarning1">警告状态</label>
    <input type="text" class="form-control" id="inputWarning1" placeholder="警告状态">
    <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
  </div>
  <div class="form-group has-error has-feedback">
    <label class="control-label" for="inputError1">错误状态</label>
    <input type="text" class="form-control" id="inputError1" placeholder="错误状态">
    <span class="glyphicon glyphicon-remove form-control-feedback"></span>  
  </div>
</form>

.has-feedback可以在在表单验证的时候，不同的状态会提供不同的 icon，比如成功是一个对号（√），错误是一个叉号（×）等。

 

九、表单提示信息 

class="help-block" 根据.has-success或者has-warning或者has-error来显示颜色

<form role="form">
  <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="help-block">你输入的信息是正确的</span>
    <span class="glyphicon glyphicon-ok form-control-feedback"></span>
  </div>
  <div class="form-group has-warning has-feedback">
    <label class="control-label" for="inputWarning1">警告状态</label>
    <input type="text" class="form-control" id="inputWarning1" placeholder="警告状态">
    <span class="help-block">请输入正确信息</span>
    <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
  </div>
  <div class="form-group has-error has-feedback">
    <label class="control-label" for="inputError1">错误状态</label>
    <input type="text" class="form-control" id="inputError1" placeholder="错误状态">
    <span class="glyphicon glyphicon-remove form-control-feedback"></span>  
  </div>
</form>  

 

十、按钮

　　<button class="btn" type="button">基础按钮.btn</button>  
   <button class="btn btn-default" type="button">默认按钮.btn-default</button> 
   <button class="btn btn-primary" type="button">主要按钮.btn-primary</button> 
   <button class="btn btn-success" type="button">成功按钮.btn-success</button> 
   <button class="btn btn-info" type="button">信息按钮.btn-info</button> 
   <button class="btn btn-warning" type="button">警告按钮.btn-warning</button> 
   <button class="btn btn-danger" type="button">危险按钮.btn-danger</button> 
   <button class="btn btn-link" type="button">链接按钮.btn-link</button> 

　　 <button class="btn btn-primary btn-lg" type="button">大型按钮.btn-lg</button> 
    <button class="btn btn-primary" type="button">正常按钮</button>
    <button class="btn btn-primary btn-sm" type="button">小型按钮.btn-sm</button>
    <button class="btn btn-primary btn-xs" type="button">超小型按钮.btn-xs</button>

　　<button class="btn btn-default" type="button">button标签按钮</button>   //主要用button标签和a标签
　　<input type="submit" class="btn btn-default" value="input标签按钮"/>
　　<span class="btn btn-default">span标签按钮</span>  
　　<div class="btn btn-default">div标签按钮</div>  
　　<a class="btn btn-default">a标签按钮</a>

 .btn-block 块状按钮。 按钮使用这个类名就可以让按钮充满整个容器，并且这个按钮不会有任何的padding和margin值。

　　<button class="btn btn-primary btn-lg btn-block" type="button" disabled="disabled">通过disabled属性禁用按钮</button> 
   <button class="btn btn-primary btn-block disabled" type="button">通过添加类名disabled禁用按钮</button>
   <button class="btn btn-primary btn-sm btn-block" type="button">未禁用的按钮</button>

 

十一、图像

<div class="container">
  <div class="row">
    <div class="col-sm-4">
      <img   alt="140x140" src="http://placehold.it/140x140">
        <div>默认图片</div>
    </div>
    <div class="col-sm-4">
      <img  class="img-rounded" alt="140x140" src="http://placehold.it/140x140"> 
        <div>圆角图片</div>
    </div>
    <div class="col-sm-4">
      <img  class="img-circle" alt="140x140" src="http://placehold.it/140x140">
        <div>圆形图片</div>
    </div>
      <div class="row">
        <div class="col-sm-6">
          <img  class="img-thumbnail" alt="140x140" src="http://placehold.it/140x140"> 
            <div>缩略图</div>
        </div>
        <div class="col-sm-6">
          <img  class="img-responsive" alt="140x140" src="http://placehold.it/140x140" /> 
          <div>响应式图片</div>
        </div>
      </div>
  </div>
</div> 

 

 

十二、图标

bootstrap提供了200个图标，都是以”glyphicon-”前缀的类名开始，然后后缀表示图标的名称。如：

    <span class="glyphicon glyphicon-search"></span>
    <span class="glyphicon glyphicon-asterisk"></span>
    <span class="glyphicon glyphicon-plus"></span>
    <span class="glyphicon glyphicon-cloud"></span>

 

 

十三、代码样式

<code>放在中间的代码</code>