Как создавать с помощью Bootstrap кнопки?

Как создавать с помощью Bootstrap кнопки?

От автора: всех приветствую. Мы продолжаем цикл статей по фреймворку Bootstrap, который является одним из лучших и самых популярных css и js-фреймворков. Сегодня рассмотрим, как делать с помощью Bootstrap кнопки.

Стандартные кнопки

В Bootstrap уже заложено 6 стандартных стилей для кнопок, вот они:

<button class="btn btn-default">Кнопка</button>
<button class="btn btn-success">Кнопка</button>
<button class="btn btn-info">Кнопка</button>
<button class="btn btn-warning">Кнопка</button>
<button class="btn btn-danger">Кнопка</button>
<button class="btn btn-primary">Кнопка</button>

Соответственно, если вы вдруг захотите изменить оформление, можно сразу создать свой собственный файл стилей, где описать свои стили для кнопок. Например:

.btn-gradient{
	background: linear-gradient(to bottom, #B5D279, #9CD175);
}

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

Размеры

В Bootstrap по умолчанию заложено 4 размера для кнопок: xs, sm, md и lg. Перечислил я их по возрастанию. Чтобы определить размер кнопки, допишите ей класс btn-размер. По умолчанию кнопки выводятся в размере md.

<button class="btn btn-default btn-xs">Кнопка</button>
<button class="btn btn-success btn-sm">Кнопка</button>
<button class="btn btn-info btn-md">Кнопка</button>
<button class="btn btn-warning btn-lg">Кнопка</button>

Группы кнопок

Очень часто бывает так, что несколько кнопок нужно объединить в одну группу. В таких случаях используйте такую разметку:

<div class="btn-group">
  <button class="btn btn-default">Первая</button>
  <button class="btn btn-default">Вторая</button>
  <button class="btn btn-default">Третья</button>
</div>

То есть все кнопки помещаются в контейнер btn-group.

Для управления размером всех кнопок, помещенных в одну группу, допишите ей класс btn-group-размер.

<div class="btn-group btn-group-lg">

Простым изменением класс btn-group на btn-group-vertical вы добъетесь того, что все кнопки будут располагаться вертикально.

Панель кнопок

Панель – это общий контейнер для нескольких групп кнопок. Укажите контейнеру панели класс btn-toolbar, а также атрибут role = “toolbar”. Вот пример добавления в панель трех групп кнопок:

<div class="btn-toolbar" role="toolbar">
  <div class="btn-group">
	<button class="btn btn-default">Первая</button>
	<button class="btn btn-default">Вторая</button>
	<button class="btn btn-default">Третья</button>
  </div>
  <div class="btn-group">
	<button class="btn btn-default">Четвертая</button>
	<button class="btn btn-default">Пятая</button>
  </div>
  <div class="btn-group">
	<button class="btn btn-default">И еще что-то</button>
  </div>
</div>

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

Кнопка выпадающий список

Для реализации кнопки, при клике по которой будет разворачиваться список ссылок, я также использую пример из документации, лишь немного его переделав:

<div class="btn-group">
  <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
    Кнопка-список <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <li><a href="#">Пункт 1</a></li>
    <li><a href="#">Пункт 2</a></li>
    <li><a href="#">Пункт 3</a></li>
    <li class="divider"></li>
    <li><a href="#">Какой-то левый пункт</a></li>
  </ul>
</div>

Результат:

Исходя из этого, вы и сами можете понять разметку.

Как сделать в Bootstrap кнопку по центру?

По умолчанию в фреймворка нет такого класса, но вы можете легко дописать его самостоятельно:

<button type="button" class="btn btn-primary center">Кнопка</button>

Как видите, в этом куске кода мы задаем кнопке дополнительный класс center. А вот и стили для него:

.center{
	display: block;
	margin: 0 auto;
}

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

Что ж, мы рассмотрели несколько примеров работы с кнопками в Bootstrap. Остальные вы сможете найти в документации. Работать с этим компонентом фреймворка очень просто. Ну а если вы хотите поработать не просто с каким-то одним компонентом, а сверстать полноценные сайты на Bootstrap, буду рад видеть вас в числе людей, которые приобрели и изучили курс по адаптивной верстке на Bootstrap. Этот курс позволит вам буквально за несколько дней или недель изучить фреймворк ОТ и ДО. Что ж, ну а я прощаюсь с вами, в следующей статье вы сможете получить реальную практику работы с фреймворком, потому что мы будем верстать схематичный шаблон.

Фреймворк Bootstrap - верстаем адаптивно, просто, быстро!

Получите видеокурс по основам Bootstrap

Получить

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (1)

  1. Дмитрий

    А сделать элементы «живыми» в статьях слабо?

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

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

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree