0
点赞
收藏
分享

微信扫一扫

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 支持属性

支持的属性有 textpassworddatetimedatetime-localdatemonthtimeweeknumberemailurlsearchtelcolor

注:只有正确设置了 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>


举报

相关推荐

0 条评论