Представить себе сайт без кнопок практически не реально, да и просто не нужно. Оформление каждого такого элемента не несет в себе никакой сложности, редко блещет креативом, но все-же занимает наше время.
Данный урок посвящен тому, как воспользовавшись Twitter Bootstrap, сделать на сайте подходящие нам кнопки даже не за минуты, а за считанные секунды.
Какие теги мы можем оформлять как кнопки?
Накладывать оформление от кнопок мы можем на следующие элементы:
<button>
– собственно сами кнопки<input type="button">
- кнопки в формах<a>
- ссылки, которые мы хотим оформить под кнопки
После применения к ним соответствующих классов выглядеть они будут абсолютно одинаково.
Что необходимо, чтобы оформить кнопку?
Для этого на выбранный нами тег нужно повесить класс .btn (создаст сам контейнер кнопки) и класс с оформлением кнопки. Какие классы доступны для этого будет рассмотренно ниже.
Комбинированием классов отвечающих за внешний вид и размер кнопки мы можем сразу подогнать ее под наши нужды.
Выбираем оформление
Исходно в наше распоряжение поступает семь разновидностей оформления кнопок, за каждый из которых отвечает свой класс.
Так, для получения этого скриншота:
Был использован следующий код:
<button type="button" class="btn btn-default">Оформление 1</button> <button type="button" class="btn btn-primary">Оформление 2</button> <button type="button" class="btn btn-success">Оформление 3</button> <button type="button" class="btn btn-info">Оформление 4</button> <button type="button" class="btn btn-warning">Оформление 5</button> <button type="button" class="btn btn-danger">Оформление 6</button> <button type="button" class="btn btn-link">Оформление 7</button>
Остановимся подробнее на каждом классе:
- .btn-default — белая кнопка с серой окантовкой и светло-серым наведением
- .btn-primary — синяя кнопка, при наведении становится темно-синей
- .btn-success — зеленая кнопка, при наведении становится темно-зеленой
- .btn-info — голубая кнопка, при наведении темнеет
- .btn-warning — кнопка в оранжевых тонах
- .btn-danger — кнопка в красных тонах
- .btn-link –кнопка без фона и обводки
Задаем размер
Стандартно в Bootstrap используется 4 категории классов отвечающих за размер элементов:
- lg- большие
- md- средние (применяется стандартно, если размер не задан классом)
- sm- маленькие
- xs- очень маленькие
В отношении кнопок чтобы составить класс отвечающий за ее размер нужно к .btn через дефис добавить категорию размера к примеру .btn-xs.
На практике это выглядит следующим образом:
<button type="button" class="btn btn-default btn-lg">Размер lg</button> <button type="button" class="btn btn-default btn-md">Размер md</button> <button type="button" class="btn btn-default btn-sm">Размер sm</button> <button type="button" class="btn btn-default btn-xs">Размер xs</button>
Так, последний класс у наших элементов и задает им выбранный нами размер.
Визуально это выглядит следующим образом:
Блочные кнопки
Также у нас есть возможность создания блочных кнопок, которые будут масштабироваться под размер родительского контейнера.
Для их создания к обычной кнопке нужно добавить класс .btn-block:
<button type="button" class="btn btn-default btn-lg btn-block">Блочная кнопка</button>
Получим:
Кнопки с заданным состоянием
Помимо всего прочего мы можем задать фиксированное состояние, в котором они не будут реагировать на клики мышки, наведение и тд.
Для этого можно воспользоваться следующими классами:
- .active — активная (нажатая) кнопка
- .disabled — заблокированная кнопка
Визуально они выглядят следующим образом:
Код с примера:
<button class="btn btn-success btn-lg active">Нажатая кнопка</button> <button class="btn btn-success btn-lg disabled">Заблокированная кнопка</button>
Подводя итоги
Если мы хотим добавить эксклюзивности конкретной кнопке и, к примеру, сделать ее в нестандартном цвете и с необычным шрифтом текста, то мы всегда можем перекрыть необходимые нам стили из нашего файла CSS. В любом случае это будет гораздо быстрее, чем прописывать все вручную.
Как не сложно заметить любое оформление кнопки получается из простого комбинирования классов рассмотренных в данном уроке у тега.