首页 > 其他 > 详细

学习内容2

时间:2017-06-12 12:49:03      阅读:298      评论:0      收藏:0      [点我收藏+]

         输入框组,通过在文本输入框 <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

原文:http://www.cnblogs.com/zhangmeijuan/p/6992218.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!