4.5、Bootstrap V4自学之路------组件---输入框

最新推荐文章于 2024-06-01 09:46:07 发布

AirZH??

最新推荐文章于 2024-06-01 09:46:07 发布

阅读量350

点赞数

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/asktao/blog/646370

版权

为什么80%的码农都做不了架构师？>>>

基本示例

核心类 .input-group-addon 。把一个附加内容或按钮放在输入框的任一侧。你可以把它们同时放在输入框的两侧。我们不支持在同一侧放多个附加内容，同样也不支持多个表单控件放在一个输入框组中。

<div class="input-group">
  <span class="input-group-addon" id="basic-addon1">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>
<br>
<div class="input-group">
  <input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
  <span class="input-group-addon" id="basic-addon2">.00</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>

之前文档里面遇到过 .input-group-addon类。还记得吗？

尺寸

在.input-group上添加相关的表单尺寸类，它里面的内容会自动调整尺寸——不需要在每个元素上重复添加表单控件尺寸类

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

<div class="input-group">
  <span class="input-group-addon" id="sizing-addon2">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon2">
</div>
          
<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-describedby="sizing-addon1">
</div>

没什么好说的，留一个疑问。<span class=input-group-addon>的文本值，

是否会配合<input>的aria-describedby一起传参到后台，成为一个完整的数据。

复选框和单选钮附加

请将复选框或单选钮选项放在一个输入框组的addon中，替换掉文本。

<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>

PS：这里注意的是，<span>标签中没有写文字，而是插入一个<input type=checkbox_or_radio>。

按钮附加

输入框组中的按钮有一点不同，它需要额外的嵌套级别。

你需要用.input-group-btn而不是.input-group-addon以包裹按钮。

这是必须的，因为默认浏览器样式无法重写它。

<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...">
    </div>
  </div>

  <div class="col-lg-6">
    <div class="input-group">
      <input type="text" class="form-control" placeholder="Search for...">
      <span class="input-group-btn">
        <button class="btn btn-secondary" type="button">Go!</button>
      </span>
    </div>
  </div>

</div>

PS：如果使用按钮固定的话。则使用 .input-group-btn类实现。

如果继续使用 .input-group-addon类的话，样式不协调。

带弹出菜单的按钮

一个组合拳，一种现实方式。

<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" 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" 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>

可访问性

如果你没有用label包裹每个input的话，屏幕阅读器在处理你的表单时将遇到麻烦。对于那些输入组，确保任何额外的label或者功能都能够向辅助技术传达。

使用精确的技术（使用.sr-only类隐藏<label>元素，或者使用aria-label、aria-labelledby、aria-describedby、title和placeholder 属性）。需要传达的额外的信息决取于你所使用的接口部件的精确类型。本章节的示例提供了一些建议、特殊场合的方法。

使用这些非常用的编程语言，在恰当的地方使用符合当下场景的语义。会使网站的具有内涵！这将是我要追求的！

转载于:https://my.oschina.net/asktao/blog/646370