03_Bootstrap基础组件03

7 表单

7.1 基本实例

设置了 .form-control 类的表单元素，默认设置宽度属性为 width: 100%;。将 label 元素和表单元素包裹在 .form-group 中可以按照排好的样式进行展示。

<form action="#" method="post">
    <div class="form-group">
        <label for="email1">邮箱地址</label>
        <input type="email" class="form-control" id="email1" placeholder="请输入邮箱地址" />
    </div>
    <div class="form-group">
        <label for="password1">密码</label>
        <input type="password" class="form-control" id="password1" placeholder="请输入密码" />
    </div>
    <div class="form-group">
        <label for="uploadfile">上传文件</label>
        <input type="file" id="uploadfile">
        <p class="help-block">选择文件进行上传.</p>
    </div>
    <div class="checkbox">
        <label>
            <input type="checkbox" name="agree" />同意协议
        </label>
    </div>
    <button type="submit" class="btn btn-default btn-block">Submit</button>
</form>

7.2 内联表单

为 <form> 元素添加 .form-inline 类可使其内容左对齐并且表现为 inline-block 显示方式。

<form class="form-inline" action="#" method="post">
    <div class="form-group">
        <label for="email1">邮箱地址</label>
        <input type="email" class="form-control" id="email1" placeholder="请输入邮箱地址" />
    </div>
    <div class="form-group">
        <label for="password1">密码</label>
        <input type="password" class="form-control" id="password1" placeholder="请输入密码" />
    </div>
    <div class="checkbox">
        <label>
            <input type="checkbox" name="agree" />同意协议
        </label>
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
</form>

7.3 水平排列的表单

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

<form class="form-horizontal" action="#" method="post">
    <div class="form-group">
        <label for="email1" class="col-sm-2">邮箱地址</label>
        <div class="col-sm-10">
            <input type="email" class="form-control" id="email1" placeholder="请输入邮箱地址" />
        </div>
    </div>
    <div class="form-group">
        <label for="password1" class="col-sm-2">密码</label>
        <div class="col-sm-10">
            <input type="password" class="form-control" id="password1" placeholder="请输入密码" />
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <button type="submit" class="btn btn-default">登录</button>
        </div>
    </div>
</form>

7.4 支持属性

支持的属性有 text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel 和 color。

注：只有正确设置了 type 属性的输入控件才能被赋予正确的样式。

<input type="text" class="form-control" placeholder="文本输入框">

7.5 静态控件

如果需要在表单中将一行纯文本和 label 元素放置于同一行，为 <p> 元素添加 .form-control-static 类即可。

<form class="form-horizontal">
    <div class="form-group">
        <label class="col-sm-2 control-label">Email</label>
        <div class="col-sm-10">
            <p class="form-control-static">email@example.com</p>
        </div>
    </div>
    <div class="form-group">
        <label for="inputPassword" class="col-sm-2 control-label">Password</label>
        <div class="col-sm-10">
            <input type="password" class="form-control" id="inputPassword" placeholder="Password">
        </div>
    </div>
</form>

7.6 禁用状态

为输入框设置 disabled 属性可以禁止其与用户有任何交互（焦点、输入等）。被禁用的输入框颜色更浅，并且还添加了 not-allowed 鼠标状态。

<input class="form-control" id="disabledInput" type="text" placeholder="禁用输入框" disabled>

7.7 只读状态

为输入框设置 readonly 属性可以禁止用户修改输入框中的内容。处于只读状态的输入框颜色更浅（就像被禁用的输入框一样），但是仍然保留标准的鼠标状态。

<input class="form-control" type="text" placeholder="只读输入框" readonly>

7.8 提示文字

通过 .help-block 定义输入框的提示文字，使用 aria-describedby 属性所涉及的表单控件进行关联。

<label for="username">姓名</label>
<input type="text" id="username" class="form-control" aria-describedby="helpBlock">
<span id="helpBlock" class="help-block">您的信息会加密保存，请放心填写</span>

7.9 校验状态

