zui

section: view id: card description: 可以展示图片和文本的卡片网格视图 icon: icon-th filter: kapian kp --- # 卡片卡片视图使用网格（栅格）来集中展示一组卡片。 <style> .example-cards {padding-bottom: 0;} .example-cards > .card {width: 300px; max-width: 100%; margin-bottom: 20px;} .example-cards > .cards-condensed {margin-bottom: 20px} </style> ## 结构卡片视图使用 `.cards` 类作为父级容器。因为 `.cards` 实际上具备栅格中的 `.row` 的行为，所有可以直接在 `.cards` 内包含 `.col-*` 来以栅格创建卡片排列布局。卡片 `.card` 也可以单独使用，而不需要包含在 `.cards` 容器元素中。通常卡片视图的 HTML 结构如下： ```html <div class="cards"> <div class="col-md-4"> <div class="card"> <img src="docs/img/img4.jpg" alt=""> </div> </div>  </div> ``` <div class="alert alert-primary-inverse"> <h4>提示</h4> <p>为了方便用户创建多种尺寸的卡片，并没有限定卡片的高度，但为保证卡片视图排列正常，需要确保每个卡片的高度一致。</p> </div> ## 简单示例 <example class="example-cards"> <div class="cards"> <div class="col-md-4 col-sm-6 col-lg-3"> <div class="card"><img src="docs/img/img1.jpg" alt=""></div> </div> <div class="col-md-4 col-sm-6 col-lg-3"> <div class="card"><img src="docs/img/img2.jpg" alt=""></div> </div> <div class="col-md-4 col-sm-6 col-lg-3"> <div class="card"><img src="docs/img/img3.jpg" alt=""></div> </div> <div class="col-md-4 col-sm-6 col-lg-3"> <div class="card"><img src="docs/img/img4.jpg" alt=""></div> </div> <div class="col-md-4 col-sm-6 col-lg-3"> <div class="card"><img src="docs/img/img5.jpg" alt=""></div> </div> <div class="col-md-4 col-sm-6 col-lg-3"> <div class="card"><img src="docs/img/img1.jpg" alt=""></div> </div> <div class="col-md-4 col-sm-6 col-lg-3"> <div class="card"><img src="docs/img/img2.jpg" alt=""></div> </div> <div class="col-md-4 col-sm-6 col-lg-3"> <div class="card"><img src="docs/img/img3.jpg" alt=""></div> </div> </div> </example> ```html <div class="cards"> <div class="col-md-4 col-sm-6 col-lg-3"> <div class="card"><img src="docs/img/img1.jpg" alt=""></div> </div> <div class="col-md-4 col-sm-6 col-lg-3"> <div class="card"><img src="docs/img/img2.jpg" alt=""></div> </div> <div class="col-md-4 col-sm-6 col-lg-3"> <div class="card"><img src="docs/img/img3.jpg" alt=""></div> </div> <div class="col-md-4 col-sm-6 col-lg-3"> <div class="card"><img src="docs/img/img4.jpg" alt=""></div> </div> <div class="col-md-4 col-sm-6 col-lg-3"> <div class="card"><img src="docs/img/img5.jpg" alt=""></div> </div> <div class="col-md-4 col-sm-6 col-lg-3"> <div class="card"><img src="docs/img/img1.jpg" alt=""></div> </div> <div class="col-md-4 col-sm-6 col-lg-3"> <div class="card"><img src="docs/img/img2.jpg" alt=""></div> </div> <div class="col-md-4 col-sm-6 col-lg-3"> <div class="card"><img src="docs/img/img3.jpg" alt=""></div> </div> </div> ``` ## 卡片内容类型卡片 `.card` 内可以包含各种内容，可以直接包含元素类型包括： - `<img>` - `.media-wrapper`，用来包裹 `<img>` - `.card-heading`，卡片标题容器 - `.card-content`，卡片文本内容容器 - `.card-actions`，卡片操作按钮容器 - `.caption`，覆盖文本容器如果在 `<a>` 元素上添加 `.card` 类则得到一个可以点击的卡片。 ### 仅图片 <example class="example-cards"> <div class="card"> <img src="docs/img/img3.jpg" alt=""> </div> </example> ```html <div class="card"> <img src="docs/img/img3.jpg" alt=""> </div> ``` ### 链接 <example class="example-cards"> <a class="card" href="###"> <img src="docs/img/img1.jpg" alt=""> </a> </example> ```html <a class="card" href="path/to/card/detail/content"> <img src="docs/img/img1.jpg" alt=""> </a> ``` ### 标题与文字 <example class="example-cards"> <a class="card" href="###"> <img src="docs/img/img2.jpg" alt=""> <div class="card-heading"><strong>良辰美景</strong></div> <div class="card-content text-muted">良辰美景奈何天，赏心乐事谁家院。</div> </a> </example> ```html <a class="card" href="###"> <img src="docs/img/img2.jpg" alt=""> <div class="card-heading"><strong>良辰美景</strong></div> <div class="card-content text-muted">良辰美景奈何天，赏心乐事谁家院。</div> </a> ``` ### 包含按钮 <example class="example-cards"> <a class="card" href="###"> <img src="docs/img/img2.jpg" alt=""> <div class="card-heading"><strong>良辰美景</strong></div> <div class="card-content text-muted">良辰美景奈何天，赏心乐事谁家院。</div> <div class="card-actions"> <button type="button" class="btn btn-danger"><i class="icon-heart"></i> 喜欢</button> <div class="pull-right text-danger"><i class="icon-heart-empty"></i> 520 人喜欢</div> </div> </a> </example> ```html <a class="card" href="###"> <img src="docs/img/img2.jpg" alt=""> <div class="card-heading"><strong>良辰美景</strong></div> <div class="card-content text-muted">良辰美景奈何天，赏心乐事谁家院。</div> <div class="card-actions"> <button type="button" class="btn btn-danger"><i class="icon-heart"></i> 喜欢</button> <div class="pull-right text-danger"><i class="icon-heart-empty"></i> 520 人喜欢</div> </div> </a> ``` ### 包含标签 <example class="example-cards"> <a class="card" href="###"> <img src="docs/img/img2.jpg" alt=""> <div class="card-heading"><strong>良辰美景</strong></div> <div class="card-content text-muted">良辰美景奈何天，赏心乐事谁家院。</div> <div class="card-actions"> <span class="label label-warning">牡丹亭</span> <div class="pull-right"><i class="icon-comments-alt"></i> 520</div> </div> </a> </example> ```html <a class="card" href="###"> <img src="docs/img/img2.jpg" alt=""> <div class="card-heading"><strong>良辰美景</strong></div> <div class="card-content text-muted">良辰美景奈何天，赏心乐事谁家院。</div> <div class="card-actions"> <span class="label label-warning">牡丹亭</span> <div class="pull-right"><i class="icon-comments-alt"></i> 520</div> </div> </a> ``` ### 覆盖文本可以在 `.card` 内包含一个 `.caption` 用来展示覆盖文本。覆盖文本将在光标悬停在卡片上时滑动展现，光标离开卡片时隐藏。 <example class="example-cards"> <a class="card" href="###"> <img src="docs/img/img2.jpg" alt=""> <div class="caption">“良辰美景” 出自《牡丹亭》</div> <div class="card-heading"><strong>良辰美景</strong></div> <div class="card-content text-muted">良辰美景奈何天，赏心乐事谁家院。</div> </a> </example> ```html <a class="card" href="###"> <img src="docs/img/img2.jpg" alt=""> <div class="caption">“良辰美景” 出自《牡丹亭》</div> <div class="card-heading"><strong>良辰美景</strong></div> <div class="card-content text-muted">良辰美景奈何天，赏心乐事谁家院。</div> </a> ``` ### 使用 `.media-wrapper` 容器为图片增加 .media-wrapper 容器，用来为图标固定尺寸和设置特殊效果。 <example class="example-cards"> <a class="card" href="###"> <div class="media-wrapper"> <img src="docs/img/img2.jpg" alt=""> </div> <div class="caption">“良辰美景” 出自《牡丹亭》</div> <div class="card-heading"><strong>良辰美景</strong></div> <div class="card-content text-muted">良辰美景奈何天，赏心乐事谁家院。</div> </a> </example> ```html <a class="card" href="###"> <div class="media-wrapper"> <img src="docs/img/img2.jpg" alt=""> </div> <div class="caption">“良辰美景” 出自《牡丹亭》</div> <div class="card-heading"><strong>良辰美景</strong></div> <div class="card-content text-muted">良辰美景奈何天，赏心乐事谁家院。</div> </a> ``` ## 无边框视图为 `.cards` 添加 `.cards-borderless` 类来移除卡片的边框。 <example class="example-cards"> <div class="cards cards-borderless"> <div class="col-md-4 col-sm-6 col-lg-3"> <a class="card" href="###"> <img src="docs/img/img2.jpg" alt=""> <div class="caption">“良辰美景” 出自《牡丹亭》</div> <div class="card-heading"><strong>良辰美景</strong></div> <div class="card-content text-muted">良辰美景奈何天，赏心乐事谁家院。</div> </a> </div> <div class="col-md-4 col-sm-6 col-lg-3"> <a class="card" href="###"> <img src="docs/img/img1.jpg" alt=""> <div class="caption">“良辰美景” 出自《牡丹亭》</div> <div class="card-heading"><strong>良辰美景</strong></div> <div class="card-content text-muted">良辰美景奈何天，赏心乐事谁家院。</div> </a> </div> <div class="col-md-4 col-sm-6 col-lg-3"> <a class="card" href="###"> <img src="docs/img/img5.jpg" alt=""> <div class="caption">“良辰美景” 出自《牡丹亭》</div> <div class="card-heading"><strong>良辰美景</strong></div> <div class="card-content text-muted">良辰美景奈何天，赏心乐事谁家院。</div> </a> </div> <div class="col-md-4 col-sm-6 col-lg-3"> <a class="card" href="###"> <img src="docs/img/img4.jpg" alt=""> <div class="caption">“良辰美景” 出自《牡丹亭》</div> <div class="card-heading"><strong>良辰美景</strong></div> <div class="card-content text-muted">良辰美景奈何天，赏心乐事谁家院。</div> </a> </div> <div class="col-md-4 col-sm-6 col-lg-3"> <a class="card" href="###"> <img src="docs/img/img3.jpg" alt=""> <div class="caption">“良辰美景” 出自《牡丹亭》</div> <div class="card-heading"><strong>良辰美景</strong></div> <div class="card-content text-muted">良辰美景奈何天，赏心乐事谁家院。</div> </a> </div> <div class="col-md-4 col-sm-6 col-lg-3"> <a class="card" href="###"> <img src="docs/img/img2.jpg" alt=""> <div class="caption">“良辰美景” 出自《牡丹亭》</div> <div class="card-heading"><strong>良辰美景</strong></div> <div class="card-content text-muted">良辰美景奈何天，赏心乐事谁家院。</div> </a> </div> <div class="col-md-4 col-sm-6 col-lg-3"> <a class="card" href="###"> <img src="docs/img/img1.jpg" alt=""> <div class="caption">“良辰美景” 出自《牡丹亭》</div> <div class="card-heading"><strong>良辰美景</strong></div> <div class="card-content text-muted">良辰美景奈何天，赏心乐事谁家院。</div> </a> </div> <div class="col-md-4 col-sm-6 col-lg-3"> <a class="card" href="###"> <img src="docs/img/img5.jpg" alt=""> <div class="caption">“良辰美景” 出自《牡丹亭》</div> <div class="card-heading"><strong>良辰美景</strong></div> <div class="card-content text-muted">良辰美景奈何天，赏心乐事谁家院。</div> </a> </div> </div> </example> <template class="pre-scrollable linenums"/> ```html <div class="cards cards-borderless"> <div class="col-md-4 col-sm-6 col-lg-3"> <a class="card" href="###"> <img src="docs/img/img2.jpg" alt=""> <div class="caption">“良辰美景” 出自《牡丹亭》</div> <div class="card-heading"><strong>良辰美景</strong></div> <div class="card-content text-muted">良辰美景奈何天，赏心乐事谁家院。</div> </a> </div> <div class="col-md-4 col-sm-6 col-lg-3"> <a class="card" href="###"> <img src="docs/img/img1.jpg" alt=""> <div class="caption">“良辰美景” 出自《牡丹亭》</div> <div class="card-heading"><strong>良辰美景</strong></div> <div class="card-content text-muted">良辰美景奈何天，赏心乐事谁家院。</div> </a> </div> <div class="col-md-4 col-sm-6 col-lg-3"> <a class="card" href="###"> <img src="docs/img/img5.jpg" alt=""> <div class="caption">“良辰美景” 出自《牡丹亭》</div> <div class="card-heading"><strong>良辰美景</strong></div> <div class="card-content text-muted">良辰美景奈何天，赏心乐事谁家院。</div> </a> </div> <div class="col-md-4 col-sm-6 col-lg-3"> <a class="card" href="###"> <img src="docs/img/img4.jpg" alt=""> <div class="caption">“良辰美景” 出自《牡丹亭》</div> <div class="card-heading"><strong>良辰美景</strong></div> <div class="card-content text-muted">良辰美景奈何天，赏心乐事谁家院。</div> </a> </div> <div class="col-md-4 col-sm-6 col-lg-3"> <a class="card" href="###"> <img src="docs/img/img3.jpg" alt=""> <div class="caption">“良辰美景” 出自《牡丹亭》</div> <div class="card-heading"><strong>良辰美景</strong></div> <div class="card-content text-muted">良辰美景奈何天，赏心乐事谁家院。</div> </a> </div> <div class="col-md-4 col-sm-6 col-lg-3"> <a class="card" href="###"> <img src="docs/img/img2.jpg" alt=""> <div class="caption">“良辰美景” 出自《牡丹亭》</div> <div class="card-heading"><strong>良辰美景</strong></div> <div class="card-content text-muted">良辰美景奈何天，赏心乐事谁家院。</div> </a> </div> <div class="col-md-4 col-sm-6 col-lg-3"> <a class="card" href="###"> <img src="docs/img/img1.jpg" alt=""> <div class="caption">“良辰美景” 出自《牡丹亭》</div> <div class="card-heading"><strong>良辰美景</strong></div> <div class="card-content text-muted">良辰美景奈何天，赏心乐事谁家院。</div> </a> </div> <div class="col-md-4 col-sm-6 col-lg-3"> <a class="card" href="###"> <img src="docs/img/img5.jpg" alt=""> <div class="caption">“良辰美景” 出自《牡丹亭》</div> <div class="card-heading"><strong>良辰美景</strong></div> <div class="card-content text-muted">良辰美景奈何天，赏心乐事谁家院。</div> </a> </div> </div> ``` ## 紧凑视图为 `.cards` 添加 `.cards-condensed` 类可以得到更为紧凑的视图，卡片之间将没有间距。 <example class="example-cards"> <div class="cards cards-condensed"> <div class="col-md-4 col-sm-6 col-lg-3"> <a class="card" href="###"> <img src="docs/img/img2.jpg" alt=""> <div class="caption">“良辰美景” 出自《牡丹亭》</div> <div class="card-heading"><strong>良辰美景</strong></div> <div class="card-content text-muted">良辰美景奈何天，赏心乐事谁家院。</div> </a> </div> <div class="col-md-4 col-sm-6 col-lg-3"> <a class="card" href="###"> <img src="docs/img/img1.jpg" alt=""> <div class="caption">“良辰美景” 出自《牡丹亭》</div> <div class="card-heading"><strong>良辰美景</strong></div> <div class="card-content text-muted">良辰美景奈何天，赏心乐事谁家院。</div> </a> </div> <div class="col-md-4 col-sm-6 col-lg-3"> <a class="card" href="###"> <img src="docs/img/img5.jpg" alt=""> <div class="caption">“良辰美景” 出自《牡丹亭》</div> <div class="card-heading"><strong>良辰美景</strong></div> <div class="card-content text-muted">良辰美景奈何天，赏心乐事谁家院。</div> </a> </div> <div class="col-md-4 col-sm-6 col-lg-3"> <a class="card" href="###"> <img src="docs/img/img4.jpg" alt=""> <div class="caption">“良辰美景” 出自《牡丹亭》</div> <div class="card-heading"><strong>良辰美景</strong></div> <div class="card-content text-muted">良辰美景奈何天，赏心乐事谁家院。</div> </a> </div> <div class="col-md-4 col-sm-6 col-lg-3"> <a class="card" href="###"> <img src="docs/img/img3.jpg" alt=""> <div class="caption">“良辰美景” 出自《牡丹亭》</div> <div class="card-heading"><strong>良辰美景</strong></div> <div class="card-content text-muted">良辰美景奈何天，赏心乐事谁家院。</div> </a> </div> <div class="col-md-4 col-sm-6 col-lg-3"> <a class="card" href="###"> <img src="docs/img/img2.jpg" alt=""> <div class="caption">“良辰美景” 出自《牡丹亭》</div> <div class="card-heading"><strong>良辰美景</strong></div> <div class="card-content text-muted">良辰美景奈何天，赏心乐事谁家院。</div> </a> </div> <div class="col-md-4 col-sm-6 col-lg-3"> <a class="card" href="###"> <img src="docs/img/img1.jpg" alt=""> <div class="caption">“良辰美景” 出自《牡丹亭》</div> <div class="card-heading"><strong>良辰美景</strong></div> <div class="card-content text-muted">良辰美景奈何天，赏心乐事谁家院。</div> </a> </div> <div class="col-md-4 col-sm-6 col-lg-3"> <a class="card" href="###"> <img src="docs/img/img5.jpg" alt=""> <div class="caption">“良辰美景” 出自《牡丹亭》</div> <div class="card-heading"><strong>良辰美景</strong></div> <div class="card-content text-muted">良辰美景奈何天，赏心乐事谁家院。</div> </a> </div> </div> </example> <template class="pre-scrollable linenums"/> ```html <div class="cards cards-condensed"> <div class="col-md-4 col-sm-6 col-lg-3"> <a class="card" href="###"> <img src="docs/img/img2.jpg" alt=""> <div class="caption">“良辰美景” 出自《牡丹亭》</div> <div class="card-heading"><strong>良辰美景</strong></div> <div class="card-content text-muted">良辰美景奈何天，赏心乐事谁家院。</div> </a> </div> <div class="col-md-4 col-sm-6 col-lg-3"> <a class="card" href="###"> <img src="docs/img/img1.jpg" alt=""> <div class="caption">“良辰美景” 出自《牡丹亭》</div> <div class="card-heading"><strong>良辰美景</strong></div> <div class="card-content text-muted">良辰美景奈何天，赏心乐事谁家院。</div> </a> </div> <div class="col-md-4 col-sm-6 col-lg-3"> <a class="card" href="###"> <img src="docs/img/img5.jpg" alt=""> <div class="caption">“良辰美景” 出自《牡丹亭》</div> <div class="card-heading"><strong>良辰美景</strong></div> <div class="card-content text-muted">良辰美景奈何天，赏心乐事谁家院。</div> </a> </div> <div class="col-md-4 col-sm-6 col-lg-3"> <a class="card" href="###"> <img src="docs/img/img4.jpg" alt=""> <div class="caption">“良辰美景” 出自《牡丹亭》</div> <div class="card-heading"><strong>良辰美景</strong></div> <div class="card-content text-muted">良辰美景奈何天，赏心乐事谁家院。</div> </a> </div> <div class="col-md-4 col-sm-6 col-lg-3"> <a class="card" href="###"> <img src="docs/img/img3.jpg" alt=""> <div class="caption">“良辰美景” 出自《牡丹亭》</div> <div class="card-heading"><strong>良辰美景</strong></div> <div class="card-content text-muted">良辰美景奈何天，赏心乐事谁家院。</div> </a> </div> <div class="col-md-4 col-sm-6 col-lg-3"> <a class="card" href="###"> <img src="docs/img/img2.jpg" alt=""> <div class="caption">“良辰美景” 出自《牡丹亭》</div> <div class="card-heading"><strong>良辰美景</strong></div> <div class="card-content text-muted">良辰美景奈何天，赏心乐事谁家院。</div> </a> </div> <div class="col-md-4 col-sm-6 col-lg-3"> <a class="card" href="###"> <img src="docs/img/img1.jpg" alt=""> <div class="caption">“良辰美景” 出自《牡丹亭》</div> <div class="card-heading"><strong>良辰美景</strong></div> <div class="card-content text-muted">良辰美景奈何天，赏心乐事谁家院。</div> </a> </div> <div class="col-md-4 col-sm-6 col-lg-3"> <a class="card" href="###"> <img src="docs/img/img5.jpg" alt=""> <div class="caption">“良辰美景” 出自《牡丹亭》</div> <div class="card-heading"><strong>良辰美景</strong></div> <div class="card-content text-muted">良辰美景奈何天，赏心乐事谁家院。</div> </a> </div> </div> ``` <div class="alert with-icon"> <i class="icon-smile"></i> <div class="content"> <p>非常感谢 <a class="alert-link" href="http://weibo.com/snowinfish" target="_blank">@snowinfish</a> 为本章节提供演示所用的全部图片。</p> <p class="margin-zero">图片仅供 ZUI 演示使用，未经作者授权，不得用作他用。</p> </div> </div>