2012-10-28 220 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