css – 在Twitter-Bootstrap中调整大小按钮

前端之家收集整理的这篇文章主要介绍了css – 在Twitter-Bootstrap中调整大小按钮前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在开发一个移动友好的网络应用程序,我想要一个死简单的用户界面,包括按钮这么大,甚至安德烈巨人可以轻松地点击他们。

问题是,我没有看到通过将宽度或高度设置为百分比,像素数或者填充容器来显式调整引导按钮大小的简单方法。在使用“btn btn-small”或“btn btn-large”类之外,是否有一个典型的大大扩大按钮的方法,或者这被认为是一种坏习惯?

解决方法

Bootstrap是一个伟大的框架,但它不覆盖一切。它知道并使用其OOCSS原则应该扩展到您的需求。

如果我适应Bootstrap组件本身,我通常创建一个bootstrap-extensions.css文件,其中包含基本组件的任何扩展,例如一个额外的大按钮。

下面是一个示例实现如何一个扩展类添加一个新的按钮系列到框架。该示例还包括已经包括在框架中的.btn块的示例使用。

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/

猜你在找的CSS相关文章