CSS 在 Twitter-Bootstrap 中调整按钮大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13112200/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Resizing buttons in Twitter-Bootstrap
提问by Chazu
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.
我正在开发一个移动友好的网络应用程序，我希望它具有非常简单的用户界面，包括如此大的按钮，即使安德烈巨人也可以轻松点击它们。
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?
问题是，我没有看到通过将引导按钮的宽度或高度设置为百分比、像素数或简单地让它们填充其容器来明确调整引导按钮大小的简单方法。除了使用“btn btn-small”或“btn btn-large”类之外，是否有一种规范的方法可以大大放大按钮，或者这是否被认为是一种不好的做法？
回答by amustill
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.
Bootstrap 是一个很棒的框架，但它并没有涵盖所有内容。它知道并使用它的 OOCSS 原则应该扩展到您的需求。
If I'm adapting Bootstrap components themselves, I generally create a bootstrap-extensions.cssfile which houses any extensions of base components, such as an extra large button.
如果我自己调整 Bootstrap 组件，我通常会创建一个bootstrap-extensions.css文件，其中包含基本组件的任何扩展，例如超大按钮。
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.
这是一个扩展类如何向框架添加新按钮系列的示例实现。此示例还包括 的示例使用.btn-block，该示例已包含在框架中。
CSS:
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;
}
回答by Abdull
@amustill's answer is easily adapted for Bootstrap 3.1.0:
@amustill 的答案很容易适用于Bootstrap 3.1.0：
.btn-xl {
padding: 18px 28px;
font-size: 22px;
border-radius: 8px;
}
jsFiddle: http://jsfiddle.net/Abdull/2rkkJ/
jsFiddle：http: //jsfiddle.net/Abdull/2rkkJ/
With this adaption automatically come :hoverdarkeningand :activeshadow insetting.
随着这种适应自动:hover变暗和:active阴影插入。
