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

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 naszej strony, przykładowo jednym kontenerem jest nasz header, jednym jest treść wpisu, kolejnym sekcja z komentarzami i na koniec jeszcze jeden […]

Siatka / Grid wprowadzenie

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. No i właśnie samych kolumn (.col-*-*), które umieszczamy wewnątrz rzędów. Jest to najpopularniejszy element całego frameworka, dzięki gridowi możemy łatwo budować cały responywny szkielet strony. Ale od początku. Kontener jest głównym elementem wewnątrz którego będziemy budowali […]

Siatka / Grid

Responsywna siatka Bootstrapa służy do budowania szkieletu strony i jest moim zdaniem jego najważniejszym elementem. Dzięki gridowi możemy zbudować sobie cały układ strony i zdefiniować jak ma się zachowywać na poszczególnych rozdzielczościach. W Bootstrap 4 dodatkowo mamy do dyspozycji Flexbox co otwiera przed nami nowe możliwości odnośnie chociażby łatwego wyśrodkowania w pionie;) Aby wszystko działało […]

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

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 wyświetlanie się kolumn obok siebie w rozdzielczości wyższej lub równej 544px, poniżej będą się wyświetlały pod sobą. Klasa .col-md-* spowoduje wyświetlanie się […]

Typografia / Typography

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 się na typografii, obrazach czy tabelach. Nagłówki Język HTML udostępnia nam sześć nagłówków od <h1> do <h6>. Nagłówki te nie służą, a przynajmniej nie powinny służyć do definiowania nimi wielkości tekstu […]

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

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, które pozwalają na zmianę kształtu zdjęcia czy grafiki oraz dowiemy się jak ustawiać je do prawej, lewej czy wyśrodkować. Obraz responsywny Aby […]

Tabele / Tables

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 ale te czasy minęły i odkąd mamy wszelkiego rodzaju gridy/siatki, nie stosujcie tabel do tworzenia layoutu. No chyba, że do szablonu mailingu […]

Obrazy z podpisem / Figures

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 Bootstrapa. Jego struktura jest następująca: Znacznik <figure class=”figure”>…</figure> Wewnątrz niego znacznik <img src=”…” class=”figure-img img-fluid”> I również wewnątrz <figure> znacznik <figcaption class=”figure-caption”>Opis […]

Alerty / Alerts

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 mieszanki kodu HTML i klas CSS a czasami wymagają także użycia JSa. Pierwszym z nich będzie element „Alert”, który służy nam do […]

Odznaki / Badges

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 czy ilość produktów w koszyku. Ale owe odznaki widzimy także chociażby na FB gdzie wyświetla się nam ilość powiadomień. Bootstrap również oferuje […]

Okruszki / Breadcrumb

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 z pomocą Bootstrapa możemy stworzyć na dwa sposoby. Pierwszym z nich jest użycie listy <ol> z klasą .breadcrumb. Każdy element listy <li> […]

Przyciski / Button

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, jako nawigacje czy w elementach CTA (Call to action). Jak wiecie z poprzednich wpisów, Bootstrap ma zdefiniowanie kilka kolorów, które służą do pokazywania odpowiednich kontekstów elementów lub po prostu ich […]

Radio i checkbox jako button

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 się elementem przygotowanym przez jego twórców a mianowicie checkboxem lub radio wyglądającym jak bootstrapowy przycisk a właściwie grupa przycisków. Checkbox jako button Zaczniemy […]

Grupy przycisków / Button group

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 w każdy z nich oddzielnie. Ten element znajduje zastosowanie między innymi w sytuacji gdy mamy kilka sekcji i każda z nich posiada jakieś […]

Karty / Cards

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, dodali wiele nowych funkcjonalności i w ten sposób powstały karty. Możliwości ich użycia jest naprawdę wiele, w tym kursie są one wykorzystane między innymi do boksów na stronie głównej, listy […]

Slider / Carousel

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 nie docierało do nich, że to znacząco wydłuży czas ładowania strony. Poza tym, czy Wy po wejściu na stronę najpierw przeklikujecie się przez wszystkie […]

Akordeon / Collapse

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 treści jakiegoś diva dopiero po kliknięciu w odpowiedni przycisk czy link. Jest to bardzo często używane przy tworzeniu sekcji FAQ gdzie wyświetlamy […]

Listy rozwijane / Dropdowns

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 kliknięciu. Listy rozwijane są bardzo często używane w layoutach narzędzi on-line. Gdy któreś z nich oferuje dużą ilość opcji, lepiej jest je […]

Formularze / Forms

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. Możemy również umożliwiać komentowanie naszych wpisów na blogu czy stworzyć podstronę z logowaniem i dostępem do chronionych treści. Skoro formularze są stałymi […]

Dodatki do formularzy

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 w nim umieścić checkbox, listę rozwijaną czy przycisk a także mieszać wszystkie wymienione opcje. Owe dodatki są fajną alternatywą dla placeholdera, bo ten znika […]

Jumbotron

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 równie dziwna, ale dowiedziałem się, że jest to określenie telebimu, co może sprowadzić nas na trop czemu służy ten element. A służy […]

Listy / List group

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 bardzo często to nie mogło by być inaczej i twórcy Bootstrapa musieli przygotować jakieś gotowe rozwiązania. Podstawowy przykład Zaczniemy od podstawowego przykładu listy, […]

Pop-up / Modal

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 nich pojawiają lub zachęcają do zapisania się do newslettera. Ale korzystamy z nich także przeglądając galerie zdjęć na stronach lub czytając krótkie […]

Paginacja / Pagination

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 przewijania w nieskończoność i najlepszym wyjściem jest rozbicie rezultatów na kilka-kilkanaście podstron pomiędzy którymi będzie się przełączać. Nie można też zapomnieć o […]

Komunikaty / Popovers

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 JS. Są one niezbędne do działania niektórych elementów Bootstrapa. O jednym z nich właśnie piszę:). Zaczniemy od tego, że ów element nie […]

Paski postępu / Progress

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 kont w serwisach internetowych. Podstawowy przykład Budowa podstawowego paska postępu składa się z dwóch divów. Pierwszy „zewnętrzny” musi mieć klasę .progress, drugi […]

Ramki / Borders

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 naszemu elementowi mamy do wyboru pięc klas: .border – dodaje ramki na wszystkich bokach .border-top – dodaje ramkę u góry .border-right – […]

Clearfix

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 diva, przez co ma on zerową wysokość i się nie wyświetla. Dodatkowo psuje to ramkę przykładu. Rozwiązaniem tej sytuacji jest zastosowanie tzw […]

Ikona zamykania / Close icon

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

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 będę ich tutaj wymieniał, myślę, ze przykład doskonale pokazuje o co z nimi chodzi. Kolor linka Tutaj sytuacja wygląda podobnie do […]

Display

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. Klasy te odpowiadają wartością właściwości display z dopiskiem .d-*. Dodatkowo możemy je stosować do wybranych breakpointów. Wtedy składnia klasy wygląda następująco .d-*-* […]

Umieszczanie YouTube / Embeds

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 ma przygotowane kilka klas pozwalających na umieszczanie na stronach responsywnych iframe i w przypadku filmów, również pilnowania ich proporcji. Zaczniemy od stworzenia diva z klasą .embed-responsive a w nim umieścimy iframe […]