Вивчіть Bootstrap 4 у цьому безкоштовному 10-частинному курсі

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

Ось чому ми об’єдналися з Нілом Роу (раніше відомий як CodersGuide) і створили безкоштовний повнометражний курс на Bootstrap 4. Раніше Ніл створив один із найпопулярніших курсів Bootstrap 3 на YouTube, тому ми дуже раді, що він вирішив використовувати Скрімбу для свого подальшого курсу.

Ви можете пройти курс сьогодні. Просто перейдіть на сторінку курсу, і ви станете майстром Bootstrap 4 протягом години.

А тепер давайте детальніше розглянемо, що ви дізнаєтесь!

# 1 Вступ до курсу

У першій скрінкасті ви отримаєте огляд самого Bootstrap, а також утиліти та компоненти, які він містить із собою. Ніл також розглядає основні переваги, які приносить v4.

№2 Адаптивна мережева система

Потім курс продовжує роботу з одним з найважливіших компонентів Bootstrap, адаптивною системою сіток. Ніл пояснює, як створювати різні сітки з різними точками зупинку, розмірами стовпців та зміщеннями.

№3 чуйні навігаційні панелі

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

No4 Модалі

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

# 5 Форми

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

# 6 Перелік груп

Групи списків можна використовувати для багатьох різних цілей. Наприклад, їх можна використовувати як бічну панель, меню, список статей або як завгодно, що ви хочете.

# 7 Картки

Bootstrap 4 представляє цілком новий компонент, який називається картками, який замінює панелі, колодязі та ескізи. Картка - це гнучкий та розширюваний вміст контейнера. У цій лекції ви дізнаєтесь, як створити його, використовуючи різні компоненти, які зазвичай складають картку.

# 8 Столи

Bootstrap 4 також містить купу класів для модифікації таблиць, і ця лекція демонструватиме більшість із них. Вони приймають участь, тобто вам потрібно активно додавати клас таблиці, щоб перетворити таблицю на таблицю Bootstrap. Це на відміну від того, як це було раніше, перш ніж звичайні таблиці HTML автоматично перетворювались на таблиці Bootstrap.

# 9 Сповіщення

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

# 10 Параметри навігації

Нарешті, курс закінчується тим, з чого він розпочався, надаючи вам більше інструментів на поясі, коли справа стосується навігаційних панелей, таких як вкладки та спадні меню. Це зручно знати, але не настільки суттєво, як матеріал у другій лекції, саме тому він з’являється в кінці курсу.

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

Формат Scrimba

Нарешті, давайте також швидко поглянемо на технологію, що лежить в основі курсу. Він побудований за допомогою Scrimba, інтерактивного інструменту кодування скринінгу. "Скрим" виглядає як звичайне відео, проте він повністю інтерактивний. Це означає, що ви можете редагувати код всередині скринкасту.

Ось gif, який пояснює поняття:

Призупинити трансляцію екрана → Редагувати код → Запустити!  → Перегляньте свої зміни

Призупинити трансляцію екрана → Редагувати код → Запустити! → Перегляньте свої зміни

Це чудово, коли вам здається, що вам потрібно поекспериментувати з кодом, щоб правильно його зрозуміти, або коли ви просто хочете скопіювати фрагмент коду.

То що ти чекаєш? Вперед і пройдіть курс сьогодні!

Дякуємо за читання! Мене звуть Пер, я співзасновник Scrimba, і я люблю допомагати людям освоювати нові навички. Слідуйте за мною у Twitter, якщо хочете отримувати повідомлення про нові статті та ресурси.

Дякуємо за читання! Мене звуть Пер Борген, я співзасновник Scrimba - найпростішого способу навчитися кодувати. Якщо ви хочете навчитися будувати сучасний веб-сайт на професійному рівні, вам слід ознайомитися з нашим адаптивним веб-дизайном веб-дизайну.