Изменение размеров кнопок в Twitter-Bootstrap

Я разрабатываю мобильное веб-приложение, которое я хотел бы добавить в простой пользовательский интерфейс, включая такие большие кнопки, как Андре Гигант.

Проблема заключается в том, что я не вижу простого способа явного изменения размера кнопок загрузки, устанавливая их ширину или высоту в процентах, количество пикселей или просто заполняя их контейнеры. Существует ли канонический способ значительно расширить кнопки за пределами использования классов "btn btn-small" или "btn btn-large", или это считается плохой практикой?

Ответ 1

Bootstrap - отличная платформа, но она не охватывает все. Он знает, что и использование его принципа 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/

Ответ 2

Ответ @amustill легко адаптируется для Bootstrap 3.1.0:

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

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

При этом адаптация автоматически наступает :hover затемнение и :active теневая вставка.