Кнопки Bootstrap 4

Всім привіт! В даному уроці я навчу вас створювати різноманітні кнопки Bootstrap 4, які ви зможете використовувати в своїх сайтах.

Bootstrap 4 надає різні стилі кнопок:

See the Pen
Button Styles
by Vladislav Groniuk (@vladislav-groniuk)
on CodePen.

Класи кнопок можуть бути використані для наступних елементів: <a><button>або <input>:

<a href="#" class="btn btn-info" role="button">Link Button</a>
<button type="button" class="btn btn-info">Button</button>
<input type="button" class="btn btn-info" value="Input Button">
<input type="submit" class="btn btn-info" value="Submit Button">

Чому ми ставимо # у атрибуті href посилання?
Оскільки у нас немає жодної сторінки, на яку можна посилатися, і ми не хочемо отримувати повідомлення “404”, ми ставимо # в якості посилання. У реальному проекті, звичайно, повинна бути реальна URL-адреса сторінки “Пошук”.

Кнопка з рамкою

Bootstrap 4 надає вісім різних контурів для кнопок:

See the Pen
Кнопки з рамкою
by Vladislav Groniuk (@vladislav-groniuk)
on CodePen.

Розміри кнопок

Використовуйте клас .btn-lg для великих кнопок або .btn-sm для малих:

See the Pen
Розміри кнопок
by Vladislav Groniuk (@vladislav-groniuk)
on CodePen.

Кнопки Bootstrap 4 рівня блоку (на всю ширину екрану)

Додайте клас .btn-block для створення кнопки рівня блоку, яка займає всю ширину батьківського елемента.

See the Pen
Кнопки рівня блоку
by Vladislav Groniuk (@vladislav-groniuk)
on CodePen.

Стан кнопки “Активний/Вимкнений”

Кнопку можна встановити як активну або вимкнену(неактивну):

Клас .activeробить кнопку активною, а атрибут disabled робить кнопку вимкненою. Зверніть увагу, що елементи <a> не підтримують атрибут disabled і тому повинні використовувати клас .disabled.

See the Pen
Стани кнопок
by Vladislav Groniuk (@vladislav-groniuk)
on CodePen.

Кнопки Spinner

See the Pen
Кнопки Spinner
by Vladislav Groniuk (@vladislav-groniuk)
on CodePen.

На цьому у мене все. Дякую за те, що читаєте дані уроки, можливо вас не так багато як хотілося або дану статтю навіть ніхто не прочитає, але я впевнений, що з часом, найдуться люди, які будуть навчатися розробці сайтів за допомогою україномовного ресурсу WEBMIND.

Якщо пропустили попередній урок, то ось посилання на нього.

Перекладач: Гронюк Владислав
Посилання на оригінал: https://www.w3schools.com/bootstrap4/bootstrap_buttons.asp

Сподобався урок? Поділись з друзями!

Вам також може сподобатись

Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *

Повідомити про помилку

Текст, який буде надіслано нашим редакторам: