BootStrap播放按钮组 

 1 <h3>播放器图标组</h3>
 2 
 3   <a class="btn btn-success" href="#">
 4     <span class="glyphicon glyphicon-fast-backward"></span>
 5   </a>
 6   <a class="btn btn-success" href="#">
 7     <span class="glyphicon glyphicon-backward"></span>
 8   </a>
 9   <a class="btn btn-success" href="#">
10     <span class="glyphicon glyphicon-play"></span>
11     /
12     <span class="glyphicon glyphicon-pause"></span>
13   </a>
14   <a class="btn btn-success" href="#">
15     <span class="glyphicon glyphicon-stop"></span>
16   </a>
17   <a class="btn btn-success" href="#">
18     <span class="glyphicon glyphicon-forward"></span>
19   </a>
20   <a class="btn btn-success" href="#">
21     <span class="glyphicon glyphicon-fast-forward"></span>
22   </a>
23 
24   <h3>按钮组</h3>
25   <div class="btn-group">
26     <a class="btn btn-success" href="#">
27       <span class="glyphicon glyphicon-fast-backward"></span>
28     </a>
29     <a class="btn btn-success" href="#">
30       <span class="glyphicon glyphicon-backward"></span>
31     </a>
32     <a class="btn btn-success" href="#">
33       <span class="glyphicon glyphicon-play"></span>
34       /
35       <span class="glyphicon glyphicon-pause"></span>
36     </a>
37     <a class="btn btn-success" href="#">
38       <span class="glyphicon glyphicon-stop"></span>
39     </a>
40     <a class="btn btn-success" href="#">
41       <span class="glyphicon glyphicon-forward"></span>
42     </a>
43     <a class="btn btn-success" href="#">
44       <span class="glyphicon glyphicon-fast-forward"></span>
45     </a>
46   </div>
47 
48   <h3>两队调整对齐的按钮组</h3>
49   <div class="btn-group btn-group-justified">
50     <a class="btn btn-success" href="#">
51       <span class="glyphicon glyphicon-fast-backward"></span>
52     </a>
53     <a class="btn btn-success" href="#">
54       <span class="glyphicon glyphicon-backward"></span>
55     </a>
56     <a class="btn btn-success" href="#">
57       <span class="glyphicon glyphicon-play"></span>
58       /
59       <span class="glyphicon glyphicon-pause"></span>
60     </a>
61     <a class="btn btn-success" href="#">
62       <span class="glyphicon glyphicon-stop"></span>
63     </a>
64     <a class="btn btn-success" href="#">
65       <span class="glyphicon glyphicon-forward"></span>
66     </a>
67     <a class="btn btn-success" href="#">
68       <span class="glyphicon glyphicon-fast-forward"></span>
69     </a>
70   </div>
71 
72   <h3>竖直放置的按钮组</h3>
73   <div class="btn-group-vertical">
74     <a class="btn btn-success" href="#">
75       <span class="glyphicon glyphicon-fast-backward"></span>
76     </a>
77     <a class="btn btn-success" href="#">
78       <span class="glyphicon glyphicon-backward"></span>
79     </a>
80     <a class="btn btn-success" href="#">
81       <span class="glyphicon glyphicon-play"></span>
82       /
83       <span class="glyphicon glyphicon-pause"></span>
84     </a>
85     <a class="btn btn-success" href="#">
86       <span class="glyphicon glyphicon-stop"></span>
87     </a>
88     <a class="btn btn-success" href="#">
89       <span class="glyphicon glyphicon-forward"></span>
90     </a>
91     <a class="btn btn-success" href="#">
92       <span class="glyphicon glyphicon-fast-forward"></span>
93     </a>
94   </div>

以上代码效果图如下

posted @ 2016-12-22 13:12  时间脱臼  阅读(578)  评论(0)    收藏  举报