Forms（表单） - [ Bootstrap 4 中文开发手册 ] - 在线原生手册

简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)

예배 규칙서 찾다

Getting started Accessibility（无障碍） Browsers and devices（浏览器和设备） Build tools（构建工具） Contents（内容） Download（下载） JavaScript Theming Bootstrap（主题Bootstrap） Webpack Components: Alerts Alerts（警报） Components: Badges Badges（徽章） Components: Breadcrumb Breadcrumb Components: Button group Button group（按钮组） Components: Buttons Buttons（按钮） Components: Cards Components: Carousel Cards（卡） Carousel（圆盘传送带） Components: Collapse Collapse（折叠） Components: Dropdowns Dropdowns（下拉菜单） Components: Forms Forms（表单） Components: Input group Input group（输入群组） Components: Input group Jumbotron（广告大屏幕） Components: List group List group（列表组） Components: Modal Modal（互动视窗） Components: Navbar Navbar（导航栏） Components: Navs Navs（导航栏） Components: Pagination Pagination（分页） Components: Popovers Popovers（弹出框） Components: Progress Progress（进度条） Components: Scrollspy Scrollspy（滚动监听） Components: Tooltips Tooltips（提示工具） Content Code（代码） Figures（图片区） Images（图片） Reboot（重置） Tables（表格） Typography（排版） Layout Grid（网格） Layout（布局） Media object（多媒体对象） Utilities for layout（排版通用类别） Migration Migrating to v4（迁移到v4） Utilities Borders（边框） Clearfix（清除浮动） Close icon（关闭图标） Colors（颜色） Display property（显示属性） Embeds（内嵌） Flex（弹性） Float（浮动） Image replacement（图像替换） Position（位置） Screenreaders（荧幕阅读器） Sizing（尺寸） Spacing（间隔） Text（文本） Vertical alignment（垂直对齐） Visibility（能见度）

문자

表单控件样式、布局选项和自定义组件的示例和使用指南，用于创建多种窗体。

概述

引导程序的窗体控件扩展到我们重新启动的表单样式上课。使用这些类选择它们的自定义显示，以便在浏览器和设备之间进行更一致的呈现。

确保使用适当的type属性对所有输入%28e。g.email有关电子邮件地址或number关于数字信息%29，以利用较新的输入控件，如电子邮件验证，号码选择，等等。

下面是一个演示Bootstrap表单样式的快速示例。继续阅读有关所需类、表单布局等方面的文档。

  Email address  We'll never share your email with anyone else. 
  Password  
    Check me out

表单控件

文本窗体控件S，</code>s-是用<code>.form-control</code>上课。包括一般外观、焦点状态、大小大小等样式。</p> </div> </div> <div class="doc-postil"> <div class="c-markdown"> <p>一定要探索我们的定制表格以进一步的风格<code><select></code>S.</p> </div> </div> <div class="doc-postil"> <div class="c-markdown"> <pre class="prism-token token language-javascript"><form> <div class="form-group"> <label for="exampleFormControlInput1">Email address</label> <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com"> </div> <div class="form-group"> <label for="exampleFormControlSelect1">Example select</label> <select class="form-control" id="exampleFormControlSelect1"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> </div> <div class="form-group"> <label for="exampleFormControlSelect2">Example multiple select</label> <select multiple class="form-control" id="exampleFormControlSelect2"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> </div> <div class="form-group"> <label for="exampleFormControlTextarea1">Example textarea</label> <textarea class="form-control" id="exampleFormControlTextarea1" rows="3">


          
           
            对于文件输入，交换.form-control为.form-control-file...
           
          
          
           
              Example file input  
           
          
          
           
            上浆
           
          
          
           
            使用类似的类设置高度.form-control-lg和.form-control-sm...
           
          
          
           
            
           
          
          
           
            
           
          
          
           
            雷德
           
          
          
           
            添加readonly属性，以防止修改输入的值。只读输入看起来更轻%28，就像禁用的输入%29一样，但保留标准光标。
           
          
          
           
            
           
          
          
           
            只读纯文本
           
          
          
           
            如果你想元素样式为纯文本的窗体中的元素，请使用.form-control-plaintext类以移除默认窗体字段的样式，并保留正确的页边距和填充。
           
          
          
           
              Email   
 
  Password   
 
           
          
          
           
              Email  
  Password  
 
           
          
          
           
            复选框和收音机
           
          
          
           
            默认复选框和收音机是在以下帮助下进行改进的：.form-check，，，为这两种输入类型提供一个单独的类，以改进它们的HTML元素的布局和行为复选框用于选择列表中的一个或多个选项，而收音机则用于从多个选项中选择一个选项。
           
          
          
           
            支持禁用复选框和收音机，但要提供not-allowed光标在父节点的悬停上。，则需要添加.disabled类传递给父类。.form-check禁用类还将减轻文本颜色，以帮助指示输入的状态。
           
          
          
           
            默认%28堆栈%29
           
          
          
           
            默认情况下，任何数量的复选框和收音机都将垂直堆叠，并适当地用.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 can be something else and selecting it will deselect option one 
   Option three is disabled 
           
          
          
           
            内联
           
          
          
           
            将同一水平行上的复选框或收音机分组，方法是添加.form-check-inline给任何人.form-check...
           
          
          
           
               1 
   2 
   3 
           
          
          
           
               1 
   2 
   3 
           
          
          
           
            无标签
           
          
          
           
            加.position-static对内部的输入.form-check没有任何标签文字。记住仍然要为辅助技术提供某种形式的标签，例如，使用aria-label29%。

           
          
          
           
          
          
           
               
   
           
          
          
           
            布局
           
          
          
           
            因为Bootstrap适用display: block和width: 100%对于几乎所有的窗体控件，窗体默认将垂直堆栈。其他类可用于根据每个表单更改此布局。
           
          
          
           
            形式群
           
          
          
           
            大.form-group类是向窗体添加某些结构的最简单方法。它的唯一目的是提供margin-bottom围绕标签和控制配对。作为奖励，因为它是一个类，您可以使用它
