调整大小按钮，Twitter的引导 [英] Resizing buttons in Twitter-Bootstrap

问题描述

我正在开发一个移动友好的web应用程序，我想设有一个死简单的用户界面，包括按钮如此之大甚至安德烈巨人就可以利用他们提供方便。

I'm developing a mobile-friendly web app which I would like to feature a dead-simple UI, including buttons so large even Andre the Giant could tap them with ease.

问题是，我看到的其宽度或高度设置为一个百分比，像素数，或者干脆让他们填补他们的集装箱明确调整引导按钮没有简单的方法。是否有大大扩大利用外部按钮的正规途径BTN BTN-小或BTN BTN-大类，或者这被认为是一种不好的做法？

The problem is, I see no simple way of explicitly resizing bootstrap buttons by setting their width or height to a percentage, number of pixels, or simply having them fill their containers. Is there a canonical way of greatly enlarging buttons outside of using 'btn btn-small' or 'btn btn-large' classes, or is this considered a bad practice?

推荐答案

引导是一个很好的框架，但它并没有面面俱到。它知道，并利用其OOCSS原则应延长您的需求。

Bootstrap is a great framework, but it doesn't cover everything. It knows that and using its OOCSS principle should be extended to your needs.

如果我适应引导组件本身，我一般创建一个引导-extensions.css里面有基本组件的任何扩展文件，如超大按钮。

If I'm adapting Bootstrap components themselves, I generally create a bootstrap-extensions.css file which houses any extensions of base components, such as an extra large button.

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

Here's an example implementation of how one extension class adds a new family of buttons to the framework. This example also includes an example use of .btn-block, which is already included in the framework.

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/

这篇关于调整大小按钮，Twitter的引导的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！