我正在开发一个移动友好的网络应用程序,我想要一个死简单的用户界面,包括按钮这么大,甚至安德烈巨人可以轻松地点击他们。
问题是,我没有看到通过将宽度或高度设置为百分比,像素数或者填充容器来显式调整引导按钮大小的简单方法。在使用“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; }