#50c. Zastosowanie elementów CSS – Tworzenie kontentu
Tworzenie kontentu Przyszedł czas na kontent na stronie. Pierwszym krokiem będzie dodanie sekcji “o nas”. W drugim bloku stworzymy formularz kontaktowy. Jeżeli śledzisz mnie od początku to znajdziesz podobny formularz stworzony od zera. W pierwszej kolumnie (col-xs-12 i col-md-6) dodaj nagłówek stopnia drugiego i paragraf. Kolejno w drugim analogicznym elemencie dodaj formularz. W pierwszej kolejności
Czytaj więcej
#50b. Zastosowanie elementów CSS – Menu i jumbotron
Menu i jumbotron Menu, jak już doskonale wiesz, służy do nawigacji. W naszym przypadku będą to puste odnośniki, ponieważ na potrzeby ćwiczenia nie potrzebujemy się przenosić do innych podstron. Tworzenie menu to czynność obowiązkowa na każdej stronie www. Jumbotron to element, który zawiera najważniejsze informację dla klienta – np. ofertę produktu lub wezwanie do akcji
Czytaj więcej
#50a. Zastosowanie elementów CSS – Kolumnowy układ strony
Kolumnowy układ strony Przed Wami dodaję pierwszą część zadania do rozwiązania, wykorzystującą wiedzę na temat Bootstrapa poznanego przy okazji ostatnich materiałów: Utwórz nowy projekt w codesandbox. Następnie dodaj podstawowy szkielet strony html. W sekcji body dodaj diva z klasą “menu”. Poniżej zamknij diva. Następnie dodaj kolejnego diva z klasą “header”. Poniżej zamknij diva. Kolejnym elementem
Czytaj więcej
#49. Responsywność strony
Gird – wprowadzenie Na moim blogu wspominałem już o gridzie Bootstrapa, ale pewnie nie do końca wszystko zrozumiałeś jak to działa. Framework ma swój wyróżniający się zapis blokowy. Zapoznaj się z poniższymi klasami responsywności: col-xs-* – odpowiada za rozdzielczość mobilną (maksymalnie 768px), col-sm-* – odpowiada za rozdzielczość tabletu (minimalnie 768px a maksymalnie 992px), col-md-* –
Czytaj więcej
#48. Obrazki i etykiety
Etykiety Etykiety stosując Bootstrap, służą głównie do upiększania strony. Framework oferuje proste rozwiązanie, które w łatwy sposób pomoże utworzyć tzw. labele, czyli kolorowe etykiety. Sprawdź w poniższym przykładzie jak zastosowałem etykiety w kodzie: Obrazki Framework Bootstrap jest narzędziem, dzięki któremu można łatwo stworzyć responsywną stronę www. W tym akapicie chciałbym pokazać jak dodawać obrazki. Dzieki
Czytaj więcej
#47. Panele
Tworzenie paneli Przeglądając strony internetowe zauważyłeś, że kontent można zamieścić w estetycznym “pudełku”? Pokaże Ci jak stworzyć tzw. panele. Aby wykorzystać możliwości paneli, należy utworzyć elementy div z klasami panel panel dafault oraz drugi, wewnątrz niego, z klasą panel-body. Panel na naszej stronie może nam się przydać do umieszczania, np. ważnych informacji o naszych produktach,
Czytaj więcej
#46. Listy
Tworzenie grupy list Na naszych stronach internetowych przydać się może posegregowana grupa list tych samych danych. Naturalnym w dzisiejszym świecie jest czytelne przedstawienie naszych danych. Przykładowo, mamy sklep z częściami motoryzacyjnymi. Grupę list możemy wykorzystać do oddzielenia marek samochodów. W naszym frameworku Bootstrapa wyżej wymieniony element na stronie utworzymy dodając pomocnicze klasy do nieuporządkowanej listy
Czytaj więcej
#45. Paginacja
Tworzenie paginacji Stworzenie paginacji z pomocą Bootstrapa to nic trudnego. Wystarczy skorzystać z elementu nav oraz nieuporządkowanej listy (ul wraz z elementami li). Wcześniej w podobny sposób pokazałem jak tworzyć menu. Używając pomocniczej klasy pagination z zasobów Bootstrapa , w prosty sposób uzyskamy elastyczną paginację. Zadajmy więc sobie pytanie – do czego może nam się
Czytaj więcej
#44. Komponent – formularz
Tworzenie formularza Framework Bootstrap umożliwia tworzenie formularzy. Jest to kolejny przydatny element na stronie, który można stworzyć w prosty sposób dzięki klasom pomocniczym. Formularz przydaję się choćby do kontaktu z klientami. Gość na twojej stronie użyje go, by wysłać do Ciebie wiadomość. Formularz tworzymy za pomocą elementu form. W nim mogą znajdować się następujące pola:
Czytaj więcej
#43. Komponent – tabela
Tworzenie tabeli Przedstawienie niektórych danych wymaga użycia tabeli. Z pozoru łatwy komponent, ale potrafią niektórym narobić problemów z racji specyficznych zasad obsługi w CSS. Nie bez powodu omawiam tabele w tym rozdziale. Bootstrap jest w stanie nam pomóc ze swoimi rozwiązaniami dotyczącymi tabel. W materiale wcześniejszym, dotyczącym podstaw html, omawiałem strukturę oraz budowę tabel. W
Czytaj więcej