Frameworki CSS, Bootstrap - rperlinski.pl

Frameworki CSS, BootstrapTworzenie serwisów Web 2.0

dr inż. Robert Perliń[email protected]

Politechnika CzęstochowskaInstytut Informatyki Teoretycznej i Stosowanej

20 kwietnia 2020

Frameworki CSS, Bootstrap 1/51

Plan prezentacji

1 Media queries

2 Frameworki RWD, CSS, Front-end

3 BootstrapNa początekUkład elementówKomponenty składoweNarzędzia użytkoweElementy dodatkowe - ikony

4 Źródła


Zapytania mediów - media queries

Technika CSS wprowadzona w CSS3.

Używa reguły @media żeby dołączyć jakiś blok właściwości CSS jeśliwarunek jest prawdziwy. Przykłady:

jeśli okno przeglądarki jest mniejsze niż 500 pikseli to kolor tła zmieni się najasnoniebieski

@media only screen and (max-width: 500px) {body {

background-color: lightblue;}

}

kiedy ekran (okno przeglądarki) stanie się mniejsze niż 768 pikseli, każdakolumna będzie miała szerokość 100%:

@media only screen and (max-width: 768px) {[class*="col-"] { /* For mobile phones: */

width: 100%;}

}


Zapytania mediów - definicja i użycie

Reguła @media jest używana aby definiować różne sytle dla różnychrodzajów mediów/urzędzeń.

W CSS2 nazywała się media types. W CSS3 nazywa się media queries.

Zapytania mediów sprawdzają możliwości urządzenia, mogą być użyte dosprawdzenia wielu rzeczy, np.:

szerokości i wysokości okna roboczego,szerokości i wysokości ekranu urządzeniaorientacji (czy tablet/telefon jest poziomo czy pionowo?)rozdzielczości i wielu innych.

Zapytanie mediów standardowo składa się z:

typu lub grupy medium,

słowa kluczowego and

cechy medium umieszczonej w nawiasie.

Dodtępne są też inne słowa kluczowe: not, only, przecinek zastępuje warunek or.Frameworki CSS, Bootstrap 4/51

Typy mediów

all - dla wszystkich typów urządzeń

print - używane dla drukarek (dla podglądu wydruku i materiałów, które zostanąwydrukowane)

screen - dla ekranów komputera, tabletu, smartfonów itp.

speech - dla czytników ekranu, które czytają stronę

aural - nieaktualne, dla syntezatorów mowy i dźwięku

braille - nieaktualne, dla urządzeń przeznaczonych dla niewidomych

embossed - nieaktualne, dla drukarek brailla

handheld - nieaktualne, dla bezprzewodowych urządzeń ręcznych

projection - nieaktualne, dla prezentacji projektorowych

tty - nieaktualne, dla dalekopisów, terminali albo przenośnych urządzeń zograniczonymi możliwościami wyświetlania

tv - nieaktualne, dla telewizora


Wybrane cechy mediów

width - szerokość obszaru wyświetlania na urządzeniu (zwykle przelgądarka)

height - wysokość obszaru wyświetlania na urządzeniu (zwykle przeglądarka)

color - liczba bitów na składową koloru urządzenia wyjściowego

color-index - liczba kolorów, które urządzenie może wyświetlić

aspect-ratio - wartość proporcji szerokości do wysokości okna przeglądarkiinternetowej

monochrome - liczba bitów na piksel w urządzeniach monochromatycznych,jednokolorowych

orientation - określa orientację pionową lub poziomą urządzenia

resolution - rozdzielczość urządzenia wyjściowego, używane jest dpi albo dpcm

scan - określa, czy urządzenie posiada skanowanie obrazu progresywne czymiędzyliniowe

grid - określenie urządzenia z ograniczonymi możliwościami wyświetlania

device-aspect-ratio - wartość proporcji szerokości do wysokości rozdzielczościekranu urządzenia

device-height - wartość rozdzielczości ekranu urządzenia (wysokość)

device-width - wartość rozdzielczości ekranu urządzenia (szerokość)


Zapytania mediów - przykład

