03_Bootstrap基础组件03

怼烎@ 2023-10-16 11:28 65阅读 0赞

### 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` 了。

#### 7.4 支持属性 ####

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

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

#### 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` 鼠标状态。

#### 7.7 只读状态 ####

为输入框设置 `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` 类并添加正确的图标。

#### 7.11 尺寸调整 ####

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

通过添加 `.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）包裹输入框或其任何父元素，都可很容易的为其设置宽度。

### 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` 就可以获得不同尺寸的按钮。

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

#### 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` 把一组按钮放在同一行里。

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

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

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

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

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

### 9 响应式图片 ###

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

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

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

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

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

### 10 响应式工具 ###

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

<table> 
 <thead> 
  <tr> 
   <th align="left">类组</th> 
   <th align="left">超小屏幕手机 (&lt;768px)</th> 
   <th align="left">小屏幕平板 (≥768px)</th> 
   <th align="left">中等屏幕桌面 (≥992px)</th> 
   <th align="left">大屏幕桌面 (≥1200px)</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left"><code>.visible-xs-*</code></td> 
   <td align="left">可见</td> 
   <td align="left">隐藏</td> 
   <td align="left">隐藏</td> 
   <td align="left">隐藏</td> 
  </tr> 
  <tr> 
   <td align="left"><code>.visible-sm-*</code></td> 
   <td align="left">隐藏</td> 
   <td align="left">可见</td> 
   <td align="left">隐藏</td> 
   <td align="left">隐藏</td> 
  </tr> 
  <tr> 
   <td align="left"><code>.visible-md-*</code></td> 
   <td align="left">隐藏</td> 
   <td align="left">隐藏</td> 
   <td align="left">可见</td> 
   <td align="left">隐藏</td> 
  </tr> 
  <tr> 
   <td align="left"><code>.visible-lg-*</code></td> 
   <td align="left">隐藏</td> 
   <td align="left">隐藏</td> 
   <td align="left">隐藏</td> 
   <td align="left">可见</td> 
  </tr> 
  <tr> 
   <td align="left"><code>.hidden-xs</code></td> 
   <td align="left">隐藏</td> 
   <td align="left">可见</td> 
   <td align="left">可见</td> 
   <td align="left">可见</td> 
  </tr> 
  <tr> 
   <td align="left"><code>.hidden-sm</code></td> 
   <td align="left">可见</td> 
   <td align="left">隐藏</td> 
   <td align="left">可见</td> 
   <td align="left">可见</td> 
  </tr> 
  <tr> 
   <td align="left"><code>.hidden-md</code></td> 
   <td align="left">可见</td> 
   <td align="left">可见</td> 
   <td align="left">隐藏</td> 
   <td align="left">可见</td> 
  </tr> 
  <tr> 
   <td align="left"><code>.hidden-lg</code></td> 
   <td align="left">可见</td> 
   <td align="left">可见</td> 
   <td align="left">可见</td> 
   <td align="left">隐藏</td> 
  </tr> 
 </tbody> 
</table>

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

<table> 
 <thead> 
  <tr> 
   <th align="left">类组</th> 
   <th align="left">CSS <code>display</code></th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left"><code>.visible-*-block</code></td> 
   <td align="left"><code>display: block;</code></td> 
  </tr> 
  <tr> 
   <td align="left"><code>.visible-*-inline</code></td> 
   <td align="left"><code>display: inline;</code></td> 
  </tr> 
  <tr> 
   <td align="left"><code>.visible-*-inline-block</code></td> 
   <td align="left"><code>display: inline-block;</code></td> 
  </tr> 
 </tbody> 
</table>

响应式可见案例

<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>