Tutorial

Tutorial video Bootstrap, HTML i CSS

Tworzenie stron WWW w dzisiejszych czasach diametralnie różni się od tego jak tworzyliśmy strony nawet kilka lat temu. W zapomnienie odeszły już tabelki. Dziś mamy HTML5, CSS3, responsive web design, flexbox, css grid, SASS, frameworki JS czy narzędzia automatyzujące pracę jak Webpack czy Gulp. Ten ogromny rozwój front-endu spowodował, że możemy tworzyć dużo ładniejsze i […]

Hello World

Witajcie! Bootstrap jest zbiorem gotowych elementów HTML/CSS oraz skryptów JS, który umożliwia tworzenie responsywnych stron internetowych. Dzięki niemu możecie stworzyć stronę, która będzie się „dopasowywać” do ekranów smartfonów, tabletów i komputerów. Dzięki siatce (grid) z łatwością podzielimy stronę na kilka części, które mogą zachowywać się inaczej w zależności od rozdzielczości. Mnogość gotowych elementów również znacząco […]

Wprowadzenie do Bootstrap 4

Jak już wiecie Bootstrap jest zbiorem snippetów HTML, klas CSS oraz skryptów JS dzięki którym można dużo szybciej stworzyć responsywną stronę internetową. Posiada on siatkę, dzięki której możemy stworzyć szkielet naszej witryny a także wiele gotowych elementów. W tym wpisie dowiemy się jak zacząć naszą przygodę, skąd wziąć pliki Bootsrtapa oraz jak zaimportować je do naszego […]

Kontenery / Containers

Sprawdź najnowszą wersję kontenerów zbudowaną na podstawie Bootstrapa 5. Kliknij tutaj aby zobaczyć przykłady oraz dowiedzieć się jak z nich skorzystać. Kontener jest podstawowym elementem siatki Bootstrapa i jest on wymagany gdy chcemy zbudować sobie responsywny layout bo bez niego siatka zwyczajnie nie będzie się prawidłowo skalować. Używamy go do rozdzielania a właściwie tworzenia sekcji […]

Siatka / Grid wprowadzenie

Sprawdź najnowszą wersję siatki zbudowaną na podstawie Bootstrapa 5. Kliknij tutaj aby zobaczyć przykłady oraz dowiedzieć się jak z nich skorzystać. Twórz własną siatkę z różnymą liczbą kolumn, wyrównaniem oraz innymi ustawieniami za pomocą generatora siatki. Siatka Bootstrapa składa się z kontenerów (.container), które opisałem w poprzednim wpisie. Rzędów (.row), które służą do grupowania kolumn. […]

Siatka / Grid

Sprawdź najnowszą wersję siatki zbudowaną na podstawie Bootstrapa 5. Kliknij tutaj aby zobaczyć przykłady oraz dowiedzieć się jak z nich skorzystać. Twórz własną siatkę z różnymą liczbą kolumn, wyrównaniem oraz innymi ustawieniami za pomocą generatora siatki. Responsywna siatka Bootstrapa służy do budowania szkieletu strony i jest moim zdaniem jego najważniejszym elementem. Dzięki gridowi możemy zbudować […]

Widoczność elementów na różnych urządzeniach / Responsive utilities

Sprawdź najnowszą wersję responsive utilities zbudowaną na podstawie Bootstrapa 5. Kliknij tutaj aby zobaczyć przykłady oraz dowiedzieć się jak z nich skorzystać. We wpisie o siatce Bootstrapa opisywałem klasy kolumn, które odpowiadają za ich wyświetlanie na różnych rozdzielczościach ekranu. Tak w ramach przypomnienia: Klasa .col-* spowoduje wyświetlanie się kolumn obok siebie zawsze. Klasa .col-sm-* spowoduje […]

Typografia / Typography

Sprawdź najnowszą wersję typografii zbudowaną na podstawie Bootstrapa 5. Kliknij tutaj aby zobaczyć przykłady oraz dowiedzieć się jak z nich skorzystać. Twórz własny kompozycję tekstu w dokumentach za pomocą generatora typografiiy. W poprzednich wpisach opisałem jak działa Bootstrapowy grid i jak z niego korzystać. Teraz przyszedł czas na opisywanie poszczególnych elementów treści naszej strony. Skupimy […]

Wyświetlanie kodu / Code

Jeśli chcecie prowadzić technicznego bloga to z pewnością przyjdzie taki moment w którym będziecie musieli wyświetlić kawałki kodu. Twórcy Bootstrapa ostylowali dla nas podstawowe znaczniki, które do tego służą. Dzięki temu wyświetlą się nam one w innym kolorze, otoczone ramką i z „maszynowym” fontem. Z resztą czytając moje wpisy niejednokrotnie spotykacie się z takim wyświetlaniem […]

