2012-10-28 165 views
33

调整大小按钮我正在开发一个移动友好的web应用程序,我想拥有一个死简单的用户界面,包括按钮如此之大甚至安德烈巨人可以挖掘他们提供方便。在Twitter的引导

的问题是,我看到的通过宽度或高度设置为百分比,像素数,或者干脆让他们填写自己的集装箱明确调整的引导按钮没有简单的方法。在使用'btn btn-small'或'btn btn-large'类之外,是否存在大大扩大按钮范围的规范方法,或者这被认为是一种不好的做法?

回答

61

引导是一个很好的框架,但它并没有面面俱到。它知道并使用其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; 
    } 

演示:http://jsfiddle.net/Pspb9/

23

@ amustill的答案是很容易适应引导3.1.0

.btn-xl { 
    padding: 18px 28px; 
    font-size: 22px; 
    border-radius: 8px; 
} 

的jsfiddlehttp://jsfiddle.net/Abdull/2rkkJ/

有了这个适应自动出现:hover变暗:active阴影insetting