首页 > 代码库 > 学习内容2

学习内容2

         输入框组,通过在文本输入框 <input> 前面、后面或是两边加上文字或按钮,可以实现对表单控件的扩展。为 .input-group 赋予.input-group-addon 类,可以给 .form-control 的前面或后面添加额外的元素。

为 .input-group 中所包含的元素应用工具提示(tooltip)或popover(弹出框)时,必须设置 container: ‘body‘ 参数,为的是避免意外的副作用(例如,工具提示或弹出框被激活后,可能会让当前元素变得更宽或/和变得失去其圆角)。

不要将表单组或栅格列(column)类直接和输入框组混合使用。而是将输入框组嵌套到表单组或栅格相关元素的内部。示例代码:

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

<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">@example.com</span>
</div>

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

进度条,默认样式的进度条,示例代码
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    <span class="sr-only">60% Complete</span>
  </div>
</div>

 带有提示标签的进度条,将设置了 .sr-only 类的 <span> 标签从进度条组件中移除 类,从而让当前进度显示出来。示例代码:

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    60%
  </div>
</div>








学习内容2