在 Twitter-Bootstrap 中调整按钮大小答案

【问题标题】：Resizing buttons in Twitter-Bootstrap在 Twitter-Bootstrap 中调整按钮大小
【发布时间】：2012-10-18 05:03:48
【问题描述】：

我正在开发一个适合移动设备的网络应用程序，我希望它具有非常简单的用户界面，包括大到连安德烈巨人都可以轻松点击它们的按钮。

问题是，我看不到通过将引导按钮的宽度或高度设置为百分比、像素数或简单地让它们填充容器来显式调整引导按钮大小的简单方法。除了使用“btn btn-small”或“btn btn-large”类之外，是否有一种规范的方法可以大大扩大按钮，或者这被认为是一种不好的做法？

【问题讨论】：

标签： css twitter-bootstrap button

【解决方案1】：

@amustill 的答案很容易适应 Bootstrap 3.1.0：

.btn-xl {
    padding: 18px 28px;
    font-size: 22px;
    border-radius: 8px;
}

jsFiddle：http://jsfiddle.net/Abdull/2rkkJ/

随着这种适应，:hoverdarening 和 :activeshadow insetting 自动出现。

【讨论】：

【解决方案2】：

Bootstrap 是一个很棒的框架，但它并不能涵盖所有内容。它知道并使用它的 OOCSS 原则应该扩展到您的需求。

如果我自己调整 Bootstrap 组件，我通常会创建一个 bootstrap-extensions.css 文件，其中包含基本组件的任何扩展，例如超大按钮。

这是一个扩展类如何将一组新按钮添加到框架的示例实现。此示例还包括一个使用 .btn-block 的示例，它已包含在框架中。

CSS：

/**
 * Extra large button extensions. Extends `.btn`.
 */
.btn-xlarge {
    padding: 18px 28px;
    font-size: 22px;
    line-height: normal;
    -webkit-border-radius: 8px;
       -moz-border-radius: 8px;
            border-radius: 8px;
    }

演示： http://jsfiddle.net/Pspb9/

【讨论】：