Bootstrap3实用教程
2.6.8 控件的尺寸
阅读(

Bootstrap基础

Bootstrap全局样式

概述

栅格系统

排版

源代码

表格

表单

控件的状态

帮助文本

静态控件

支持的控件

横向表单

行内表单

基本表单

控件的尺寸

在Bootstrap中,可以通过类似.input-lg的类为控件设置高度,类似.col-*的类为控件设置宽度。

1、高度尺寸

一般情况下,控件的默认高度就能满足要求。当然,你也可以为控件添加 .input-lg 类让它比默认尺寸高一点,或者添加 .input-sm 类让它比默认尺寸矮一点。如:

<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">
<select class="form-control input-lg">...</select>
<select class="form-control">...</select>
<select class="form-control input-sm">...</select>

效果如图 2‑68所示:

控件的高度
图2-68 控件的高度

对于横向表单,通过给包裹表单控件的容器添加.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">
    </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">
    </div>
  </div>
</form>

效果如图 2‑69所示:

横向表单的控件尺寸
图2-69 横向表单的控件尺寸

2、控件的宽度

由于输入型控件的默认宽度是父元素宽度的 100%,因此可以使用栅格系统中的列来包裹表单控件或其任何父元素,来间接的为控件设置宽度。如:

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

效果如图 2‑70所示:

控件的宽度
图2-70 控件的宽度

关于作者

歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我写出更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验