/* Kontener tworzący nawigację */.topnav {

overflow: hidden;background-color: #333;

}/* Linki nawigacyjne */.topnav a {

float: left;display: block;color: white;text-align: center;padding: 14px 16px;text-decoration: none;

}/* Na ekranach o 600 pixelach albo mniej ** odnośniki w menu są jeden nad drugim */@media screen and (max-width: 600px) {

.topnav a {float: none;width: 100%;

}}


Najpopularniejsze frameworki CSS

Bootstrap - http://getbootstrap.com/, najbardziej popularny

Foundation - https://get.foundation/, drugi najpopularniejszy,używany np. przez Facebook’a

Bluma - https://bulma.io/ - składa się tylko z plików CSS (nie maplików JS), dobrze wygląda z domyślnymi ustawieniami, jest nawetbardziej popularna niż Foundation, ma bardzo czytelne klasySemantic UI - https://semantic-ui.com/, innowacyjny, jegostruktura i przyjęte nazewnictwo elementów jest bardzouporządkowane logicznie, semantycznie

Pure.css - https://purecss.io/, lekki, posiada modułową budowę,napisany w czystym CSS, udostępnia tylko podstawowe style,elementy wyglądu, taki szkielet

...

Artykuł o popularnych frameworkach CSS: https://geekflare.com/best-css-frameworks/Frameworki CSS, Bootstrap 8/51

http://getbootstrap.com/

https://get.foundation/

https://bulma.io/

https://semantic-ui.com/

https://purecss.io/

https://geekflare.com/best-css-frameworks/

Inne frameworki CSS

UIkit - https://getuikit.com/

Materialize - https://materializecss.com/ - związany z Google Material

Skeleton - http://getskeleton.com/ - maksymalnie prosty responsywnyszkielet aplikacji

Milligram - https://milligram.io/

Spectre - https://picturepan2.github.io/spectre/

Picnic CSS - https://picnicss.com/

Tailwind CSS - https://tailwindcss.com/

Dead Simple Grid - https://github.com/mourner/dead-simple-grid

W3.CSS - https://www.w3schools.com/w3css- mniejszy, prostszy w użyciu

...

https://www.mockplus.com/blog/post/css-framework


https://getuikit.com/

https://materializecss.com/

http://getskeleton.com/

https://milligram.io/

https://picturepan2.github.io/spectre/

https://picnicss.com/

https://tailwindcss.com/

https://github.com/mourner/dead-simple-grid

https://www.w3schools.com/w3css

https://www.mockplus.com/blog/post/css-framework

Bootstrap


Bootstrapa: wersja 4.4.1

Ta i inne wersje dostępne na https://github.com/twbs/bootstrap/

Różne wersje dostępne również poprzez CDN

Sporo gotowych szablonów na https://startbootstrap.com/,https://www.w3schools.com/bootstrap/bootstrap_templates.asp

Przykładowy tutorial Bootstrap 4 nahttps://www.w3schools.com/bootstrap4



https://github.com/twbs/bootstrap/

https://startbootstrap.com/

https://www.w3schools.com/bootstrap/bootstrap_templates.asp

https://www.w3schools.com/bootstrap4

Bootstrap - najważniejsze informacje I

Zaprojektowany dla każdego użytkownika, do każdej możliwej aplikacji.

Ułatwia i przyśpiesza tworzenie interfejsów użytkownika (front-end).

Jest utworzony dla ludzi z różnym poziomem wiedzy, na wszystkie rodzajeurządzeń, dla projektów o dowolnych rozmiarach.

Jest projektem open source.

Jest rozwijany, przechowywany i zarządzany na GitHub:https://github.com/twbs/bootstrap

Zawiera wiele gotowych szablonów, oficjalnych i nieoficjalnych (darmowych).

Szeroko wykorzystywany - miliony stron na całym świecie zbudowano zBootstrapem.


https://github.com/twbs/bootstrap

Bootstrap - najważniejsze informacje IIPreprocesor

Bootstrap jest dostarczany ze zwykłym CSS (ang. vanilla CSS) ale jego kodźródłowy wykorzystuje Sass (preprocesor CSS).

Można szybko rozpocząć od przekompilowanego CSS albo korzystać z koduźródłowego.

Jeden framework, wiele urządzeńBootstrap z łatwością i efektywnie skaluje twoje strony i aplikacje z użyciemjednego bazowego kodu.

Działa na telefonach, tabletach i komputerach stacjonarnych dzięki CSSmedia queries (zapytania mediów).

Pełny zakres funkcjonalnościBootstrap udostępnia obszerną i dopracowaną dokumentację dlazwykłych/podstawowych elementów HTML, tuziny dodatkowychkomponentów HTML i CSS i wspaniałe wtyczki jQuery.


Bootstrap - instalacja

Mamy kilka możliwości wykorzystania Bootstrapa:

pobranie skompilowanych i zminifikowanych plików CSS i JS - wrzucamy doprojektu i używamy

samodzielna kompilacja plików źródłowych (Sass i JavaScript) - większemożliwości dostosowania biblioteki, ale trzeba się tym pobawić

wykorzystanie biblioteki dostępnej poprzez CDN:

<link rel="stylesheet"href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"crossorigin="anonymous">

...

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"crossorigin="anonymous"></script>

instalacja z menażdżera pakietów, np.: $ npm install bootstrap


Na początek - podstawowy szablon

index.html

<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<link rel="stylesheet"

href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"crossorigin="anonymous">

<title>Hello, world!</title></head><body>

<h1>Hello, world!</h1>

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"

integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"crossorigin="anonymous"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"crossorigin="anonymous"></script>

</body></html>

Na początek - przykładowe szablony

Przykładowe szablony ze strony http://getbootstrap.com/docs/4.0/examples/

szablon startowy

megabaner (ang. jumbotron)

belka nawigacyjna (ang. navbar), różne odmiany: statyczna, umieszczona nastałę, wyjustowana na środku

ablum ze zdjęcami

okładka (ang. cover), ładny szablon do tworzenia „na jednej stronie”

karuzela ze zdjęciami (ang. carousel)

blog

panel (ang. dashboard)

formularz internetowy z walidacją (ang. checkout-form)

cena produktów (ang pricing)

...


http://getbootstrap.com/docs/4.0/examples/

Przykładowe szablony - Starter template


Przykładowe szablony - Jumbotron


Przykładowe szablony - Navbar


Przykładowe szablony - Album


Przykładowe szablony - Cover


Przykładowe szablony - Carousel


Przykładowe szablony - Blog


Przykładowe szablony - Dashboard


Przykładowe szablony - Checkout Form


Przykładowe szablony - Pricing


Przykładowe szablony - Off-canvas


Darmowe i płatne bardziej profesjonalne szablony

Przykładowe szablony ze strony https://startbootstrap.com/

Business Casual

New Age

Application za 49$

...



Przykładowe szablony - Bussines Casual


Przykładowe szablony - New Age


Przykładowe szablony - Application


Układ elementów - RWD

Komponenty i opcje określające układ elementów w projekcie dotyczą:

kontenerów zawierających wewnątrz inne elementy (doc. Containers),

systemu siatki (doc. Grid),

obiektów mediów, które pozwalają na tworzenie własnych komponenów,które można wykorzystywać wielokrotnie, np. komentarze na blogu, twitty,polubienia (doc. Media object),

różnych użytecznych klas czy narzędzi pozwalających na wygodnerozmieszczanie elementów na stronie, np. pokazywanie/ukrywanieelementów, justowanie, kontrola odległości, marginesy itp. (doc. Utilities forlayout).


Układ elementów - kontenery

podstawowe elementy układu strony w Bootstrapie,

są pojemnikami na inne elementy, same z siebie nic nie dodają,

są wymagane kiedy używamy systemu siatki Bootstrapa,

możemy wybrać pomiędzy:- responsywną ale stałą szerokością kontenera, klasa .container- szerokością kontenera zajmującą zawsze cały ekran, klasa .container-fluid- pełną 100% szerokością do pewnego punktu, klasa .container-breakpoint

najczęściej używane z <div>, ale też z np. <main> <section>, ...

mogą być zagnieżdżane, ale większość stron tego nie używa.


Układ elementów - charakterystyczne szerokości ekranu

Punkty charakterystyczne responsywnej strony w Bootstrapie:

Bootstrap jest projektowany najpierw pod urządzenia mobilne,

używa zapytań o media (ang. media queries) w celu stworzenia sensownychpunktów charakterystycznych do tworzenia układów stron i interfejsów,

punkty charakterystyczne bazują głównie na minimalnej szerokości oknaprzeglądarki, pozwalają na skalowanie elementów jeśli ta szerokość się zmienia.

// Extra small devices (portrait phones, less than 576px)// No media query since this is the default in Bootstrap

// Small devices (landscape phones, 576px and up)@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)@media (min-width: 992px) { ... }

// Extra large devices (large desktops, 1200px and up)@media (min-width: 1200px) { ... }


Układ elementów - charakterystyczne szerokości ekranu

Zdefiniowanie szerokości charakterystycznych pozwala używać w kodzie SassBootstrapa odpwiednich domieszek (ang. mixin):

@include media-breakpoint-up(xs) { ... }@include media-breakpoint-up(sm) { ... }@include media-breakpoint-up(md) { ... }@include media-breakpoint-up(lg) { ... }@include media-breakpoint-up(xl) { ... }

// Example usage:@include media-breakpoint-up(sm) {.some-class {display: block;

}}

Dostępne są również domieszki pozwalające np. na zastosowanie klasy CSS tylkodo określonej wielkości ekranu:

@include media-breakpoint-only(sm) { ... }


Z-index

z-index to właściwość elementów określająca w plikach CSS ich położeniepo osi OZ,

pozwala na właściwe wyświetlanie elementów, jedne na drugich,

większa wartość oznacza położenie bardziej na wierzchu

$zindex-dropdown: 1000 !default;$zindex-sticky: 1020 !default;$zindex-fixed: 1030 !default;$zindex-modal-backdrop: 1040 !default;$zindex-modal: 1050 !default;$zindex-popover: 1060 !default;$zindex-tooltip: 1070 !default;

W tych wartościach raczej nic nie zmieniamy. Zmiana jednej wartości będziepewnie wymagała zmiany wszystkich.


Siatka I

Siatka:

elastyczny system siatki, preferuje urządzenia mobilne,

pozwala budować układy elementów wszystkich kształtów i wielkości,

posiada 12-kolumnowy układ i 5 responsywnych poziomów(domyślnie), każdy dla jednego zakresu szerokości okna,

poziomy responsywności można modyfikować w plikach Sass ikorzystając z domieszek Sass

zdefiniowane poziomy i całą siatkę używamy korzystając zpredefiniowanych klas Bootstrapa


Siatka II

Siatka:

używa serii pojemników, wierszy i kolumn w celu ułożenia i wyjustowaniazawartości,

jest elastyczna i w pełni responsywna,

kolumny w siatce są wyśrodkowane wewnątrz konterera rodzica (klasa.container),

wiersze to poziome grupy kolumn, które gwarantują prawidłowe pionowewyjustowanie kolumn,

treści umieszczamy w kolumnach i tylko one mogą być bezpośrednimdzieckiem wierszy,

wszystkie kolumny bez podanej szerokości będą ją miały taką samą, podzielądostępną szerokość po równo,

klasy kolumn określają jak dużo szerokości z 12 kolumn podstawowychchcemy wykorzystać; trzy takie same kolumny to np. .col-sm-4,

szerokości kolumn są określane w procentach więc są one płynne o rozmiarzezależnym od rozmiaru rodzica,


Siatka III

Siatka:

kolumny mają poziome dopełnienia (ang. padding), które tworzą odstępypomiędzy kolumnami; można je usunąć dodająć klasę .no-gutters dowiersza zawierającego kolumny,

jest pięć zakresów szerokości okna: extra small, small, medium, large, extralarge,

zakresy szerokości okna siatki bazują na minimalnej szerokości; zostajązastosowane do danego zakresu i wszystkich większych od niego, np.col-sm-4 odnosi się do zakresu small, medium, large i extra large,

zakresy szerokości są zależne od liczby pikseli - szerokość okna nie zależy odwielkości czcionki.

Extra small Small Medium Large Extra large<576px ≥576px ≥768px ≥992px ≥1200px

maks szer. kon. brak (auto) 540px 720px 960px 1140pxprefix .col- .col-sm- .col-md- .col-lg- .col-xl-


Siatka - automatyczny układ kolumn

Siatka - automatyczny układ kolumnBez z góry określonej szerokości, cała szerokość kontenera będzie równopodzielona pomiędzy wszystkie kolumny:

<div class="container"><div class="row"><div class="col bg-primary"> AAAAA </div><div class="col bg-faded"> BBBBB </div><div class="col bg-success"> CCCCC </div><div class="col bg-warning"> DDDDD </div>

</div>

<div class="row"><div class="col bg-success"> ... </div><div class="col bg-warning"> ... </div><div class="col bg-danger"> ... </div>

</div></div>

Siatka - automatyczny układ kolumn I

<div class="container"><div class="row"><div class="col-sm bg-success"> AAAAA </div><div class="col-sm bg-faded"> BBBBB </div><div class="col-sm bg-primary"> CCCCC </div><div class="col-sm bg-warning"> DDDDD </div>

</div><hr><div class="row"><div class="col-md-6 bg-warning"> "Lorem ipsum ..." </div><div class="col-md bg-success"> "Lorem ipsum..." </div><div class="col-md bg-danger"> "Lorem ipsum ..." </div>


Dla ekranów bardzo małych (xs), czyli poniżej md i sm, kolumny są ustawiane wstosy. Od podanego progu są one umieszczane w jednym wierszu odpowiednio godzieląc, jak obok:


Siatka - automatyczny układ kolumn II

Dla ekranów bardzo małych (xs), czyli poniżej md i sm, kolumny są ustawiane wstosy w obu wierszach, dla ekranów małych (sm), czyli poniżej md stosy są tylkow drugim wierszu:


Siatka - podana szerokość jednej kolumnySiatka - podana szerokość jednej kolumnyUstalenie szerokość jednej kolumny (niektórych z nich) spowoduje automatycznedostosowanie szerokości pozostałych:

<div class="container"><div class="row"><div class="col bg-success"> AAAAA </div><div class="col bg-faded"> BBBBB </div><div class="col-8 bg-primary"> CCCCC </div><div class="col bg-warning"> DDDDD </div>

</div><div class="row"><div class="col-6 bg-warning"> "Lorem ipsum ..." </div><div class="col bg-success"> "Lorem ipsum..." </div><div class="col bg-danger"> "Lorem ipsum ..." </div>



Siatka - szerokość zależna od zawartości

Siatka - szerokość zależna od zawartościUżycie klas col-{breakpoint}-auto pozwala kolumnom dopasować szerokość do ichzawartości. Dobrze współgra też z poziomym wyjustowaniem, łatwo wyśrodkować układprzy różnych szerokościach kolumn:

<div class="container"><div class="row"><div class="col col-md-2 bg-primary"> AAAAA </div><div class="col col-md-2 bg-faded"> BBBBB </div><div class="col col-md-auto bg-inverse text-white"> CC </div><div class="col col-md-2 bg-success"> DDDDD </div>

</div>

<div class="row"><div class="col-xs-auto bg-success"> ... </div><div class="col-xs-auto bg-warning"> ... </div><div class="col-xs-auto bg-danger"> ... </div>



Siatka - takie same kolumny w wielu wierszach

Siatka - takie same kolumny w wielu wierszachDzielimy kolumny z jednego wiersza w dowolnym miejscu wstawiając element oszerokości 100% (.w-100). Kolejne kolumny rozciągną się na kolejny wiersz:

<div class="container"><div class="row"><div class="col bg-primary"> AAAAAA </div><div class="col bg-faded"> BBBBB </div><div class="w-100"></div><div class="col bg-inverse text-white"> CCCCC </div><div class="col bg-success"> DDDDD </div><div class="col bg-warning"> EEEEE </div><div class="w-100"></div><div class="col bg-danger"> FFFFF </div><div class="col bg-info"> GGGGG </div>



Bootstrap - komponenty I