添加 .has-warning、.has-error 或 .has-success 类到父元素即可，显示对应的状态样式。元素之内的 .control-label、.form-control 和 .help-block 都将进行样式的变化。

<div class="form-group has-warning">
    <label for="username" class="control-label">姓名</label>
    <input type="text" id="username" class="form-control" aria-describedby="helpBlock">
    <span id="helpBlock" class="help-block">您的信息会加密保存，请放心填写</span>
</div>
<div class="form-group has-success">
    <label for="username" class="control-label">姓名</label>
    <input type="text" id="username" class="form-control" aria-describedby="helpBlock">
    <span id="helpBlock" class="help-block">您的信息会加密保存，请放心填写</span>
</div>
<div class="form-group has-error">
    <label for="username" class="control-label">姓名</label>
    <input type="text" id="username" class="form-control" aria-describedby="helpBlock">
    <span id="helpBlock" class="help-block">您的信息会加密保存，请放心填写</span>
</div>

7.10 输入框小图标

设置相应的 .has-feedback 类并添加正确的图标。

<div class="form-group has-success has-feedback">
    <label for="email1" class="control-label">邮箱地址</label>
    <input type="email" class="form-control" id="email1" placeholder="请输入邮箱地址" />
    <span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span>
</div>

<div class="form-group has-success has-feedback">
    <label for="email1" class="control-label">邮箱地址</label>
    <div class="input-group">
        <span class="input-group-addon">@</span>
        <input type="email" class="form-control" id="email1" placeholder="请输入邮箱地址" />
    </div>
    <span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span>
</div>

7.11 尺寸调整

通过 .input-lg 类似的类可以为控件设置高度

<input class="form-control input-lg" type="text" placeholder=".input-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control input-sm" type="text" placeholder=".input-sm">

通过添加 .form-group-lg 或 .form-group-sm 类，为 .form-horizontal 包裹的 label 元素和表单控件快速设置尺寸。

<form class="form-horizontal">
    <div class="form-group form-group-lg">
        <label class="col-sm-2 control-label" for="formGroupInputLarge">Large label</label>
        <div class="col-sm-10">
            <input class="form-control" type="text" id="formGroupInputLarge" placeholder="Large input">
        </div>
    </div>
    <div class="form-group form-group-sm">
        <label class="col-sm-2 control-label" for="formGroupInputSmall">Small label</label>
        <div class="col-sm-10">
            <input class="form-control" type="text" id="formGroupInputSmall" placeholder="Small input">
        </div>
    </div>
</form>

7.12 调整列尺寸

用栅格系统中的列（column）包裹输入框或其任何父元素，都可很容易的为其设置宽度。

<div class="row">
    <div class="col-xs-2">
        <input type="text" class="form-control" placeholder=".col-xs-2">
    </div>
    <div class="col-xs-3">
        <input type="text" class="form-control" placeholder=".col-xs-3">
    </div>
    <div class="col-xs-4">
        <input type="text" class="form-control" placeholder=".col-xs-4">
    </div>
</div>

8 按钮

8.1 基础按钮

Bootstrap 中可作为按钮使用的标签或元素。

为 a、button 或 input 元素添加按钮类 .btn 即可使用 Bootstrap 提供的样式。

<a class="btn" href="#" role="button">Link</a>
<button class="btn" type="submit">Button</button>
<input class="btn" type="button" value="Input">
<input class="btn" type="submit" value="Submit">

注意：

如果 <a> 元素被作为按钮使用，并用于在当前页面触发某些功能，而不是用于链接其他页面或链接当前页面中的其他部分，那么，务必为其设置 role=“button” 属性
尽可能使用 button 元素来获得在各个浏览器上获得相同的显示效果

8.2 预定义样式

使用下面列出的类可以快速创建一个带有预定义样式的按钮。

<button type="button" class="btn btn-default">（默认样式）Default</button>
<button type="button" class="btn btn-primary">（首选项）Primary</button>
<button type="button" class="btn btn-success">（成功）Success</button>
<button type="button" class="btn btn-info">（一般信息）Info</button>
<button type="button" class="btn btn-warning">（警告）Warning</button>
<button type="button" class="btn btn-danger">（危险）Danger</button>
<button type="button" class="btn btn-link">（链接）Link</button>

8.3 按钮的尺寸

当你需要让按钮具有不同尺寸的时候，同样是使用 .btn-lg、.btn-sm 或 .btn-xs 就可以获得不同尺寸的按钮。

<p>
    <button type="button" class="btn btn-primary btn-lg">大按钮</button>
    <button type="button" class="btn btn-default btn-lg">大按钮</button>
</p>
<p>
    <button type="button" class="btn btn-primary">默认尺寸</button>
    <button type="button" class="btn btn-default">默认尺寸</button>
</p>
<p>
    <button type="button" class="btn btn-primary btn-sm">小按钮</button>
    <button type="button" class="btn btn-default btn-sm">小按钮</button>
</p>
<p>
    <button type="button" class="btn btn-primary btn-xs">超小尺寸</button>
    <button type="button" class="btn btn-default btn-xs">超小尺寸</button>
</p>

通过给按钮添加 .btn-block 类可以将其拉伸至父元素100%的宽度，而且按钮也变为了块级（block）元素。

<p>
    <button type="button" class="btn btn-primary btn-lg btn-block">块级元素</button>
    <button type="button" class="btn btn-default btn-lg btn-block">块级元素</button>
</p>

8.4 激活状态

添加 .active 类，表示当前按钮是按压状态

<p>
    <button type="button" class="btn btn-primary btn-lg">首选项按钮</button>
    <button type="button" class="btn btn-primary btn-lg active">首选项按钮</button>
    <a href="#" class="btn btn-primary btn-lg" role="button">首选项按钮</a>
    <a href="#" class="btn btn-primary btn-lg active" role="button">首选项按钮</a>
</p>

8.5 禁用状态

添加 disabled 属性，使其表现出禁用状态。

<p>
    <button type="button" class="btn btn-default btn-lg" disabled="disabled">默认按钮</button>
    <button type="button" class="btn btn-primary btn-lg" disabled="disabled">首选项按钮</button>
    <a href="#" class="btn btn-default btn-lg disabled" role="button">默认按钮</a>
    <a href="#" class="btn btn-primary btn-lg disabled" role="button">首选项按钮</a>
</p>

8.6 按钮组

通过按钮组容器 .btn-group 把一组按钮放在同一行里。

<div class="btn-group">
    <button type="button" class="btn btn-default">按钮1</button>
    <button type="button" class="btn btn-default">按钮2</button>
    <button type="button" class="btn btn-default">按钮3</button>
</div>

通过容器 .btn-toolbar 可以把按钮组继续进行嵌套。

<div class="btn-toolbar">
    <div class="btn-group">
        <button type="button" class="btn btn-default">1</button>
        <button type="button" class="btn btn-default">2</button>
        <button type="button" class="btn btn-default">3</button>
    </div>
    <div class="btn-group">
        <button type="button" class="btn btn-default">4</button>
        <button type="button" class="btn btn-default">5</button>
        <button type="button" class="btn btn-default">6</button>
    </div>
    <div class="btn-group">
        <button type="button" class="btn btn-default">7</button>
        <button type="button" class="btn btn-default">8</button>
        <button type="button" class="btn btn-default">9</button>
        <button type="button" class="btn btn-default">10</button>
    </div>
</div>

给 .btn-group 加上 .btn-group-* 类，可以为当前按钮组的按钮设置统一的尺寸，就省去为按钮组中的每个按钮都赋予尺寸类了，如果包含了多个按钮组时也适用。

<div class="btn-group btn-group-lg">
    <button type="button" class="btn btn-default">1</button>
    <button type="button" class="btn btn-default">2</button>
    <button type="button" class="btn btn-default">3</button>
</div>
<div class="btn-group">
    <button type="button" class="btn btn-default">4</button>
    <button type="button" class="btn btn-default">5</button>
    <button type="button" class="btn btn-default">6</button>
