Як створювати з допомогою Bootstrap кнопки?

18

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

Стандартні кнопки

У Bootstrap вже закладено 6 стандартних стилів для кнопок, ось вони:

Кнопка
Кнопка
Кнопка
Кнопка
Кнопка
Кнопка

Як створювати з допомогою Bootstrap кнопки?

Відповідно, якщо ви раптом захочете змінити оформлення, можна відразу створити свій власний файл стилів, де описати свої стилі для кнопок. Наприклад:

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

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

Розміри

У Bootstrap за замовчуванням закладено 4 розміру для кнопок: xs, sm, md і lg. Перерахував я їх за зростанням. Щоб визначити розмір кнопки, допишіть їй клас btn-розмір. За умовчанням виводяться кнопки в розмірі md.

Кнопка
Кнопка
Кнопка
Кнопка

Як створювати з допомогою Bootstrap кнопки?

Групи кнопок

Дуже часто буває так, що кілька кнопок потрібно об’єднати в одну групу. У таких випадках використовуйте таку розмітку:

Перша
Друга
Третя

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

Як створювати з допомогою Bootstrap кнопки?

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

Як створювати з допомогою Bootstrap кнопки?

Простим зміною клас btn-group на btn-group-vertical ви доб’ється того, що всі кнопки будуть розташовуватися вертикально.

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

Панель – це загальний контейнер для декількох груп кнопок. Вкажіть контейнера панелі клас btn-toolbar, а також атрибут role = «toolbar». Ось приклад додавання в панель трьох груп кнопок:

Перша
Друга
Третя
Четверта
П’ята
І ще щось

Як створювати з допомогою Bootstrap кнопки?

Зверніть увагу на те, як саме розташовуються групи кнопок у панелі. Кожну групу від іншої відокремлює невеликий горизонтальний відступ.

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

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

Кнопка-список
  • Пункт 1
  • Пункт 2
  • Пункт 3
  • Якийсь лівий пункт

Результат:

Як створювати з допомогою Bootstrap кнопки?

Виходячи з цього, ви й самі можете зрозуміти розмітку.

Як зробити Bootstrap кнопку по центру?

За замовчуванням у фреймворку немає такого класу, але ви можете легко дописати його самостійно:

Кнопка

Як бачите, в цьому шматку коду ми задаємо кнопці додатковий клас center. А ось і стилі для нього:

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

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

Як створювати з допомогою Bootstrap кнопки?

Що ж, ми розглянули кілька прикладів роботи з кнопками в Bootstrap. Решту ви зможете знайти в документації. Працювати з цим компонентом фреймворку дуже просто. Ну а якщо ви хочете попрацювати не просто з якимось одним компонентом, а зверстати повноцінні сайти на Bootstrap, буду радий бачити вас в числі людей, які придбали і вивчили курс адаптивної верстці на Bootstrap. Цей курс дозволить вам буквально за кілька днів або тижнів вивчити фреймворк ВІД і ДО. Що ж, ну а я прощаюся з вами, в наступній статті ви зможете отримати реальну практику роботи з фреймворком, тому що ми будемо верстати схематичний шаблон.