Меню

Работаем с Bootstrap (часть третья – еще о кнопках)

17.02.2016 - Bootstrap, CSS, Веб дизайн, Верстка

Bootstrap part 3

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

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

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

группа кнопок bootstrap

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

Если вам необходимо выстроить группу кнопок вертикально, нужно использовать класс .btn-group-vertical :

button_group_vertical

Как видите, и эту задачу при помощи Bootstrap можно решить добавлением всего лишь одного класса.

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

При помощи Bootstrap можно так же создавать кнопки с выпадающим списком, как на этом рисунке.

Dropdown_button_1

На самом деле такая кнопка является объединенной в блок класса btngroup группой из двух кнопок – одной, содержащей название, и другой, вызывающей выпадающее меню , и содержащей пустой тег <span>, которому присвоен класс . caret

 

Такие кнопки с выпадающим списком так же при желании можно объединить в группу с другими кнопками следующим образом:

кнопки с выпадающим списком в Bootstrap

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

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

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