【Bootstrap学习笔记】1.Bootstrap介绍、排版样式、表格和按钮、表单和图片

四、表单和图片

学习内容：

• .form-control
• 表单群组
• 内联表单
• 表单合组
• 水平排列
• 复选框和单选框
• 下拉列表
• 校验状态
• 添加额外图标
• 控制大小
• 图片

.form-control

.form-control

<!--可定义from中输入框样式，可用于input,textarea,select-->
<label>电子邮件</label>
<input class="form-control" type="email" placeholder="请输入电子邮件">
<label>密码</label>
<input class="form-control" type="password" placeholder="请输入密码">

表单群组

.form-group

<!--表单群组-->
<div class="form-group">
    <label>电子邮件</label>
    <input class="form-control" type="email" placeholder="请输入电子邮件">
</div>

<div class="form-group">
    <label>密码</label>
    <input class="form-control" type="password" placeholder="请输入密码">
</div>

内联表单

.form-inline

<!--内联表单，让所有表单元素居于一行-->
<!--小于786px，会换行-->
<form class="form-inline">
        <div class="form-group">
            <label>电子邮件</label>
            <input class="form-control" type="email" placeholder="请输入电子邮件">
        </div>
        <div class="form-group">
            <label>密码</label>
            <input class="form-control" type="password" placeholder="请输入密码">
        </div>
</form>

表单合组

.input-group .input-group-addon

<!--仅有.input-group-addon 没有.input-group-->
    <div class="input-group-addon">￥</div>
    <input class="form-control" type="text" placeholder="请输入取款金额">
    <div class="input-group-addon">.00</div>
<br />
   <!--既有.input-group-addon 又有.input-group-->
    <div class="input-group">
        <div class="input-group-addon">￥</div>
        <input class="form-control" type="text" placeholder="请输入取款金额">
        <div class="input-group-addon">.00</div>
    </div>

水平排列（需用到栅格系统）

.from-horizontal .col-sm-2 .control-label

<form class="form-horizontal">
     <div class="form-group">
        <!--有用control-label同步-->
         <label class="col-sm-2 control-label">电子邮件</label>
         <div class="col-sm-10">
             <input class="form-control" type="email" placeholder="请输入电子邮件">
         </div>
     </div>

     <div class="form-group">
        <!--没有用control-label同步-->
         <label class="col-sm-2">密码</label>
         <div class="col-sm-10">
             <input class="form-control" type="password" placeholder="请输入密码">
         </div>
     </div>
 </form>

不懂
(1).form-horizontal
(2).control-label（同步?）

复选框和单选框

• 默认样式
• 设置禁用
• 设置内联
• radio与checkbox类似
  
  .checkbox 默认样式，写在外包的div上
  .disabled 设置禁用
  input禁用直接在input标签里设置disabled
  文本禁用分两种情况：
  (1)默认样式下，即外包有<div class="checkbox">时，div添加disabled样式，即<div class="checkbox disabled">
  (2)内联样式下，即<label><input type="checkbox">美术</label>，label添加disabled样式，
  即<label class="disabled"><input type="checkbox">美术</label>
.checkbox-inline 内联样式，写在label本身上

<!--无样式-->
<label><input type="checkbox">美术</label>
<label><input type="checkbox">音乐</label>
<!--默认样式，写在外包的DIV上-->
<div class="checkbox">
    <label>
        <input type="checkbox">美术
    </label>
</div>
<div class="checkbox disabled">
    <label>
        <input type="checkbox" disabled>音乐
    </label>
</div>

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

<!--内联样式，写在label上-->
<label class="checkbox-inline">
    <input type="checkbox">美术
</label>
<label class="checkbox-inline disabled">
    <input type="checkbox" disabled>音乐
</label>

<!--radio与checkbox一样-->
<label class="radio-inline">
    <input type="radio">音乐
</label>

下拉列表

直接使用样式 .form-control

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

校验状态

• .has-error 错误状态
• .has-success 成功状态
• .has-warning 警告状态

<form class="form-horizontal">
    <!--无状态，没有给label添加同步样式‘control-label’-->
    <div class="form-group ">
        <label class="col-sm-2">电子邮件</label>
        <div class="col-sm-10 ">
        <input class="form-control" type="email" placeholder="请输入电子邮件">
        </div>
    </div>

    <!--success，没有给label添加同步样式‘control-label’-->
    <div class="form-group has-success">
        <label class="col-sm-2">电子邮件</label>
        <div class="col-sm-10 ">
        <input class="form-control" type="email" placeholder="请输入电子邮件">
        </div>
    </div>

    <!--error和warning，给label添加同步样式‘control-label’-->
    <div class="form-group has-error">
        <label class="col-sm-2 control-label">电子邮件</label>
        <div class="col-sm-10 ">
        <input class="form-control" type="email" placeholder="请输入电子邮件">
        </div>
    </div>
    <div class="form-group has-warning">
        <label class="col-sm-2 control-label">电子邮件</label>
        <div class="col-sm-10 ">
        <input class="form-control" type="email" placeholder="请输入电子邮件">
        </div>
    </div>
</form>

不懂
又是.control-label（同步?）

添加额外图片(字体图标，非图片)

• .glyphicon-ok 成功
• .glyphicon-warning-sign 警告
• .glyphicon-remove 错误

<form class="form-horizontal">
    <div class="form-group ">
        <label class="col-sm-2">电子邮件</label>
        <div class="col-sm-10 ">
        <input class="form-control" type="email" placeholder="请输入电子邮件">
        </div>
    </div>

    <div class="form-group has-success">
        <label class="col-sm-2">电子邮件</label>
        <div class="col-sm-10 has-feedback">
            <input class="form-control" type="email" placeholder="请输入电子邮件">
            <span class="glyphicon glyphicon-ok form-control-feedback"></span>
        </div>
    </div>

    <div class="form-group has-warning">
        <label class="col-sm-2 control-label">电子邮件</label>
        <div class="col-sm-10 has-feedback">
            <input class="form-control" type="email" placeholder="请输入电子邮件">
            <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
        </div>
    </div>
    <div class="form-group has-error">
        <label class="col-sm-2 control-label">电子邮件</label>
        <div class="col-sm-10 has-feedback">
            <input class="form-control" type="email" placeholder="请输入电子邮件">
            <span class="glyphicon glyphicon-remove form-control-feedback"></span>
        </div>
    </div>
</form>

1.input后面添加span，给span添加样式.glyphicon和.glyphicon-ok，即 <span class="glyphicon glyphcion-ok"></span>
2.给span添加样式.form-control-feedback，即<span class="glyphicon glyphcion-ok form-control-feedback"></span>
3.给外围div增加样式.has-feedback

深入
(1).form-control-feedback
(2).has-feedback
(3).glyphicon与.glyphicon-ok同时使用？

控制大小

• .input-lg
• .input-sm

<input class="form-control input-lg" type="text" placeholder="大文本"><br>
<input class="form-control input-sm" type="text" placeholder="小文本"><br>
<input class="form-control" type="text" placeholder="默认文本">

图片

.img-rounded 圆角矩形
.img-circle 圆形或椭圆形
.img-thumbnail 缩略图（边框，圆角矩），已经具备响应式功能
.img-responsive 响应式图片

<img src="image/1.jpg" alt="原图">
<img src="image/1.jpg" alt="圆角矩形" class="img-rounded">
<img src="image/1.jpg" alt="圆形或椭圆形" class="img-circle img-responsive">
<img src="image/1.jpg" alt="缩略图" class="img-thumbnail">