卡片

框架用.card来定义一个卡片，卡片里可以装很多漂亮的东西。

基本样式

基本的卡片为使用.card样式的元素，卡片内放置媒体、文字等元素。

    <div class="card" style="width:16rem;">
      <div class="card-head">...</div>
      <img class="card-media" src="..." />
      <div class="card-body">...</div>
      <div class="card-foot">...</div>
    </div>

组成部份

卡片由主体、媒体、列表组、表格、头尾等部份组成。

主体内容

卡片内容使用.card-body定义，包含在.card元素内部。

卡片

这是一个卡片内容，可使用卡片模型相关的样式效果叠加。

链接

    <div class="card" style="width:16rem;">
      <div class="card-body">
        <h5>卡片</h5>
        <p>...</p>
        <a class="button" href="javascript:;">链接</a>
      </div>
    </div>

列表组内容

列表组内容为框架内用.list-group定义的元素，可放置在卡片中。

列表组
列表组
列表组

    <div class="card" style="width:16rem;">
      <ul class="list-group">
        <li>列表组</li>
        <li>列表组</li>
        <li>列表组</li>
      </ul>
    </div>

表格内容

表格内容为框架内用.table定义的表格元素，可结合卡片使用。

标题	标题	标题
单元格	单元格	单元格
单元格	单元格	单元格
单元格	单元格	单元格

    <div class="card" style="width:16rem;">
      <table class="table">
        <tr><th>标题</th><th>标题</th><th>标题</th></tr>
        <tr><td>单元格</td><td>单元格</td><td>单元格</td></tr>
        <tr><td>单元格</td><td>单元格</td><td>单元格</td></tr>
        <tr><td>单元格</td><td>单元格</td><td>单元格</td></tr>
      </table>
    </div>

媒体内容

媒体内容用.card-media定义，可放图片，视频等元素。

    <div class="card" style="width:16rem;">
      <img src="..." class="card-media" />
      <div class="card-body">
        <h5>卡片</h5>
        <p>...</p>
        <a class="button bg-main" href="javascript:;">链接</a>
      </div>
    </div>

头尾部

头部及尾部内容分别用.card-head和.card-foot定义，放在卡片的首尾。

卡片头部

卡片

这是一个卡片内容，可使用卡片模型相关的样式效果叠加。

链接

卡片尾部

    <div class="card" style="width:16rem;">
      <div class="card-head">卡片头部</div>
      <div class="card-body">
        <h5>卡片</h5>
        <p>...</p>
        <a class="button bg-main" href="javascript:;">链接</a>
      </div>
      <div class="card-foot">卡片尾部</div>
    </div>

内容组合

将内容元素组合在一起，交叉使用。

    <div class="card" style="width:16rem;">
      <div class="card-head">...</div>
      <img src="..." class="card-media" />
      <ul class="list-group">
        ...
      </ul>
      <div class="card-body">
        ...
      </div>
      <table class="table">
        ...
      </table>
      <div class="card-foot">...</div>
    </div>

溢出

卡片的内部元素使用.card-overflow样式，可使元素溢出覆盖边框显示，可解决元素与边框反差大时显示效果。

    <div class="card" style="width:16rem;">
      <img src="..." class="card-media card-overflow" />
      <div class="card-body">...</div>
    </div>

卡片颜色

可使用颜色相关样式.text|bg|border-*改变卡片及内元素的样式。

背景颜色

卡片头部

这是一个卡片内容，可使用卡片模型相关的样式效果叠加。

卡片头部

这是一个卡片内容，可使用卡片模型相关的样式效果叠加。

    <div class="card bg" style="width:16rem;">
      <div class="card-head">卡片头部</div>
      <div class="card-body">...</div>
    </div>

    <div class="card bg-main bg-inverse" style="width:16rem;">
      <div class="card-head">卡片头部</div>
      <div class="card-body">...</div>
    </div>

边框颜色

卡片头部

这是一个卡片内容，可使用卡片模型相关的样式效果叠加。

卡片头部

这是一个卡片内容，可使用卡片模型相关的样式效果叠加。

    <div class="card border-main" style="width:16rem;">
      <div class="card-head border-main">卡片头部</div>
      <div class="card-body">...</div>
    </div>

    <div class="card border-main" style="width:16rem;">
      <div class="card-head card-overflow bg-main bg-inverse">卡片头部</div>
      <div class="card-body text-main">...</div>
    </div>

卡片导航

基本的卡片为使用.card样式的元素，用边框围住的内容即可卡片。

这是一个卡片内容，可使用卡片模型相关的样式效果叠加。

    <div class="card">
      <div class="card-head">
        <ul class="nav">
          <li class="active"><a href="javascript:;">栏目</a></li>
          <li><a href="javascript:;">栏目</a></li>
          <li><a href="javascript:;">栏目</a></li>
          <li><a href="javascript:;">栏目</a></li>
        </ul>
      </div>
      <div class="card-body">...</div>
    </div>

    <div class="card">
      <div class="card-head">
        <ul class="nav nav-card">
          <li class="active"><a href="javascript:;">栏目</a></li>
          <li><a href="javascript:;">栏目</a></li>
          <li><a href="javascript:;">栏目</a></li>
          <li><a href="javascript:;">栏目</a></li>
        </ul>
      </div>
      <div class="card-body">...</div>
    </div>

底对齐

这是一个卡片内容，可使用卡片模型相关的样式效果叠加。

    <div class="card">
      <div class="card-head">
        <ul class="nav nav-line card-head-nav">
          <li class="active"><a href="javascript:;">栏目</a></li>
          <li><a href="javascript:;">栏目</a></li>
          <li><a href="javascript:;">栏目</a></li>
          <li><a href="javascript:;">栏目</a></li>
        </ul>
      </div>
      <div class="card-body">...</div>
    </div>

    <div class="card">
      <div class="card-head">
        <ul class="nav nav-tabs card-head-nav">
          <li class="active"><a href="javascript:;">栏目</a></li>
          <li><a href="javascript:;">栏目</a></li>
          <li><a href="javascript:;">栏目</a></li>
          <li><a href="javascript:;">栏目</a></li>
        </ul>
      </div>
      <div class="card-body">...</div>
    </div>

网格排版

使用网格排版

    <div class="grid-middle">
      <div class="grid">
        <div class="small-x4">
          <div class="card">
            <img src="..." class="card-media card-overflow" />
            <div class="card-body">...</div>
          </div>
        </div>
        <div class="small-x4">
          <div class="card">
            <img src="..." class="card-media card-overflow" />
            <div class="card-body">...</div>
          </div>
        </div>
        <div class="small-x4">
          <div class="card">
            <img src="..." class="card-media card-overflow" />
            <div class="card-body">...</div>
          </div>
        </div>
      </div>
    </div>