Twitter-Bootstrap의 버튼 크기 조정

저는 Android 친화적 인 웹 앱을 개발하고 있습니다. Andre the Giant가 너무 큰 버튼을 포함하여 죽은 단순한 UI를 특징으로하고 싶습니다.Twitter-Bootstrap의 버튼 크기 조정

문제는, 너비 나 높이를 백분율이나 픽셀 수로 설정하거나 간단히 컨테이너를 채우는 방법으로 부트 스트랩 버튼의 크기를 명시 적으로 조정하는 간단한 방법이 없다는 것입니다. 'btn btn-small'또는 'btn btn-large'클래스를 사용하지 않고 버튼을 크게 확대 할 수있는 표준 방법이 있습니까? 아니면 이것이 나쁜 습관으로 간주됩니까?

출처

2012-10-28 Chazu

부트 스트랩은 훌륭한 프레임 워크이지만 모든 것을 다루지는 않습니다. OOCSS 원칙을 사용하는 것이 필요에 따라 확장되어야한다는 것을 알고 있습니다.

부트 스트랩 구성 요소 자체를 조정하는 경우 일반적으로 초대형 버튼과 같은 기본 구성 요소의 확장을 포함하는 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의 대답은 쉽게 에 대한 부트 스트랩 3.1.0을 적응 @http://jsfiddle.net/Pspb9/

출처

2012-10-28 20:41:45 amustill

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

jsFiddle이 적응으로 http://jsfiddle.net/Abdull/2rkkJ/

자동 :hover이 :active 그림자을 insetting 및 을 어둡게되어 있습니다.

출처

2014-02-09 18:28:40 Abdull

Twitter-Bootstrap의 버튼 크기 조정

답변

관련 문제