Від автора: всіх вітаю. Ми продовжуємо цикл статей по фреймворку Bootstrap, який є одним з кращих і найпопулярніших css і js-фреймворків. Сьогодні розглянемо, як робити з допомогою Bootstrap кнопки.
Стандартні кнопки
У Bootstrap вже закладено 6 стандартних стилів для кнопок, ось вони:
Кнопка
Кнопка
Кнопка
Кнопка
Кнопка
Кнопка
Відповідно, якщо ви раптом захочете змінити оформлення, можна відразу створити свій власний файл стилів, де описати свої стилі для кнопок. Наприклад:
.btn-gradient{
background: linear-gradient(to bottom, #B5D279, #9CD175);
}
Тепер поставте цей клас кнопці і вона забарвиться вже в ті кольори, які ви самі для неї підібрали.
Розміри
У Bootstrap за замовчуванням закладено 4 розміру для кнопок: xs, sm, md і lg. Перерахував я їх за зростанням. Щоб визначити розмір кнопки, допишіть їй клас btn-розмір. За умовчанням виводяться кнопки в розмірі md.
Кнопка
Кнопка
Кнопка
Кнопка
Групи кнопок
Дуже часто буває так, що кілька кнопок потрібно об’єднати в одну групу. У таких випадках використовуйте таку розмітку:
Друга
Третя
Тобто всі кнопки поміщаються в контейнер btn-group.
Для управління розміром всіх кнопок, поміщених в одну групу, допишіть їй клас btn-group-розмір.
Простим зміною клас btn-group на btn-group-vertical ви доб’ється того, що всі кнопки будуть розташовуватися вертикально.
Панель кнопок
Панель – це загальний контейнер для декількох груп кнопок. Вкажіть контейнера панелі клас btn-toolbar, а також атрибут role = “toolbar”. Ось приклад додавання в панель трьох груп кнопок:
Друга
Третя
П’ята
Зверніть увагу на те, як саме розташовуються групи кнопок у панелі. Кожну групу від іншої відокремлює невеликий горизонтальний відступ.
Кнопка випадаючий список
Для реалізації кнопки, при натисканні по якій розгортатиметься список посилань, я також використовую приклад з документації, лише трохи переробивши його:
- Пункт 1
- Пункт 2
- Пункт 3
- Якийсь лівий пункт
Результат:
Виходячи з цього, ви й самі можете зрозуміти розмітку.
Як зробити Bootstrap кнопку по центру?
За замовчуванням у фреймворку немає такого класу, але ви можете легко дописати його самостійно:
Кнопка
Як бачите, в цьому шматку коду ми задаємо кнопці додатковий клас center. А ось і стилі для нього:
.center{
display: block;
margin: 0 auto;
}
Досить зробити кнопку блокової і поставити автоматичні зовнішні відступи по горизонталі.
Що ж, ми розглянули кілька прикладів роботи з кнопками в Bootstrap. Решту ви зможете знайти в документації. Працювати з цим компонентом фреймворку дуже просто. Ну а якщо ви хочете попрацювати не просто з якимось одним компонентом, а зверстати повноцінні сайти на Bootstrap, буду радий бачити вас в числі людей, які придбали і вивчили курс адаптивної верстці на Bootstrap. Цей курс дозволить вам буквально за кілька днів або тижнів вивчити фреймворк ВІД і ДО. Що ж, ну а я прощаюся з вами, в наступній статті ви зможете отримати реальну практику роботи з фреймворком, тому що ми будемо верстати схематичний шаблон.
