Nawigacja tabów

Zaczynamy! Ćwiczenie dotyczące bootstrapowego JavaScript zaczynamy od podstawowej struktury strony oraz utworzenia tabów.

1. Uruchom nowy projekt w Codesandbox. Dodaj link w nagłówku:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

Następnie w body strony (przed znacznikiem zamykającym) dodaj następujące skrypty:

<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

2. W ciele dokumentu dodaj diva z klasą “our-cars”. W środku umieść nagłówek h2 z tekstem “Nasze samochody”. Pod nim dodaj znacznik ul (lista nieuporządkowana) z klasą “nav nav-tabs”. Wewnątrz listy dodaj li (podpunkt listy) z klasą “active“. W środku podpunktu umieść odnośnik (poniżej dodaję cały gotowy wiersz kodu).

<li class="active"><a href="#opel" data-toggle="tab">Opel</a></li>

Następnie powtórz cały powyższy wiersz dwa razy z podpunktem listy wraz z odnośnikiem, zmieniając klasy i nazwy pojazdów. Jeżeli skopiowałeś kod, to w wersjach skopiowanych usuń całkowicie klasę “active“. Wspomniana klasa ma być wyłącznie przy pierwszym podpunkcie.

Taby z opcją wyboru oferty

Zajmiesz się od teraz właściwym kontentem tabów w naszym ćwiczeniu. Identyfikatory pozwalają przypisać do odpowiednich tabów. W naszmy przypadku każdy z tabów ma zawierać nieuporządkowaną listę z produktami, które będą informowały klienta o posiadanym stanie magazynowym.

Utwórz diva z klasą tab-content wewnątrz elementu z klasą our-cars.
Następnie stwórz panele, które będą odpowiadały za wyświetlanie poprawnej treści. Aby to zrobić, należy utworzyć trzy elementy div z klasą tab-pane. Do pierwszego z nich dodaj klasę active.
Przejdźmy do nadania naszym divom odpowiednie id. Należy to zrobić w celu przypisania odpowiedniego taba do odpowiedniego panelu. Do pierwszego taba dodaj id o nazwie opel, do drugiego audi i trzeciego vw.
Następnie do każdego elementu z klasą tab-pane dodaj nieuporządkowaną listę ul wraz z czterema elementami li. Dodaj przykładowe modele samochodów między znaczniki li.

Modal – button uruchamiający

Dodajmy przycisk, który uruchomi modal. W następnym kroku, w uruchomionym modalu umieścimy ofertę specjalną.

Wewnątrz elementów z klasą tab-pane na końcu, przed znacznikiem zamykającym ul utwórz przycisk z klasami btn, btn-primary, btn-sm.
Kolejno do przycisku dodaj atrybut data-toggle z wartością modal oraz data-targer z wartością #myModal.

Nagłówek modala

Uzupełnijmy naszego modala. Po pierwsze zajmiemy się “headerem”, gdzie znajdzie się tytuł “boxa” oraz przycisk zamykający modal. Lecimy!

1. Pod elementem button dodaj nowy element z klasami modal i fade. Dodaj również id o wartości myModal.
2. Wewnątrz powyższego elementu należy utworzyć element z klasą modal-dialog, a następnie zagnieździć w nim element z klasą modal-content.
3. Wewnątrz elementu z klasą modal-content utwórz element z klasą modal-header. W środku dodaj przycisk z klasą close oraz atrybutem data-dismiss o wartości modal. Wewnątrz przycisku dodaj element span z treścią x.
4. W elemencie z klasą modal-header dodaj nagłówek h4 z klasą modal-title.

Treść modala

Dodajmy treść do modala. Aby urozmaicić, dodajmy dwie kolumny. W jednej umieścimy obrazek a w drugiej tekst. Kolumny dodamy za pomocą bootstrapowego grida.

Za elementem z klasą modal-header utwórz element z klasą modal-body, w którym umieścisz główną treść produktu.
Utwórz dwie kolumny rozmiaru col-xs-6 (pamiętaj o elemencie z klasą row). W pierwszej dodaj zdjęcie w tagu img, a w drugiej opis produktu w elemencie p.

Stopka modala

Stwórzmy stopkę modala. Dodajmy do niego przycisk ogólnego przeznaczenia oraz wyłączenia boksa.

Utwórz element z klasą modal-footer który będzie poza elementem z klasą modal-body.
Wewnątrz niego dodaj dwa przyciski. Jeden z klasami btn i btn-default, a drugi z klasami btn oraz btn-primary.
Do pierwszego przycisku w tej sekcji musisz dodać jeszcze atrybut data-dismiss z wartością modal, żeby kliknięcie na przycisk zamykało modal.

Poniżej dodaję gotowe ćwiczenie wykonane wg powyższych kroków. Sprawdź swój kod z poniższym.

ĆWICZENIE. KLIKNIJ, ABY PODEJRZEĆ…

pedantic-brook-0or6c
pedantic-brook-0or6c danielminschinski

Ty by było na tyle w temacie Bootstrapowych elementów. Powyższym ćwiczeniem chciałbym na razie zakończyć omawiać frameworka.

Niedługo zaktualizuję “Plan nauki Frontend Developera” o kolejne pozycję. Przez najbliższe tygodnie będę przygotowywać dla Was materiały o tworzeniu formularzy na stronach internetowych. Tak więc do kolejnego!

Zapraszam do subskrypcji i polubienia mojego blogowo/usługowego fb.

Jeżeli chciałbyś/chciałabyś wesprzeć mój blog to zapraszam -> WSPARCIE DLA BLOGA

#60. Elementy JavaScript – ćwiczenie