调整Twitter-Bootstrap中的按钮大小

时间:2012-10-28 19:23:27

标签: css twitter-bootstrap button

我正在开发一个适合移动设备的网络应用程序,我想要一个简单易用的用户界面,包括如此大的按钮,甚至安德烈巨人也可以轻松点击它们。

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

2 个答案:

答案 0 :(得分:61)

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/

答案 1 :(得分:24)

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

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

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

通过此自适应, :hover变暗 :active阴影插入