Введение в Bootstrap 5: Краткий курс для начинающих

Автор: -

Bootstrap 5 — это популярная библиотека CSS, которая помогает создавать адаптивные и мобильные веб-сайты. Она содержит множество готовых компонентов для удобной разработки: сетки, навигационные панели, формы, кнопки, модальные окна и другие элементы.

С помощью Bootstrap 5 разработчики могут быстро и просто создавать красивые и функциональные сайты, которые отлично адаптируются под разные устройства.

В этой статье мы рассмотрим основы Bootstrap 5 и изучим базовые компоненты. Также мы создадим несколько простых страниц с использованием этой библиотеки.


Установка Bootstrap

Bootstrap полностью бесплатен для загрузки и использования. Вы можете скачать Bootstrap с официального сайта: 

https://getbootstrap.com/docs/5.0/getting-started/introduction/

Подключение Bootstrap 5

Для начала необходимо подключить Bootstrap 5 к вашему веб-сайту.

Есть несколько способов сделать это:

1. Скачать CSS и JavaScript Bootstrap 5 с официального сайта: 

https://getbootstrap.com/docs/5.0/getting-started/introduction/

2. Подключить CDN (Content Delivery Network)

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

3. Использовать пакет NPM*:

Bash
npm install bootstrap
После подключения Bootstrap 5 вы сможете использовать его компоненты в своих HTML-страницах.

2. Базовые компоненты Bootstrap 5

Bootstrap 5 содержит множество готовых компонентов, которые можно использовать для разных задач:
  • Сетка: Система сетки позволяет **разделять веб-страницы на ряды и столбцы.
  • Навигационные панели: Навигационные панели используются для создания меню на веб-сайтах.
  • Формы: Bootstrap 5 содержит множество компонентов для создания форм, таких как поля ввода, кнопки отправки и сообщения об ошибках.
  • Кнопки: Bootstrap 5 содержит множество стилей кнопок, которые можно использовать на веб-сайтах.
  • Модальные окна: Модальные окна используются для отображения дополнительной информации или форм на веб-сайтах.
  • Всплывающие подсказки: Всплывающие подсказки используются для отображения дополнительной информации при наведении курсора на элемент.
  • Иконки: Bootstrap 5 содержит набор иконок, которые можно использовать на веб-сайтах.
  • Адаптивность: Bootstrap 5 позволяет создавать адаптивные веб-сайты, которые хорошо оптимизированы для разных устройств.

Базовые синтаксические конструкции

Bootstrap использует классы CSS для стилизации HTML-элементов.
Например, вы можете использовать классы .btn и .btn-primary для создания синей кнопки:

<button class="btn btn-primary">Нажми меня</button>

4. Сетка Bootstrap

Система сеток Bootstrap основана на 12 колонках, которые делят страницу на горизонтальные ряды и вертикальные столбцы.

Каждый ряд делится на 12 равных частей, которые называются столбцами.

Используя классы Bootstrap, вы можете указать, сколько столбцов должен занимать тот или иной элемент.

Пример:

HTML
<div class="container">
  <div class="row">
    <div class="col-md-4">
      <p>Это первый столбец (33%).</p>
    </div>
    <div class="col-md-4">
      <p>Это второй столбец (33%).</p>
    </div>
    <div class="col-md-4">
      <p>Это третий столбец (33%).</p>
    </div>
  </div>
</div>

В этом примере:

  • container - класс, который ограничивает ширину контента.
  • row - класс, который создает ряд.
  • col-md-4 - класс, который задает ширину столбца.

Bootstrap также поддерживает различные макеты для разных устройств:

  • col-xs-: для устройств с маленькими экранами (смартфоны).
  • col-sm-: для устройств со средними экранами (планшеты).
  • col-md-: для устройств с большими экранами (ноутбуки).
  • col-lg-: для устройств с очень большими экранами (настольные компьютеры).
  • col-xl-: для устройств с очень большими экранами (широкоформатные мониторы).

Пример:

HTML
<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-6 col-md-4">
      <p>Это первый столбец.</p>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-4">
      <p>Это второй столбец.</p>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-4">
      <p>Это третий столбец.</p>
    </div>
  </div>
</div>

В этом примере:

  • col-xs-12 - занимает всю ширину на маленьких экранах.
  • col-sm-6 - занимает половину ширины на средних экранах.
  • col-md-4 - занимает треть ширины на больших экранах.