</div>
<div class="btn-group btn-group-sm">
    <button type="button" class="btn btn-default">7</button>
    <button type="button" class="btn btn-default">8</button>
    <button type="button" class="btn btn-default">9</button>
</div>
<div class="btn-group btn-group-xs">
    <button type="button" class="btn btn-default">10</button>
    <button type="button" class="btn btn-default">11</button>
    <button type="button" class="btn btn-default">12</button>
    <button type="button" class="btn btn-default">13</button>
</div>

使用 .btn-group-vertical 让一组按钮垂直堆叠排列显示。

<div class="btn-group-vertical">
    <button type="button" class="btn btn-default">1</button>
    <button type="button" class="btn btn-default">2</button>
    <button type="button" class="btn btn-default">3</button>
</div>

可以将 .btn 元素包裹到 .btn-group.btn-group-justified 中实现两端对齐的按钮组。

注意：用 <button> 实现的按钮，需要包裹在 .btn-group 容器中

<div class="btn-group btn-group-justified">
    <a href="#" class="btn btn-default">1</a>
    <a href="#" class="btn btn-default">2</a>
    <a href="#" class="btn btn-default">3</a>
</div>

<div class="btn-group btn-group-justified">
    <div class="btn-group">
        <button type="button" class="btn btn-default">1</button>
    </div>
    <div class="btn-group">
        <button type="button" class="btn btn-default">2</button>
    </div>
    <div class="btn-group">
        <button type="button" class="btn btn-default">3</button>
    </div>
</div>

9 响应式图片

在 Bootstrap 中，通过给图片添加 .img-responsive 类可以让图片支持响应式布局。其实质是为图片设置了以下样式，从而让图片在父元素中更好的缩放。

max-width:100%;
height:auto;
display:block;

注意：使用 .center-block 类让图片水平居中

<img class="img-responsive center-block" src="http://www.ayunhe.com/content/uploads/2019/11/157447462086310494.jpg" alt="">

通过为 img 标签添加以下的类名，可以让图片呈现不同的形状。

.img-rounded /*圆角*/
.img-circle  /* 圆 */
.img-thumbnail /*双线*/

10 响应式工具

通过单独或联合使用以下列出的类，可以针对不同屏幕尺寸隐藏或显示页面内容。（星号可取值为 block、inline、inline-block）

类组	超小屏幕手机 (<768px)	小屏幕平板 (≥768px)	中等屏幕桌面 (≥992px)	大屏幕桌面 (≥1200px)
`.visible-xs-*`	可见	隐藏	隐藏	隐藏
`.visible-sm-*`	隐藏	可见	隐藏	隐藏
`.visible-md-*`	隐藏	隐藏	可见	隐藏
`.visible-lg-*`	隐藏	隐藏	隐藏	可见
`.hidden-xs`	隐藏	可见	可见	可见
`.hidden-sm`	可见	隐藏	可见	可见
`.hidden-md`	可见	可见	隐藏	可见
`.hidden-lg`	可见	可见	可见	隐藏

修改元素的 display 属性（星号可取值为 xs、sm、md、lg）

类组	CSS `display`
`.visible-*-block`	`display: block;`
`.visible-*-inline`	`display: inline;`
`.visible-*-inline-block`	`display: inline-block;`

响应式可见案例

<div class="container">
    <div class="row">
        <div class="col-xs-6">
            <span class="hidden-xs">超小屏幕</span>
            <span class="visible-xs-block">✔ 在超小屏幕上可见</span>
        </div>
        <div class="col-xs-6">
            <span class="hidden-sm">小屏幕</span>
            <span class="visible-sm-block">✔ 在小屏幕上可见</span>
        </div>
        <div class="clearfix visible-xs-block"></div>
        <div class="col-xs-6">
            <span class="hidden-md">中等屏幕</span>
            <span class="visible-md-block">✔ 在中等屏幕上可见</span>
        </div>
        <div class="col-xs-6">
            <span class="hidden-lg">大屏幕</span>
            <span class="visible-lg-block">✔ 在大屏幕上可见</span>
        </div>
    </div>
</div>