Начальный шаблон Bootstrap 5

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

Использование начального шаблона Bootstrap 5

  1. Скачивание исходных файлов Bootstrap
  2. Размещение файлов Bootstrap 5 на вашем сервере
  3. Использование стартового шаблона Bootstrap 5 со ссылками на CDN
  4. Настройка компонентов Bootstrap 5
  5. Дальнейшее развитие начального шаблона
  6. Использование связанного файла сценария в версии 5
  7. Включая значки Bootstrap
  8. Использование генераторов статических сайтов

1. Загрузка исходных файлов Bootstrap 5

Конечный пользователь может использовать файлы Bootstrap CSS и JavaScript двумя способами. Первый — загрузить предварительно скомпилированные файлы и включить их в свои проекты, а второй — использовать ссылки CDN.

Вы можете узнать больше о получении файлов Bootstrap в статье о начале работы с Bootstrap.

2. Использование файлов начальной загрузки на вашем собственном сервере

Вы можете скачать предварительно скомпилированные файлы CSS и JavaScript из Репозиторий GitHub. В zip-файле должны быть папки CSS и JS. Ниже приведены файлы, доступные в папках CSS:

Файлы начальной загрузки 5
Файлы начальной загрузки 5

В загруженном исходном файле доступно несколько версий CSS:

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

На рабочем сервере вы можете использовать уменьшенную версию «bootstrap.min.css»Для всех ваших нужд. Файлы исходной карты помогают сопоставлять исходную и предварительно скомпилированные минифицированные версии. Вам не нужно использовать файлы перезагрузки, сетки и карты для регулярного использования на сайтах.

Примечание: Когда вы используете только «bootstrap.min.css”На вашем сайте, некоторые браузеры, такие как Safari, будут отображать ошибку или предупреждение в консоли разработчика о том, что файл исходной карты отсутствует. Чтобы исправить ошибку, откройте файл CSS Bootstrap и удалите последнюю строку «/ * # sourceMappingURL = bootstrap.min.css.map * /«.

Подобно файлам CSS, папка JS будет иметь «bootstrap.js» а также «bootstrap.bundle.js«. Значок «bootstrap.js”Не содержит скрипт Popper, но версия пакета включает скрипт Popper. В более ранней версии Bootstrap 4 вам необходимо отдельно включить jQuery для правильной работы компонентов JavaScript. Однако Bootstrap 5 не требует jQuery как части фреймворка и предназначен для работы без jQuery.

Файлы Bootstrap 5 JS
Файлы Bootstrap 5 JS

С учетом вышеизложенного исходные файлы будут иметь следующую структуру, содержащую множество файлов CSS и JS.

bootstrap/
├── css/
│   ├── bootstrap-grid.css
│   ├── bootstrap-grid.css.map
│   ├── bootstrap-grid.min.css
│   ├── bootstrap-grid.min.css.map
│   ├── bootstrap-grid.rtl.css
│   ├── bootstrap-grid.rtl.css.map
│   ├── bootstrap-grid.rtl.min.css
│   ├── bootstrap-grid.rtl.min.css.map
│   ├── bootstrap-reboot.css
│   ├── bootstrap-reboot.css.map
│   ├── bootstrap-reboot.min.css
│   ├── bootstrap-reboot.min.css.map
│   ├── bootstrap-reboot.rtl.css
│   ├── bootstrap-reboot.rtl.css.map
│   ├── bootstrap-reboot.rtl.min.css
│   ├── bootstrap-reboot.rtl.min.css.map
│   ├── bootstrap-utilities.css
│   ├── bootstrap-utilities.css.map
│   ├── bootstrap-utilities.min.css
│   ├── bootstrap-utilities.min.css.map
│   ├── bootstrap-utilities.rtl.css
│   ├── bootstrap-utilities.rtl.css.map
│   ├── bootstrap-utilities.rtl.min.css
│   ├── bootstrap-utilities.rtl.min.css.map
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap.min.css.map
│   ├── bootstrap.rtl.css
│   ├── bootstrap.rtl.css.map
│   ├── bootstrap.rtl.min.css
│   └── bootstrap.rtl.min.css.map
└── js/
    ├── bootstrap.bundle.js
    ├── bootstrap.bundle.js.map
    ├── bootstrap.bundle.min.js
    ├── bootstrap.bundle.min.js.map
    ├── bootstrap.esm.js
    ├── bootstrap.esm.js.map
    ├── bootstrap.esm.min.js
    ├── bootstrap.esm.min.js.map
    ├── bootstrap.js
    ├── bootstrap.js.map
    ├── bootstrap.min.js
    └── bootstrap.min.js.map

Базовый стартовый шаблон должен выглядеть, как показано ниже, когда вы размещаете указанные выше файлы на своем сервере:

