Bootstrap 表单控件的尺寸

表单控件的尺寸

在Bootstrap中，有三种设置控件尺寸的方法，一种是让控件成为块级元素，一种是使用相对尺寸，一种是使用网格尺寸。1、让控件成为块级元素如果想让控件像块级元素一样占满容器，就可以为它添加 .input-block-level 类。这样，控件不仅可以占满容器，还可以根据浏览器窗口自动调整尺寸。如：

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

效果如图 3‑43所示：

图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所示：

图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所示：

图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所示：

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

版权声明：本文来自 歪脖网（http://www.waibo.wang/），转载请注明出处。