Kurs Bootstrap – niezbędne komponenty – poziom II

89

Osiągnij kolejny poziom w Bootstrapie. Nauczysz się tworzyć niezbędne komponenty jak tabele, formularze, listy rozwijane, komunikaty, elementy nawigacyjne.

Poziom: średnio zaawansowany
Data wydania: 2021
Czas trwania: 9 godzin 30 minut

Czego się nauczysz?

Framework Bootstrap zawiera 12-kolumnową siatkę i szereg gotowych do użycia komponentów. Druga część kursu poświęconego Bootstrapowi obejmuje naukę stosowania najczęściej stosowanych komponentów, które usprawniają budowę strony internetowych. Do tego typu komponentów możesz zaliczyć tabele, przyciski, komunikaty, formularze oraz wszelkiego rodzaju elementy nawigacyjne.

Oczywiście wszystkie omówione komponenty wdrożysz w pełni responsywnie. Pod koniec tego szkolenia będziesz mógł wzbogacić tworzoną stronę o różne ciekawe elementy.

  • Opanujesz większość popularnych komponentów
  • Poznasz techniki tworzenia responsywnych tabel
  • Dodasz przyciski, checkboxy, przyciski radio
  • Zdefiniujesz wyświetlanie komunikatów
  • Nauczysz się tworzyć listy, zakładki, akordeony
  • Opanujesz projektowanie formularzy
  • Dowiesz się jak dodać menu nawigacyjne
  • Utworzysz menu podążające za kursorem

Dla kogo jest ten kurs?

  • Kurs rekomendowany jest osobom, które zapoznały się już z podstawami Bootstrapa z naszego kursu „Bootstrap podstawy poziom I”
  • Mile widziana znajomość HTML oraz CSS

Naucz się tworzyć tabele, przyciski, komunikaty

Jednym z pierwszych rozdziałów kursu jest nauka tworzenia tabel. Zobaczysz jak organizować zbiory danych przy użyciu kolumn pionowych i poziomych. Nauczysz się organizować komórki, dodawać kolory, wyrównywać tekst. Oczywiście nie zabraknie lekcji, gdzie zostanie omówione zagadnienie resposnywności tabel, z czym wielu początkujących ma często problem.

Kolejnym tematem będzie tworzenie przycisków i przełączników, które są obecne niemal na każdej stronie. Poznasz różne typy przycisków taki jak zwykłe buttony, checkboxy, przyciski opcji. Dowiesz się również jak tworzyć sterowaniem przyciskiem czyli wdrożysz toggle.

Komponenty w dalszej części kursu to komunikaty, gdzie nauczysz się definiować reguły wyświetlania powiadomień. Dodasz do strony wyskakujące komunikaty i zobaczysz jak sterować oknem wykorzystując Jquery.

Zobacz jak tworzyć formularze

W kolejnych lekcjach tego szkolenia przejdziesz do omówienia formularzy, gdzie zobaczysz przykłady i wskazówki dotyczące używania stylów kontrolek formularzy, opcji układu i niestandardowych składników do tworzenia różnorodnych formularzy. Wykorzystasz elementy typu checkboxy, przyciski opcji, wybór selektywny. Wdrożysz elementy range oraz file. Dobierzesz odpowiednią wielkość pól formularza oraz utworzysz płynne rozciąganie pól, co może się przydać przy pisaniu długich wiadomości. Zobaczysz różnicę między systemem siatkowym oraz klasami form row.

Ponadto wdrożysz różne elementy walidacji, dzięki czemu użytkownik będzie wiedział, które pole wypełnione jest poprawnie.

Zadbaj o elementy nawigacyjne

Innym typem komponentów, który nauczysz się tworzyć w tym poradniku są elementy nawigacyjne. Możemy do nich zaliczyć zaprojektowanie elementów typu accordion oraz collapse. Jednak czym była by dobra nawigacja bez wdrożenia menu na stronie? Dlatego do swojego menu nauczysz się dodawać elementy dropdown oraz efekty typu pills. Stworzysz również menu mobilne czyli popularnego hamburgera oraz nauczysz się pracować z górnym paskiem menu, który będzie podążał za ruchem scrolla.

1. Wprowadzenie
1.1. Wstęp

2. Tabele
2.1. Formatowanie tabel
2.2. Responsywność tabel
2.3. Wyrównywanie tekstu w pionie

3. Przełączniki / przyciski dwustanowe
3.1. Tworzenie przełącznika
3.2. Przełącznik oparty na elemencie ‚checkbox’
3.3. Przełącznik oparty na elemencie ‚radio’
3.4. Sterowanie przełącznikiem

4. Komunikaty
4.1. Idea komunikatów zwrotnych
4.2. Przycisk Zamknij okno
4.3. Sterowanie oknem komunikatu
4.4. Dynamiczne dodawanie struktury komunikatu

5. Lista rozwijana
5.1. Podstawy tworzenia listy rozwijanej
5.2. Położenie listy
5.3. Zawartość listy
5.4. Przeznaczenie tagu ‚a’ i tagu ‚button’
5.5. Klasy ‚active’ i ‚disabled’
5.6. Sterowanie listą rozwijaną

6. Formularze
6.1. Podstawy formatowania elementów
6.2. Klasy dla elementu ‚checkbox’
6.3. Bootstrapowy styl elementu ‚checkbox’
6.4. Klasy dla elementu ‚radio’
6.5. Bootstrapowy styl elementu ‚radio’
6.6. Klasy dla elementu ‚select’
6.7. Bootstrapowy styl elementu ‚select’
6.8. Klasy i bootstrapowy styl elementu ‚range’
6.9. Klasy i bootstrapowy styl elementu ‚file’
6.10. ‚Input group’ czyli łączenie pól
6.11. Różne kombinacje i wielkości w ‚input group’
6.12. Elementy ‚checkbox’, ‚radio’ i przyciski w ‚input group’
6.13. Element ‚dropdown’ w ‚input group’
6.14. Element ‚select’ w ‚input group’
6.15. Element ‚file’ w ‚input group’
6.16. Wykorzystanie systemu siatkowego
6.17. Układanie i wyrównywanie pól formularza
6.18. Walidacja – sposób 1
6.19. Walidacja – sposób 2
6.20. Walidacja – sposób 3
6.21. Walidacja – dokończenie projektu

7. List group i zakładki
7.1. Zmiana orientacji listy
7.2. Listy z przyciskami i etykietami
7.3. Tworzenie zakładek
7.4. Sterowanie układem zakładek

8. Element collapse
8.1. Element collapse – podstawowe informacje
8.2. Element accordion
8.3. Sterowanie elementem collapse

9. Elementy nawigacyjne
9.1. Elementy nawigacyjne – podstawy
9.2. Modyfikacja wyglądu pozycji menu
9.3. Responsywność i ‚flex-fill’
9.4. Wykorzystanie elementu dropdown
9.5. Powiązanie zakładek i przycisków z treścią

10. Pasek nawigacji
10.1. Budowa paska nawigacji
10.2. Pasek nawigacji bez listy
10.3. Kolorystyka paska nawigacji
10.4. Kolor aktywnej pozycji
10.5. Kontener w pasku nawigacji
10.6. Formularz w pasku nawigacji
10.7. Położenie paska nawigacji
10.8. Zastosowanie pills w pasku nawigacji
10.9. Sterowanie paskiem nawigacji

11. Komponent scrollspy
11.1. Śledzenie pozycji scrolla w kontenerze
11.2. Śledzenie pozycji scrolla całej strony

12. Pożegnanie
12.1. Kilka slów na koniec

Dodaj ocenę