.card卡片组件(样式)

卡片是一个灵活的、可扩展的内容窗口,同时可以做出多种展示效果变体。

关于

.card卡片组件是BootStrap 4新增的一组重要样式,它是一一个灵活的、可扩展的内容器,包含了可选的卡片头和卡片脚、一个大范围的内容、上下文背景色以及强大的显示选项。

使用按钮组合,可以把一系列按钮编组在一行里,并通过可选的JavaScript插件(方法)赋予按钮单选、复选等强化行为。

如果你对Bootstrap 3很熟悉,卡片代替了我们旧的panel、well和thumbnail样式—那些组件类似的功能可以通过卡片的修饰类来实现。

示例

卡片作为一个新式引入到BootStrap 4中,可能样式、标记和扩展属性不会很多(未来会不断扩充发展),但它仍然可以提供许多控制项和定义方法,由于我们使用了flex弹性布局,使得它们可以轻松对齐、并方便的与其它Bootstrap组件混合搭配使用。

下面是一个具有混合内容并固定了宽度的基本.card卡片使用范例,如果.card卡片如果没有定义宽度,将自然地填满父元素的全宽-利用这个属性,我们可以轻松的订制各种尺寸的卡片。

卡片(Card) - 图1

  1. <div class="card" style="width: 18rem;">
  2. <img class="card-img-top" src="..." alt="Card image cap">
  3. <div class="card-body">
  4. <h5 class="card-title">Card title</h5>
  5. <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  6. <a href="#" class="btn btn-primary">Go somewhere</a>
  7. </div>
  8. </div>

内容类型

卡片支持多种多样的内容,包括图片、文本、列组、链接等,混合并匹配多种内容类型以创建你想要的卡片。

主体

引用.card-body样式,可以建立起卡片的内容主体,如果你需要在一个.card中装置带边框的内容时,可以使用它。

卡片(Card) - 图2

  1. <div class="card">
  2. <div class="card-body">
  3. This is some text within a card body.
  4. </div>
  5. </div>

标题、文字和链接

通过.card-title<h*>组合,可以添加卡片标题。同亲将.card-link<a>结合使用,可以方便添加平行的链接。

通过 .card-subtitle<h*> 结合,可以添加副标题,如果 .card-title.card-subtitle 组合放在 .card-body 中, 则可对齐主、副标题。

卡片(Card) - 图3

  1. <div class="card" style="width: 18rem;">
  2. <div class="card-body">
  3. <h5 class="card-title">Card title</h5>
  4. <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
  5. <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  6. <a href="#" class="card-link">Card link</a>
  7. <a href="#" class="card-link">Another link</a>
  8. </div>
  9. </div>

图片

.card-img-top 定义一张图片在卡片的顶部, .card-text定义文字在卡片中,当然你也可以在.card-text 中设计自己的个性化HTML标签样式。

卡片(Card) - 图4

  1. <div class="card" style="width: 18rem;">
  2. <img class="card-img-top" src="..." alt="Card image cap">
  3. <div class="card-body">
  4. <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  5. </div>
  6. </div>

列表组

建立一个包含内容的列表组卡片。

卡片(Card) - 图5

  1. <div class="card" style="width: 18rem;">
  2. <ul class="list-group list-group-flush">
  3. <li class="list-group-item">Cras justo odio</li>
  4. <li class="list-group-item">Dapibus ac facilisis in</li>
  5. <li class="list-group-item">Vestibulum at eros</li>
  6. </ul>
  7. </div>

卡片(Card) - 图6

  1. <div class="card" style="width: 18rem;">
  2. <div class="card-header">
  3. Featured
  4. </div>
  5. <ul class="list-group list-group-flush">
  6. <li class="list-group-item">Cras justo odio</li>
  7. <li class="list-group-item">Dapibus ac facilisis in</li>
  8. <li class="list-group-item">Vestibulum at eros</li>
  9. </ul>
  10. </div>

混合样式

混合并结合多种内容形式来创建个性化卡片,下例即是将图像、块、文字以及列表整合在一个固定宽度的卡片中。

