Создание кнопок на Bootstrap 3

Одна из самых основных вещей, которая мне нравится в Bootstrap — это стилизация кнопок, учитвая убожество стандартных кнопок. Всего пару классов и наша кнопка становится классной. Давайте сразу посмотрим демо, а уже потом будем разбираться, что к чему.

И так, что же мы сделали

<a href="#" class="btn btn-primary">Read more >></a>
<a href="#" class="btn btn-warning btn-lg">Read more >></a>
<a href="#" class="btn btn-success btn-xs">Read more >></a>
<a href="#" class="btn btn-danger btn-block">Read more >></a>

Рассмотрим каждую кнопку отдельно, но предварительно хочу заметить, что у всех кнопок есть обязательный класс btn, который указывает, что это будет кнопка, а уже другими класс мы можем ее стилизовать

  1. Стандартная кнопка без каких-либо эффектов. Белый фон, темная рамка, ничего интересного.
  2. Эта кнопка у нас оранжевого предупреждающего цвета. А класс btn-lg говорит о том, что она большого размера
  3. Зеленая кнопка достигается классом btn-success, а маленький размер btn-xs
  4. И последняя кнопка красная с классом btn-danger и классом btn-block, что делает ее размерами равными размерам контейнера.

На самом деле свойств у кнопок достаточно много, лучше посмотреть их на сайте getbootstrap.com

Так же не забывайте, что можно скачать урок.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Scroll Up