Bootstrap 5 Starter Template: Ваш первый шаг в веб-разработке

Bootstrap 5 — это мощный инструмент для создания современных, отзывчивых веб-сайтов. Если вы только начинаете свой путь в веб-разработке, Starter Template — это отличное место для старта. Давайте рассмотрим, как начать с этого базового шаблона.

Что такое Starter Template?

Starter Template — это минимальный набор файлов, который позволяет вам быстро начать работу с Bootstrap. В нем уже есть все необходимое: скомпилированный CSS, JavaScript и базовая HTML-разметка. Вы можете использовать его как отправную точку для своего проекта.

Стартовый шаблон

Чтобы начать работу с Bootstrap 5, необходимо сначала подключить соответствующие файлы CSS и JS. В вашем 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.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>
<body>
     <h1>Привет мир!</h1>
     <!-- Необязательный JavaScript; выбери один из двух! -->
     <!-- Вариант 1: Bootstrap Bundle с Popper -->
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
     <!-- Вариант 2: отдельный Popper и Bootstrap JS -->
     <!--
     <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js" integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy" crossorigin="anonymous"></script>
     -->
</body>
</html>

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

Нажав на кнопку ниже Вы также можете посмотреть и скачать более продвинутый стартовый шаблон, с переключением цветовых версий, ссылками на компоненты и т.д.

Посмотреть демо

Примеры компонентов

Bootstrap 5 предлагает широкий спектр компонентов, которые можно использовать для создания различных элементов на сайте. Например, если вы хотите добавить навигационную панель, вы можете использовать следующий код:

<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>
        <li class="nav-item">
          <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Отключено</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

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

Простая кнопка:

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

Карточка с изображением:

<div class="card" style="width: 18rem;">
  <img src="my-image.jpg" class="card-img-top" alt="Мое изображение">
  <div class="card-body">
    <h5 class="card-title">Заголовок карточки</h5>
    <p class="card-text">Описание карточки.</p>
  </div>
</div>

Модальное окно:

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">
  Открыть модальное окно
</button>

<div class="modal fade" id="myModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Заголовок модального окна</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        Содержимое модального окна.
      </div>
    </div>
  </div>
</div>

Заключение

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

На этой странице