Bootstrap 中 表单和图片（二）

一、表单的基本框架

<!-- <form class="form-inline">  内联表单，让所有表单元素居于一行-->
  <form class="form-horizontal">
      <div class="form-group">
        <label for="Email" class="col-sm-2 control-label">电子邮件</label>
        <div class="col-sm-10">
            <input type="email" name="Email" class="form-control" placeholder="请输入您的电子邮件">
        </div>
      </div>

      <div class="form-group">
        <label for="PassWord" class="col-sm-2 control-label">密码</label>
        <div class="col-sm-10">
            <input type="password" name="PassWord" class="form-control" placeholder="请输入您的密码">
        </div>
      </div>

      <div class="input-group">
        <div class="input-group-addon">￥</div>
        <input type="text" class="form-control" name="" placeholder="请输入价格">        
        <div class="input-group-addon">元</div>
      </div>  
  </form>

 

 *在 form 上设置class*
.form-inline             //  内联表单，左对齐浮动，表现为inline-block内联块结构  P.s.<768px，会恢复独占样式

.form-horizontal     //   表单内元素保持水平排列,

 *在 div 上设置class*

.form-group       //  表单群组，类似块级模式

.input-group      //  表单合组，input 配合 div.input-group-addon使用,保持在一行显示

*在 label 上设置class* 

.control-label   //  保持和父元素样式同步,居右对齐 

 

 二、复选框和单选框 (用法相同)

<div class="checkbox">
   <label>
      <input type="checkbox"> 体育
   </label> 
</div>

<div class="checkbox disabled">
   <label>
       <input type="checkbox" disabled> 美术
   </label>
</div>

input放于label中，作用为点击文本也可视为选中。

 *在 input和label外围添加div， 上设置class*

.checkbox    //  文字和input居中对齐，鼠标为手型，每一组为一行

.disabled    //   禁用复选框，鼠标手型变为禁用样式

.radio        //    radio

<label class="checkbox-inline">
      <input type="checkbox"> 音乐
</label> 

<label class="checkbox-inline disabled">
     <input type="checkbox" disabled> 音乐
</label> 

<label class="radio-inline">
     <input type="radio" name="sex"> 女
</label>

<div class="radio disabled">
      <label>
          <input type="radio" name="sex" disabled> 男
      </label>
</div>

*在 label 上设置class*

.checkbox-inline    //   内联一行显示的复选框

.radio-inline         //     内联一行显示的单选框

 

 三、下拉列表

<select class="form-control">
       <option>1</option>
       <option>2</option>
       <option>3</option>
       <option>4</option>
</select>

.form-control         //    select 100% 显示，并且赋有样式

 

四、校验的状态

<div class="form-group has-success">
        <label for="Email" class="control-label">电子邮件</label>
        <input type="email" name="Email" class="form-control" placeholder="请输入您的电子邮件">
</div>

*在 div 上设置class,与form-group同级存在*

.has-success        //   成功状态

.has-error           //   错误状态

.has-warning     //    警告状态

*在 label 上设置class*

<label class="control-label"></label>         //  label标签同步相应的状态

 

五、添加额外的图标

<div class="form-group has-success has-feedback">
        <label for="Email" class="control-label">电子邮件</label>
        <input type="email" name="Email" class="form-control" placeholder="请输入您的电子邮件">
        <span class="glyphicon glyphicon-ok form-control-feedbak"></span>
</div>

.has-feedback     //    获取相对定位

.form-control-feedback     //    获取绝对定位，并且与父元素标签同步相应的状态，即继承has-success样式

P.s.

.glyphicon-ok                       //  成功状态

.glyphicon-warning-sign     //  警告状态

.glyphicon-remove             //  错误状态

 

六、控制尺寸（从大到小）

*在 input 上设置class*

.input-lg  

不设置样式  

.input-sm  

*也可在 父元素 上设置class来调整*

.form-group-lg 

.form-group-sm

 

七、图片

*在 img 上设置class*

.img-rounded          //   形状-圆角矩形

.img-circle              //   形状-椭圆或者圆

.img-thumbnail      //   形状-缩略提，加个边框和圆角矩形，边框有白色填充

.img-responsive    //    响应式图片