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">
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 drugiegoaudi
i trzeciegovw
. - Następnie do każdego elementu z klasą
tab-pane
dodaj nieuporządkowaną listęul
wraz z czterema elementamili
. Dodaj przykładowe modele samochodów między znacznikili
.
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ącymul
utwórz przycisk z klasamibtn, btn-primary, btn-sm
. - Kolejno do przycisku dodaj atrybut
data-toggle
z wartościąmodal
orazdata-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!- Pod elementem
button
dodaj nowy element z klasamimodal
ifade
. Dodaj również id o wartościmyModal
. - 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
. - Wewnątrz elementu z klasą
modal-content
utwórz element z klasąmodal-header
. W środku dodaj przycisk z klasąclose
oraz atrybutemdata-dismiss
o wartościmodal
. Wewnątrz przycisku dodaj elementspan
z treściąx
. - W elemencie z klasą
modal-header
dodaj nagłówek h4 z klasąmodal-title
.
- Pod elementem
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 taguimg
, a w drugiej opis produktu w elemenciep
.
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
ibtn-default
, a drugi z klasamibtn
orazbtn-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.
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