Блог Vaden Pro

Все о самостоятельном создании и продвижении сайтов

Оформляем кнопки с Bootstrap

Раздел: 

Представить себе сайт без кнопок практически не реально, да и просто не нужно. Оформление каждого такого элемента не несет в себе никакой сложности, редко блещет креативом, но все-же занимает наше время.

Данный урок посвящен тому, как воспользовавшись Twitter Bootstrap, сделать на сайте подходящие нам кнопки даже не за минуты, а за считанные секунды.

Оформление кнопок с Bootstrap

Какие теги мы можем оформлять как кнопки?

Накладывать оформление от кнопок мы можем на следующие элементы:

  • <button> – собственно сами кнопки
  • <input type="button"> - кнопки в формах
  • <a> - ссылки, которые мы хотим оформить под кнопки

После применения к ним соответствующих классов выглядеть они будут абсолютно одинаково.

Что необходимо, чтобы оформить кнопку?

Для этого на выбранный нами тег нужно повесить класс .btn (создаст сам контейнер кнопки) и класс с оформлением кнопки. Какие классы доступны для этого будет рассмотренно ниже.

Комбинированием классов отвечающих за внешний вид и размер кнопки мы можем сразу подогнать ее под наши нужды.

Выбираем оформление

Исходно в наше распоряжение поступает семь разновидностей оформления кнопок, за каждый из которых отвечает свой класс.

Так, для получения этого скриншота:

Bootstrap типы кнопок

Был использован следующий код:

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

Остановимся подробнее на каждом классе:

  1. .btn-default — белая кнопка с серой окантовкой и светло-серым наведением
  2. .btn-primary — синяя кнопка, при наведении становится темно-синей
  3. .btn-success — зеленая кнопка, при наведении становится темно-зеленой
  4. .btn-info — голубая кнопка, при наведении темнеет
  5. .btn-warning — кнопка в оранжевых тонах
  6. .btn-danger — кнопка в красных тонах
  7. .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>

Так, последний класс у наших элементов и задает им выбранный нами размер.

Визуально это выглядит следующим образом:

Размеры кнопок Bootstrap

Блочные кнопки

Также у нас есть возможность создания блочных кнопок, которые будут масштабироваться под размер родительского контейнера.

Для их создания к обычной кнопке нужно добавить класс .btn-block:

<button type="button" class="btn btn-default btn-lg btn-block">Блочная кнопка</button>

Получим:

Bootstrap блочная кнопка

Кнопки с заданным состоянием

Помимо всего прочего мы можем задать фиксированное состояние, в котором они не будут реагировать на клики мышки, наведение и тд.

Для этого можно воспользоваться следующими классами:

  • .active — активная (нажатая) кнопка
  • .disabled — заблокированная кнопка

Визуально они выглядят следующим образом:

Активная и заблокированная кнопки в Bootstrap

Код с примера:

<button class="btn btn-success btn-lg active">Нажатая кнопка</button>
<button class="btn btn-success btn-lg disabled">Заблокированная кнопка</button>

Подводя итоги

Если мы хотим добавить эксклюзивности конкретной кнопке и, к примеру, сделать ее в нестандартном цвете и с необычным шрифтом текста, то мы всегда можем перекрыть необходимые нам стили из нашего файла CSS. В любом случае это будет гораздо быстрее, чем прописывать все вручную.

Как не сложно заметить любое оформление кнопки получается из простого комбинирования классов рассмотренных в данном уроке у тега.