TechBlogSD - Все для WordPress и WEB разработки
WEB и WordPress инструкции, новости, обзоры тем и плагинов

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

383

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:

Начальный шаблон Bootstrap 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

Файлы 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="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 для шаблонов. Следовательно, не забудьте включить <! DOCTYPE HTML> в начало вашего HTML-шаблона, чтобы избежать неожиданного поведения.
  • Вы должны использовать метатег области просмотра, чтобы обеспечить отзывчивость шаблона в зависимости от устройства рендеринга.
  • Если вы добавляете jQuery, обязательно добавьте его перед скриптами «popper.min.js» и «bootstrap.min.js».
  • Вы также можете скачать скрипт Popper с сайта Popper и загрузить их в папку «assets / js /» вашего сайта.
  • Помните, что сценарий Popper необходим для правильной работы плагинов Bootstrap. Popper – это библиотека JavaScript, которая в основном используется для позиционирования плавающих элементов, таких как компонент всплывающей подсказки в Bootstrap.

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

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

Файловая структура темы 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, вы можете использовать только соответствующие стили для кнопок. Bootstrap предлагает настройщик для предыдущей версии 3.4, где вы можете выбрать, какие компоненты требуются, и сгенерировать предварительно скомпилированные файлы.

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

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

На данный момент для версии 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>

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

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

В идеале нет необходимости использовать файлы сценариев 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="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 в шаблон

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="#" 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 без необходимости понимания кодирования.


Изучите Bootstrap 5 (индекс )


Источник записи: www.webnots.com
Leave A Reply

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