Bootstrap 3卡

Question

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

Answer 1

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

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

Bootstrap 3 使用面板而不是卡片。它们基本上是同一回事。

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

引导程序 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>

引导程序 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 中使用 Cards，只需使用 Panels。

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

我没有测试过这个，但是 Martin Bean 创建了一个包，允许你在 Bootstrap 3 中使用 Cards。

• Bootstrap 3 的卡片组件 (GitHub)

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

Answer 2

因此，经过一些挖掘之后，我自己使用了引导程序3提出了一张卡片

<div class="row">
  <div class="col-md-2">&nbsp;</div>
  <div class="col-md-8">
    <div class="row space-16">&nbsp;</div>
    <div class="row">
      <div class="col-sm-4">
        <div class="thumbnail">
          <div class="caption text-center" onclick="location.href='https://flow.microsoft.com/en-us/connectors/shared_slack/slack/'">
            <div class="position-relative">
              <img src="https://az818438.vo.msecnd.net/icons/slack.png" style="width:72px;height:72px;" />
            </div>
            <h4 id="thumbnail-label"><a href="https://flow.microsoft.com/en-us/connectors/shared_slack/slack/" target="_blank">Microsoft Slack</a></h4>
            <p><i class="glyphicon glyphicon-user light-red lighter bigger-120"></i>&nbsp;Auditor</p>
            <div class="thumbnail-description smaller">Slack is a team communication tool, that brings together all of your team communications in one place, instantly searchable and available wherever you go.</div>
          </div>
          <div class="caption card-footer text-center">
            <ul class="list-inline">
              <li><i class="people lighter"></i>&nbsp;7 Active Users</li>
              <li></li>
              <li><i class="glyphicon glyphicon-envelope lighter"></i><a href="#">&nbsp;Help</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="col-md-2">&nbsp;</div>
  </div>
</div>

以上的CSS

.thumbnail {
   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5);
   transition: 0.3s;
   min-width: 40%;
   border-radius: 5px;
 }

 .thumbnail-description {
   min-height: 40px;
 }

 .thumbnail:hover {
   cursor: pointer;
   box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 1);
 }

这是一个使用Bootstrap 3的示例，效果很好-尽管还需要更多工作