多选框和单选按钮·Bootstrap中文网

浏览器默认复选框和单选框在.form-check的帮助下被替换，.form-check是一系列针对两种输入类型的类，改进了HTML元素的布局和行为，提供了更好的自定义和跨浏览器一致性。复选框用于选择列表中的一个或多个选项，而单选按钮用于从多个选项中选择一个。

￥Browserdefaultcheckboxesandradiosarereplacedwiththehelpof.form-check,aseriesofclassesforbothinputtypesthatimprovesthelayoutandbehavioroftheirHTMLelements,thatprovidegreatercustomizationandcrossbrowserconsistency.Checkboxesareforselectingoneorseveraloptionsinalist,whileradiosareforselectingoneoptionfrommany.

从结构上讲，我们的和是兄弟元素，而不是中的。这稍微冗长一些，因为你必须指定id和for属性才能关联和。我们对所有状态使用同级选择器(~)，例如:checked或:disabled。与.form-check-label类结合使用时，我们可以根据的状态轻松设置每个项目的文本样式。

￥Structurally,oursandsaresiblingelementsasopposedtoanwithina.Thisisslightlymoreverboseasyoumustspecifyidandforattributestorelatetheand.Weusethesiblingselector(~)forallourstates,like:checkedor:disabled.Whencombinedwiththe.form-check-labelclass,wecaneasilystylethetextforeachitembasedonthe’sstate.

我们的检查使用自定义Bootstrap图标来指示已检查或不确定状态。

￥OurchecksusecustomBootstrapiconstoindicatecheckedorindeterminatestates.

￥Checks

通过JavaScript手动设置时，复选框可以利用:indeterminate伪类（没有可用的HTML属性来指定它）。

￥Checkboxescanutilizethe:indeterminatepseudoclasswhenmanuallysetviaJavaScript(thereisnoavailableHTMLattributeforspecifyingit).

添加disabled属性，关联的会自动设置样式以与较浅的颜色匹配，以帮助指示输入的状态。

￥Addthedisabledattributeandtheassociatedsareautomaticallystyledtomatchwithalightercolortohelpindicatetheinput’sstate.

开关具有自定义复选框的标记，但使用.form-switch类来渲染切换开关。考虑使用role="switch"更准确地将控制的性质传达给支持此角色的辅助技术。在较旧的辅助技术中，它只会被宣布为常规复选框作为后备。交换机还支持disabled属性。

￥Aswitchhasthemarkupofacustomcheckboxbutusesthe.form-switchclasstorenderatoggleswitch.Considerusingrole="switch"tomoreaccuratelyconveythenatureofthecontroltoassistivetechnologiesthatsupportthisrole.Inolderassistivetechnologies,itwillsimplybeannouncedasaregularcheckboxasafallback.Switchesalsosupportthedisabledattribute.

默认情况下，任意数量的直接同级复选框和单选框将垂直堆叠并与.form-check适当间隔。

￥Bydefault,anynumberofcheckboxesandradiosthatareimmediatesiblingwillbeverticallystackedandappropriatelyspacedwith.form-check.

通过将.form-check-inline添加到任何.form-check，将复选框或单选按钮分组到同一水平行。

￥Groupcheckboxesorradiosonthesamehorizontalrowbyadding.form-check-inlinetoany.form-check.

将复选框、单选按钮和开关放在具有.form-check-reverse修饰符类的另一侧。

￥Putyourcheckboxes,radios,andswitchesontheoppositesidewiththe.form-check-reversemodifierclass.

￥Checkboxtogglebuttons

支持.btn的不同变体，例如各种轮廓样式。

￥Differentvariantsof.btn,suchasthevariousoutlinedstyles,aresupported.