Bootstrap 4 表单

世界杯淘汰赛规则
2025-06-14 16:35:20

表单

Bootstrap提供了一些表单控件样式、布局选项，以及用来创建广泛多样化的的表单的自定义组件，以下是示例和使用指南。

概览

Bootstrap的表单控件使用了 CSS样式重置，使用这些Class类来自定义显示，以便跨越浏览器和设备获得一致的呈现。

确保在输入框上使用正确的 type 属性（如email 用于电子邮件地址或 number 用于数字录入) 从而利用较新的录入控制，包括诸如电子邮件验证、号码选择等。

以下是演示Bootstrap表单样式的一个经典示例展示，并推荐继续向下阅读有关class类、表单布局等文档。

Email address

We'll never share your email with anyone else.

Password

Check me out

Submit

表单控件

文本控件（如、）统一采用 .form-control 样式进行处理优化，包括常规外观、focus选（点）中状态、尺寸大小等。</p> <p>推荐浏览自定义表单以进一步了解 <select>控件的风格设计。</p> <p>Email address</p> <p>Example select</p> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> <p>Example multiple select</p> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> <p>Example textarea</p> <p><form></p> <p><div class="form-group"></p> <p><label for="exampleFormControlInput1">Email address</label></p> <p><input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com"></p> <p></div></p> <p><div class="form-group"></p> <p><label for="exampleFormControlSelect1">Example select</label></p> <p><select class="form-control" id="exampleFormControlSelect1"></p> <p><option>1</option></p> <p><option>2</option></p> <p><option>3</option></p> <p><option>4</option></p> <p><option>5</option></p> <p></select></p> <p></div></p> <p><div class="form-group"></p> <p><label for="exampleFormControlSelect2">Example multiple select</label></p> <p><select multiple class="form-control" id="exampleFormControlSelect2"></p> <p><option>1</option></p> <p><option>2</option></p> <p><option>3</option></p> <p><option>4</option></p> <p><option>5</option></p> <p></select></p> <p></div></p> <p><div class="form-group"></p> <p><label for="exampleFormControlTextarea1">Example textarea</label></p> <p><textarea class="form-control" id="exampleFormControlTextarea1" rows="3">

对于input文件选择控件，Bootstrap v4采用.form-control-file 取代了.form-control 。

Example file input

大小规格

使用 .form-control-lg 和 .form-control-sm属性定控件大小高度。

Large select

Default select

Small select

只读属性

在input控件上增加 readonly （布尔值）标签定义，以防止修改input中的值。仅能阅读的input控件显示较谈（就象禁用的输入框），但保留鼠标效果。

只读纯文本

如果你希望将属性进一步处理，显示为纯文本（没有控件框），你只要引用 .form-control-plaintext class样式，就能移除预设的表单样式，并保留适当的边距和填充间隙。

Password

Confirm identity

输入范围

使用设置水平滚动范围输入.form-control-range。

Example Range input

复选框与单选框

使用.form-check 可以格式化复选框和单选框按钮，用以改进它们的默认布局和动作呈现，复选框用于在列表中选择一个或多个选项，单选框则用于多许多选项中选择一个。

复选框和单选框也是可以禁用的，只要not-allowed在父级的悬停上提供定义，需要将该.disabled 类添加到父级.form-check，同时控件也会淡化文字颜色以灰色显示禁用状态。

默认堆叠

默认情况下，同级任意数量的复选框与单选框按钮垂直堆叠，并与.form-check有间隙隔离。

Option one is this and that—be sure to include why it's great

Option two is disabled

Option one is this and that—be sure to include why it's great

Option two is disabled

Option one is this and that—be sure to include why it's great

Option two can be something else and selecting it will deselect option one

Option three is disabled

Option one is this and that—be sure to include why it's great

Option two can be something else and selecting it will deselect option one

Option three is disabled

水平排列

通过添加 .form-check-inline到任何一个组，会使加到任何.form-check中的选取框平行排列。

3 (disabled)

没有标签

添加 .position-static 到 .form-check 选择器上，可以实现没有文本的输入，记住：仍然要为辅助浏览（友好访问）提供相应标签，如使用 aria-label定义。

布局

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

表单组

.form-group 群组可以向为表单赋予一些结构样式，其唯一目的是提供标签的控制配对以及margin-bottom 属性，由于它是一个class选择器，你可以在

、

或任何其它元素中使用它。

Example label

Another label

表单栅格排列

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

表格式排列

你也可以使用 .form-row来取代.row（它们二者很多时候可以互换使用），因为.form-row提供更小的沟槽缝隙。

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

