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

enter image description here

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中的面板： 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 3

基本bootstrap示例中几乎有这样的东西。 http://getbootstrap.com/examples/theme/

他们称之为“面板”这是代码：

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

在Bootstrap 4中，面板已被卡代替。参见Migrating to V4 .panel to .card

此处提供完整信息：Bootstrap’s cards

我们在bootstrap中有任何Group框吗？

4 个答案: