我正在开发一款面向移动设备的网页应用程序,希望它具有简单易用的用户界面,包括按钮尺寸足够大,即使安德烈·巨人也能轻松点击。
问题是,我没有找到一种简单的方法来通过设置百分比、像素数量或让它们填充容器来显式调整 Bootstrap 按钮的大小。除了使用“btn btn-small”或“btn btn-large”类之外,是否有一种标准方式可以大幅扩大按钮的尺寸,或者这被认为是不好的做法?
我正在开发一款面向移动设备的网页应用程序,希望它具有简单易用的用户界面,包括按钮尺寸足够大,即使安德烈·巨人也能轻松点击。
问题是,我没有找到一种简单的方法来通过设置百分比、像素数量或让它们填充容器来显式调整 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;
}
@amustill的答案可以轻松地适用于Bootstrap 3.1.0:
.btn-xl {
padding: 18px 28px;
font-size: 22px;
border-radius: 8px;
}
jsFiddle: http://jsfiddle.net/Abdull/2rkkJ/
通过这个适应性自动实现了:hover变暗和:active阴影内嵌。