twitter-bootstrap - Bootstrap 3 卡

Question

我们的 Web 应用程序需要一个仪表板，上面有多个卡片。这些卡片将是指向其他应用程序/页面等的链接，我们特别想使用 bootstrap 3，因为我们没有时间和精力升级到 bootstrap 4，任何建议的代码示例都会有所帮助。

Answer 1

卡片在 Bootstrap 3 中称为面板。您可以使用面板代替卡片来创建类似的外观，也可以使用第三方包将卡片功能添加到 Bootstrap 3。

选项 1:使用面板而不是卡片

Bootstrap 3 使用面板而不是卡片。它们基本上是一样的。

如果您正在编写新代码，那么这将是最佳选择。如果您要复制和粘贴具有 class="card" 的代码，您还可以搜索并用“面板”替换“卡片”。在里面。

Bootstrap 3

<div class="panel panel-default">
  <div class="panel-heading">Panel Heading</div>
  <div class="panel-body">Panel Content</div>
  <div class="panel-footer">Panel Footer</div>
</div>

Bootstrap 4

<div class="card">
  <div class="card-header">Header</div>
  <div class="card-body">Content</div>
  <div class="card-footer">Footer</div>
</div>

因此，如果您想在 Bootstrap 3 中使用卡片，只需使用面板即可。

选项 2:将卡片添加到 Bootstrap 3

我没有对此进行测试，但 Martin Bean 创建了一个包，允许您在 Bootstrap 3 中使用 Cards。

Card component for Bootstrap 3 (GitHub)

如果您要复制和粘贴已用 class="card" 标记的 HTML 代码，这可能会很有用。 .