Bootstrap 按钮的尺寸

Bootstrap提供了 3 个相对尺寸的类，用来设置按钮的尺寸。如果希望比默认按钮大一些，使用 .btn-large 类；希望比默认按钮小一些，使用
.btn-mini 或 .btn-small 类。如：

* <p>
*   <button class="btn btn-large btn-primary" type="button">Large button
</button>
*   <button class="btn btn-large" type="button">Large button</button>
* </p>
* <p>
*   <button class="btn btn-primary" type="button">Default button</button>
*   <button class="btn" type="button">Default button</button>
* </p>
* <p>
*   <button class="btn btn-small btn-primary" type="button">Small button
</button>
*   <button class="btn btn-small" type="button">Small button</button>
* </p>
* <p>
*   <button class="btn btn-mini btn-primary" type="button">Mini button
</button>
*   <button class="btn btn-mini" type="button">Mini button</button>
* </p>
效果如图 3‑57所示：
图3-57 Bootstrap按钮尺寸
如果想创建一个“块级”按钮，也没问题，只需添加 .btn-block 类。此时，按钮的宽度就会是 100%。如：

* <button class="btn btn-large btn-primary btn-block" type="button">Block
level button</button>
* <button class="btn btn-large btn-block" type="button">Block level button
</button>
效果如图 3‑58所示：
图3-58 Bootstrap块级按钮
关于作者

歪脖先生，十五年以上软件开发经验，酷爱Web开发，精通
HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《HTML宝典
<http://www.waibo.wang/bible/html5/>》、《揭秘CSS <http://www.waibo.wang/bible/css3/>
》、《Less简明教程 <http://www.waibo.wang/bible/less/>》、《JSON教程
<http://www.waibo.wang/bible/json/>》、《Bootstrap2用户指南
<http://www.waibo.wang/bible/bootstrap2/>》、《Bootstrap3实用教程
<http://www.waibo.wang/bible/bootstrap3/>》，并全部在 GitHub
<https://github.com/leiqikui> 上开源。

• « 上一篇：从零开始 利用hexo在github上快速搭建个人博客
• » 下一篇：电商项目（十二）数据表结构设计