Bootstrap之panel与列表组

bootstrap之panel

Bootstrap 是一个很受欢迎的前端框架,它使得我们可以更加快捷方便地实现一些基本样式,今天我们聊一聊 panel组件 和 列表组

• 不带标题的面板

<div class="panel panel-default">
  <div class="panel-body">
    面板内容
  </div>
</div>

• 带标题的面板

<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">面板的标题</h3>
  </div>
  <div class="panel-body">
    面板内容
  </div>
</div>

常用面板样式

<div class="panel panel-primary">主要面板</div>
<div class="panel panel-success">成功面板</div>
<div class="panel panel-info">信息面板</div>
<div class="panel panel-warning">警告面板</div>
<div class="panel panel-danger">危险面板</div>

显示效果:

• 面板与表格的结合

<div class="panel panel-default">
  <div class="panel-heading">面板标题</div>
     <table class="table">
      表格内容
     </table>
</div>

列表组

list-group-item样式为 li 标签有一个圆角边框

<ul class="list-group">
            <li class="list-group-item">html</li>
            <li class="list-group-item">css</li>
            <li class="list-group-item">javascript</li>
 </ul>

显示效果如下:

• 结合span标签,可以表示文章的点击量,或者比赛得分等等

<ul class="list-group">
          <li class="list-group-item">html<span class="badge">32</span></li>
          <li class="list-group-item">css<span class="badge">12</span></li>
          <li class="list-group-item">javascript<span class="badge">56</span></li>
</ul>

显示效果如下:

要实现一个新闻列表的话,就用a标签来做一个列表组吧
a标签也有active(激活状态)和disabled(禁用状态),与按钮属性类似

<div class="list-group">
        <a href="#" class="list-group-item active">html<span class="badge">32</span></a>
        <a href="#" class="list-group-item disabled">css<span class="badge">32</span></a>
        <a href="#" class="list-group-item">javascript<span class="badge">32</span></a>
</div>

效果展示: