多box相比box来说使用的场景并不多

wKiom1jJ8XKABZCPAACqjD3-Sjc271.png-wh_50

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<div class="box box-solid">
    <div class="box-header with-border">
            <h3 class="box-title">Collapsible Accordion</h3>
    </div>
    <!-- /.box-header -->
    <div class="box-body">
            <div class="box-group" id="accordion">
                    <!-- we are adding the .panel class so bootstrap.js collapse plugin detects it -->
                    <div class="panel box box-primary">
                            <div class="box-header with-border">
                                    <h4 class="box-title">
                                            <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="false" class="collapsed">
                                                    Collapsible Group Item #1
                                            </a>
                                    </h4>
                            </div>
                            <div id="collapseOne" class="panel-collapse collapse" aria-expanded="false" style="height: 0px;">
                                    <div class="box-body">
                                            111
                                    </div>
                            </div>
                    </div>
                    <div class="panel box box-danger">
                            <div class="box-header with-border">
                                    <h4 class="box-title">
                                            <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" class="collapsed" aria-expanded="false">
                                                    Collapsible Group Danger
                                            </a>
                                    </h4>
                            </div>
                            <div id="collapseTwo" class="panel-collapse collapse" aria-expanded="false" style="height: 0px;">
                                    <div class="box-body">
                                            222
                                    </div>
                            </div>
                    </div>
                    <div class="panel box box-success">
                            <div class="box-header with-border">
                                    <h4 class="box-title">
                                            <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree" class="" aria-expanded="true">
                                                    Collapsible Group Success
                                            </a>
                                    </h4>
                            </div>
                            <div id="collapseThree" class="panel-collapse collapse in" aria-expanded="true">
                                    <div class="box-body">
                                            33
                                    </div>
                            </div>
                    </div>
            </div>
    </div>
    <!-- /.box-body -->
</div>