S，S或几乎任何其他元素。

           
          
          
           
          
          
           
              Example label  
  Another label  
           
          
          
           
            表格网格
           
          
          
           
            可以使用我们的网格类构建更复杂的表单。将这些用于需要多列、不同宽度和其他对齐选项的表单布局。

           
          
          
           
          
          
           
                
   
 
           
          
          
           
            表格行
           
          
          
           
            你也可以交换.row为.form-row，这是我们标准网格行的一个变体，它覆盖了默认的列排水沟，以使布局更加紧凑。

           
          
          
           
          
          
           
                
   
 
           
          
          
           
            还可以用网格系统创建更复杂的布局。

           
          
          
           
          
          
           
               Email  
  Password  
 
  Address  
  Address 2  
   City  
  State  
  Zip  
 
     Check me out  
 
 
           
          
          
           
            水平形式
           
          
          
           
            通过添加.row类来形成组，并使用.col-*-*类指定标签和控件的宽度。
           
          
          
           
            一定要加上.col-form-label敬你的S也是如此，因此它们垂直地以其关联的窗体控件为中心。为元素，您可以使用.col-form-legend使它们看起来像普通的元素。

           
          
          
           
          
          
           
              Email   
 
  Password   
 
   Radios     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  
 
 
 
  Checkbox
     Check me out  
 
 
    
 
           
          
          
           
            水平标号尺寸
           
          
          
           
            确保使用.col-form-label-sm或.col-form-label-lg敬你的s正确地跟随.form-control-lg和.form-control-sm...

           
          
          
           
          
          
           
              Email   
 
  Email   
 
  Email   
 
           
          
          
           
            柱上浆
           
          
          
           
            如前面的示例所示，我们的网格系统允许您放置任意数量的.col在.row或.form-row.他们会平分可用的宽度。您还可以选择列的一个子集来占用更多或更少的空间，而其余的部分则会占用.cols与其他列类平分，具体列类如下.col-7...

           
          
          
           
          
          
           
                
   
   
 
           
          
          
           
            自动上浆
           
          
          
           
            下面的示例使用一个Flexbox实用程序垂直地将内容和更改中心化。.col到.col-auto这样，您的列只需要占用足够的空间。换句话说，列本身根据内容大小。

           
          
          
           
          
          
           
               Name  
  Username  @
  
 
     Remember me  
 
   
 
           
          
          
           
            然后，您可以再次将其与特定大小的列类混合。

           
          
          
           
          
          
           
               Name  
  Username  @
  
 
     Remember me  
 
   
 
           
          
          
           
            当然还有自定义窗体控件是支持的。

           
          
          
           
          
          
           
               Preference  
     Remember my preference  
   
 
           
          
          
           
            内联形式
           
          
          
           
            使用.form-inline类以在单个水平行上显示一系列标签、窗体控件和按钮。内联窗体中的窗体控件与其默认状态略有不同。
           
          
          
           
            
             控件是display: flex，折叠任何HTML空白，并允许您提供对齐控制间距和挠曲箱公用设施。
            
           
          
          
           
            
             控件和输入组接收width: auto若要重写引导默认设置，请执行以下操作width: 100%...
            
           
          
          
           
            
             控制仅在宽度至少为576 px的视图中显示内联。说明移动设备上的窄视口。
            
           
          
          
           
            您可能需要手动处理各个窗体控件的宽度和对齐方式。间距效用%28，如%29所示。最后，确保始终包括使用每个窗体控件，即使您需要对非屏幕阅读器访问者隐藏它.sr-only...

           
          
          
           
          
          
           
             Name  Username  @
  
    Remember me  
 
           
          
          
           
            还支持自定义窗体控件和选择。

           
          
          
           
          
          
           
             Preference     Remember my preference  
           
          
          
           
            隐藏标签的替代方案
           
          
          
           
            如果没有为每个输入都包含一个标签，屏幕阅读器等辅助技术就会给表单带来麻烦。对于这些内联窗体，可以使用.sr-only上课。还有其他为辅助技术提供标签的方法，例如aria-label，，，aria-labelledby或title属性。如果这些技术都没有出现，辅助技术可能会使用placeholder属性(如果存在)，但请注意placeholder作为其他标签方法的替代品，不建议使用其他标签方法。
           
          
          
           
            帮助文本
           
          
          
           
            可以使用以下方法创建窗体中的块级帮助文本：.form-text%28以前称为.help-block在v3%29。内联帮助文本可以使用任何内联HTML元素和实用程序类灵活实现，如.text-muted...
           
          
          
           
            将帮助文本与窗体控件关联
           
          
          
           
            帮助文本应该显式地与它所关联的窗体控件关联，使用aria-describedby属性。这将确保辅助技术--如屏幕阅读器--在用户聚焦或进入控件时宣布此帮助文本。
           
          
          
           
            输入下面的帮助文本可以用.form-text本课程包括display: block并在上面的输入中添加一些顶部空间，以便于间距。

           
          
          
           
          
          
           
            Password Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
           
          
          
           
            内联文本可以使用任何典型的内联HTML元素%28，，，，或者其他%29的东西，只有一个实用程序类。

           

          

          
           
          
          
           
              Password   Must be 8-20 characters long.  
           
          
          
           
            残疾表格
           
          
          
           
            添加disabled在输入上设置布尔属性，以防止用户交互，并使其看起来更轻。
           
          
          
           
            
           
          
          
           
            添加disabled属性为