Obrazy / Images

Sprawdź najnowszą wersję komponentu images zbudowaną na podstawie Bootstrapa 5. Kliknij tutaj aby zobaczyć przykłady oraz dowiedzieć się jak z nich skorzystać. Zdjęcia, grafiki, ikony – to nieodłączne elementy nowoczesnych stron internetowych. W tym wpisie zajmiemy się przygotowaniem responsywnego obrazu, czyli takiego, który będzie się proporcjonalnie zwiększał/zmniejszał w zależności od rozdzielczości. Dodatkowo poznamy kilka klas, […]

Tabele / Tables

Sprawdź najnowszą wersję komponentu tables zbudowaną na podstawie Bootstrapa 5. Kliknij tutaj aby zobaczyć przykłady oraz dowiedzieć się jak z nich skorzystać. Tabele służą nam do przedstawiania usystematyzowanych wyników bądź danych. Możemy stworzyć sobie tabelę z cenami, z wynikami rozgrywek, z listą nazwisk, możliwości jest wiele. Dawno temu służyły także do tworzenia całych stron internetowych […]

Obrazy z podpisem / Figures

Sprawdź najnowszą wersję komponentu figures zbudowaną na podstawie Bootstrapa 5. Kliknij tutaj aby zobaczyć przykłady oraz dowiedzieć się jak z nich skorzystać. Wraz z HTML5 pojawił się nowy znacznik <figure>, który ma służyć do umieszczania w jego wnętrzu obrazów, diagramów, ilustracji z opcjonalnym podpisem umieszczonym wewnątrz <figcaption>. Ten tag jest również wstępnie ostylowany przez twórców […]

Alerty / Alerts

Sprawdź najnowszą wersję komponentu alert zbudowaną na podstawie Bootstrapa 5. Kliknij tutaj aby zobaczyć przykłady oraz dowiedzieć się jak z nich skorzystać. Przechodzimy do kolejnego etapu poznawania Bootstrapa. Poznaliśmy już responsywną siatkę oraz dowiedzieliśmy się jak operować na tekstach i obrazach. Kolejnym krokiem są gotowe komponenty przygotowane przez twórców frameworka. Komponenty te składają się z […]

Odznaki / Badges

Sprawdź najnowszą wersję komponentu badges zbudowaną na podstawie Bootstrapa 5. Kliknij tutaj aby zobaczyć przykłady oraz dowiedzieć się jak z nich skorzystać. Przeglądając sklepy internetowe można natknąć się na wiele „odznak”. Informują one o aktualnej promocji, pokazują ile produktów znajdziemy w wybranej kategorii, umieszcza się w nim tagi produktów czy wypisuje aktualnie włączone filtry wyszukiwania […]

Okruszki / Breadcrumb

Sprawdź najnowszą wersję komponentu breadcrumbs zbudowaną na podstawie Bootstrapa 5. Kliknij tutaj aby zobaczyć przykłady oraz dowiedzieć się jak z nich skorzystać. Okruszki są elementem nawigacyjnym na stronie WWW. Dzięki nim możemy wyświetlić użytkownikowi ścieżkę, którą przeszedł oraz miejsce w którym się aktualnie znajduje. Okruszki pozwalają też łatwo cofnąć się użytkownikowi o kilka stron. Okruszki […]

Przyciski / Button

Sprawdź najnowszą wersję komponentu buttons zbudowaną na podstawie Bootstrapa 5. Kliknij tutaj aby zobaczyć przykłady oraz dowiedzieć się jak z nich skorzystać. Twórz własny design komponentu za pomocą generatora przycisków. Przyciski pojawiają się na każdej stronie internetowej. Korzystamy z nich przede wszystkim jako element służący do wysłania formularza ale także jako alternatywa dla linków tekstowych, […]

Radio i checkbox jako button

Sprawdź najnowszą wersję komponentu toggle button zbudowaną na podstawie Bootstrapa 5. Kliknij tutaj aby zobaczyć przykłady oraz dowiedzieć się jak z nich skorzystać. Standardowe elementy checkbox i radio nie są zbyt atrakcyjne wizualnie. Oczywiście istnieje wiele bibliotek, które zmieniają ich wygląd, dodają animacje podczas kliknięcia itp. Ale tutaj skupiamy się na samym Bootstrapie, więc zajmiemy […]

Grupy przycisków / Button group

Sprawdź najnowszą wersję komponentu button group zbudowaną na podstawie Bootstrapa 5. Kliknij tutaj aby zobaczyć przykłady oraz dowiedzieć się jak z nich skorzystać. We wpisie o przyciskach poznaliście ich rodzaje, kolory i rozmiary. Kolejnym elementem dotyczącym przycisków jaki opiszę jest ich grupowanie. Polega ono na „złączenie” kilku przycisków w jeden element ale zachowując możliwość kliknięcia […]

