bootstrap学习笔记---小组件

实现以下效果

可以给标签中加入span，这个span包含一个badge 类

巨幕效果 jumbotron 铺满屏幕，在内可以插入一个container元素

弹出警告框 alert 类 有四种类型 success,info,warning,danger可以选择 若要添加可以删除的提示框可以加上alert-dismissible 并给button加上data-dismis=”alert”属性 并且可以给他加上alert-link 在其中加入超链接

进度条类 progress 类，可以通过progress-bar-success 来改变颜色，切记别忘了设置min-width。

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

progress的效果: progress-bar-striped 类可以设置条纹效果，添加active 类则可以使进度条运动,把多个进度条放进一个则可以出现堆叠效果

---

bootstrap提供了媒体对象

代码:

<div class="media">
  <div class="media-left">
    <a href="#">
      <img class="media-object" src="..." alt="...">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Media heading</h4>
    ...
  </div>
</div>

用一个media 类的div包裹着 media-left 和media-body 体 内容可以通过media-middle media-top media-bottom 来给他设置左右对齐方式

用media-list 就可以在列表内使用媒体对象

---

列表组:list-group

<ul class="list-group">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

给列表组加入徽章，会被放置在最右边

咱们可以用<button> <a> 来替换li