Bootstrap 表单和图片

一.表单

1.基本格式

<form>
    <div class="form-group">
        <label>电子邮件</label>
        <input type="email" class="form-control" placeholder="请输入您的电子邮箱" />
    </div>
    <div class="form-group">
        <label>密码</label>
        <input type="password" class="form-control" placeholder="请输入您的密码" />
    </div>
</form>

2.内联表单

让表单左对齐浮动，表现为inline-block内联块结构

<form class="form-inline">
    <div class="form-group">
        <label class="sr-only" for="name">名称</label>
        <input type="text" class="form-control" id="name" placeholder="请输入名称">
    </div>
    <div class="form-group">
        <label class="sr-only" for="inputfile">文件输入</label>
        <input type="file" id="inputfile">
    </div>
    <div class="checkbox">
                <label>
                    <input type="checkbox">请打勾
                </label>
    </div>
    <button type="submit" class="btn btn-default">提交</button>
</form>

补充：form-group:组间相距15px
form-control:宽度100%,边框浅灰色，4px圆角，阴影效果，得到焦点阴影边框变化，placeholder颜色为#999

3.水平表单

<form>

    <div class="form-group">
        <!--col-sm-2 栅格系统            control-label  和父元素样式同步-->
        <label class="col-sm-2 control-label">电子邮件</label>
    </div>
    <div class="col-sm-10">
        <input type="email" class="form-control" placeholder="请输入您的电子邮箱" />
    </div>

</form>

4.表单合组

<form>
    <div class="input-group">
        <div class="input-group-addon">￥</div>
        <input type="text" class="form-control" />
        <div class="input-group-addon">.00</div>
    </div>
</form>

5.表单控件

输入框
Bootstrap 提供了对所有原生的 HTML5 的 input 类型（即input[type=”“]）的支持，包括：text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel 和 color
若没有指定type类型，则无法得到对应样式

<form>
    <div class="form-group">
        <!--标签-->
        <label>标签</label>
        <!--文本输入 添加类名"form-control"使控件在各种表单风格中样式不出错，该样式表单控件宽度为100%或auto-->
        <input type="text" class="form-control" placeholder="文本输入" />
        <!--文本框-->
        文本框
        <textarea class="form-control" rows="3"></textarea>
    </div>
    <!--复选框-->
    <div class="checkbox">

        <label>
            <input type="checkbox">体育
        </label>
    </div>
    <div class="checkbox">
        <label> 
            <input type="checkbox">音乐
        </label>
    </div>
    <!--禁用复选框-->
    <div class="checkbox disabled">
        <label> 
            <input type="checkbox" disabled="disabled"> 美术
        </label>
    </div>
    <!--内联一行显示的复选框-->
    <label class="checkbox-inline"><input type="checkbox"disabled="disabled">英语</label>
    <label class="checkbox-inline disabled"><input type="checkbox"disabled="disabled数学">数学</label>
    <!--设置单选框-->
    <div class="radio disabled">
        <label><input type="radio" disabled="disabled" />男</label>
    </div>
    <!--下拉列表-->
    <select class="form-control">
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
    </select>
    <!--多选 下拉列表-->
    <select multiple class="form-control">
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
    </select>
</form>

补充：
对齐问题：

1. 无论是checkbox还是radio都用label包装
2. checkbox和label放在一个类名为”checkbox“的容器中
3. radio同label放在一个名类名为”radio“的容器中
   水平排列问题：
   如果checkbox水平排列，则在label标签上添加类名”checkbox-inline“，如果radio需要水平排列，在label标签添加类名”radio-inlie”

6.表单控件状态

focus: 点击或使用tab键聚焦
要让控件在焦点状态下有样式，需添加类名”form-control“ (主要是通过设置 .form-control:focus{} 样式实现)
disabled:
只需要在需禁用的表单控件上添加类名”disabled“即可。（实现方式：设置 .form-control[disabled]{}样式）
input->禁用输入框
fieldset->禁用字段集，设置后整个域都处于禁用状态
（若legend有输入框，则无法被禁用）

