web-dev-qa-db-ja.com

bootstrapにグループボックスはありますか？

私のアプリケーションの1つでは、下の図に示すような機能のようなグループボックスが必要です。Twitterを使用していますBootstrap 3css。=にそのような機能があるかどうかを検索しました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

htmlcsstwitter-bootstrapgroupbox
6
Alex Man

ブートストラップからパネルを試すことができます：デモ

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>

はい、できます：デモ

使用する 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>
8
G.L.P

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

ベースにはほぼ正確にこれがあります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>
1
Ian M

Bootstrap 4では、パネルはカードに置き換えられました。 V4への移行.panelから.cardへの移行 を参照してください。

詳細はこちら： ブートストラップのカード

1
Jon Roberts