twitter-bootstrap Bootstrap 3 卡
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/49160572/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap 3 Card
提问by Melu
Our web application needs a dashboard that will have multiple cards on it. These cards would be links to other apps / pages etc, we specifically want to use bootstrap 3 as we do not the time and energy to upgrade to bootstrap 4 any suggestions code examples would be helpful.
我们的 Web 应用程序需要一个仪表板，上面有多个卡片。这些卡片将是其他应用程序/页面等的链接，我们特别希望使用引导程序 3，因为我们没有时间和精力升级到引导程序 4，任何建议代码示例都会有所帮助。
回答by Melu
So after some digging around I came up with a card myself using bootstrap 3
所以经过一番挖掘之后，我自己使用 bootstrap 3 想出了一张卡片
<div class="row">
<div class="col-md-2"> </div>
<div class="col-md-8">
<div class="row space-16"> </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> 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> 7 Active Users</li>
<li></li>
<li><i class="glyphicon glyphicon-envelope lighter"></i><a href="#"> Help</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-md-2"> </div>
</div>
</div>
Css for the above
上面的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
回答by Scott M. Stolz
Cards are called panels in Bootstrap 3. You can either use panels instead of cards to create a similar appearance, or you can use a third-party package to add cards capability to Bootstrap 3.
卡片在 Bootstrap 3 中称为面板。您可以使用面板而不是卡片来创建类似的外观，也可以使用第三方包向 Bootstrap 3 添加卡片功能。
Option 1: Use Panels instead of Cards
选项 1：使用面板而不是卡片
Bootstrap 3 uses Panels instead of Cards. They are basically the same thing.
Bootstrap 3 使用面板而不是卡片。它们基本上是同一回事。
If you are writing new code, then this would be the best option. You can also search and replace "card" with "panel" if you are copy and pasting code that has class="card"in it.
如果您正在编写新代码，那么这将是最佳选择。如果您要复制和粘贴其中包含的代码，您还可以搜索“卡片”并将其替换为“面板” class="card"。
Bootstrap 3
引导程序 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
引导程序 4
<div class="card">
<div class="card-header">Header</div>
<div class="card-body">Content</div>
<div class="card-footer">Footer</div>
</div>
So if you want to use Cards in Bootstrap 3, just use Panels instead.
因此，如果您想在 Bootstrap 3 中使用 Cards，只需使用 Panels。
Option 2: Add Cards to Bootstrap 3
选项 2：将卡片添加到 Bootstrap 3
I have not tested this, but Martin Bean created a package that allows you to use Cards within Bootstrap 3.
我没有测试过这个，但是 Martin Bean 创建了一个包，允许你在 Bootstrap 3 中使用 Cards。
This may be useful if you are copy and pasting HTML code already marked up with class="card".
如果您要复制和粘贴已标记为 的 HTML 代码，这可能很有用class="card"。
