全程干货（bootstrap按钮大小设置）bootstrap宽度控制，Bootstrap教程：如何定制按钮大小.btn，Bootstrap教程：如何定制按钮大小.btn，
上个教程介绍了按钮的定制风格，也就是如何实现Web页面中多种风格按钮。在Bootstrap框架中，对于按钮的大小，也是可以定制的。类似于input一样，通过在基础按钮“.btn”的基础上追加类名来控制按钮的大小。
在Bootstrap框架中提供了三个类名来控制按钮大小：
从上表中不难发现，在Bootstrap框架中控制按钮的大小都是通过修改按钮的padding、line-height、font-size和border-radius几个属性。 /*源码查阅bootstrap.css文件中第2319行～第2339行*/
.btn-lg,.btn-group-lg>.btn{padding:10px16px;font-size:18px;line-height:1.33;border-radius:6px;}.btn-sm,.btn-group-sm>.btn{padding:5px10px;font-size:12px;line-height:1.5;border-radius:3px;}.btn-xs,.btn-group-xs>.btn{padding:1px5px;font-size:12px;line-height:1.5;border-radius:3px;}
那么在实际使用中，这几个类名可以配合按钮中其他颜色类名一起使用，但唯一一点不能缺少“.btn”类名：
<buttonclass="btn btn-primary btn-lg"type="button">大型按钮.btn-lg</button><buttonclass="btn btn-primary"type="button">正常按钮</button><buttonclass="btn btn-primary btn-sm"type="button">小型按钮.btn-sm</button><buttonclass="btn btn-primary btn-xs"type="button">超小型按钮.btn-xs</button>
(window.slotbydup = window.slotbydup || []).push({
id: "u6835052",
container: "_96bek913mdb",
async: true
});
本文链接：http://blog.sauo.top/?id=494 感谢分享!