Password

Address

Address 2

City

State

Choose...

...

Zip

Check me out

垂直排列表单

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

确保添加.col-form-label 到您上，以便他们垂直居中与他们相关的表单控件。元素，可以.col-form-legend样式定义，与普通元素相似。.

Password

Radios

First radio

Second radio

Third disabled radio

Checkbox

Example checkbox

垂直排列表单尺寸规格定义

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

栅格式列尺寸定义

如前面的示例所示，我們的栅格系統允許您将任意数量的的 code class="highlighter-rouge">.col放置在 code class="highlighter-rouge">.row 或 code class="highlighter-rouge">.form-row中,它们会在自动进行宽度分割（根据你的栅格定义），从而定义某列更窄或某列更宽（其余列享受流式布局宽度定义）。

自动调整大小

下面的示例使用一个flexbox弹性布局垂直居中的内容，我们将.col改为.col-auto，这样的列只占用本身内容所需要的宽度，换句话说列的大小就是内容的大小（宽度）

Name

Username

Remember me

Submit

然后，你可以重新混合不同大小的class样式。

Name

Username

Remember me

Submit

也支持自定义表单控件。.

Preference

Choose...

One

Two

Three

Remember my preference

Submit

内联式表单

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

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

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

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

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

Name

Username

Remember me

Submit

自定义表单和select选择控件也是支持的。

Preference

Choose...

One

Two

Three

Remember my preference

Submit

隐藏的标签替代

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

表单下方帮助提示文本

可以使用..form-text t（以前称为.help-block 在v3中）创建表单中的块级帮助文本。可以使用任何内联HTML元素和通用样式（如.text-muted）灵活的展示帮助提示文本。

表单控件下方的文字备注排版粘联

帮助提示文本应该与使用该aria-describedby与表单控制元件相关联，这将确保辅助技术（如读屏器）在用户focus点中或input输入时了解此帮助提示文字。

input 下方的帮助文字可以用 .form-text.，包括 display: block并添加一些 margin-top以便与上面input框有所间隔。

Password

Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.

Password

Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.

行内也可以嵌入任意典型的HTML元素（无是、 ,或其它样式)。

Password

Must be 8-20 characters long.

禁用表单

添加 disabled 布尔值属性到input上，就能防止使用者操作并看起来更灰淡。

Add the disabled attribute to a

to disable all the controls within.

Disabled input

Disabled select menu

Disabled select

Can't check this

Submit

附加说明与锚

默认情况下，浏览器会将

中所有的表单控制项（、、