<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta Tags for Bootstrap 5 -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap 5 CSS -->
<link rel="stylesheet" href="https://www.webnots.com/bootstrap-starter-template/assets/css/bootstrap.min.css">
</head>
<body>
Add Your Content Here
<!-- Bootstrap 5 Scripts -->
<script src="assets/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Помните, что если вы не используете связанный файл JS, вам необходимо включить отдельные файлы сценариев JS и popper. Если вы правильно заметили, в стартовом шаблоне есть много дополнительных тегов и скриптов.

  • Bootstrap использует HTML5 DOCTYPE для шаблонов. Следовательно, не забудьте включить в начало вашего HTML-шаблона, чтобы избежать неожиданного поведения.
  • Вы должны использовать метатег области просмотра, чтобы обеспечить отзывчивость шаблона в зависимости от устройства рендеринга.
  • В случае, если вы добавляете jQuery, обязательно добавьте перед «popper.min.js» а также «bootstrap.min.js»Скрипты.
  • Вы также можете скачать скрипт Popper из Поппер сайт и загрузите их на свой сайт «активы / js / » папка.
  • Помните, что сценарий Popper необходим для правильной работы плагинов Bootstrap. Popper — это библиотека JavaScript, которая в основном используется для позиционирования плавающих элементов, таких как компонент всплывающей подсказки в Bootstrap.

Обратите внимание, что мы использовали «активы / css / bootstrap.min.css» а также «активы / js / bootstrap.bundle.min.js»Как пути к файлам. Это хорошая привычка хранить все файлы CSS и JS в отдельной папке, чтобы ими было легко управлять. По сути, это означает, что вы должны создать соответствующие папки на своем сервере и вручную загрузить файлы Bootstrap CSS и JS. Также храните изображения отдельно «изображений»И файлы HTML в корне вашего сайта. Таким образом, вся структура на вашем сервере должна выглядеть примерно так:

Файловая структура темы Bootstrap 4
Файловая структура темы Bootstrap 5

Значок «Папка темы”В приведенном выше примере — это корневая папка вашего сайта, которая должна быть вашим доменом, субдоменом или подкаталогом.

3. Использование стартового шаблона с CDN

Размещение всех необходимых файлов на вашем сервере — правильный способ, но это повлияет на скорость загрузки и емкость хостинга. Поэтому мы рекомендуем использовать ссылки CDN для файлов CSS и JS вместо того, чтобы размещать их на собственном сервере. Это обеспечит быструю доставку этих статических файлов и улучшит скорость загрузки страницы. Ниже представлен стартовый шаблон Bootstrap 5 со ссылками на CDN для CSS и скриптов. Вы можете просто добавить контент в основной раздел, чтобы начать создание своего сайта или темы. Ранее версия Bootstrap 4 была из сети Bootstrap CDN, а последняя версия 5 — из jsDelivr.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
</body>
</html>

4. Настройка исходных файлов начальной загрузки

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

Настройка файлов начальной загрузки
Настройка файлов начальной загрузки

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

5. Дальнейшее развитие стартового шаблона

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
</head>
<body>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-link">Link</button>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
</body>
</html>

Результат должен выглядеть в браузере, как показано ниже:

Основные кнопки начальной загрузки

В идеале нет необходимости использовать файлы сценариев jQuery, popper и Bootstrap для создания простых кнопок, которые управляются через CSS. Мы показали пример для полноты начального шаблона. Также, когда вы добавляете дополнительные компоненты, файл сценария в комплекте должен быть включен.

6. Использование версии сценария из пакета Bootstrap

Как объяснялось выше, Bootstrap 5 имеет связанный файл сценария, объединяющий «bootstrap.min.js» а также «popper.min.js«. Поэтому, если вы хотите использовать встроенную версию, измените начальный шаблон, как показано ниже, используя «bootstrap.bundle.min.js» файл.

<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta Tags for Bootstrap 5 -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap 5 CSS -->
<link rel="stylesheet" href="https://www.webnots.com/bootstrap-starter-template/assets/css/bootstrap.min.css">
</head>
<body>
Add Your Content Here
<!-- Bootstrap 5 Scripts -->
<script src="assets/js/bootstrap.bundle.min.js"></script>
</body>
</html>

7. Включение значков начальной загрузки в шаблон

Bootstrap версии 5 поставляется с более чем 1300 бесплатными значками SVG, которые вы можете легко добавить на свои веб-сайты. Это помогает устранить зависимость от внешних значков, таких как значки Font Awesome. Есть несколько способов включить значки в ваш начальный шаблон, и лучший вариант — использовать CDN CSS, как показано ниже. Мы показали пример значка в разделе тела с компонентом предупреждения. Вы можете получить полный список классов CSS для иконок здесь.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
</head>
<body>
<div class="alert alert-info" role="alert">
<i class="bi-star"></i>
This is an info alert and <a href="https://www.webnots.com/bootstrap-starter-template/#" class="alert-link">here is a link with info color</a>.
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
</body>
</html>

8. Использование генераторов статических сайтов

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

Всякий раз, когда требуется изменить верхний, нижний колонтитул и боковую панель, вы можете изменить базовые шаблоны вместо того, чтобы изменять каждую страницу по отдельности. Когда сайт будет готов, вы можете сгенерировать файлы HTML, CSS и JavaScript, чтобы загрузить их на свой сервер. Один из популярных генераторов статических сайтов — это Harp.js который вы можете установить на свой локальный компьютер для дальнейшей разработки стартового шаблона. Помните, что Harp.js нуждается в Node.js / NPM в качестве зависимости, поэтому вы должны были установить эти компоненты заранее. В качестве альтернативы вы можете использовать приложения-генераторы, такие как Mobirise, для использования фреймворка Bootstrap без необходимости понимания кодирования.

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован.