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

Завантажувальний шаблон 5 для початківців

2

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 вихідних файлів

Як кінцевий користувач, є два способи використання файлів CSS і JavaScript Bootstrap. Один – це завантажити попередньо скомпільовані файли та включити їх у свої проекти, а другий – використати посилання CDN.

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

2 Використання завантажувальних файлів на власному сервері

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

Завантажувальний шаблон 5 для початківців

Завантажувальні файли 5

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

  • Стандартні та зменшені файли CSS, які можна використовувати з будь -яким проектом
  • Файл утиліт
  • Версія лише з сіткою
  • Перезавантажити лише версію

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

Примітка: Якщо ви використовуєте на своєму веб -сайті лише файл “bootstrap.min.css", деякі веб -переглядачі, такі як Safari, відображатимуть помилку або попередження на консолі розробника про відсутність файлу вихідної карти. Щоб виправити помилку, відкрийте файл Bootstrap CSS і видаліть останній рядок ” / # sourceMappingURL = bootstrap.min.css.map /”.

Як і файли CSS, папка JS матиме “bootstrap.js” та “bootstrap.bundle.js”. Файл “bootstrap.js” не містить сценарію Popper, але пакетна версія містить сценарій Popper. У попередній версії Bootstrap 4 вам потрібно включити jQuery окремо, щоб компоненти JavaScript працювали належним чином. Однак Bootstrap 5 не потребує jQuery як частини фреймворку і призначений для роботи без jQuery.

Завантажувальний шаблон 5 для початківців

Завантажувальні файли 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 в окремій папці, щоб ними було легко керувати. Це, по суті, означає, що вам слід створити відповідні папки на своєму сервері та завантажити файли CSS та JS Bootstrap вручну. Також зберігайте зображення в окремій папці "зображення" та файли HTML у корені вашого сайту. Тому вся структура має виглядати приблизно так, як показано нижче на вашому сервері:

Завантажувальний шаблон 5 для початківців

Структура файлу теми Bootstrap 5

“Папка тем” у наведеному вище прикладі – це коренева папка вашого сайту, яка має бути вашим доменом, субдоменом чи підкаталогом.

3 Використання шаблону початківця з CDN

Розміщення всіх необхідних файлів на вашому сервері – це правильний спосіб, але це вплине на швидкість завантаження та ємність хостингу. Тому ми рекомендуємо використовувати посилання CDN для файлів CSS та JS замість розміщення їх на власному сервері. Це забезпечить швидку доставку цих статичних файлів та покращить швидкість завантаження сторінки. Нижче наведено початковий шаблон Bootstrap 5 із посиланнями CDN для CSS та сценаріїв. Ви можете просто додати вміст до розділу body, щоб розпочати створення свого сайту або теми. Раніше версія 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, де ви можете вибрати необхідні компоненти та створити попередньо скомпільовані файли.

Завантажувальний шаблон 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>

Вихідні дані повинні виглядати так, як показано нижче у браузері:

Завантажувальний шаблон 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 (індекс )


Джерело запису: webnots.com
Залиште відповідь

Цей веб -сайт використовує файли cookie, щоб покращити ваш досвід. Ми припустимо, що з цим все гаразд, але ви можете відмовитися, якщо захочете. Прийняти Читати далі