Html 我们在引导程序中有任何 Group 框吗
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29698264/
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
Do we have any Group box in bootstrap
提问by Alex Man
In one of my application we need a group box like feature just like as shown in the picture below, We are using Twitter Bootstrap 3 css. I have searched whether there is any feature like that in Bootstrap 3 but couldn't find any, I don't know whether I am missing any, for the time been I have created my own css for creating a structure like that, but seems not that good.
在我的一个应用程序中，我们需要一个类似功能的分组框，如下图所示，我们正在使用 Twitter Bootstrap 3 css。我已经搜索过 Bootstrap 3 中是否有任何类似的功能，但找不到任何功能，我不知道我是否遗漏了任何功能，目前我已经创建了自己的 css 来创建这样的结构，但似乎没那么好。
Can anyone please tell me any component like this available in Bootstrap 3
谁能告诉我 Bootstrap 3 中可用的任何此类组件
CSS
CSS
table {
border-collapse:separate;
border:solid #2e6da4 1px;
border-radius:6px;
-moz-border-radius:6px;
}
td, th {
border-left:solid #2e6da4 1px;
border-top:solid #2e6da4 1px;
}
th {
background-color: #337ab7;
border-top: none;
}
td:first-child {
border-left: none;
}
回答by G.L.P
You can try panels from bootstrap: Demo
您可以从引导程序尝试面板：演示
HTML:
HTML：
<div class="panel panel-default">
<div class="panel-heading">Panel heading without title</div>
<div class="panel-body">
Panel content blah <br/>blah <br/>blah <br/>blah <br/>blah <br/>blah <br/>blah <br/>blah <br/>blah <br/>blahblah <br/>blah <br/>blah <br/>blah <br/>blah <br/>blah <br/>blah <br/>blah <br/>blah <br/>blah
</div>
</div>
Yes you can: Demo
是的，你可以：演示
Use panel-primaryfor Blue color. For more info Reference Link
使用panel-primary了蓝色。更多信息参考链接
<div class="panel panel-default">...</div>
<div class="panel panel-primary">...</div>
<div class="panel panel-success">...</div>
<div class="panel panel-info">...</div>
<div class="panel panel-warning">...</div>
<div class="panel panel-danger">...</div>
回答by Alex Man
Use panels from Bootstrap: Demo
使用 Bootstrap 中的面板：演示
<div class="col-lg-3 col-md-3 col-sm-3">
<div class="panel panel-primary">
<div class="panel-heading">Panel heading without title</div>
<div class="panel-body">Panel content blah
<br/>blah
<br/>blah
<br/>blah
<br/>blah
<br/>blah
<br/>blah
<br/>blah
<br/>blah
<br/>blahblah
<br/>blah
<br/>blah
<br/>blah
<br/>blah
<br/>blah
<br/>blah
<br/>blah
<br/>blah
<br/>blah</div>
</div>
</div>
回答by Jon Roberts
In Bootstrap 4, panel has been replaced by card. See Migrating to V4 .panel to .card
在 Bootstrap 4 中，面板已被卡取代。请参阅迁移到 V4 .panel 到 .card
Full info here: Bootstrap's cards
完整信息在这里：Bootstrap 的卡片
回答by Ian M
There is something almost exactly this in the base bootstrap examples. http://getbootstrap.com/examples/theme/
在基本引导程序示例中，几乎完全相同。 http://getbootstrap.com/examples/theme/
They call them "panels" Here's the code:
他们称它们为“面板” 这是代码：
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>