Karty / Cards

Sprawdź najnowszą wersję komponentu cards zbudowaną na podstawie Bootstrapa 5. Kliknij tutaj aby zobaczyć przykłady oraz dowiedzieć się jak z nich skorzystać. Twórz własny design karty za pomocą generatora kart. Jeśli korzystaliście z Bootstrap 3 to pewnie znane są Wam takie elementy jak panele, studnie i miniaturki obrazków. W wersji czwartej twórcy połączyli te elementy, […]

Slider / Carousel

Sprawdź najnowszą wersję komponentu slider / carousel zbudowaną na podstawie Bootstrapa 5. Kliknij tutaj aby zobaczyć przykłady oraz dowiedzieć się jak z nich skorzystać. Jeszcze do niedawna slidery święciły triumfy na stronach internetowych. Każda z nich musiała się zaczynać od karuzeli ze zdjęciami. Bardzo często moi klienci chcieli mieć po kilkanaście zdjęć na sliderze i […]

Akordeon / Collapse

Sprawdź najnowszą wersję komponentu collapse zbudowaną na podstawie Bootstrapa 5. Kliknij tutaj aby zobaczyć przykłady oraz dowiedzieć się jak z nich skorzystać. Ten wpis właściwie powinien się nazywać inaczej ale nie znam krótkiego polskiego określenia na ów element:) Natomiast jest on używany przy tworzeniu akordeonów, więc będzie Wam łatwiej trafić:) Collapse pozwala nam na wyświetlenie […]

Listy rozwijane / Dropdowns

Sprawdź najnowszą wersję komponentu dropdowns zbudowaną na podstawie Bootstrapa 5. Kliknij tutaj aby zobaczyć przykłady oraz dowiedzieć się jak z nich skorzystać. Listy rozwijane są elementami, których możemy używać podczas chęci ukrycia jakiś opcji lub linków pod przyciskiem. Wtedy zamiast wypisywać je wszystkie to umieszczamy je jako właśnie taka lista i wyświetlamy ją dopiero po […]

Formularze / Forms

Sprawdź najnowszą wersję komponentu formularzy zbudowaną na podstawie Bootstrapa 5. Kliknij tutaj aby zobaczyć przykłady oraz dowiedzieć się jak z nich skorzystać. Nasze strony internetowe bardzo często posiadają różnego typu formularze. Może to być klasyczny formularz kontaktowy, możemy dać użytkownikowi różnego rodzaju kalkulatory by obliczał na przykład ilość paczek z kafelkami potrzebnych na remont łazienki. […]

Dodatki do formularzy

Sprawdź najnowszą wersję komponentu dodatków do formularzy zbudowaną na podstawie Bootstrapa 5. Kliknij tutaj aby zobaczyć przykłady oraz dowiedzieć się jak z nich skorzystać. W poprzednim wpisie zapoznaliśmy się z tworzeniem różnego typu formularzy. W tym dowiemy się jak je rozbudować dodatkowo o coś w stylu etykietek. Możemy je dodawać przed oraz za polem, możemy […]

Jumbotron

Sprawdź najnowszą wersję komponentu jumbotron zbudowaną na podstawie Bootstrapa 5. Kliknij tutaj aby zobaczyć przykłady oraz dowiedzieć się jak z nich skorzystać. Jeśli korzystaliście z Bootstrap 3 to możecie kojarzyć element o nazwie „Well” co po polsku znaczy „studnia” ale nie wiem dlaczego, ktoś to tak nazwał;) W Bootstrap 4 ów element zastąpił Jumbotron, nazwa […]

Listy / List group

Sprawdź najnowszą wersję komponentu list group zbudowaną na podstawie Bootstrapa 5. Kliknij tutaj aby zobaczyć przykłady oraz dowiedzieć się jak z nich skorzystać. Listy są nieodzownymi elementami każdej strony internetowej. Używamy ich do wypisywania specyfikacji, do wyświetlenia kolejnych wpisów na blogu, do tworzenia menu w panelach bocznych lub mobilnych menu. Skoro jakiś element jest używany […]

Pop-up / Modal

Sprawdź najnowszą wersję komponentu modal zbudowaną na podstawie Bootstrapa 5. Kliknij tutaj aby zobaczyć przykłady oraz dowiedzieć się jak z nich skorzystać. Wyskakujące okienka, okna pop-up, modal, lightbox – wiele nazw tego samego elementu czyli okna, które pojawiając się przysłania nam aktualną stronę. Zastosowań jest wiele, na pewno każdy kojarzy irytujące reklamy, które się w […]

