Группировка кнопок в Bootstrap 3

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

Напомню вам код, на котором мы остановились в прошлом уроке:

Тут мы просто создали семь разных (в том числе и по размеру) кнопок.

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

Ну и внутри этой строки создадим четыре одинаковые кнопки.

Вот такой должен получиться код:

Теперь для того чтобы сгруппировать эти кнопки нам надо их обернуть в div-блок с классом "btn-group"

Сохраните и обновите страницу в браузере. Должно быть вот так:

(В конце контейнера я добавил </br>, чтобы наши кнопки не прилипали вплотную к низу страницы)

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

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

Это будет соответственно btn-lg, btn-md, btn-sm, btn-xs

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

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

В принципе на этом все, статья получилась небольшой, но вы обязательно ее проработайте - пригодится в будущем.

@honey_and_money - Делай то, о чем другие даже подумать боятся!