我们在 bootstrap 中有任何组框吗

Question

在我的一个应用程序中，我们需要一个类似功能的分组框，如下图所示，我们正在使用 Twitter Bootstrap 3 css。我搜索了 Bootstrap 3 中是否有类似的功能，但没有找到，我不知道我是否缺少任何功能，暂时我已经创建了自己的 css创造了这样的结构，但似乎不太好。

任何人都可以告诉我 Bootstrap 3

中可用的类似组件吗

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;
}

JSFiddle

Answer 1

您可以尝试来自 bootstrap 的面板：Demo

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>

是的，你可以：Demo

对蓝色使用 panel-primary。更多信息 Reference Link

<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>

Answer 2

基础 bootstrap 示例中的内容几乎与此完全相同。 http://getbootstrap.com/examples/theme/

他们称他们为"panels"代码如下：

<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>

Answer 3

使用来自 Bootstrap 的面板：Demo

<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>

Answer 4

在Bootstrap4中，面板被卡片取代。参见 Migrating to V4 .panel to .card

完整信息在这里：Bootstrap’s cards

我们在 bootstrap 中有任何组框吗

Do we have any Group box in bootstrap

html

css

twitter-bootstrap

groupbox