（三）表单和图片

一、表单

1. 基本实例

• 单独的表单控件会被自动赋予一些全局样式。所有设置了 .form-control 类的 <input>、<textarea> 和 <select> 元素都将被默认设置宽度属性为 width: 100%;。 将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列。

  <form>
        <div class="form-group">
            <label for="username">用户名</label>
            <input type="text" id="username" placeholder="请输入用户名"  class="form-control" >
        </div>

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

        <div class="form-group">
            <label for="email">邮件地址</label>
            <input type="email" class="form-control" id="email" placeholder="请输入邮箱">
        </div>
        <div class="form-group">
            <input type="submit" value="提交"  class="btn btn-primary">
        </div>
    </form>

结果如下图，注意：

  1. label中的for属性作用： 当鼠标点击该label时，鼠标光标会移动到id等于该for的值的元素中。

  2.将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列。

 

2.内联表单

• 为 <form> 元素添加 .form-inline 类可使其内容左对齐并且表现为 inline-block 级别的控件。只适用于视口（viewport）至少在 768px 宽度时（视口宽度再小的话就会使表单折叠）。
• 修改上述例子的代码，只修改如下部分：

 <form class="form-inline">

• 结果如下图。

• 请注意：

 

 3. 水平排列的表单

•  通过为表单添加 .form-horizontal 类，并联合使用 Bootstrap 预置的栅格类，可以将 label 标签和控件组水平并排布局。这样做将改变 .form-group 的行为，使其表现为栅格系统中的行（row），因此就无需再额外添加 .row 了。

<form class="form-horizontal">
        <div class="form-group">
            <label for="username" class="col-sm-2 control-label">用户名</label>
            <div class="col-sm-10 " >
                <input type="text" id="username" placeholder="请输入用户名"  class="form-control" >
            </div>
        </div>

        <div class="form-group">
            <label for="passwd" class="col-sm-2 control-label">密码</label>
            <div class="col-sm-10 " >
                <input type="text" id="passwd" placeholder="请输入密码"  class="form-control" >
            </div>
        </div>

        <div class="form-group">
            <label for="email" class="col-sm-2 control-label">邮件地址</label>
            <div class="col-sm-10 " >
               <input type="email" class="form-control" id="email" placeholder="请输入邮箱">
             </div>
        </div>

        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <div class="checkbox">
                    <label>
                        <input type="checkbox">    记住我
                    </label>
                </div>
            </div>
        </div>

        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <input type="submit" value="提交"  class="btn btn-primary">
            </div>
        </div>

    </form>

• 结果如下图，注意：

1. 这里用到了 col-sm 栅格系统，后面章节会重点讲解，而 control-label 表示和 父元素样式同步。

2. input 标签不能直接写 col-sm-10 样式，必须外面加一层div。
3. control-label的文本采用右对齐方式，加载label标签中，使得布局更合理。

 

 4.输入框组

通过在文本输入框 <input> 前面、后面或是两边加上文字或按钮，可以实现对表单控件的扩展。为 .input-group 赋予 .input-group-addon 或 .input-group-btn 类，可以给 .form-control 的前面或后面添加额外的元素。

• 注意：

1.  我们不支持在输入框的单独一侧添加多个额外元素（.input-group-addon 或 .input-group-btn）。
2. 我们不支持在单个输入框组中添加多个表单控件。

<div class="input-group">
            <label class="input-group-addon">$</label>
            <input type="text" class="form-control" placeholder="请输入金额">
            <label class="input-group-addon">.00</label>
        </div>

• 结果如下

 

 5.多选和单选框

•  默认外观（堆叠在一起）

  <div class="checkbox">
            <label>
                <input type="checkbox">音乐
            </label>
        </div>
        <div class="checkbox">
            <label>
                <input type="checkbox">玩游戏
            </label>
        </div>
        <div class="checkbox">
            <label>
                <input type="checkbox">旅游
            </label>
        </div>

        <div class="radio">
            <label>
                <input type="radio" name="sex"  value="man" checked>男
            </label>
        </div>

        <div class="radio">
            <label>
                <input type="radio" name="sex" value="woman">女
            </label>
        </div>

• 结果如下：

 

 

6.内联单选和多选框

 通过将 .checkbox-inline 或 .radio-inline 类应用到一系列的多选框（checkbox）或单选框（radio）控件上，可以使这些控件排列在一行。

     <label class="checkbox-inline">
                <input type="checkbox">音乐
            </label>
            <label class="checkbox-inline">
                <input type="checkbox">玩游戏
            </label>
            <label class="checkbox-inline">
                <input type="checkbox">旅游
            </label>

            <label class="radio-inline">
                <input type="radio" name="sex"  value="man" checked>男
            </label>

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

• 结果

 

 

7.下拉列表

//设置下拉列表

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

 

 8.校验状态

 Bootstrap 对表单控件的校验状态，如 error、warning 和 success 状态，都定义了样式。使用时，添加 .has-warning、.has-error或 .has-success 类到这些控件的父元素即可。任何包含在此元素之内的 .control-label、.form-control 和 .help-block 元素都将接受这些校验状态的样式。

<form class="form-horizontal">
        <div class="form-group has-success ">
            <label for="username" class="col-sm-2 control-label ">用户名</label>
            <div class="col-sm-10 " >
                <input type="text" id="username" placeholder="请输入用户名"  class="form-control " >
            </div>
        </div>

        <div class="form-group has-warning ">
            <label for="passwd" class="col-sm-2 control-label">密码</label>
            <div class="col-sm-10 " >
                <input type="text" id="passwd" placeholder="请输入密码"  class="form-control" >
            </div>
        </div>

        <div class="form-group has-error">
            <label for="email" class="col-sm-2 control-label">邮件地址</label>
            <div class="col-sm-10 " >
               <input type="email" class="form-control" id="email" placeholder="请输入邮箱">
             </div>
        </div>
</form>

• 结果如下

9.添加额外的图标

还可以针对校验状态为输入框添加额外的图标。只需设置相应的 .has-feedback 类并添加正确的图标即可。

• 注意：

1. 反馈图标（feedback icon）只能使用在文本输入框 <input class="form-control"> 元素上。
2. 对于不带有 label 标签的输入框以及右侧带有附加组件的输入框组，需要手动为其图标定位。为了让所有用户都能访问你的网站，我们强烈建议为所有输入框添加 label 标签。如果你不希望将 label 标签展示出来，可以通过添加 .sr-only 类来实现。如果的确不能添加 label 标签，请调整图标的 top 值。对于输入框组，请根据你的实际情况调整 right 值。

 <div class="form-group has-success has-feedback">
            <label for="username" class="col-sm-2 control-label ">用户名</label>
            <div class="col-sm-10 " >
                <input type="text" id="username" placeholder="请输入用户名"  class="form-control " >
                <span class="glyphicon glyphicon-ok form-control-feedback"></span>
            </div>
        </div>

• 结果

 

 10.控件尺寸

//从大到小

<input type="password" class="form-control input-lg">
 <input type="password" class="form-control"> 
<input type="password" class="form-control input-sm">

注：也可以设置父元素 form-group-lg、form-group-sm，来调整。

 

 二、图片

通过为 <img> 元素添加以下相应的类，可以让图片呈现不同的形状。

• 请时刻牢记：Internet Explorer 8 不支持 CSS3 中的圆角属性。

<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">

//响应式图片

<img src="img/pic.png" alt="图片" class="img-responsive">