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