Object – tworzenie struktury Media object to komponent, który przydaje się na stronie internetowej. W poniższym przykładzie zobaczysz jak stworzyć prosty układ media object za pomocą Bootstrapa. W dzisiejszych czasach nie trzeba daleko szukać, aby znaleźć zastosowanie tego komponentu. Gdy zamierzasz dodać do bloga sekcje z komentarzami, wspomniany komponent świetnie do tego pasuje. Na podobnej zasadzie …
Tworzenie paginacji Tworzenie paginacji w Bootstrapie jest bardzo proste. Wystarczy skorzystać z elementu nav oraz nieuporządkowanej listy (ul wraz z elementami li) Używając pomocniczej klasy pagination, w prosty sposób uzyskamy paginacje. Paginacja przydaję się do zarządzania stronami wpisów na blogu oraz numerowania stron zdjęć w swoim portfolio. Sprawdź na podstawie poniższego przykładu jak dodać do …
Wprowadzenie do komponentów JS w Bootstrapie W najbliższym czasie zapoznamy się z komponentami Javascript udostępnionymi w Bootstrapie. Udostępniają one interaktywną zawartość na stronie oraz elementy dynamiczne między innymi tak zwane karuzele czy modale. W przykładzie zobaczysz stronę na której zastosowałem wspomniane elementy. Od dłuższego czasu omawiam Bootstrapa na moim blogu. A więc, jeżeli jesteś od …
Stopka Tak jak zwykle bywa na stronach, ostatnim elementem na stronie jest stopka, w której zazwyczaj można znaleźć dane kontaktowe. W naszym ćwiczeniu dodamy dolną nawigację w elemencie z klasą footer. Celem takiego zabiegu jest łatwość przejścia na inne podstrony w celu znalezienia innych informacji o firmie. To zaczynajmy! Uruchom swój kod. W pierwszym bloku …
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 …
#50c. Zastosowanie elementów CSS – Tworzenie kontentu Read More »
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-* – …
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 …
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: …
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 …
Bootstrap – framework Bootstrap to popularny framework w internecie. Posiada on zestaw przydatnych narzędzi wspomagających tworzenie stron internetowych. Bazuje głównie na gotowych rozwiązaniach HTML i CSS. Może być stosowany między innymi do stylizacji takich elementów jak teksty, formularze, przyciski , nawigacje, wykresy i wiele innych elementów które są niezbędne na naszych stronach. Do tej pory …
