其实tab和轮播差不多，也是放在了box里面

wKioL1jJ8NWhFEXKAACKrTvWiuM923.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
pull-right可以将菜单放在右边
dropdown open中的open是将组合按钮打开
 
<div class="nav-tabs-custom">
        <ul class="nav nav-tabs pull-right">
                <li class=""><a href="#tab_1" data-toggle="tab" aria-expanded="false">Tab 1</a></li>
                <li class=""><a href="#tab_2" data-toggle="tab" aria-expanded="false">Tab 2</a></li>
                <li class="active"><a href="#tab_3" data-toggle="tab" aria-expanded="true">Tab 3</a></li>
                <li class="dropdown open">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="true">
                                Dropdown <span class="caret"></span>
                        </a>
                        <ul class="dropdown-menu">
                                <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
                                <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
                                <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
                                <li role="presentation" class="divider"></li>
                                <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
                        </ul>
                </li>
                <li class="pull-right"><a href="#" class="text-muted"><i class="fa fa-gear"></i></a></li>
        </ul>
        <div class="tab-content">
                <div class="tab-pane" id="tab_1">
                        <b>How to use:</b>
 
                        <p>Exactly like the original bootstrap tabs except you should use
                                the custom wrapper <code>.nav-tabs-custom</code> to achieve this style.</p>
                </div>
                <!-- /.tab-pane -->
                <div class="tab-pane" id="tab_2">
2222222222222
                </div>
                <!-- /.tab-pane -->
                <div class="tab-pane active" id="tab_3">
333333333333333
                </div>
                <!-- /.tab-pane -->
        </div>
        <!-- /.tab-content -->
</div>