Question

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

Answer 1

卡在Bootstrap 3中被称为面板。您可以使用面板而不是卡来创建类似的外观，或者可以使用第三方软件包将卡功能添加到Bootstrap 3中。

选项1：使用面板代替卡片

引导程序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，只需使用面板即可。

选项2：将卡添加到Bootstrap 3

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

Card component for Bootstrap 3 (GitHub)

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

Answer 2

所以在经过一些挖掘之后，我自己想出了一张使用bootstrap 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);
 }

Here is an example that uses Bootstrap 3 works well - although need some more work

Bootstrap 3卡

2 个答案:

选项1：使用面板代替卡片

选项2：将卡添加到Bootstrap 3