卡片(Card) - 图7

  1. <div class="card" style="width: 18rem;">
  2. <img class="card-img-top" src="..." alt="Card image cap">
  3. <div class="card-body">
  4. <h5 class="card-title">Card title</h5>
  5. <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  6. </div>
  7. <ul class="list-group list-group-flush">
  8. <li class="list-group-item">Cras justo odio</li>
  9. <li class="list-group-item">Dapibus ac facilisis in</li>
  10. <li class="list-group-item">Vestibulum at eros</li>
  11. </ul>
  12. <div class="card-body">
  13. <a href="#" class="card-link">Card link</a>
  14. <a href="#" class="card-link">Another link</a>
  15. </div>
  16. </div>

页眉页脚

在卡内添加可选的页眉和/或页脚。

卡片(Card) - 图8

  1. <div class="card">
  2. <div class="card-header">
  3. Featured
  4. </div>
  5. <div class="card-body">
  6. <h5 class="card-title">Special title treatment</h5>
  7. <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
  8. <a href="#" class="btn btn-primary">Go somewhere</a>
  9. </div>
  10. </div>

可以将 <h*> 元素添加到 .card-header页头中。

卡片(Card) - 图9

  1. <div class="card">
  2. <h5 class="card-header">Featured</h4>
  3. <div class="card-body">
  4. <h4 class="card-title">Special title treatment</h4>
  5. <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
  6. <a href="#" class="btn btn-primary">Go somewhere</a>
  7. </div>
  8. </div>

卡片(Card) - 图10

  1. <div class="card">
  2. <div class="card-header">
  3. Quote
  4. </div>
  5. <div class="card-body">
  6. <blockquote class="blockquote mb-0">
  7. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  8. <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
  9. </blockquote>
  10. </div>
  11. </div>

卡片(Card) - 图11

  1. <div class="card text-center">
  2. <div class="card-header">
  3. Featured
  4. </div>
  5. <div class="card-body">
  6. <h5 class="card-title">Special title treatment</h5>
  7. <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
  8. <a href="#" class="btn btn-primary">Go somewhere</a>
  9. </div>
  10. <div class="card-footer text-muted">
  11. 2 days ago
  12. </div>
  13. </div>

缩放

卡片没有特定的宽度width定义,除非另有定义声明,否则它们的真实宽度将是100%,您可以根据需要使用自定义CSS,引入栅格系统、定义栅格系统Sass mixins或其它程式进行更改。

使用栅格系统

使用栅格系统,根据需求按行与列来装载卡片。

卡片(Card) - 图12

  1. <div class="row">
  2. <div class="col-sm-6">
  3. <div class="card">
  4. <div class="card-body">
  5. <h5 class="card-title">Special title treatment</h5>
  6. <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
  7. <a href="#" class="btn btn-primary">Go somewhere</a>
  8. </div>
  9. </div>
  10. </div>
  11. <div class="col-sm-6">
  12. <div class="card">
  13. <div class="card-body">
  14. <h5 class="card-title">Special title treatment</h5>
  15. <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
  16. <a href="#" class="btn btn-primary">Go somewhere</a>
  17. </div>
  18. </div>
  19. </div>
  20. </div>

使用通用全局属性

使用我们提供的通用全局属性来定义卡片的宽度。

卡片(Card) - 图13

  1. <div class="card w-75">
  2. <div class="card-body">
  3. <h5 class="card-title">Card title</h5>
  4. <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
  5. <a href="#" class="btn btn-primary">Button</a>
  6. </div>
  7. </div>
  8. <div class="card w-50">
  9. <div class="card-body">
  10. <h5 class="card-title">Card title</h5>
  11. <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
  12. <a href="#" class="btn btn-primary">Button</a>
  13. </div>
  14. </div>

自定义CSS

在样式表中使用自定义CSS或使用内联样式设置宽度。

卡片(Card) - 图14

  1. <div class="card" style="width: 18rem;">
  2. <div class="card-body">
  3. <h5 class="card-title">Special title treatment</h5>
  4. <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
  5. <a href="#" class="btn btn-primary">Go somewhere</a>
  6. </div>
  7. </div>

文本对齐

使用我们的文本对齐类来更改或特定部份的文本对齐。

卡片(Card) - 图15

  1. <div class="card" style="width: 18rem;">
  2. <div class="card-body">
  3. <h5 class="card-title">Special title treatment</h5>
  4. <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
  5. <a href="#" class="btn btn-primary">Go somewhere</a>
  6. </div>
  7. </div>
  8. <div class="card text-center" style="width: 18rem;">
  9. <div class="card-body">
  10. <h5 class="card-title">Special title treatment</h5>
  11. <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
  12. <a href="#" class="btn btn-primary">Go somewhere</a>
  13. </div>
  14. </div>
  15. <div class="card text-right" style="width: 18rem;">
  16. <div class="card-body">
  17. <h5 class="card-title">Special title treatment</h5>
  18. <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
  19. <a href="#" class="btn btn-primary">Go somewhere</a>
  20. </div>
  21. </div>