Используя систему сеток Bootstrap, вы можете создавать адаптивные макеты, которые хорошо оптимизированы для разных устройств.

5. Утилиты Bootstrap

Bootstrap 5 включает множество утилит, которые позволяют быстро настроить различные стили.

Утилиты представлены в виде классов CSS, которые можно добавлять к элементам HTML.

Некоторые примеры утилит:

  • margin: для установки отступов вокруг элементов.
  • padding: для установки внутреннего отступа в элементах.
  • font-size: для изменения размера шрифта.
  • font-weight: для изменения толщины шрифта.
  • color: для изменения цвета текста.
  • background-color: для изменения цвета фона.
  • border: для добавления рамки к элементам.
  • border-radius: для создания закругленных углов.
  • display: для изменения способа отображения элементов (например, block, inline, none).

Пример:

HTML
<p class="text-center font-weight-bold text-danger">Это красный текст с жирным шрифтом, выровненный по центру.</p>

Примеры простых страниц с Bootstrap 5

1. Простая веб-страница:

HTML
<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Пример Bootstrap 5</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
  <div class="container">
    <h1>Заголовок страницы</h1>
    <p>Это пример простой веб-страницы с использованием Bootstrap 5.</p>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
</html>

2. Веб-страница с навигационной панелью:

HTML
<!DOCTYPE html>
<html lang="ru">
<head>
  </head>
<body>
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">Мой сайт</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#">Главная</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">О нас</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Контакты</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

  <div class="container">
    <h1>Заголовок страницы</h1>
    <p>Это пример веб-страницы с навигационной панелью Bootstrap 5.</p>
  </div>

  </body>
</html>

3. Веб-страница с сеткой:

HTML
<!DOCTYPE html>
<html lang="ru">
<head>
  </head>
<body>
  <div class="container">
    <div class="row">
      <div class="col-md-4">
        <div class="card">
          <img src="..." class="card-img-top" alt="...">
          <div class="card-body">
            <h5 class="card-title">Заголовок карточки</h5>
            <p class="card-text">Текст карточки.</p>
          </div>
        </div>
      </div>
      <div class="col-md-4">
        <div class="card">
          <img src="..." class="card-img-top" alt="...">
          <div class="card-body">
            <h5 class="card-title">Заголовок карточки</h5>
            <p class="card-text">Текст карточки.</p>
          </div>
        </div>
      </div>
      <div class="col-md-4">
        <div class="card">
          <img src="..." class="card-img-top" alt="...">
          <div class="card-body">


Чтобы узнать больше о компонентах Bootstrap 5, рекомендую:
Официальную документацию Bootstrap 5: https://getbootstrap.com/docs/5.1/components/
Примеры использования Bootstrap 5: https://getbootstrap.com/docs/5.1/examples/

Комментарии

Отправить комментарий

Популярные сообщения из этого блога

Подключайся к suno и получи бонус.

Автор: -
Изображение
Присоединяйтесь к сообществу Suno уже сегодня и разблокируйте своё творчество с бонусом!  Если вы ещё не зарегистрированы в Suno, сейчас самое время это сделать.  https://suno.com/invite/@narutoskee_sound Перейдите по ссылке, чтобы создать свой аккаунт и начать свой музыкальный путь с 250 кредитами.  Получить бонус от Suno  нужно создать 10 уникальных песен.  Не упустите возможность улучшить свой опыт музыкального производства. Зарегистрируйтесь сейчас и позвольте вашему творчеству взлететь вместе с Suno! Количество приглашений ограничено.
Read more »

Введение в Python: краткий курс для начинающих

Автор: -
Изображение
  Python - это универсальный язык программирования , который отличается простотой изучения , читаемостью кода и широким спектром возможностей . Он используется в самых разных областях, включая разработку веб-приложений , анализ данных , машинное обучение , системное администрирование и многое другое. В этой статье мы познакомимся с основами Python , рассмотрим базовые синтаксические конструкции и напишем несколько простых программ . 1. Установка Python Для начала необходимо установить Python на свой компьютер. Скачать дистрибутив Python можно с официального сайта : https://www.python.org/downloads/ . Доступны версии для Windows , macOS и Linux . После установки проверьте , что Python правильно установлен , открыв командную строку и введя команду python3 --version . Как открыть командную строку и проверить установку Python в разных операционных системах: Windows: Нажмите клавишу Windows + R. Введите "cmd" в диалоговое окно "Выполнить". Нажмите Enter. В к...
Read more »