Paginacja / Pagination

Sprawdź najnowszą wersję komponentu pagination zbudowaną na podstawie Bootstrapa 5. Kliknij tutaj aby zobaczyć przykłady oraz dowiedzieć się jak z nich skorzystać. Paginację spotykamy często w sklepach internetowych, portalach aukcyjnych, blogach z dużą ilością treści czy nawet w wynikach wyszukiwania najpopularniejszej wyszukiwarki. Gdy mamy do pokazania bardzo wiele wyników to nie chcemy zmuszać użytkownika do […]

Komunikaty / Popovers

Sprawdź najnowszą wersję komponentu popovers zbudowaną na podstawie Bootstrapa 5. Kliknij tutaj aby zobaczyć przykłady oraz dowiedzieć się jak z nich skorzystać. W tym wpisie przedstawię Wam komunikaty, które możemy wyświetlać po kliknięciu na przykład w button. We wpisie o wprowadzeniu do Bootstrap możecie zauważyć, że prócz arkusza ze stylami Bootstrapa pobieramy też kilka plików […]

Paski postępu / Progress

Sprawdź najnowszą wersję komponentu progress zbudowaną na podstawie Bootstrapa 5. Kliknij tutaj aby zobaczyć przykłady oraz dowiedzieć się jak z nich skorzystać. Na paski postępu najczęściej natrafiamy podczas ładowania jakiś komponentów na naszych stronach WWW. Ale spotkamy je także w kilkuetapowych formularzach na przykład w sklepach internetowych podczas przechodzenia przez etapy zakupu lub przy zakładaniu […]

Ramki / Borders

Sprawdź najnowszą wersję komponentu borders zbudowaną na podstawie Bootstrapa 5. Kliknij tutaj aby zobaczyć przykłady oraz dowiedzieć się jak z nich skorzystać. Prócz gotowych elementów Bootstrap zawiera także wiele małych narzędzi ułatwiających budowanie layoutu stron. Są to zwykle klasy robiące bardzo proste rzeczy jak wyrównanie tekstu czy dodanie ramek. Podstawowy przykład Aby dodać poszczególne ramki […]

Clearfix

Sprawdź najnowszą wersję komponentu clearfix zbudowaną na podstawie Bootstrapa 5. Kliknij tutaj aby zobaczyć przykłady oraz dowiedzieć się jak z nich skorzystać. Stosowanie właściwości float może powodować problemy z poprawnym wyświetlaniem elementów, które ją posiadają. Przykładowo poniżej mamy tekst oraz obrazek, zamknięte w divie z tłem. Jednak z powodu zastosowania float „wyszły” one z tego […]

Ikona zamykania / Close icon

Sprawdź najnowszą wersję ikony zamykania zbudowaną na podstawie Bootstrapa 5. Kliknij tutaj aby zobaczyć przykłady oraz dowiedzieć się jak z nich skorzystać. Gdy tworzymy na przykład modal to dobrze umieścić w nim ikonę do zamykania. W Bootstrapie jest ona bardzo prosta do uzyskania. Wystarczy, że stworzymy button i umieścmy w nim encję HTML times;.

Kolory / Colors

Sprawdź jak implementować kolory w najnopwszej wersji Bootstrapa 5. Kliknij tutaj aby zobaczyć przykłady oraz dowiedzieć się jak z nich skorzystać. Czytając pozostałe wpisy na pewno natknęliście się na kolory zaimplementowane w Bootstrap. Z pomocą klas możemy zmieniać kolory tekstu, linków, buttonów, nadawać kolory teł itp. Kolor tekstu Dla tekstu mamy przygotowane kilkanaście klas. Nie […]

Display

Sprawdź najnowszą wersję komponentu display zbudowaną na podstawie Bootstrapa 5. Kliknij tutaj aby zobaczyć przykłady oraz dowiedzieć się jak z nich skorzystać. W tym wpisie poznamy klasy, które pozwalają nam zmieniać sposób wyświetlania elementu. Jak wiecie dzięki właściwości display: CSS możemy definiować by element wyświetlał się między innymi blokowo, liniowo, jako element listy czy tabela. […]

Umieszczanie YouTube / Embeds

Twórz responsywne wideo lub obrazy i skaluj się na dowolnym urządzeniu dzięki komponentowi embeds w najnowszej wersji Bootstrapa 5. Kliknij tutaj aby zobaczyć przykłady oraz dowiedzieć się jak z nich skorzystać. Na naszych stronach możemy umieszczać video z Youtube czy Vimeo. Ale możemy także umieszczać elementy innych stron lub jakieś widżety z pomocą iframe. Bootstrap […]