验证状态：
has-error 错误状态
has-success 成功状态
has-warning 警告状态

        <form class="form-horizontal" role="form">
            <!--focus 聚焦-->
            <div class="form-group">
                    <input class="col-sm-10 form-control" type="text" value="该输入框获得焦点...">      
            </div>
            <!--禁用input-->
            <div class="form-group">
                    <input class="col-sm-10 form-control" type="text" placeholder="该输入框禁止输入..." disabled>
            </div>
            <!--禁用fieldset-->
            <fieldset disabled>
                <div class="form-group">
                        <input type="text"class="col-sm-10 form-control" placeholder="禁止输入">
                </div>
                <div class="form-group">
                        <select class="col-sm-10 form-control">
                            <option>禁止选择</option>
                        </select>
                </div>
            </fieldset>
            <!--成功状态-->
            <div class="form-group has-success">
                <label class="col-sm-2 control-label" >输入成功</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" >
                </div>
            </div>
            <!--警告状态-->
            <div class="form-group has-warning">
                <label class="col-sm-2 control-label" >输入警告</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" >
                </div>
            </div>
            <!--错误状态-->
            <div class="form-group has-error">
                <label class="col-sm-2 control-label" >输入错误</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" >
                </div>
            </div>
        </form>

7.添加额外的图标

若想让表单在对应的状态显示icon，只需要在对应状态下添加类名class=“feedback”，且增加如下span属性：

<span class="glyphiconglyphicon-warning-sign form-control-feedback"></span>

样式说明：
glyphicon-ok 成功状态
glyphicon-warning-sign 警告状态
glyphicon-remove 错误状态

<div class="form-group has-feedback">
    <label>电子邮件</label>
    <input type="email" class="form-control" />
    <span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>
<div class="form-group has-feedback">
    <label>密码</label>
    <input type="password" class="form-control" />
    <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
</div>
<div class="form-group has-feedback">
    <label>电话</label>
    <input type="tel" class="form-control" />
    <span class="glyphicon glyphicon-remove form-control-feedback"></span>
</div>

8.表单控件大小

<form role="form">
    <!--默认-->
    <div class="form-group">
        <input class="form-control" type="text" placeholder="默认输入">
    </div>
    <!--.input-lg-->
    <div class="form-group">
        <input class="form-control input-lg" type="text" placeholder=".input-lg">
    </div>
    <!--.input-sm-->
    <div class="form-group">
        <select class="form-control input-sm">
            <option value="">.input-sm</option>
        </select>
    </div>
    <!--通过Bootstrap框架的网格系统控制表单宽度-->
    <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>
    <!--默认选项框-->
    <div class="form-group">
        <select class="form-control">
            <option value="">默认选择</option>
        </select>
    </div>
    <!--.input-lg选项框-->
    <div class="form-group">
        <select class="form-control input-lg">
            <option value="">.input-lg</option>
        </select>
    </div>
</form>

9.表单提示信息

使用“help-block”样式实现验证时提供不同提示信息的效果。（提示信息以块状显示在控件底部）

<form>
    <div class="form-group has-success has-feedback">
        <label class="control-label">成功状态</label>
        <input type="text" class="form-control" placeholder="成功状态">
        <span class="help-block">你输入的信息是正确的</span>
        <span class="glyphicon glyphicon-ok form-control-feedback"></span>
    </div>
</form>

二.图片

样式风格

• img-responsive：响应式图片，主要针对于响应式设计
• img-rounded：圆角图片
• img-circle：圆形图片
• img-thumbnail：缩略图片

<div class="container">
    <div class="row">
        <div class="col-sm-4">
            <img  src="img/cat.jpg">
            <div>默认图片</div>
        </div>
        <div class="col-sm-4">
            <img class="img-rounded"src="img/cat.jpg">
            <div>圆角图片</div>
        </div>
        <div class="col-sm-4">
            <img class="img-circle" src="img/cat.jpg">
            <div>圆形图片</div>
        </div>
        <div class="row">
            <div class="col-sm-6">
                <img class="img-thumbnail"  src="img/cat.jpg">
                <div>缩略图</div>
            </div>
            <div class="col-sm-6">
                <img class="img-responsive" src="img/cat.jpg" />
                <div>响应式图片</div>
            </div>
        </div>
    </div>
</div>