转载

Bootstrap 按钮组尺寸大小

按钮的尺寸大小

只要给 .btn-group 加上 .btn-group-* 类,就省去为按钮组中的每个按钮都赋予尺寸类了。

 按钮尺寸(大) 语法:btn-group-lg 按钮尺寸(中) 语法:btn-group-sm 按钮尺寸(小) 语法:btn-group-xs

下面的实例演示了上面 'Bootstrap 按钮组语法' 中讨论到的 class .btn-group-* 的使用:





  1. <div class="btn-group btn-group-lg"> 
  2.   <button type="button" class="btn btn-default">Bootstrap按钮的尺寸:最大尺寸</button> 
  3.   <button type="button" class="btn btn-default">Bootstrap按钮的尺寸:最大尺寸</button> 
  4.   <button type="button" class="btn btn-default">Bootstrap按钮的尺寸:最大尺寸</button> 
  5. </div> 
  6. <div class="btn-group"> 
  7.   <button type="button" class="btn btn-default">Bootstrap按钮的尺寸大小演示:默认尺寸</button> 
  8.   <button type="button" class="btn btn-default">Bootstrap按钮的尺寸大小演示:默认尺寸</button> 
  9.   <button type="button" class="btn btn-default">Bootstrap按钮的尺寸大小演示:默认尺寸</button> 
  10. </div> 
  11. <div class="btn-group btn-group-sm"> 
  12.   <button type="button" class="btn btn-default">Bootstrap按钮的尺寸大小演示:尺寸中</button> 
  13.   <button type="button" class="btn btn-default">Bootstrap按钮的尺寸大小演示:尺寸中</button> 
  14.   <button type="button" class="btn btn-default">Bootstrap按钮的尺寸大小演示:尺寸中</button> 
  15. </div> 
  16. <div class="btn-group btn-group-xs"> 
  17.   <button type="button" class="btn btn-default">Bootstrap按钮的尺寸大小演示:最小尺寸</button> 
  18.   <button type="button" class="btn btn-default">Bootstrap按钮的尺寸大小演示:最小尺寸</button> 
  19.   <button type="button" class="btn btn-default">Bootstrap按钮的尺寸大小演示:最小尺寸</button> 
  20. </div> 

 

正文到此结束
Loading...