新起点博客上一篇文章介绍了按钮的如何定制风格，也就是如何实现Web页面中多种风格按钮。在Bootstrap框架中，对于按钮的大小，也是可以定制的。类似于input一样，通过在基础按钮“.btn”的基础上追加类名来控制按钮的大小。
在Bootstrap框架中按钮的大小提供了三个类名来控制一个是.btn-lg/.btn-sm/.btn-xs三种类型，详细如下图：
从上表中不难发现，在Bootstrap框架中控制按钮的大小都是通过修改按钮的padding、line-height、font-size和border-radius几个属性。
代码总结：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>按钮大小</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
</head>
<body>
<button class="btn btn-primary btn-lg" type="button">大型按钮.btn-lg</button>
<button class="btn btn-primary" type="button">正常按钮</button>
<button class="btn btn-primary btn-sm" type="button">小型按钮.btn-sm</button>
</body>
</html>
评论前必须登录！
注册