Bootstrap2用户指南
3.4.5 表单控件的尺寸
阅读(

Bootstrap基础

Bootstrap框架

Bootstrap基本样式

排版

源代码

表格

表单

表单的扩展控件

表单的基本控件

表单的可选布局

表单的默认布局

表单控件的尺寸

在Bootstrap中,有三种设置控件尺寸的方法,一种是让控件成为块级元素,一种是使用相对尺寸,一种是使用网格尺寸。

1、让控件成为块级元素

如果想让控件像块级元素一样占满容器,就可以为它添加 .input-block-level 类。这样,控件不仅可以占满容器,还可以根据浏览器窗口自动调整尺寸。如:

<input class="input-block-level" type="text" placeholder=".input-block-level">

效果如图 3‑43所示:

Bootstrap表单控件成为块级元素
图3-43 Bootstrap表单控件成为块级元素

2、使用相对尺寸

Bootstrap提供了 5 个相对尺寸的类,来设置控件的尺寸。按从小到大的顺序依次为:input-mini、input-small、input-medium、.input-large、input-xlarge、input-xxlarge。如:

<input class="input-mini" type="text" placeholder=".input-mini">
<input class="input-small" type="text" placeholder=".input-small">
<input class="input-medium" type="text" placeholder=".input-medium">
<input class="input-large" type="text" placeholder=".input-large">
<input class="input-xlarge" type="text" placeholder=".input-xlarge">
<input class="input-xxlarge" type="text" placeholder=".input-xxlarge">

效果如图 3‑44所示:

Bootstrap表单控件使用相对尺寸
图3-44 Bootstrap表单控件使用相对尺寸

3、使用网格尺寸

也可以使用 .span1 到 .span12,来基于网格设置控件大小。如:

<input class="span1" type="text" placeholder=".span1">
<input class="span2" type="text" placeholder=".span2">
<input class="span3" type="text" placeholder=".span3">
<select class="span1">
  ...
</select>
<select class="span2">
  ...
</select>
<select class="span3">
  ...
</select>

效果如图 3‑45所示:

Bootstrap表单控件使用网格尺寸
图3-45 Bootstrap表单控件使用网格尺寸

如果想让多个输入控件处在同一行,就可以添加 .controls-row 类。这样,Bootstrap 就会浮动控件,为控件添加适当的间距,并像 .row 类一样清除浮动。如:

<form>
  <div class="controls">
    <input class="span5" type="text" placeholder=".span5">
  </div>
  <div class="controls controls-row">
    <input class="span4" type="text" placeholder=".span4">
    <input class="span1" type="text" placeholder=".span1">
  </div>
  <div class="controls controls-row">
    <input class="span3" type="text" placeholder=".span3">
    <input class="span2" type="text" placeholder=".span2">
  </div>
  <div class="controls controls-row">
    <input class="span2" type="text" placeholder=".span2">
    <input class="span3" type="text" placeholder=".span3">
  </div>
  <div class="controls controls-row">
    <input class="span1" type="text" placeholder=".span1">
    <input class="span4" type="text" placeholder=".span4">
  </div>
</form>    

效果如图 3‑46所示:

Bootstrap表单控件在一行内显示
图3-46 Bootstrap表单控件在一行内显示

关于作者

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

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

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

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验