Lista komponentów z dokumentacji:

powiadomienia, informacje ostrzegawcze (doc. Alerts),

etykietki towarzyszące (plakietki, znaczki, symbole) (doc. Badge),

okruszki, nawigacja okruszkowa (z Jasia i Małgosi, doc. Breadcrumb),

przyciski (doc. Buttons),

grupy przycisków (doc. Button group),

karty (doc. Cards),

karuzela, ze zdjęciami, slajdami tekstu (doc. Carousel),

treść pokazywana/ukrywana, rozwijana zawartość (doc. Collapse),

listy rozwijane, najczęściej listy odnośników (doc. Dropdowns),

kontrolki formularzy, dużo ich... (doc. Forms),

grupy kontrolek formularza (doc. Input group),


Bootstrap - komponenty II

Lista komponentów z dokumentacji:

wielki baner, telebim (doc. Jumbotron),

grupa elementów tworząca listę (doc. List group),

okna dialogowe (doc. Modal),

elementy nawigacyjne (doc. Navs),

belka nawigacyjna, nagłówek strony z nawigacją (doc. Navbar),

paginacja, numeracja kolejnych stron (doc. Pagination),

okienka wyskakujące (pop-up) po kliknięciu (doc. Popovers),

paski postępu (doc. Progress),

szpiedzy przewijania, komponenty automatycznej aktualizacji linkównawigacyjnych zależnie przewijanej treści (doc. Scrollspy),

malutkie okienka wyskakujące (pop-up) po najechaniu na element(doc. Tooltips).


Bootstrap - elementy użytkowe I

Lista elementów użytkowych z dokumentacji:

obramowanie, brzegi (doc. Borders),

wyłączanie elementów pływających w elemencie nadrzędnym (doc. Clearfix),

ikonka zamykania (×, doc. Close icon),

kolory (doc. Colors),

właściwości wyświetlania elementów (block/inline, doc. Display property),

elementy wbudowane (iframe, embed, video, object, doc. Embeds)

rozciąganie się elementów, ich wzajemne położenie (doc. Flex),

określanie położenia elementów pływających (doc. Float),

użycie klasy .text-hide do ukrycia tekstu zastępowanego rysunkiem(doc. Image replacement),


Bootstrap - elementy użytkowe II

Lista elementów (i klas) użytkowych z dokumentacji:

pozycja, określenie położenia elementu za pomocą kilku klas (doc. Position)pozwala przypiąć element na górze lub na dole strony albo zawsze na górzeokna,

czytniki ekranowe, pozwala ukryć elementy dla wszystkich urządzeń opróczczytników ekranowych (doc. Screenreaders),

wielkości, określenie szerokości/wysokości elementu (doc. Sizing),

odstępy, określanie marginesu i dopełnienia (ang. padding) (doc. Spacing),

operacje z tekstem, wyjustowanie, przepływ, transformacje, rodzaj i stylczcionki (doc. Text)

wyjustowanie pionowe (doc. Vertical align),

widoczność elementów, użycie klasy .invisible pozwalającej ukryć element(doc. Visibility).


Bootstrap - elementy dodatkowe - ikony

Sam w sobie nie zawiera żadnego zestawu ikon, ale rekomenduje kilka z nich:

Font Awesome - https://fontawesome.com/Feather - https://feathericons.com/Octicons - https://octicons.github.com/

Preferowane są ikony w formacie SVG.


https://fontawesome.com/

https://feathericons.com/

https://octicons.github.com/

Źródła

https://www.w3.org/TR/css3-mediaqueries/

http://webkod.pl/kurs-css/lekcje/dzial-1/css3-media-queries

https://www.w3schools.com/cssref/css3_pr_mediaquery.asp


https://kursbootstrap.pl/





https://www.w3.org/TR/css3-mediaqueries/

http://webkod.pl/kurs-css/lekcje/dzial-1/css3-media-queries

https://www.w3schools.com/cssref/css3_pr_mediaquery.asp


https://kursbootstrap.pl/




Frameworki CSS, Bootstrap - rperlinski.pl

Documents

Transcript of Frameworki CSS, Bootstrap - rperlinski.pl