若要禁用所有控件，请执行以下操作。

           
          
          
           
          
          
           
               Disabled input  
  Disabled select menu  
    Can't check this  
  
           
          
          
           
            有锚的警告
           
          
          
           
            默认情况下，浏览器将处理所有本机窗体控件%28，，，，，，</code>元素。</p></li>
            </ul>
           </div>
          </div>
          <div class="doc-postil">
           <div class="c-markdown">
            <ul class="ul-level-0 list-paddingleft-2" style="margin: 10px 0px 10px 20px;">
             <li><p>引导范围<code>:invalid</code>和<code>:valid</code>风格到父母<code>.was-validated</code>类，通常应用于<code><form></code>否则，任何没有值的必需字段在页面加载时都会显示为无效。通过这种方式，您可以选择何时激活它们(通常是在表单提交尝试%29之后)。</p></li>
            </ul>
           </div>
          </div>
          <div class="doc-postil">
           <div class="c-markdown">
            <ul class="ul-level-0 list-paddingleft-2" style="margin: 10px 0px 10px 20px;">
             <li><p>作为退路，<code>.is-invalid</code>和<code>.is-valid</code>类可以代替伪类。服务器端验证.他们不需要<code>.was-validated</code>家长班。</p></li>
            </ul>
           </div>
          </div>
          <div class="doc-postil">
           <div class="c-markdown">
            <ul class="ul-level-0 list-paddingleft-2" style="margin: 10px 0px 10px 20px;">
             <li><p>由于css工作方式上的限制，目前%29不能将样式应用到<code><label></code>在DOM中的表单控件之前，无需自定义JavaScript的帮助。</p></li>
            </ul>
           </div>
          </div>
          <div class="doc-postil">
           <div class="c-markdown">
            <ul class="ul-level-0 list-paddingleft-2" style="margin: 10px 0px 10px 20px;">
             <li><p>所有现代浏览器都支持约束验证API，用于验证表单控件的一系列JavaScript方法。</p></li>
            </ul>
           </div>
          </div>
          <div class="doc-postil">
           <div class="c-markdown">
            <ul class="ul-level-0 list-paddingleft-2" style="margin: 10px 0px 10px 20px;">
             <li><p>反馈消息可以利用浏览器默认值%28不同的每个浏览器，和无法通过CSS%29或我们的自定义反馈样式与额外的HTML和CSS。</p></li>
            </ul>
           </div>
          </div>
          <div class="doc-postil">
           <div class="c-markdown">
            <ul class="ul-level-0 list-paddingleft-2" style="margin: 10px 0px 10px 20px;">
             <li><p>您可以提供自定义有效性消息。<code>setCustomValidity</code>用JavaScript写的。</p></li>
            </ul>
           </div>
          </div>
          <div class="doc-postil">
           <div class="c-markdown">
            <p>考虑到这一点，请考虑以下演示，用于我们的自定义表单验证样式、可选服务器端类和浏览器默认值。</p>
           </div>
          </div>
          <div class="doc-postil">
           <div class="c-markdown">
            <h3>定制风格</h3>
           </div>
          </div>
          <div class="doc-postil">
           <div class="c-markdown">
            <p>对于自定义引导窗体验证消息，您需要添加<code>novalidate</code>的布尔属性<code><form></code>这将禁用浏览器默认反馈工具提示，但仍然提供对JavaScript表单验证API的访问。尝试提交下面的表单；我们的JavaScript将拦截Submit按钮并将反馈转发给您。</p>
           </div>
          </div>
          <div class="doc-postil">
           <div class="c-markdown">
            <p>尝试提交时，您将看到<code>:invalid</code>和<code>:valid</code>应用于窗体控件的样式。</p>
           </div>
          </div>
          <div class="doc-postil">
           <div class="c-markdown">
            <pre class="prism-token token  language-javascript"><form class="container" id="needs-validation" novalidate> <div class="row"> <div class="col-md-6 mb-3"> <label for="validationCustom01">First name</label> <input type="text" class="form-control" id="validationCustom01" placeholder="First name" value="Mark" required> </div> <div class="col-md-6 mb-3"> <label for="validationCustom02">Last name</label> <input type="text" class="form-control" id="validationCustom02" placeholder="Last name" value="Otto" required> </div> </div> <div class="row"> <div class="col-md-6 mb-3"> <label for="validationCustom03">City</label> <input type="text" class="form-control" id="validationCustom03" placeholder="City" required> <div class="invalid-feedback"> Please provide a valid city. </div> </div> <div class="col-md-3 mb-3"> <label for="validationCustom04">State</label> <input type="text" class="form-control" id="validationCustom04" placeholder="State" required> <div class="invalid-feedback"> Please provide a valid state. </div> </div> <div class="col-md-3 mb-3"> <label for="validationCustom05">Zip</label> <input type="text" class="form-control" id="validationCustom05" placeholder="Zip" required> <div class="invalid-feedback"> Please provide a valid zip. </div> </div> </div> <button class="btn btn-primary" type="submit">Submit form</button></form><script>// Example starter JavaScript for disabling form submissions if there are invalid fields(function() { 'use strict'; window.addEventListener('load', function() { var form = document.getElementById('needs-validation'); form.addEventListener('submit', function(event) { if (form.checkValidity() === false) { event.preventDefault(); event.stopPropagation(); } form.classList.add('was-validated'); }, false); }, false);})();</script></pre>
           </div>
          </div>
          <div class="doc-postil">
           <div class="c-markdown">
            <h3>浏览器默认值</h3>
           </div>
          </div>
          <div class="doc-postil">
           <div class="c-markdown">
            <p>对自定义验证、反馈消息或编写JavaScript来更改表单行为不感兴趣？很好，您可以使用浏览器默认设置。试着提交下面的表格。根据浏览器和操作系统的不同，您将看到一种略有不同的反馈样式。</p>
           </div>
          </div>
          <div class="doc-postil">
           <div class="c-markdown">
            <p>虽然这些反馈样式不能使用CSS样式，但仍然可以通过JavaScript定制反馈文本。</p>
           </div>
          </div>
          <div class="doc-postil">
           <div class="c-markdown">
            <pre class="prism-token token  language-javascript"><form> <div class="row"> <div class="col-md-6 mb-3"> <label for="validationDefault01">First name</label> <input type="text" class="form-control" id="validationDefault01" placeholder="First name" value="Mark" required> </div> <div class="col-md-6 mb-3"> <label for="validationDefault02">Last name</label> <input type="text" class="form-control" id="validationDefault02" placeholder="Last name" value="Otto" required> </div> </div> <div class="row"> <div class="col-md-6 mb-3"> <label for="validationDefault03">City</label> <input type="text" class="form-control" id="validationDefault03" placeholder="City" required> <div class="invalid-feedback"> Please provide a valid city. </div> </div> <div class="col-md-3 mb-3"> <label for="validationDefault04">State</label> <input type="text" class="form-control" id="validationDefault04" placeholder="State" required> <div class="invalid-feedback"> Please provide a valid state. </div> </div> <div class="col-md-3 mb-3"> <label for="validationDefault05">Zip</label> <input type="text" class="form-control" id="validationDefault05" placeholder="Zip" required> <div class="invalid-feedback"> Please provide a valid zip. </div> </div> </div> <button class="btn btn-primary" type="submit">Submit form</button></form></pre>
           </div>
          </div>
          <div class="doc-postil">
           <div class="c-markdown">
            <h3>服务器端</h3>
           </div>
          </div>
          <div class="doc-postil">
           <div class="c-markdown">
            <p>我们建议使用客户端验证，但如果需要服务器端，则可以使用<code>.is-invalid</code>和<code>.is-valid</code>注意<code>.invalid-feedback</code>也支持这些类。</p>
           </div>
          </div>
          <div class="doc-postil">
           <div class="c-markdown">
            <pre class="prism-token token  language-javascript"><form> <div class="row"> <div class="col-md-6 mb-3"> <label for="validationServer01">First name</label> <input type="text" class="form-control is-valid" id="validationServer01" placeholder="First name" value="Mark" required> </div> <div class="col-md-6 mb-3"> <label for="validationServer02">Last name</label> <input type="text" class="form-control is-valid" id="validationServer02" placeholder="Last name" value="Otto" required> </div> </div> <div class="row"> <div class="col-md-6 mb-3"> <label for="validationServer03">City</label> <input type="text" class="form-control is-invalid" id="validationServer03" placeholder="City" required> <div class="invalid-feedback"> Please provide a valid city. </div> </div> <div class="col-md-3 mb-3"> <label for="validationServer04">State</label> <input type="text" class="form-control is-invalid" id="validationServer04" placeholder="State" required> <div class="invalid-feedback"> Please provide a valid state. </div> </div> <div class="col-md-3 mb-3"> <label for="validationServer05">Zip</label> <input type="text" class="form-control is-invalid" id="validationServer05" placeholder="Zip" required> <div class="invalid-feedback"> Please provide a valid zip. </div> </div> </div> <button class="btn btn-primary" type="submit">Submit form</button></form></pre>
           </div>
          </div>
          <div class="doc-postil">
           <div class="c-markdown">
            <h3>支撑元件</h3>
           </div>
          </div>
          <div class="doc-postil">
           <div class="c-markdown">
            <p>我们的示例表单显示了本机文本。<code><input></code>S以上，但表单验证样式也适用于我们的自定义窗体控件。</p>
           </div>
          </div>
          <div class="doc-postil">
           <div class="c-markdown">
            <pre class="prism-token token  language-javascript"><form class="was-validated"> <label class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input" required> <span class="custom-control-indicator"></span> <span class="custom-control-description">Check this custom checkbox</span> </label> <div class="custom-controls-stacked d-block my-3"> <label class="custom-control custom-radio"> <input id="radioStacked1" name="radio-stacked" type="radio" class="custom-control-input" required> <span class="custom-control-indicator"></span> <span class="custom-control-description">Toggle this custom radio</span> </label> <label class="custom-control custom-radio"> <input id="radioStacked2" name="radio-stacked" type="radio" class="custom-control-input" required> <span class="custom-control-indicator"></span> <span class="custom-control-description">Or toggle this other custom radio</span> </label> </div> <select class="custom-select d-block my-3" required> <option value="">Open this select menu</option> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> </select> <label class="custom-file"> <input type="file" id="file" class="custom-file-input" required> <span class="custom-file-control"></span> </label></form></pre>
           </div>
          </div>
          <div class="doc-postil">
           <div class="c-markdown">
            <h2>定制表格</h2>
           </div>
          </div>
          <div class="doc-postil">
           <div class="c-markdown">
            <p>为了实现更多的自定义和跨浏览器一致性，请使用我们完全自定义的表单元素来替换浏览器默认设置。它们构建在语义和可访问标记之上，因此它们是任何默认表单控件的可靠替代品。</p>
           </div>
          </div>
          <div class="doc-postil">
           <div class="c-markdown">
            <h3>复选框和收音机</h3>
           </div>
          </div>
          <div class="doc-postil">
           <div class="c-markdown">
            <p>每个复选框和收音机都封装在<code><label></code>原因有三：</p>
           </div>
          </div>
          <div class="doc-postil">
           <div class="c-markdown">
            <ul class="ul-level-0 list-paddingleft-2" style="margin: 10px 0px 10px 20px;">
             <li><p>它为检查控件提供了更大的命中区域。</p></li>
            </ul>
           </div>
          </div>
          <div class="doc-postil">
           <div class="c-markdown">
            <ul class="ul-level-0 list-paddingleft-2" style="margin: 10px 0px 10px 20px;">
             <li><p>它提供了一个有用的语义包装器来帮助我们替换默认的<code><input></code>S.</p></li>
            </ul>
           </div>
          </div>
          <div class="doc-postil">
           <div class="c-markdown">
            <ul class="ul-level-0 list-paddingleft-2" style="margin: 10px 0px 10px 20px;">
             <li><p>它触发<code><input></code>自动，意味着不需要JavaScript。</p></li>
            </ul>
           </div>
          </div>
          <div class="doc-postil">
           <div class="c-markdown">
            <p>我们隐藏缺省值<code><input></code>带着<code>opacity</code>并使用<code>.custom-control-indicator</code>若要在其位置生成新的自定义窗体指示器，请执行以下操作。不幸的是，我们不能仅仅从<code><input></code>因为CSS的<code>content</code>不适用于那个元素。</p>
           </div>
          </div>
          <div class="doc-postil">
           <div class="c-markdown">
            <p>我们使用兄弟姐妹选择器%28<code>~</code>%29<code><input></code>类州<code>:checked</code>-正确的样式，我们的定制表格指示器。当与<code>.custom-control-description</code>类，我们还可以根据<code><input></code>状态。</p>
           </div>
          </div>
          <div class="doc-postil">
           <div class="c-markdown">
            <p>在检查状态中，我们使用<strong>Base 64嵌入式SVG图标</strong>从开放标志这为我们在浏览器和设备之间设置样式和定位提供了最好的控制。</p>
           </div>
          </div>
          <div class="doc-postil">
           <div class="c-markdown">
            <h4>复选框</h4>
           </div>
          </div>
          <div class="doc-postil">
           <div class="c-markdown">
            <pre class="prism-token token  language-javascript"><label class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input"> <span class="custom-control-indicator"></span> <span class="custom-control-description">Check this custom checkbox</span></label></pre>
           </div>
          </div>
          <div class="doc-postil">
           <div class="c-markdown">
            <p>自定义复选框也可以利用<code>:indeterminate</code>类，当通过JavaScript%28手动设置时，没有可用的HTML属性来指定它%29。</p>
           </div>
          </div>
          <div class="doc-postil">
           <div class="c-markdown">
            <p>如果您正在使用jQuery，这样的内容就足够了：</p>
           </div>
          </div>
          <div class="doc-postil">
           <div class="c-markdown">
            <pre class="prism-token token  language-javascript">$('.your-checkbox').prop('indeterminate', true)</pre>
           </div>
          </div>
          <div class="doc-postil">
           <div class="c-markdown">
            <h4>收音机</h4>
           </div>
          </div>
          <div class="doc-postil">
           <div class="c-markdown">
            <pre class="prism-token token  language-javascript"><label class="custom-control custom-radio"> <input id="radio1" name="radio" type="radio" class="custom-control-input"> <span class="custom-control-indicator"></span> <span class="custom-control-description">Toggle this custom radio</span></label><label class="custom-control custom-radio"> <input id="radio2" name="radio" type="radio" class="custom-control-input"> <span class="custom-control-indicator"></span> <span class="custom-control-description">Or toggle this other custom radio</span></label></pre>
           </div>
          </div>
          <div class="doc-postil">
           <div class="c-markdown">
            <h4>残废</h4>
           </div>
          </div>
          <div class="doc-postil">
           <div class="c-markdown">
            <p>也可以禁用自定义复选框和收音机。添加<code>disabled</code>属性的布尔属性。<code><input></code>并且，自定义指示器和标签描述将自动样式化。</p>
           </div>
          </div>
          <div class="doc-postil">
           <div class="c-markdown">
            <pre class="prism-token token  language-javascript"><label class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input" disabled> <span class="custom-control-indicator"></span> <span class="custom-control-description">Check this custom checkbox</span></label><label class="custom-control custom-radio"> <input id="radio3" name="radioDisabled" type="radio" class="custom-control-input" disabled> <span class="custom-control-indicator"></span> <span class="custom-control-description">Toggle this custom radio</span></label></pre>
           </div>
          </div>
          <div class="doc-postil">
           <div class="c-markdown">
            <h4>堆叠</h4>
           </div>
          </div>
          <div class="doc-postil">
           <div class="c-markdown">
            <p>自定义复选框和收音机是内联启动。添加具有类的父级<code>.custom-controls-stacked</code>以确保每个窗体控件位于单独的行上。</p>
           </div>
          </div>
          <div class="doc-postil">
           <div class="c-markdown">
            <pre class="prism-token token  language-javascript"><div class="custom-controls-stacked"> <label class="custom-control custom-radio"> <input id="radioStacked3" name="radio-stacked" type="radio" class="custom-control-input"> <span class="custom-control-indicator"></span> <span class="custom-control-description">Toggle this custom radio</span> </label> <label class="custom-control custom-radio"> <input id="radioStacked4" name="radio-stacked" type="radio" class="custom-control-input"> <span class="custom-control-indicator"></span> <span class="custom-control-description">Or toggle this other custom radio</span> </label></div></pre>
           </div>
          </div>
          <div class="doc-postil">
           <div class="c-markdown">
            <h3>选择菜单</h3>
           </div>
          </div>
          <div class="doc-postil">
           <div class="c-markdown">
            <p>习俗<code><select></code>菜单只需要一个自定义类，<code>.custom-select</code>以触发自定义样式。</p>
           </div>
          </div>
          <div class="doc-postil">
           <div class="c-markdown">
            <pre class="prism-token token  language-javascript"><select class="custom-select"> <option selected>Open this select menu</option> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option></select></pre>
           </div>
          </div>
          <div class="doc-postil">
           <div class="c-markdown">
            <h3>文件浏览器</h3>
           </div>
          </div>
          <div class="doc-postil">
           <div class="c-markdown">
            <p>文件输入是其中最粗糙的，如果您想将它们与函数连接起来，则需要额外的JavaScript。<em style="font-style: italic;">选择文件…</em>和选定的文件名文本。</p>
           </div>
          </div>
          <div class="doc-postil">
           <div class="c-markdown">
            <pre class="prism-token token  language-javascript"><label class="custom-file"> <input type="file" id="file2" class="custom-file-input"> <span class="custom-file-control"></span></label></pre>
           </div>
          </div>
          <div class="doc-postil">
           <div class="c-markdown">
            <p>下面是它的工作原理：</p>
           </div>
          </div>
          <div class="doc-postil">
           <div class="c-markdown">
            <ul class="ul-level-0 list-paddingleft-2" style="margin: 10px 0px 10px 20px;">
             <li><p>我们把<code><input></code>在...<code><label></code>因此，自定义控件正确地触发文件浏览器。</p></li>
            </ul>
           </div>
          </div>
          <div class="doc-postil">
           <div class="c-markdown">
            <ul class="ul-level-0 list-paddingleft-2" style="margin: 10px 0px 10px 20px;">
             <li><p>我们隐藏默认文件<code><input></code>通孔<code>opacity</code>...</p></li>
            </ul>
           </div>
          </div>
          <div class="doc-postil">
           <div class="c-markdown">
            <ul class="ul-level-0 list-paddingleft-2" style="margin: 10px 0px 10px 20px;">
             <li><p>我们用<code>::after</code>生成自定义背景和指令%28<em style="font-style: italic;">选择文件…</em>29%。</p></li>
            </ul>
           </div>
          </div>
          <div class="doc-postil">
           <div class="c-markdown">
            <ul class="ul-level-0 list-paddingleft-2" style="margin: 10px 0px 10px 20px;">
             <li><p>我们用<code>::before</code>若要生成并定位<em style="font-style: italic;">浏览</em>纽扣。</p></li>
            </ul>
           </div>
          </div>
          <div class="doc-postil">
           <div class="c-markdown">
            <ul class="ul-level-0 list-paddingleft-2" style="margin: 10px 0px 10px 20px;">
             <li><p>我们宣布<code>height</code>在<code><input></code>为周围内容的适当间隔。</p></li>
            </ul>
           </div>
          </div>
          <div class="doc-postil">
           <div class="c-markdown">
            <p>换句话说，它是一个完全自定义的元素，都是通过CSS生成的。</p>
           </div>
          </div>
          <div class="doc-postil">
           <div class="c-markdown">
            <h4>翻译或自定义字符串</h4>
           </div>
          </div>
          <div class="doc-postil">
           <div class="c-markdown">
            <p>大<code>:lang()</code>伪类用于方便地将“浏览”和“选择文件…”文本翻译成其他语言。简单地重写或添加条目到<code>$custom-file-text</code>相关的SCSS变量语言标记和本地化字符串。英文字符串也可以用同样的方式定制。例如，下面是如何添加西班牙语翻译%28西班牙语代码的方法<code>es</code>29%：</p>
           </div>
          </div>
          <div class="doc-postil">
           <div class="c-markdown">
            <pre class="prism-token token  language-javascript">$custom-file-text: ( placeholder: ( en: "Choose file...", es: "Seleccionar archivo..." ), button-label: ( en: "Browse", es: "Navegar" ));</pre>
           </div>
          </div>
          <div class="doc-postil">
           <div class="c-markdown">
            <p>您需要正确设置文档%28或其子树%29的语言，以便显示正确的文本。这可以使用大<code>lang</code>属性或者<code>Content-Language</code>http报头，以及其他方法。</p>
           </div>
          </div>
          <div class="doc-postil">
           <div class="c-markdown">
            <pre class="prism-token token  language-js">© 2011–2017 Twitter, Inc</pre>
           </div>
          </div>
          <div class="doc-postil">
           <div class="c-markdown">
            <p></p>
           </div>
          </div>
         </div>
        </div>
        <div class="view-foot">
         <div class="article-jump">
          <span class="jump-up">이전 기사：<a></a></span>
          <span class="jump-down">다음 기사：<a></a></span>
         </div>
         <a class="view-backtop"><i class="icon-arrow-up2"></i></a>
        </div>
       </div>
      </div>
     </div>
    </div>
   </div>
  </div>
  <!--<i class="loading-image"> </i>-->
  <div id="languageslayer" style="display:none" class="flexColumn languageslayer">
   <div class="lan-con">
    <a href="javascript:;" onclick="setlang($(this))" data-value="zh-cn" class="chooselan ">简体中文(ZH-CN)</a>
    <a href="javascript:;" onclick="setlang($(this))" data-value="en" class="chooselan ">English(EN)</a>
    <a href="javascript:;" onclick="setlang($(this))" data-value="zh-tw" class="chooselan ">繁体中文(ZH-TW)</a>
    <a href="javascript:;" onclick="setlang($(this))" data-value="ja" class="chooselan ">日本語(JA)</a>
    <a href="javascript:;" data-value="ko" class="chooselan checklan">한국어(KO)</a>
    <a href="javascript:;" onclick="setlang($(this))" data-value="ms" class="chooselan ">Melayu(MS)</a>
    <a href="javascript:;" onclick="setlang($(this))" data-value="fr" class="chooselan ">Français(FR)</a>
    <a href="javascript:;" onclick="setlang($(this))" data-value="de" class="chooselan ">Deutsch(DE)</a>
   </div>
  </div>
  <div style="display:none"></div>
 </body>
</html>