Курс компонентів початкового рівня II - DVD

Назва - "Курс Bootstrap - необхідні компоненти - рівень II"

Тривалість - 9 годин 33 хвилини

Рівень :середній

Що ви дізнаєтесь?

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

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

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

Для кого цей курс?

• Курс рекомендовано для люди, які вже ознайомилися з основами Bootstrap з нашого курсу "Основи Bootstrap, рівень I"
• Знання HTML і CSS вітаються

Навчіться створювати таблиці, кнопки, повідомлення

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

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

Компонентами курсу є повідомлення, де ви навчитеся визначати правила відображення сповіщень. Ви додасте спливаючі повідомлення на сторінку та побачите, як керувати вікном за допомогою Jquery.

Подивіться, як створювати форми

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

Крім того, ви запровадите різні елементи перевірки, завдяки яким користувач знатиме, яке поле заповнено правильно.

Подбайте про навігаційні елементи

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

1. Вступ

1.1. Вступ

2. Таблиці

2.1. Форматування таблиць

2.2. Чуйність таблиць

2.3. Вирівнювання тексту по вертикалі

3. Тумблери/кнопки

3.1. Створення перемикача

3.2. Перемикач на основі елемента 'checkbox'

3.3. Перемикач на основі елемента «радіо»

3.4. Перемикач керування

4. Повідомлення

4.1. Ідея зворотнього зв'язку

4.2. Кнопка закриття вікна

4.3. Керування вікном повідомлень

4.4. Динамічне додавання структури повідомлення

5. Розкривний список

5.1. Основи створення розкривного списку

5.2. Позиція списку

5.3. Вміст списку

5.4. Призначення тегів 'a' і 'button'

5.5. Класи 'active' і 'disabled'

5.6. Елемент керування розкривним списком

6. Форми

6.1. Основи форматування елементів

6.2. Класи для елемента 'checkbox'

6.3. Стиль початкового завантаження елемента 'checkbox'

6.4. Класи для елемента «радіо»

6.5. Стиль початкового завантаження елемента 'radio'

6.6. Класи для елемента 'select'

6.7. Стиль початкового завантаження елемента 'select'

6.8. Класи та стиль початкового завантаження елемента 'range'

6.9. Класи та стиль початкового файлу

6.10. «Група введення», тобто об’єднання полів

6.11. Різні комбінації та розміри у «вхідній групі»

6.12. 'checkbox', 'radio' та елементи кнопки в 'input group'

6.13. 'dropdown' елемент у 'input group'

6.14. 'select' елемент у 'input group'

6.15. елемент 'file' у 'input group'

6.16. Використання сітки

6.17. Упорядкування та вирівнювання полів форми

6.18. Перевірка – метод 1

6.19. Перевірка – метод 2

6.20. Перевірка – метод 3

6.21. Валідація – завершення проекту

7. Список груп і закладки

7.1. Зміна орієнтації списку

7.2. Списки з кнопками та мітками

7.3. Створення закладок

7.4. Керування макетом вкладки

8. Згортання елемента

8.1. Згорнути елемент – основна інформація

8.2. Елемент акордеон

8.3. Керування елементом згортання

9. Елементи навігації

9.1. Елементи навігації - основи

9.2. Змінення зовнішнього вигляду пунктів меню

9.3. Чуйність і «flex-fill»

9.4. Використання спадного меню

9.5. Пов’язування вкладок і кнопок із вмістом

10. Панель навігації

10.1. Структура панелі навігації

10.2. Панель навігації без списку

10.3. Кольори панелі навігації

10.4. Колір активної позиції

10.5. Контейнер на панелі навігації

10.6. Форма на панелі навігації

10.7. Розташування панелі навігації

10.8. Використання таблеток на панелі навігації

10.9. Керування панеллю навігації

11. Компонент Scrollspy

11.1. Відстеження положення прокрутки в контейнері

11.2. Відстеження положення прокрутки всієї сторінки

12. Прощання

12.1. Кілька останніх слів

Як вибрати версію курсу:

Відеокурс доступний у двох формах:

1. в електронному вигляді - як посилання для завантаження упакованого архіву. Після покупки ви отримаєте посилання на електронну пошту. У цьому випадку шукайте аукціон, позначений як цифрова версія.

2. box on DVD - замість посилання для завантаження ви отримаєте DVD за вказаною адресою. У цьому випадку шукайте аукціон, позначений як DVD.

Чи підійде курс до програми, яку я маю?

Курси створюються з використанням різних версій програми. Проте в більшості випадків вони підходять до будь-якої версії. Курси створені таким чином, щоб вони були сумісні та нейтральні до старих версій програмного забезпечення. Тож якщо у вас, наприклад, Photoshop 2019 року, а курс створений на версії Photoshop 2020, він підійде на 100%.

Чи отримаю я програму разом із курсом?

Курси — це відеоролики, що демонструють роботу в певній програмі. Жоден із курсів не супроводжується програмою, яку ви повинні придбати самостійно.