表单的布局

表单的布局

 

自从Bootstrap使用display:block和width:100%在全部的input控件上后，表单默认都是基于垂直堆叠排列的，可以使用其他Class类来改变表单的布局。

• .form-group（表单组）

.form-group 可以向为表单赋予一些结构样式，目的是提供标签的控制配对以及margin-bottom属性，由于它是一个类选择器，可以在<div>或其他元素中使用它。

例如：

 <form>

    <div class="form-group row">

     <label class="col-form-label col-3 text-center">姓名</label>

       <input class="form-control col-9" type="text" name="name"/>

   </div>

</form>

• 栅格排列

使用栅格系统构建更复杂的表单，包括建立多列、多种宽度和其他对齐选项的布局

例如：

 

 

<form>

  <div class="row">

    <div class="col">

      <input type="text" class="form-control" placeholder="First name">

    </div>

    <div class="col">

      <input type="text" class="form-control" placeholder="Last name">

    </div>

  </div></form>

 

• 表格式排列

使用.form-row来取代row（二者间可互相使用），.form-row提供更小的沟槽缝隙。

 

还可以使用栅格系统建立更复杂的布局。

 

• 垂直排列表单

通过添加.row类 ，并使用.col-  -  等栅格组件来指定标签的宽度，可建立水平表单。

确保添加.col-form-label到<label>上，以便垂直居中

 

垂直排列表单尺寸规格：

使用.col-form-label-sm、 .col-form-label-lg到<label>上，可以定义控件大小，还有.form-control-lg、.form-control-sm样式也起相应作用。

 

• 自动调整大小

使用一个flexbox弹性布局垂直居中的内容，将.col改为.col-auto，这样的列只占用本身内容所需要的宽度，也就是列的大小就是内容的大小（宽度）。然后可以重新混合不同大小的class样式。

也支持自定义表单

 

• 内联式表单

使用 .form-inline样式在单个水平行上显示一系列标签，表单控件和按钮。内联表单中的表单控件与默认状态有点不同：

-基于display:flex控件组件，并允许使用间隙隔离和flexbox弹性布局样式。

-控制组件和input接受width:auto来覆盖预设的width:100%。

-控制组件只会在viewport 576px宽度是才会显示在行内，以便在移动设备上完整呈现。

你需要手动添加宽度或对齐在单个的控制元件上，通过间隙隔离定义，一定要将<label>包含在每个表单控制元件内，即使你需要使用.sr-only从非正常屏幕访问它或隐藏它。

<form class="form-inline">

  <label class="sr-only" for="inlineFormInputName2">Name</label>

  <input type="text" class="form-control mb-2 mr-sm-2" id="inlineFormInputName2" placeholder="Jane Doe">

 

  <label class="sr-only" for="inlineFormInputGroupUsername2">Username</label>

  <div class="input-group mb-2 mr-sm-2">

    <div class="input-group-prepend">

      <div class="input-group-text">@</div>

    </div>

    <input type="text" class="form-control" id="inlineFormInputGroupUsername2" placeholder="Username">

  </div>

 

  <div class="form-check mb-2 mr-sm-2">

    <input class="form-check-input" type="checkbox" id="inlineFormCheck">

    <label class="form-check-label" for="inlineFormCheck">

      Remember me

    </label>

  </div>

 

  <button type="submit" class="btn btn-primary mb-2">Submit</button></form>

 

 

 

• 隐藏的标签替代

 

如果没有为每个input添加标签，屏幕阅读器等辅助技术将对您的表单有困难。对于这些内联表单，可以使用.sr-only类隐藏标签。同时我们还提供了辅助技术标签以外的解决方法，例如：aria-label、aria-labelledby或title属性，如果这些都不存在，辅助技术可以使用placeholder的属性（如果它存在），但注意：不推荐使用placeholder替代其他标签方法。

 

• 禁用表单

添加disable布尔值到input上，就能防止操作而且看起来比较灰淡。

 

<form>

  <fieldset disabled>

    <div class="form-group">

      <label for="disabledTextInput">Disabled input</label>

      <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">

</div>

</form>

 

• 自定义表单

为了使自定义表单和跨浏览器保持一致性，请使用自定义的表单元素来替换浏览器的默认值。

1. 复选框和单选框自定义：

每个选取块和选项按钮被包在一个<label>中，因为：

-这样能提供更大的点击区域。

-能提供一个更加有意义的语义容器，以帮助我们替换默认的<inout>组件。

-会自动触发<input>的状态，省去引用JS插件。

我们使用opacity隐藏默认的<input>并使用.custom-control-indicator在它的位置之上构建一个全新的表单指示器，但是，由于CSS的content对该元素不起作用，所以不能仅使用<input>构建一个自定义事件。

使用（“~”）兄弟选择器来为<input>处理样式和状态，就像:checked自定义窗口指示符一样，当与.custom-control-description结合使用，也可以根据<input>的状态对每个对象进行样式调整。

2.checkbox勾选：

 

 

通过JavaScript(当没有可用的HTML属性来指定它)手机设置时，自定义勾选控件还可以使用:indeterminate伪类（实现一种模糊的提示使用的样式）

如果使用jQuery，可以用以下方法：

 

$('.checkbox').prop('indeterminate', true)；

 

3.IOS风格开关：

开关具有自定义复选框的标记，使用.custom-switch类来呈现切换开关。开关还支持disabled属性。

 

 

4.下拉选择菜单

自定义<select>下拉选择菜单只需要一个.custom-selectCSS即可触发自定义样式。

也可以选择大和小的自定义选择来匹配我们相似大小的文本输入

5.范围

创建自定义<input type=”range”>与控制.custom-range轨道（背景）和大拇指（值）都被设置为夸浏览器显示相同。由于只有IE和Firefox支持从拇指的左侧或右侧“填充”他们的轨迹。以作为视觉指示进度的手段，所以我们目前不支持它。

 

 

<label for="customRange1">Example range</label><input type="range" class="custom-range" id="customRange1">

 

输入范围分别具有min和max-0和隐含值100.可以为那些使用min和max属性指定新值。

<label for="customRange2">Example range</label><input type="range" class="custom-range" min="0" max="5" id="customRange2">

 

默认情况下，范围输入“捕捉”为整数值。要改变这一点，可以指定一个step值。

<label for="customRange3">Example range</label><input type="range" class="custom-range" min="0" max="5" step="0.5" id="customRange3">