元素。</p>
<p>Bootstrap ::invalid 和 :valid 樣式在 .was-validated ，通常会反馈到<form>，否则必填的内容在加载的过程中会显示无效，这个方法你呆以选择在任何时候启用它（通过是在尝试提交表单后。</p>
<p>作为备用，.is-invalid 和 .is-valid类别可以用来代替伪类用于服务器端验证。他们不需要.server side validation定义在父层上。</p>
<p>由于CSS的工作原理限制，我们无法（现在）将样式应用于DOM中的表单控制组件之前的<label>上，而不需要使用自用自定义JavaScript。</p>
<p>所有现代浏览器都支持约束验证API，这是一系列用于验证表单控件的JavaScript方法。</p>
<p>反馈消息可能会使用浏览器默认值（每个浏览器不同，通过私有CSS样式）或其他HTML和CSS的自定义反馈样式。</p>
<p>你可以在JavaScript中 使用setCustomValidity 提供有效自定义消息。</p>
<p>请参与以下的自定义表单验证样式、服务器端验证Class和浏览器默认值。</p>
<p>自定义样式</p>
<p>对于自定义Bootstrap表单验证消息，您需要将 novalidate属性添加到您的<form>。这将禁用浏览器默认的反馈工具提示，但仍提供对JavaScript中的表单验证API有效支持。尝试提交以下表格; 我们的JavaScript将拦截提交按钮并向您传递反馈:</p>
<p>尝试提交时，您将看到:invalid和 :valid的样式应用于表单控件。</p>
<p>When attempting to submit, you’ll see the styles applied to your form controls.</p>
<p>First name</p>
<p>Looks good!</p>
<p>Last name</p>
<p>Looks good!</p>
<p>Username</p>
<p>@</p>
<p>Please choose a username.</p>
<p>City</p>
<p>Please provide a valid city.</p>
<p>State</p>
<p>Please provide a valid state.</p>
<p>Zip</p>
<p>Please provide a valid zip.</p>
<p>Agree to terms and conditions</p>
<p>You must agree before submitting.</p>
<p>Submit form</p>
<p><form class="needs-validation" novalidate></p>
<p><div class="form-row"></p>
<p><div class="col-md-4 mb-3"></p>
<p><label for="validationCustom01">First name</label></p>
<p><input type="text" class="form-control" id="validationCustom01" placeholder="First name" value="Mark" required></p>
<p><div class="valid-feedback"></p>
<p>Looks good!</p>
<p></div></p>
<p></div></p>
<p><div class="col-md-4 mb-3"></p>
<p><label for="validationCustom02">Last name</label></p>
<p><input type="text" class="form-control" id="validationCustom02" placeholder="Last name" value="Otto" required></p>
<p><div class="valid-feedback"></p>
<p>Looks good!</p>
<p></div></p>
<p></div></p>
<p><div class="col-md-4 mb-3"></p>
<p><label for="validationCustomUsername">Username</label></p>
<p><div class="input-group"></p>
<p><div class="input-group-prepend"></p>
<p><span class="input-group-text" id="inputGroupPrepend">@</span></p>
<p></div></p>
<p><input type="text" class="form-control" id="validationCustomUsername" placeholder="Username" aria-describedby="inputGroupPrepend" required></p>
<p><div class="invalid-feedback"></p>
<p>Please choose a username.</p>
<p></div></p>
<p></div></p>
<p></div></p>
<p></div></p>
<p><div class="form-row"></p>
<p><div class="col-md-6 mb-3"></p>
<p><label for="validationCustom03">City</label></p>
<p><input type="text" class="form-control" id="validationCustom03" placeholder="City" required></p>
<p><div class="invalid-feedback"></p>
<p>Please provide a valid city.</p>
<p></div></p>
<p></div></p>
<p><div class="col-md-3 mb-3"></p>
<p><label for="validationCustom04">State</label></p>
<p><input type="text" class="form-control" id="validationCustom04" placeholder="State" required></p>
<p><div class="invalid-feedback"></p>
<p>Please provide a valid state.</p>
<p></div></p>
<p></div></p>
<p><div class="col-md-3 mb-3"></p>
<p><label for="validationCustom05">Zip</label></p>
<p><input type="text" class="form-control" id="validationCustom05" placeholder="Zip" required></p>
<p><div class="invalid-feedback"></p>
<p>Please provide a valid zip.</p>
<p></div></p>
<p></div></p>
<p></div></p>
<p><div class="form-group"></p>
<p><div class="form-check"></p>
<p><input class="form-check-input" type="checkbox" value="" id="invalidCheck" required></p>
<p><label class="form-check-label" for="invalidCheck"></p>
<p>Agree to terms and conditions</p>
<p></label></p>
<p><div class="invalid-feedback"></p>
<p>You must agree before submitting.</p>
<p></div></p>
<p></div></p>
<p></div></p>
<p><button class="btn btn-primary" type="submit">Submit form</button></p>
<p></form></p>
<p><script></p>
<p>// Example starter JavaScript for disabling form submissions if there are invalid fields</p>
<p>(function() {</p>
<p>'use strict';</p>
<p>window.addEventListener('load', function() {</p>
<p>// Fetch all the forms we want to apply custom Bootstrap validation styles to</p>
<p>var forms = document.getElementsByClassName('needs-validation');</p>
<p>// Loop over them and prevent submission</p>
<p>var validation = Array.prototype.filter.call(forms, function(form) {</p>
<p>form.addEventListener('submit', function(event) {</p>
<p>if (form.checkValidity() === false) {</p>
<p>event.preventDefault();</p>
<p>event.stopPropagation();</p>
<p>}</p>
<p>form.classList.add('was-validated');</p>
<p>}, false);</p>
<p>});</p>
<p>}, false);</p>
<p>})();</p>
<p></script></p>
<p>浏览器默认值</p>
<p>Not interested in custom validation feedback messages or writing JavaScript to change form behaviors? All good, you can use the browser defaults. Try submitting the form below. Depending on your browser and OS, you’ll see a slightly different style of feedback.</p>
<p>While these feedback styles cannot be styled with CSS, you can still customize the feedback text through JavaScript.</p>
<p>First name</p>
<p>Last name</p>
<p>Username</p>
<p>@</p>
<p>City</p>
<p>State</p>
<p>Zip</p>
<p>Agree to terms and conditions</p>
<p>Submit form</p>
<p><form></p>
<p><div class="form-row"></p>
<p><div class="col-md-4 mb-3"></p>
<p><label for="validationDefault01">First name</label></p>
<p><input type="text" class="form-control" id="validationDefault01" placeholder="First name" value="Mark" required></p>
<p></div></p>
<p><div class="col-md-4 mb-3"></p>
<p><label for="validationDefault02">Last name</label></p>
<p><input type="text" class="form-control" id="validationDefault02" placeholder="Last name" value="Otto" required></p>
<p></div></p>
<p><div class="col-md-4 mb-3"></p>
<p><label for="validationDefaultUsername">Username</label></p>
<p><div class="input-group"></p>
<p><div class="input-group-prepend"></p>
<p><span class="input-group-text" id="inputGroupPrepend2">@</span></p>
<p></div></p>
<p><input type="text" class="form-control" id="validationDefaultUsername" placeholder="Username" aria-describedby="inputGroupPrepend2" required></p>
<p></div></p>
<p></div></p>
<p></div></p>
<p><div class="form-row"></p>
<p><div class="col-md-6 mb-3"></p>
<p><label for="validationDefault03">City</label></p>
<p><input type="text" class="form-control" id="validationDefault03" placeholder="City" required></p>
<p></div></p>
<p><div class="col-md-3 mb-3"></p>
<p><label for="validationDefault04">State</label></p>
<p><input type="text" class="form-control" id="validationDefault04" placeholder="State" required></p>
<p></div></p>
<p><div class="col-md-3 mb-3"></p>
<p><label for="validationDefault05">Zip</label></p>
<p><input type="text" class="form-control" id="validationDefault05" placeholder="Zip" required></p>
<p></div></p>
<p></div></p>
<p><div class="form-group"></p>
<p><div class="form-check"></p>
<p><input class="form-check-input" type="checkbox" value="" id="invalidCheck2" required></p>
<p><label class="form-check-label" for="invalidCheck2"></p>
<p>Agree to terms and conditions</p>
<p></label></p>
<p></div></p>
<p></div></p>
<p><button class="btn btn-primary" type="submit">Submit form</button></p>
<p></form></p>
<p>服务器端</p>
<p>我们建议使用客户端验证，但是如果您需要使用服务器端验证，则可以使用..is-invalid和.is-valid来表示无效和有效的表单字段。注意，.invalid-feedback这些类也支持。</p>
<p>First name</p>
<p>Looks good!</p>
<p>Last name</p>
<p>Looks good!</p>
<p>Username</p>
<p>@</p>
<p>Please choose a username.</p>
<p>City</p>
<p>Please provide a valid city.</p>
<p>State</p>
<p>Please provide a valid state.</p>
<p>Zip</p>
<p>Please provide a valid zip.</p>
<p>Agree to terms and conditions</p>
<p>You must agree before submitting.</p>
<p>Submit form</p>
<p><form></p>
<p><div class="form-row"></p>
<p><div class="col-md-4 mb-3"></p>
<p><label for="validationServer01">First name</label></p>
<p><input type="text" class="form-control is-valid" id="validationServer01" placeholder="First name" value="Mark" required></p>
<p><div class="valid-feedback"></p>
<p>Looks good!</p>
<p></div></p>
<p></div></p>
<p><div class="col-md-4 mb-3"></p>
<p><label for="validationServer02">Last name</label></p>
<p><input type="text" class="form-control is-valid" id="validationServer02" placeholder="Last name" value="Otto" required></p>
<p><div class="valid-feedback"></p>
<p>Looks good!</p>
<p></div></p>
<p></div></p>
<p><div class="col-md-4 mb-3"></p>
<p><label for="validationServerUsername">Username</label></p>
<p><div class="input-group"></p>
<p><div class="input-group-prepend"></p>
<p><span class="input-group-text" id="inputGroupPrepend3">@</span></p>
<p></div></p>
<p><input type="text" class="form-control is-invalid" id="validationServerUsername" placeholder="Username" aria-describedby="inputGroupPrepend3" required></p>
<p><div class="invalid-feedback"></p>
<p>Please choose a username.</p>
<p></div></p>
<p></div></p>
<p></div></p>
<p></div></p>
<p><div class="form-row"></p>
<p><div class="col-md-6 mb-3"></p>
<p><label for="validationServer03">City</label></p>
<p><input type="text" class="form-control is-invalid" id="validationServer03" placeholder="City" required></p>
<p><div class="invalid-feedback"></p>
<p>Please provide a valid city.</p>
<p></div></p>
<p></div></p>
<p><div class="col-md-3 mb-3"></p>
<p><label for="validationServer04">State</label></p>
<p><input type="text" class="form-control is-invalid" id="validationServer04" placeholder="State" required></p>
<p><div class="invalid-feedback"></p>
<p>Please provide a valid state.</p>
<p></div></p>
<p></div></p>
<p><div class="col-md-3 mb-3"></p>
<p><label for="validationServer05">Zip</label></p>
<p><input type="text" class="form-control is-invalid" id="validationServer05" placeholder="Zip" required></p>
<p><div class="invalid-feedback"></p>
<p>Please provide a valid zip.</p>
<p></div></p>
<p></div></p>
<p></div></p>
<p><div class="form-group"></p>
<p><div class="form-check"></p>
<p><input class="form-check-input is-invalid" type="checkbox" value="" id="invalidCheck3" required></p>
<p><label class="form-check-label" for="invalidCheck3"></p>
<p>Agree to terms and conditions</p>
<p></label></p>
<p><div class="invalid-feedback"></p>
<p>You must agree before submitting.</p>
<p></div></p>
<p></div></p>
<p></div></p>
<p><button class="btn btn-primary" type="submit">Submit form</button></p>
<p></form></p>
<p>支持元素</p>
<p>示例表单显示了其中的原生文本 <input>定义，但也可为自定义表单控件提供表单验证样式。</p>
<p>Check this custom checkbox</p>
<p>Example invalid feedback text</p>
<p>Toggle this custom radio</p>
<p>Or toggle this other custom radio</p>
<p>More example invalid feedback text</p>
<p>Open this select menu</p>
<p>One</p>
<p>Two</p>
<p>Three</p>
<p>Example invalid custom select feedback</p>
<p>Choose file...</p>
<p>Example invalid custom file feedback</p>
<p><form class="was-validated"></p>
<p><div class="custom-control custom-checkbox mb-3"></p>
<p><input type="checkbox" class="custom-control-input" id="customControlValidation1" required></p>
<p><label class="custom-control-label" for="customControlValidation1">Check this custom checkbox</label></p>
<p><div class="invalid-feedback">Example invalid feedback text</div></p>
<p></div></p>
<p><div class="custom-control custom-radio"></p>
<p><input type="radio" class="custom-control-input" id="customControlValidation2" name="radio-stacked" required></p>
<p><label class="custom-control-label" for="customControlValidation2">Toggle this custom radio</label></p>
<p></div></p>
<p><div class="custom-control custom-radio mb-3"></p>
<p><input type="radio" class="custom-control-input" id="customControlValidation3" name="radio-stacked" required></p>
<p><label class="custom-control-label" for="customControlValidation3">Or toggle this other custom radio</label></p>
<p><div class="invalid-feedback">More example invalid feedback text</div></p>
<p></div></p>
<p><div class="form-group"></p>
<p><select class="custom-select" required></p>
<p><option value="">Open this select menu</option></p>
<p><option value="1">One</option></p>
<p><option value="2">Two</option></p>
<p><option value="3">Three</option></p>
<p></select></p>
<p><div class="invalid-feedback">Example invalid custom select feedback</div></p>
<p></div></p>
<p><div class="custom-file"></p>
<p><input type="file" class="custom-file-input" id="validatedCustomFile" required></p>
<p><label class="custom-file-label" for="validatedCustomFile">Choose file...</label></p>
<p><div class="invalid-feedback">Example invalid custom file feedback</div></p>
<p></div></p>
<p></form></p>
<p>提示</p>
<p>如果表单布局允许，则可以交换。.{valid | invalid} --tooltip 类的。.{valid|invalid}-tooltip 以在样式化的工具提示中显示验证反馈。 确保有一个父母的位置：相对工具提示定位。 在下面的例子中，我们的列类已经有了，但是你的项目可能需要一个替代的设置。</p>
<p>First name</p>
<p>Looks good!</p>
<p>Last name</p>
<p>Looks good!</p>
<p>Username</p>
<p>@</p>
<p>Please choose a unique and valid username.</p>
<p>City</p>
<p>Please provide a valid city.</p>
<p>State</p>
<p>Please provide a valid state.</p>
<p>Zip</p>
<p>Please provide a valid zip.</p>
<p>Submit form</p>
<p><form class="needs-validation" novalidate></p>
<p><div class="form-row"></p>
<p><div class="col-md-4 mb-3"></p>
<p><label for="validationTooltip01">First name</label></p>
<p><input type="text" class="form-control" id="validationTooltip01" placeholder="First name" value="Mark" required></p>
<p><div class="valid-tooltip"></p>
<p>Looks good!</p>
<p></div></p>
<p></div></p>
<p><div class="col-md-4 mb-3"></p>
<p><label for="validationTooltip02">Last name</label></p>
<p><input type="text" class="form-control" id="validationTooltip02" placeholder="Last name" value="Otto" required></p>
<p><div class="valid-tooltip"></p>
<p>Looks good!</p>
<p></div></p>
<p></div></p>
<p><div class="col-md-4 mb-3"></p>
<p><label for="validationTooltipUsername">Username</label></p>
<p><div class="input-group"></p>
<p><div class="input-group-prepend"></p>
<p><span class="input-group-text" id="validationTooltipUsernamePrepend">@</span></p>
<p></div></p>
<p><input type="text" class="form-control" id="validationTooltipUsername" placeholder="Username" aria-describedby="validationTooltipUsernamePrepend" required></p>
<p><div class="invalid-tooltip"></p>
<p>Please choose a unique and valid username.</p>
<p></div></p>
<p></div></p>
<p></div></p>
<p></div></p>
<p><div class="form-row"></p>
<p><div class="col-md-6 mb-3"></p>
<p><label for="validationTooltip03">City</label></p>
<p><input type="text" class="form-control" id="validationTooltip03" placeholder="City" required></p>
<p><div class="invalid-tooltip"></p>
<p>Please provide a valid city.</p>
<p></div></p>
<p></div></p>
<p><div class="col-md-3 mb-3"></p>
<p><label for="validationTooltip04">State</label></p>
<p><input type="text" class="form-control" id="validationTooltip04" placeholder="State" required></p>
<p><div class="invalid-tooltip"></p>
<p>Please provide a valid state.</p>
<p></div></p>
<p></div></p>
<p><div class="col-md-3 mb-3"></p>
<p><label for="validationTooltip05">Zip</label></p>
<p><input type="text" class="form-control" id="validationTooltip05" placeholder="Zip" required></p>
<p><div class="invalid-tooltip"></p>
<p>Please provide a valid zip.</p>
<p></div></p>
<p></div></p>
<p></div></p>
<p><button class="btn btn-primary" type="submit">Submit form</button></p>
<p></form></p>
<p>自定义表单</p>
<p>为了使自定义表单和跨浏览器保持一致性，请使用自定义的表单元素来替换浏览器的默认值，它们建立在语义和具备友了的标记之上，因此它们是可以替代任何默认表单控制元件的。</p>
<p>复选框和单选框自定义</p>
<p>每个选取块和选项按钮被包在一个 <label>中，因为理由有三：</p>
<p>这样能提供更大的点击区域。</p>
<p>这样能提供一个更加有意义的语义容器，以帮助我们替换默认的<input>组件。</p>
<p>这样会自动触发 <input> 的状态，省去引用JavaScript 插件。</p>
<p>我们使用opacity 隐藏默认的<input>并使用.custom-control-indicator在它的位置之上构建一个全新的表单指示器，遗憾的是，由于CSS的content对该元素不起作用，所以我们不能仅使用<input>构建一个自定义事件。</p>
<p>我们使用(~)CSS兄弟选择器来为<input>处理样式和状态，就象 :checked自定义窗体指示符一样，当与 .custom-control-description 结合使用，也可以根据<input>的状态对每个对象进行样式调整。</p>
<p>在检查状态下，我们使用 Open Iconic的base64 embedded SVG icons图标，，提供跨浏览器和样式设计的最佳控制器。</p>
<p>Checkbox勾选</p>
<p>Check this custom checkbox</p>
<p><div class="custom-control custom-checkbox"></p>
<p><input type="checkbox" class="custom-control-input" id="customCheck1"></p>
<p><label class="custom-control-label" for="customCheck1">Check this custom checkbox</label></p>
<p></div></p>
<p>通过JavaScript(当没有可用的HTML属性来指定它）手机设置时，自定义勾选控件还可以使用 :indeterminate 伪类（实现一种模糊的提示使用的样式）。</p>
<p>Check this custom checkbox</p>
<p>如果你正使用 jQuery，可以用下面方法：</p>
<p>$('.your-checkbox').prop('indeterminate', true)</p>
<p>单选项</p>
<p>Toggle this custom radio</p>
<p>Or toggle this other custom radio</p>
<p><div class="custom-control custom-radio"></p>
<p><input type="radio" id="customRadio1" name="customRadio" class="custom-control-input"></p>
<p><label class="custom-control-label" for="customRadio1">Toggle this custom radio</label></p>
<p></div></p>
<p><div class="custom-control custom-radio"></p>
<p><input type="radio" id="customRadio2" name="customRadio" class="custom-control-input"></p>
<p><label class="custom-control-label" for="customRadio2">Or toggle this other custom radio</label></p>
<p></div></p>
<p>一致</p>
<p>Toggle this custom radio</p>
<p>Or toggle this other custom radio</p>
<p><div class="custom-control custom-radio custom-control-inline"></p>
<p><input type="radio" id="customRadioInline1" name="customRadioInline1" class="custom-control-input"></p>
<p><label class="custom-control-label" for="customRadioInline1">Toggle this custom radio</label></p>
<p></div></p>
<p><div class="custom-control custom-radio custom-control-inline"></p>
<p><input type="radio" id="customRadioInline2" name="customRadioInline1" class="custom-control-input"></p>
<p><label class="custom-control-label" for="customRadioInline2">Or toggle this other custom radio</label></p>
<p></div></p>
<p>禁用</p>
<p>自定义单选框和多选框也可以禁用，只要将 disabled 布尔值属性加入到 <input> ，禁用的指示和样式都会自动载入。</p>
<p>Check this custom checkbox</p>
<p>Toggle this custom radio</p>
<p><div class="custom-control custom-checkbox"></p>
<p><input type="checkbox" class="custom-control-input" id="customCheckDisabled" disabled></p>
<p><label class="custom-control-label" for="customCheckDisabled">Check this custom checkbox</label></p>
<p></div></p>
<p><div class="custom-control custom-radio"></p>
<p><input type="radio" id="radio3" name="radioDisabled" id="customRadioDisabled" class="custom-control-input" disabled></p>
<p><label class="custom-control-label" for="customRadioDisabled">Toggle this custom radio</label></p>
<p></div></p>
<p>IOS风格开关</p>
<p>开关具有自定义复选框的标记，使用 .custom-switch 类来呈现切换开关。开关还支持 disabled属性(v4.2.1新增组件)。</p>
<p>Toggle this switch element</p>
<p>Disabled switch element</p>
<p><div class="custom-control custom-switch"></p>
<p><input type="checkbox" class="custom-control-input" id="customSwitch1"></p>
<p><label class="custom-control-label" for="customSwitch1">Toggle this switch element</label></p>
<p></div></p>
<p><div class="custom-control custom-switch"></p>
<p><input type="checkbox" class="custom-control-input" disabled id="customSwitch2"></p>
<p><label class="custom-control-label" for="customSwitch2">Disabled switch element</label></p>
<p></div></p>
<p>Select menu下拉选择菜单</p>
<p>自定义<select>下拉选择菜单只需要一个.custom-selectCSS即可触发自定义样式。</p>
<p>Open this select menu</p>
<p>One</p>
<p>Two</p>
<p>Three</p>
<p><select class="custom-select"></p>
<p><option selected>Open this select menu</option></p>
<p><option value="1">One</option></p>
<p><option value="2">Two</option></p>
<p><option value="3">Three</option></p>
<p></select></p>
<p>您也可以选择小和大的自定义选择来匹配我们相似大小的文本输入。</p>
<p>Open this select menu</p>
<p>One</p>
<p>Two</p>
<p>Three</p>
<p>Open this select menu</p>
<p>One</p>
<p>Two</p>
<p>Three</p>
<p><select class="custom-select custom-select-lg mb-3"></p>
<p><option selected>Open this select menu</option></p>
<p><option value="1">One</option></p>
<p><option value="2">Two</option></p>
<p><option value="3">Three</option></p>
<p></select></p>
<p><select class="custom-select custom-select-sm"></p>
<p><option selected>Open this select menu</option></p>
<p><option value="1">One</option></p>
<p><option value="2">Two</option></p>
<p><option value="3">Three</option></p>
<p></select></p>
<p>多重属性也被支持:</p>
<p>Open this select menu</p>
<p>One</p>
<p>Two</p>
<p>Three</p>
<p><select class="custom-select" multiple></p>
<p><option selected>Open this select menu</option></p>
<p><option value="1">One</option></p>
<p><option value="2">Two</option></p>
<p><option value="3">Three</option></p>
<p></select></p>
<p>如 size 属性:</p>
<p>Open this select menu</p>
<p>One</p>
<p>Two</p>
<p>Three</p>
<p><select class="custom-select" size="3"></p>
<p><option selected>Open this select menu</option></p>
<p><option value="1">One</option></p>
<p><option value="2">Two</option></p>
<p><option value="3">Three</option></p>
<p></select></p>
<p>范围</p>
<p>创建自定义<input type="range">与控制.custom-range。轨道（背景）和大拇指（值）都被设置为跨浏览器显示相同。由于只有IE和Firefox支持从拇指的左侧或右侧“填充”它们的轨迹，以作为视觉指示进度的手段，所以我们目前不支持它。</p>
<p>示例范围</p>
<p><label for="customRange1">Example range</label></p>
<p><input type="range" class="custom-range" id="customRange1"></p>
<p>范围输入分别具有min和max- 0和的隐含值100。您可以为那些使用min和max属性指定新值。</p>
<p>示例范围</p>
<p><label for="customRange2">Example range</label></p>
<p><input type="range" class="custom-range" min="0" max="5" id="customRange2"></p>
<p>默认情况下，范围输入“捕捉”为整数值。要改变这一点，你可以指定一个step 值。在下面的例子中，我们使用了两倍的步数step="0.5"。</p>
<p>示例范围</p>
<p><label for="customRange3">Example range</label></p>
<p><input type="range" class="custom-range" min="0" max="5" step="0.5" id="customRange3"></p>
<p>文件浏览（文件选取）器</p>
<p>推荐的自定义文件输入动画插件:bs-custom-file-input,这就是我们目前在文档中使用的内容.</p>
<p>文件浏览（选取）是比较原始粗糙的，它需要额外的JavaScript定义支持，如果你将Choose file…文件选取和所选文件的名称关联。</p>
<p>Choose file</p>
<p><div class="custom-file"></p>
<p><input type="file" class="custom-file-input" id="customFile"></p>
<p><label class="custom-file-label" for="customFile">Choose file</label></p>
<p></div></p>
<p>我们通过不透明度隐藏默认文件<input> via opacity而不是设置<label>的样式. 生成按钮并使用::after定位. 最后,我们在<input> 上声明width和height,以获得周围内容的适当间距.</p>
<p>使用SCSS翻译或自定义字符串</p>
<p>:lang() 伪类用于允许将“浏览”文本转换为其他语言. 使用相关语言标记和本地化字符串覆盖或添加$custom-file-text变量的条目. 例如，以下是如何添加西班牙语翻译（西班牙语的语言代码为es):</p>
<p>$custom-file-text: (</p>
<p>en: "Browse",</p>
<p>es: "Elegir"</p>
<p>);</p>
<p>这里是lang(es) 对西班牙语翻译的自定义文件输入的操作:</p>
<p>Seleccionar Archivo</p>
<p><div class="custom-file"></p>
<p><input type="file" class="custom-file-input" id="customFileLang" lang="es"></p>
<p><label class="custom-file-label" for="customFileLang">Seleccionar Archivo</label></p>
<p></div></p>
<p>您需要正确设置文档(或 subtree thereof)的语言才能显示正确的文本. 这可以使用<html>元素或Content-Language HTTP 标头上的lang 属性以及其他方法来完成</p>
<p>使用HTML翻译或自定义字符串</p>
<p>Bootstrap还提供了一种翻译HTML中“Browse”文本的方法，其中data-browse属性可以添加到自定义输入标签中（例如荷兰语）:</p>
<p>Voeg je document toe</p>
<p><div class="custom-file"></p>
<p><input type="file" class="custom-file-input" id="customFileLangHTML"></p>
<p><label class="custom-file-label" for="customFileLangHTML" data-browse="Bestand kiezen">Voeg je document toe</label></p>
<p></div></p>
</p>				<div class="laobuluo-post-label">
					
				</div>
			</div>
		</div>
		<div class="list-item-container">
			<ul class="laobuluo-Prev">
				<li><a href="/48e071021267c6cc/6517f052c789afb9.html">如何洗豆芽</a></li>
				<li class="r"><a href="/bbc7f8ff3c8720f6/e354547bd011de5f.html">长期咳咳咳不停、还胸闷气短？警惕患上这个病</a></li>
			</ul>
		</div>
	</div>
</div>
     
<script src="/static/js/custom.js" type="text/javascript"></script>
<footer class="footer text-center">
<p>友情链接：<script> var _mtj = _mtj || []; (function () { var mtj = document.createElement("script"); mtj.src = "https://node91.aizhantj.com:21233/tjjs/?k=c1aj82uodhz"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(mtj, s); })(); </script></p>
	<p>©2020 Copyright © 2022 2030年世界杯_世界杯集锦 - cnyouqituliao.com All Rights Reserved.</p>
</footer>

</html>