上一篇文章介绍了按钮的如何定制风格,也就是如何实现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>
评论前必须登录!
注册