导航

使用 Bootstrap导航组件将导航元件添加到卡片的标题或块中

卡片(Card) - 图16

  1. <div class="card text-center">
  2. <div class="card-header">
  3. <ul class="nav nav-tabs card-header-tabs">
  4. <li class="nav-item">
  5. <a class="nav-link active" href="#">Active</a>
  6. </li>
  7. <li class="nav-item">
  8. <a class="nav-link" href="#">Link</a>
  9. </li>
  10. <li class="nav-item">
  11. <a class="nav-link disabled" href="#">Disabled</a>
  12. </li>
  13. </ul>
  14. </div>
  15. <div class="card-body">
  16. <h5 class="card-title">Special title treatment</h5>
  17. <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
  18. <a href="#" class="btn btn-primary">Go somewhere</a>
  19. </div>
  20. </div>

卡片(Card) - 图17

  1. <div class="card text-center">
  2. <div class="card-header">
  3. <ul class="nav nav-pills card-header-pills">
  4. <li class="nav-item">
  5. <a class="nav-link active" href="#">Active</a>
  6. </li>
  7. <li class="nav-item">
  8. <a class="nav-link" href="#">Link</a>
  9. </li>
  10. <li class="nav-item">
  11. <a class="nav-link disabled" href="#">Disabled</a>
  12. </li>
  13. </ul>
  14. </div>
  15. <div class="card-body">
  16. <h5 class="card-title">Special title treatment</h5>
  17. <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
  18. <a href="#" class="btn btn-primary">Go somewhere</a>
  19. </div>
  20. </div>

图片

卡片中包含一些选项来搭配图像,选择在卡片的任何一端附加.cad-img-*,用卡片内容覆盖图像(如同背景),或者只是将图像置入到卡片当中。

图片覆盖

可以使用用 Image caps在卡片顶部或是底部,定义图片,如同页眉页脚效果。

卡片(Card) - 图18

  1. <div class="card mb-3">
  2. <img class="card-img-top" src="..." alt="Card image cap">
  3. <div class="card-body">
  4. <h5 class="card-title">Card title</h5>
  5. <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
  6. <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
  7. </div>
  8. </div>
  9. <div class="card">
  10. <div class="card-body">
  11. <h5 class="card-title">Card title</h5>
  12. <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
  13. <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
  14. </div>
  15. <img class="card-img-bottom" src="..." alt="Card image cap">
  16. </div>

图像叠加覆盖

将图像转换为卡片背景,并覆盖卡片的文字。根据图像,你可以选择是否需要额外的样式或其它属性定义。

卡片(Card) - 图19

  1. <div class="card bg-dark text-white">
  2. <img class="card-img" src="..." alt="Card image">
  3. <div class="card-img-overlay">
  4. <h5 class="card-title">Card title</h5>
  5. <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
  6. <p class="card-text">Last updated 3 mins ago</p>
  7. </div>
  8. </div>

请注意,内容不应大于图像的高度。 如果内容大于图像,则内容将显示在图像外部.

水平排列

使用网格和实用程序类的组合,可以以移动友好和响应方式使卡水平。 在下面的示例中,我们使用.no-gutters删除网格排水沟,并使用.col-md-* 类使卡在md 断点处水平。 根据您的卡内容,可能需要进一步调整。

卡片(Card) - 图20

  1. <div class="card mb-3" style="max-width: 540px;">
  2. <div class="row no-gutters">
  3. <div class="col-md-4">
  4. <img src="..." class="card-img" alt="...">
  5. </div>
  6. <div class="col-md-8">
  7. <div class="card-body">
  8. <h5 class="card-title">Card title</h5>
  9. <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
  10. <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
  11. </div>
  12. </div>
  13. </div>
  14. </div>

卡片样式

订制卡片、边框 、颜色等方法。

背景和颜色

使用 文字和通用背景定义 定义卡片的显示颜色。

卡片(Card) - 图21

  1. <div class="card text-white bg-primary mb-3" style="max-width: 20rem;">
  2. <div class="card-header">Header</div>
  3. <div class="card-body">
  4. <h5 class="card-title">Primary card title</h5>
  5. <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  6. </div>
  7. </div>
  8. <div class="card text-white bg-secondary mb-3" style="max-width: 20rem;">
  9. <div class="card-header">Header</div>
  10. <div class="card-body">
  11. <h5 class="card-title">Secondary card title</h5>
  12. <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  13. </div>
  14. </div>
  15. <div class="card text-white bg-success mb-3" style="max-width: 20rem;">
  16. <div class="card-header">Header</div>
  17. <div class="card-body">
  18. <h5 class="card-title">Success card title</h5>
  19. <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  20. </div>
  21. </div>
  22. <div class="card text-white bg-danger mb-3" style="max-width: 20rem;">
  23. <div class="card-header">Header</div>
  24. <div class="card-body">
  25. <h5 class="card-title">Danger card title</h5>
  26. <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  27. </div>
  28. </div>
  29. <div class="card text-white bg-warning mb-3" style="max-width: 20rem;">
  30. <div class="card-header">Header</div>
  31. <div class="card-body">
  32. <h5 class="card-title">Warning card title</h5>
  33. <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  34. </div>
  35. </div>
  36. <div class="card text-white bg-info mb-3" style="max-width: 20rem;">
  37. <div class="card-header">Header</div>
  38. <div class="card-body">
  39. <h5 class="card-title">Info card title</h5>
  40. <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  41. </div>
  42. </div>
  43. <div class="card bg-light mb-3" style="max-width: 20rem;">
  44. <div class="card-header">Header</div>
  45. <div class="card-body">
  46. <h5 class="card-title">Light card title</h5>
  47. <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  48. </div>
  49. </div>
  50. <div class="card text-white bg-dark mb-3" style="max-width: 20rem;">
  51. <div class="card-header">Header</div>
  52. <div class="card-body">
  53. <h5 class="card-title">Dark card title</h5>
  54. <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  55. </div>
  56. </div>

网页中传达辅助技术及其背后的意义

使用颜色添加意义只提供一个视觉指示,这不会传达给需要辅助技术(如盲人、听力障碍者)的用户,也就决定了诸如屏幕阅读器并不能读出颜色本身的意义。一般推荐确保由颜色表示的信息从内容本身(例如可见文本)中显而易见,或者通过替代方法,例如隐藏在.sr-only该类中的附加文本来创造更多的辅助传达技术。

.sr-only,全称 screen reader only,意为:(仅供)屏幕阅读器,这个 class 主要用于增强 accessbility(可访问性),有时候 UI 上会出现一些仅供视觉识别的元素,比如说“菜单按钮”,只有视力正常的人才能清楚辨识这些元素的作用。而残障人士,比如弱势或盲人是不可能知道这些视觉识别元素是什么的。他们上网使用的是屏幕阅读器,也就是 screen reader(sr),屏幕阅读器需要找到能辨识的文本说明然后“读”出来给用户听。问题是图形元素怎么可能“读出来”呢?因此我们还要写上这些元素的文本说明,但是又不需要展示给普通用户看到,于是加上 sr-only 的意义就在于能保证屏幕阅读器正确读取且不会影响 UI 的视觉呈现(译者补充)。

边框

使用 边框通用样式 来改变卡片的border-color.text-{color} ,或者在父层的 .card 上显示内容。

卡片(Card) - 图22

  1. <div class="card border-primary mb-3" style="max-width: 20rem;">
  2. <div class="card-header">Header</div>
  3. <div class="card-body text-primary">
  4. <h5 class="card-title">Primary card title</h5>
  5. <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  6. </div>
  7. </div>
  8. <div class="card border-secondary mb-3" style="max-width: 20rem;">
  9. <div class="card-header">Header</div>
  10. <div class="card-body text-secondary">
  11. <h5 class="card-title">Secondary card title</h5>
  12. <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  13. </div>
  14. </div>
  15. <div class="card border-success mb-3" style="max-width: 20rem;">
  16. <div class="card-header">Header</div>
  17. <div class="card-body text-success">
  18. <h5 class="card-title">Success card title</h5>
  19. <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  20. </div>
  21. </div>
  22. <div class="card border-danger mb-3" style="max-width: 20rem;">
  23. <div class="card-header">Header</div>
  24. <div class="card-body text-danger">
  25. <h5 class="card-title">Danger card title</h5>
  26. <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  27. </div>
  28. </div>
  29. <div class="card border-warning mb-3" style="max-width: 20rem;">
  30. <div class="card-header">Header</div>
  31. <div class="card-body text-warning">
  32. <h5 class="card-title">Warning card title</h5>
  33. <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  34. </div>
  35. </div>
  36. <div class="card border-info mb-3" style="max-width: 20rem;">
  37. <div class="card-header">Header</div>
  38. <div class="card-body text-info">
  39. <h5 class="card-title">Info card title</h5>
  40. <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  41. </div>
  42. </div>
  43. <div class="card border-light mb-3" style="max-width: 20rem;">
  44. <div class="card-header">Header</div>
  45. <div class="card-body">
  46. <h5 class="card-title">Light card title</h5>
  47. <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  48. </div>
  49. </div>
  50. <div class="card border-dark mb-3" style="max-width: 20rem;">
  51. <div class="card-header">Header</div>
  52. <div class="card-body text-dark">
  53. <h5 class="card-title">Dark card title</h5>
  54. <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  55. </div>
  56. </div>

