Zmiana rozmiaru przycisków na Twitterze-Bootstrap

Question

Zajmuję się tworzeniem przyjaznej dla urządzeń mobilnych aplikacji internetowej, w której chciałbym umieścić nieużywany interfejs użytkownika, w tym przyciski tak duże, że nawet Andre Giant może z łatwością je wykorzystać.

Problem polega na tym, że nie widzę prostego sposobu na wyraźną zmianę rozmiaru przycisków ładowania początkowego poprzez ustawienie ich szerokości lub wysokości na wartość procentową, liczbę pikseli lub po prostu wypełnienie ich kontenerów. Czy istnieje kanoniczny sposób na znacznie powiększające przyciski poza używaniem klas "btn btn-small" lub "btn btn-large", czy jest to uważane za złą praktykę?

Answer 1

Bootstrap to świetny framework, ale nie obejmuje wszystkiego. Wie o tym, że korzystanie z jego zasady OOCSS powinno zostać rozszerzone na twoje potrzeby.

Jeśli samodzielnie dostosowuję komponenty Bootstrap, generalnie utworzę plik bootstrap-extensions.css zawierający wszelkie rozszerzenia podstawowych komponentów, takich jak bardzo duży przycisk.

Oto przykładowa implementacja sposobu, w jaki jedna klasa rozszerzeń dodaje nową rodzinę przycisków do frameworka. Ten przykład zawiera również przykład użycia .btn-block, który jest już uwzględniony w strukturze.

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; 
    } 

Demo:http://jsfiddle.net/Pspb9/

Answer 2

@ odpowiedź amustill jest łatwo dostosować do Bootstrap 3.1.0:

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

jsFiddle: http://jsfiddle.net/Abdull/2rkkJ/

Dzięki tej adaptacji automatycznie przyjść :hover zaciemnienie i :active cień insetting.