Bootstrap 4 中文开发手册
简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
annuaire recherche
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（能见度）

©
Ce document utilise Manuel du site Web PHP chinois Libérer

personnages

通过在文本输入的两侧添加文本，按钮或按钮组，轻松扩展表单控件。

基本示例

在输入的任一侧放置一个附件或按钮。您也可以在输入的两侧放置一个。我们不支持单个输入组中的多个表单控件，并且<label>必须位于输入组之外。

<div class="input-group">  <span class="input-group-addon" id="basic-addon1">@</span>  <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1"></div><br><div class="input-group">  <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">  <span class="input-group-addon" id="basic-addon2">@example.com</span></div><br><label for="basic-url">Your vanity URL</label><div class="input-group">  <span class="input-group-addon" id="basic-addon3">https://example.com/users/</span>  <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3"></div><br><div class="input-group">  <span class="input-group-addon">$</span>  <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">  <span class="input-group-addon">.00</span></div><br><div class="input-group">  <span class="input-group-addon">$</span>  <span class="input-group-addon">0.00</span>  <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)"></div>

丈量大小

将相对表单大小类添加到.input-group自身，并且内部的内容将自动调整大小 - 无需重复每个元素上的表单控件大小类。

<div class="input-group input-group-lg">  <span class="input-group-addon" id="sizing-addon1">@</span>  <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="sizing-addon1"></div><br><div class="input-group input-group-sm">  <span class="input-group-addon" id="sizing-addon2">@</span>  <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="sizing-addon2"></div>

复选框和无线电插件

将任何复选框或广播选项放在输入组的插件中，而不是文本。

<div class="row">  <div class="col-lg-6">    <div class="input-group">      <span class="input-group-addon">        <input type="checkbox" aria-label="Checkbox for following text input">      </span>      <input type="text" class="form-control" aria-label="Text input with checkbox">    </div>  </div>  <div class="col-lg-6">    <div class="input-group">      <span class="input-group-addon">        <input type="radio" aria-label="Radio button for following text input">      </span>      <input type="text" class="form-control" aria-label="Text input with radio button">    </div>  </div></div>

多个插件

支持多个附加组件，并且可以与复选框和无线电输入版本混合使用。

<div class="row">  <div class="col-lg-6">    <div class="input-group">      <span class="input-group-addon">        <input type="checkbox" aria-label="Checkbox for following text input">      </span>      <span class="input-group-addon">$</span>      <input type="text" class="form-control" aria-label="Text input with checkbox">    </div>  </div>  <div class="col-lg-6">    <div class="input-group">      <span class="input-group-addon">$</span>      <span class="input-group-addon">0.00</span>      <input type="text" class="form-control" aria-label="Text input with radio button">    </div>  </div></div>

按钮插件

输入组中的按钮必须包含在一个.input-group-btn中才能正确对齐和调整大小。由于无法覆盖的默认浏览器样式，因此这是必需的。

<div class="row">  <div class="col-lg-6">    <div class="input-group">      <span class="input-group-btn">        <button class="btn btn-secondary" type="button">Go!</button>      </span>      <input type="text" class="form-control" placeholder="Search for..." aria-label="Search for...">    </div>  </div>  <div class="col-lg-6">    <div class="input-group">      <input type="text" class="form-control" placeholder="Search for..." aria-label="Search for...">      <span class="input-group-btn">        <button class="btn btn-secondary" type="button">Go!</button>      </span>    </div>  </div></div><br><div class="row">  <div class="col-lg-6 offset-lg-3">    <div class="input-group">      <span class="input-group-btn">        <button class="btn btn-secondary" type="button">Hate it</button>      </span>      <input type="text" class="form-control" placeholder="Product name" aria-label="Product name">      <span class="input-group-btn">        <button class="btn btn-secondary" type="button">Love it</button>      </span>    </div>  </div></div>

带下拉的按钮

<div class="row">  <div class="col-lg-6">    <div class="input-group">      <div class="input-group-btn">        <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Action        </button>        <div class="dropdown-menu">          <a class="dropdown-item" href="#">Action</a>          <a class="dropdown-item" href="#">Another action</a>          <a class="dropdown-item" href="#">Something else here</a>          <div role="separator" class="dropdown-divider"></div>          <a class="dropdown-item" href="#">Separated link</a>        </div>      </div>      <input type="text" class="form-control" aria-label="Text input with dropdown button">    </div>  </div>  <div class="col-lg-6">    <div class="input-group">      <input type="text" class="form-control" aria-label="Text input with dropdown button">      <div class="input-group-btn">        <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Action        </button>        <div class="dropdown-menu dropdown-menu-right">          <a class="dropdown-item" href="#">Action</a>          <a class="dropdown-item" href="#">Another action</a>          <a class="dropdown-item" href="#">Something else here</a>          <div role="separator" class="dropdown-divider"></div>          <a class="dropdown-item" href="#">Separated link</a>        </div>      </div>    </div>  </div></div>

分段的按钮

<div class="row">  <div class="col-lg-6">    <div class="input-group">      <div class="input-group-btn">        <button type="button" class="btn btn-secondary">Action</button>        <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">          <span class="sr-only">Toggle Dropdown</span>        </button>        <div class="dropdown-menu">          <a class="dropdown-item" href="#">Action</a>          <a class="dropdown-item" href="#">Another action</a>          <a class="dropdown-item" href="#">Something else here</a>          <div role="separator" class="dropdown-divider"></div>          <a class="dropdown-item" href="#">Separated link</a>        </div>      </div>      <input type="text" class="form-control" aria-label="Text input with segmented button dropdown">    </div>  </div>  <div class="col-lg-6">    <div class="input-group">      <input type="text" class="form-control" aria-label="Text input with segmented button dropdown">      <div class="input-group-btn">        <button type="button" class="btn btn-secondary">Action</button>        <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">          <span class="sr-only">Toggle Dropdown</span>        </button>        <div class="dropdown-menu dropdown-menu-right">          <a class="dropdown-item" href="#">Action</a>          <a class="dropdown-item" href="#">Another action</a>          <a class="dropdown-item" href="#">Something else here</a>          <div role="separator" class="dropdown-divider"></div>          <a class="dropdown-item" href="#">Separated link</a>        </div>      </div>    </div>  </div></div>

无障碍

如果您没有为每个输入添加标签，屏幕阅读器将会对您的表单造成麻烦。对于这些输入组，确保将任何附加标签或功能传送给辅助技术。

要使用的确切技术（使用.sr-only类隐藏<label>元素，或使用aria-label和aria-labelledby属性，可能结合使用aria-describedby）以及需要传达的附加信息取决于您实现的接口窗口小部件的确切类型。本节中的示例提供了一些建议的特定于案例的方法。

Article précédent： Article suivant：