Bootstrap - Кнопки Демонстрация

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

Bootstrap - Buttons Demo

Что такое Кнопки Bootstrap?

Прежде чем мы углубимся в детали, давайте поговорим о том, что такое кнопки Bootstrap на самом деле. Представьте, что вы строите дом. Стены и крыша - это ваша HTML структура, краска - это ваш CSS, а Bootstrap? Ну, это как иметь магический ящик с инструментами, который делает все проще и красивее. Кнопки Bootstrap - это предварительно стилизованные, готовые к использованию кнопки, которые вы можете легко добавить на свои веб-страницы.

Начало работы с Bootstrap

Сначала, нам нужно настроить нашу игровую площадку Bootstrap. Не волнуйтесь, это проще, чем настроить игру в Монополию!

Шаг 1: Настройка HTML структуры

Давайте начнем с базовой HTML структуры:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Buttons Demo</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-5">
<!-- Наши кнопки будут здесь -->
</div>

<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Это как настройка вашего холста перед покраской. Мы включили файлы Bootstrap CSS и JS, которые дают нам доступ ко всем возможностям Bootstrap.

Основные Кнопки Bootstrap

Теперь давайте добавим несколько кнопок на нашу страницу!

<button type="button" class="btn btn-primary">Основной</button>
<button type="button" class="btn btn-secondary">Вторичный</button>
<button type="button" class="btn btn-success">Успех</button>
<button type="button" class="btn btn-danger">Опасность</button>
<button type="button" class="btn btn-warning">Предупреждение</button>
<button type="button" class="btn btn-info">Информация</button>
<button type="button" class="btn btn-light">Светлый</button>
<button type="button" class="btn btn-dark">Темный</button>

Вот что делает каждая класс:

btn: Это базовый класс для всех кнопок Bootstrap.
btn-primary, btn-secondary, и т.д.: Эти классы определяют цвет и стиль кнопки.

Размеры кнопок

Точно так же, как вы можете получить разные размеры картофеля фри в фаст-фуде, кнопки Bootstrap также доступны в разных размерах!

<button type="button" class="btn btn-primary btn-lg">Крупная кнопка</button>
<button type="button" class="btn btn-primary">umenta按钮</button>
<button type="button" class="btn btn-primary btn-sm">Маленькая кнопка</button>

btn-lg: Делает кнопку больше
btn-sm: Делает кнопку меньше

Кнопки с контуром

Иногда вам нужна кнопка, которая немного более сдержанна. Вот где на помощь приходят кнопки с контуром!

<button type="button" class="btn btn-outline-primary">Основной</button>
<button type="button" class="btn btn-outline-secondary">Вторичный</button>
<button type="button" class="btn btn-outline-success">Успех</button>

Классы btn-outline-* дают вам кнопки с有色 границами и прозрачным фоном.

Кнопки-блоки

Нужна кнопка, которая занимает всю ширину своего родителя? Кнопки-блоки - ваши друзья!

<div class="d-grid gap-2">
<button class="btn btn-primary" type="button">Кнопка-блок</button>
<button class="btn btn-primary" type="button">Кнопка-блок</button>
</div>

Класс d-grid на родительском div и класс gap-2 добавляют немного пространства между кнопками.

Состояния кнопок

Кнопки могут иметь разные состояния, точно так же, как у нас есть разные mood!

<button type="button" class="btn btn-primary">Обычная кнопка</button>
<button type="button" class="btn btn-primary active">Активная кнопка</button>
<button type="button" class="btn btn-primary" disabled>Отключенная кнопка</button>

Класс active делает кнопку看起来 как нажатую.
Атрибут disabled делает кнопку неудаляемой.

Кнопки с переключением

Кнопки с переключением похожи на выключатели света - они могут быть включены или выключены!

<button type="button" class="btn btn-primary" data-bs-toggle="button">Кнопка с переключением</button>
<button type="button" class="btn btn-primary active" data-bs-toggle="button" aria-pressed="true">Активная кнопка с переключением</button>

Атрибут data-bs-toggle="button" активирует функцию переключения.

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

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

<div class="btn-group" role="group" aria-label="Основной пример">
<button type="button" class="btn btn-primary">Слева</button>
<button type="button" class="btn btn-primary">Посередине</button>
<button type="button" class="btn btn-primary">Справа</button>
</div>

Класс btn-group группирует кнопки вместе.

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

Выпадающие кнопки похожи на сюрпризные коробки - нажмите на них, и появятся дополнительные опции!

<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
Кнопка с выпадающим списком
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<li><a class="dropdown-item" href="#">Действие</a></li>
<li><a class="dropdown-item" href="#">Другое действие</a></li>
<li><a class="dropdown-item" href="#">что-то еще здесь</a></li>
</ul>
</div>

Класс dropdown-toggle и атрибут data-bs-toggle="dropdown" активируют функцию выпадающего списка.

Заключение

Поздравления! Вы только что прошли быстрое знакомство с кнопками Bootstrap. Помните, что практика делает мастера, так что не бойтесь экспериментировать с разными комбинациями. Кто знает? Вы можете создать следующее большое дело в веб-дизайне!

Вот quick reference table всех классов кнопок, которые мы рассмотрели:

Класс	Описание
btn	Основной класс кнопки
btn-primary	Кнопка основного цвета
btn-secondary	Кнопка вторичного цвета
btn-success	Кнопка цвета успеха
btn-danger	Кнопка цвета опасности
btn-warning	Кнопка цвета предупреждения
btn-info	Кнопка цвета информации
btn-light	Кнопка светлого цвета
btn-dark	Кнопка темного цвета
btn-lg	Крупная кнопка
btn-sm	Маленькая кнопка
btn-outline-*	Кнопка с контуром
active	Активная кнопка
disabled	Отключенная кнопка
data-bs-toggle="button"	Кнопка с переключением
btn-group	Группа кнопок
dropdown-toggle	Кнопка с выпадающим списком

Счастливо кодируйте, и да будет Bootstrap с вами!

Credits: Image by storyset

Предыдущий учебник:

Bootstrap - Демонстрация сетки

Следующий учебник:

Bootstrap - Демонстрация навигации