🤔 Что такое bootstrap?

Это популярный фреймворк для разработки интерфейсов веб-приложений. Он включает в себя набор инструментов для создания адаптивных и удобных для пользователя веб-страниц. Bootstrap предоставляет готовые CSS и JavaScript компоненты.

🚩Основные компоненты

🟠Сетка (Grid System)
Bootstrap использует гибкую сеточную систему, основанную на 12 колонках, что позволяет создавать адаптивные макеты. Вы можете легко управлять расположением элементов на странице для различных размеров экранов.

<div class="container">
    <div class="row">
        <div class="col-md-4">Колонка 1</div>
        <div class="col-md-4">Колонка 2</div>
        <div class="col-md-4">Колонка 3</div>
    </div>
</div>   

🟠Компоненты
Bootstrap включает множество готовых компонентов, таких как кнопки, формы, карточки, навигационные панели, модальные окна и многое другое. Эти компоненты можно легко стилизовать и настроить.

<button type="button" class="btn btn-primary">Основная кнопка</button>   

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

<!-- Кнопка для вызова модального окна -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
    Запустить модальное окно
</button>

<!-- Модальное окно -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Название модального окна</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                Содержимое модального окна.
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Закрыть</button>
                <button type="button" class="btn btn-primary">Сохранить изменения</button>
            </div>
        </div>
   </div>
</div>   

🟠Утилиты
В Bootstrap имеются утилиты для быстрого добавления часто используемых стилей, таких как отступы, цвета, выравнивание текста и другие. Эти утилиты позволяют быстро применять стили без написания дополнительных CSS-классов.

<div class="p-3 mb-2 bg-primary text-white">Основной фон с отступами и белым текстом</div>   

Ставь 👍 и забирай 📚 Базу знаний