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

Початок роботи з Bootstrap

1

Десять років тому створення веб -сайту була мрією і можливою лише для технічних виродків. Сьогодні кожна звичайна людина може створити сайт або блог завдяки популярності безкоштовних інструментів для створення сайтів та фреймворків інтерфейсу. Оскільки індустрія створення сайтів має дуже конкурентний характер, кожній компанії необхідно зосередитися на тому, щоб запропонувати краще, ніж інша, щоб залучити кінцевих користувачів. Bootstrap – одна з популярних фреймворків, і ми пояснимо, як ви можете почати вивчати Bootstrap для створення своїх веб -сайтів.

Користувачі та розробники мають три види інструментів для початку роботи з веб -сайтом:

  • Саморозміщені системи керування вмістом з відкритим вихідним кодом, такі як WordPress.org, Drupal та Joomla.
  • Безкоштовні розміщені платформи, такі як WordPress.com, Weebly та Wix.
  • Незалежні рамки інтерфейсу користувача (UI), такі як Bootstrap та Google Material Design.

Область використання власних платформ велика і не підходить для більшості кінцевих користувачів, у яких немає часу на інвестиції. Безкоштовні розміщені платформи прості у використанні, але мають великі залежності, які обмежать ваші можливості лише для цієї платформи. Останній варіант-це поєднання самостійного розміщення, розробки та свободи повторного використання блоків інтерфейсних елементів. У цій статті давайте більш детально вивчимо, як розпочати роботу з фреймворчною системою Bootstrap.

Початок роботи з Bootstrap

Вивчіть Bootstrap

Що таке Bootstrap?

Bootstrap – одна з популярних платформ інтерфейсу користувача, доступних на даний момент. Це інтерфейсна платформа, створена за допомогою HTML, CSS та JavaScript без участі сценаріїв на стороні сервера, таких як PHP. Спочатку він був розроблений Twitter під назвою «Twitter Blueprint» для покращення послідовності видимості на багатьох пристроях та інструментах. Пізніше він був перейменований у Bootstrap і випущений як проект з відкритим кодом у серпні 2011 року.

Bootstrap – один із популярних проектів, доступних на GitHub із 100 000+ зірок. Остання інформація про випуски та оновлення Bootstrap доступна на офіційному веб -сайті getbootstrap.com. Популярність Bootstrap зростає з плином часу за допомогою першого підходу для мобільних пристроїв та простого перетворення тем Bootstrap на популярні теми управління контентом, такі як WordPress. Існують також популярні конструктори сайтів Bootstrap, такі як Mobirise, які запускають ваш веб-сайт без навичок кодування.

Завантажувальні версії

Нижче в таблиці показано оновлення версії Bootstrap, воно було на V4 alpha 6, коли ця стаття була написана.

Версія Дата Основні зміни
Версія 1 19 серпня 2011 р Відкрите джерело
Версія 2 31 січня 2012 року Основне оновлення з макетом сітки з 12 стовпцями та гліфіконами.
Версія 3 19 серпня 2013 р Плоский дизайн та мобільний перший підхід.
Версія 4 19 серпня 2015 р Основне оновлення в класах CSS, використання Sass та видалення Glyphicons, tether.js скинуто та додано popper.js
Версія 5 05 травня 2021 року Вільний від jQuery, піктограм Bootstrap, нового логотипу та підтримки RTL.

Загальне використання

На даний момент стабільною версією є Bootstrap 5.01, і вам потрібно перейти на останню версію, якщо ви використовуєте більш ранні версії 3 або 4. Отже, якщо ви розробляєте сайт, який буде опубліковано найближчим часом, в ідеалі ви повинні використовувати стабільну версію 5.01. Кінцеві користувачі можуть безпосередньо завантажити попередньо скомпільовані файли CSS / JS та використовувати їх на своєму сайті. Завантажте версію 3.4.1 тут, V4.6 тут і V5.01 тут. Якщо ви розробляєте проекти для клієнтів або для себе, ви можете завантажити повний вихідний код із файлами Sass з GitHub.

Примітка: Встановлення Bootstrap на ПК з ОС Windows або macOS є складним завданням, оскільки має багато залежностей. Коротше кажучи, ви повинні мати Node.js та NPM встановлені на вашому комп’ютері разом із Grunt для компіляції. Крім того, ви можете використовувати Harp.js для створення статичних файлів сайту за допомогою частків або включень.

Ліцензія

Файли Bootstrap розповсюджуються за ліцензією MIT з єдиною вимогою, оскільки інформація про авторські права повинна зберігатися у всіх вихідних файлах Bootstrap.

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

Повну ліцензію можна переглянути в GitHub.

Запуск Вашого сайту

У вас є два способи розпочати створення свого сайту за допомогою Bootstrap. Один – це завантаження та розміщення файлів CSS та JS на сервері хостингу, а інший – використання посилань CDN. Ми рекомендуємо створити початковий шаблон, а потім почати використовувати всі компоненти Bootstrap всередині шаблону стартера. Детальнішу інформацію можна отримати у розділі шаблону початкового завантаження Bootstrap 5.

Нижче наведені посилання CDN для використання на вашому сайті:

<!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>

Обов’язково послідовно використовуйте файл Popper, а потім Bootstrap JS, інакше ви можете використовувати єдиний в комплекті файл сценарію, який містить сценарій Popper. Так само додайте будь -які власні таблиці стилів CSS після CSS Bootstrap, щоб вони не мали пріоритету над визначеннями фреймворку. Bootstrap 5 використовує border-box для властивості розміру коробки, яка може вплинути на макети. Ви можете змінити це на content-box, якщо це необхідно лише для окремих елементів, оголосивши вбудований CSS.


Вивчити Bootstrap 5 (індекс )


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

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