Mixins 实用程序

您还可以更改卡上的页眉和页脚所需的边框,也能使用.bg-transparent删除其background-color背景颜色。

卡片(Card) - 图23

  1. <div class="card border-success mb-3" style="max-width: 20rem;">
  2. <div class="card-header bg-transparent border-success">Header</div>
  3. <div class="card-body text-success">
  4. <h5 class="card-title">Success card title</h5>
  5. <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  6. </div>
  7. <div class="card-footer bg-transparent border-success">Footer</div>
  8. </div>

卡片排版

Bootstrap除了对卡片內的內容可以进行设计排版外,还包括一系列布置选项,目前这些布置选项还不支持响应式

卡片组

将多个卡片结为一个群组,使用他们具有相同的宽度和高度列。卡片组使用display: flex;来实现统一的布局。

卡片(Card) - 图24

  1. <div class="card-group">
  2. <div class="card">
  3. <img class="card-img-top" src="..." alt="Card image cap">
  4. <div class="card-body">
  5. <h5 class="card-title">Card title</h5>
  6. <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
  7. <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
  8. </div>
  9. </div>
  10. <div class="card">
  11. <img class="card-img-top" src="..." alt="Card image cap">
  12. <div class="card-body">
  13. <h5 class="card-title">Card title</h5>
  14. <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
  15. <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
  16. </div>
  17. </div>
  18. <div class="card">
  19. <img class="card-img-top" src="..." alt="Card image cap">
  20. <div class="card-body">
  21. <h5 class="card-title">Card title</h5>
  22. <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
  23. <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
  24. </div>
  25. </div>
  26. </div>

当使用带页脚的卡片图时,他们的内容会自动水平对齐和栅格式布局。

卡片(Card) - 图25

  1. <div class="card-group">
  2. <div class="card">
  3. <img class="card-img-top" src="..." alt="Card image cap">
  4. <div class="card-body">
  5. <h5 class="card-title">Card title</h5>
  6. <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
  7. </div>
  8. <div class="card-footer">
  9. <small class="text-muted">Last updated 3 mins ago</small>
  10. </div>
  11. </div>
  12. <div class="card">
  13. <img class="card-img-top" src="..." alt="Card image cap">
  14. <div class="card-body">
  15. <h5 class="card-title">Card title</h5>
  16. <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
  17. </div>
  18. <div class="card-footer">
  19. <small class="text-muted">Last updated 3 mins ago</small>
  20. </div>
  21. </div>
  22. <div class="card">
  23. <img class="card-img-top" src="..." alt="Card image cap">
  24. <div class="card-body">
  25. <h5 class="card-title">Card title</h5>
  26. <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
  27. </div>
  28. <div class="card-footer">
  29. <small class="text-muted">Last updated 3 mins ago</small>
  30. </div>
  31. </div>
  32. </div>

Card decks卡片阵列

需要一套相互不相连,但宽度和高度相同的卡片?使用卡片阵列(Card decks)吧。

卡片(Card) - 图26

  1. <div class="card-deck">
  2. <div class="card">
  3. <img class="card-img-top" src="..." alt="Card image cap">
  4. <div class="card-body">
  5. <h5 class="card-title">Card title</h5>
  6. <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
  7. <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
  8. </div>
  9. </div>
  10. <div class="card">
  11. <img class="card-img-top" src="..." alt="Card image cap">
  12. <div class="card-body">
  13. <h5 class="card-title">Card title</h5>
  14. <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
  15. <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
  16. </div>
  17. </div>
  18. <div class="card">
  19. <img class="card-img-top" src="..." alt="Card image cap">
  20. <div class="card-body">
  21. <h5 class="card-title">Card title</h5>
  22. <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
  23. <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
  24. </div>
  25. </div>
  26. </div>

与卡片组一样,卡片阵列中的的的卡片页脚会自动排列。

卡片(Card) - 图27

  1. <div class="card-deck">
  2. <div class="card">
  3. <img class="card-img-top" src="..." alt="Card image cap">
  4. <div class="card-body">
  5. <h5 class="card-title">Card title</h5>
  6. <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
  7. </div>
  8. <div class="card-footer">
  9. <small class="text-muted">Last updated 3 mins ago</small>
  10. </div>
  11. </div>
  12. <div class="card">
  13. <img class="card-img-top" src="..." alt="Card image cap">
  14. <div class="card-body">
  15. <h5 class="card-title">Card title</h5>
  16. <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
  17. </div>
  18. <div class="card-footer">
  19. <small class="text-muted">Last updated 3 mins ago</small>
  20. </div>
  21. </div>
  22. <div class="card">
  23. <img class="card-img-top" src="..." alt="Card image cap">
  24. <div class="card-body">
  25. <h5 class="card-title">Card title</h5>
  26. <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
  27. </div>
  28. <div class="card-footer">
  29. <small class="text-muted">Last updated 3 mins ago</small>
  30. </div>
  31. </div>
  32. </div>

多列卡片浮动排版

將卡片包在.card-columns 中,可以將做出象 Masonry网站的瀑布式排列卡片效果,卡片是使用column属性,而不是基于 flexbox弹性布局,从而实现更方便实用的浮动对齐,顺序是从上到下、从左到右。

注意: 为了防止卡片排列突出栏目,我们必须为它们设置为 display: inline-block (当 column-break-inside: avoid 这个解决方案还没有生效时。

卡片(Card) - 图28

  1. <div class="card-columns">
  2. <div class="card">
  3. <img class="card-img-top" src="..." alt="Card image cap">
  4. <div class="card-body">
  5. <h5 class="card-title">Card title that wraps to a new line</h5>
  6. <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
  7. </div>
  8. </div>
  9. <div class="card p-3">
  10. <blockquote class="blockquote mb-0 card-body">
  11. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  12. <footer class="blockquote-footer">
  13. <small class="text-muted">
  14. Someone famous in <cite title="Source Title">Source Title</cite>
  15. </small>
  16. </footer>
  17. </blockquote>
  18. </div>
  19. <div class="card">
  20. <img class="card-img-top" src="..." alt="Card image cap">
  21. <div class="card-body">
  22. <h5 class="card-title">Card title</h5>
  23. <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
  24. <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
  25. </div>
  26. </div>
  27. <div class="card bg-primary text-white text-center p-3">
  28. <blockquote class="blockquote mb-0">
  29. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
  30. <footer class="blockquote-footer">
  31. <small>
  32. Someone famous in <cite title="Source Title">Source Title</cite>
  33. </small>
  34. </footer>
  35. </blockquote>
  36. </div>
  37. <div class="card text-center">
  38. <div class="card-body">
  39. <h5 class="card-title">Card title</h5>
  40. <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
  41. <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
  42. </div>
  43. </div>
  44. <div class="card">
  45. <img class="card-img" src="..." alt="Card image">
  46. </div>
  47. <div class="card p-3 text-right">
  48. <blockquote class="blockquote mb-0">
  49. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  50. <footer class="blockquote-footer">
  51. <small class="text-muted">
  52. Someone famous in <cite title="Source Title">Source Title</cite>
  53. </small>
  54. </footer>
  55. </blockquote>
  56. </div>
  57. <div class="card">
  58. <div class="card-body">
  59. <h5 class="card-title">Card title</h5>
  60. <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
  61. <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
  62. </div>
  63. </div>
  64. </div>

Card columns can also be extended and customized with some additional code. Shown below is an extension of the .card-columns class using the same CSS we use—CSS columns— to generate a set of responsive tiers for changing the number of columns.

  1. .card-columns {
  2. @include media-breakpoint-only(lg) {
  3. column-count: 4;
  4. }
  5. @include media-breakpoint-only(xl) {
  6. column-count: 5;
  7. }
  8. }