我正在开发一个适合移动设备的网络应用程序,我希望它具有极其简单的用户界面,包括大到连安德烈巨人都可以轻松点击的按钮。
问题是,我看不到通过将 Bootstrap 按钮的宽度或高度设置为百分比、像素数或简单地让它们填满容器来显式调整 Bootstrap 按钮大小的简单方法。除了使用“btn btn-small”或“btn btn-large”类之外,是否有一种规范的方法可以大大扩大按钮,或者这被认为是一种不好的做法?
最佳答案
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;
}
关于css - 在 Twitter-Bootstrap 中调整按钮大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13112200/