Bootstrap 按钮组尺寸大小

W3CSchool > bootstrap3中文手册 > Bootstrap 按钮组 > 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> 

 

没有找到答案?搜索一下吧!

学习导航


Bootstrap3中文开发手册参考网站
w3c.3306.biz 提供的内容仅用于学习或测试。所有内容均整理自互联网!目的是为了让更多读者欣赏,我们不保证内容的正确性,并对任何法律问题及风险不承担任何责任。 当您在浏览本站时,代表您已接受了本站的使用条款和隐私条款。(删除内容:512876994#qq.com)