Frameworki CSS, Bootstrap · Technika CSS wprowadzona w CSS3. Używa reguły @media żeby...

Frameworki CSS, BootstrapTworzenie serwisów Web 2.0

dr inż. Robert Perliń[email protected]

20 kwietnia 2020

Plan prezentacji

Spis treści

1 Media queries 1

2 Frameworki RWD, CSS, Front-end 3

3 Bootstrap 43.1 Na początek . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63.2 Układ elementów . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73.3 Komponenty składowe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 123.4 Narzędzia użytkowe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 133.5 Elementy dodatkowe - ikony . . . . . . . . . . . . . . . . . . . . . . . . . . 14

4 Źródła 14

1 Media queries

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śli warunek jest praw-dziwy. Przykłady:

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

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

background-color: lightblue;}

}

• kiedy ekran (okno przeglądarki) stanie się mniejsze niż 768 pikseli, każda kolumna będziemiała szerokość 100%:

1

@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óżnych rodzajó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 do sprawdzeniawielu rzeczy, np.:

– szerokości i wysokości okna roboczego,

– szerokości i wysokości ekranu urządzenia

– orientacji (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.

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ń z ograniczonymi moż-liwościami wyświetlania

• tv - nieaktualne, dla telewizora

2

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ądarki internetowej

• 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 czy międzyliniowe

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

• device-aspect-ratio - wartość proporcji szerokości do wysokości rozdzielczości ekranu urządze-nia

• 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%;

}}

2 Frameworki RWD, CSS, Front-end

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 ma plików JS),dobrze wygląda z domyślnymi ustawieniami, jest nawet bardziej popularna niż Fo-undation, ma bardzo czytelne klasy

• Semantic UI - https://semantic-ui.com/, innowacyjny, jego struktura i przyjętenazewnictwo elementów jest bardzo uporządkowane logicznie, semantycznie

3

http://getbootstrap.com/

https://get.foundation/

https://bulma.io/

https://semantic-ui.com/

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

• ...

Artykuł o popularnych frameworkach CSS: 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 responsywny szkielet aplika-cji

• 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

3 Bootstrap

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 na https://www.w3schools.com/bootstrap4

4

https://purecss.io/

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

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


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

https://startbootstrap.com/

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

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 rodzaje urządzeń, dlaprojektó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 z Bootstrapem.

Bootstrap - najważniejsze informacje IIPreprocesor

• Bootstrap jest dostarczany ze zwykłym CSS (ang. vanilla CSS ) ale jego kod źródłowywykorzystuje 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życiem jednegobazowego kodu.

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

Pełny zakres funkcjonalności

• Bootstrap udostępnia obszerną i dopracowaną dokumentację dla zwykłych/podstawowychelementów HTML, tuziny dodatkowych komponentów HTML i CSS i wspaniałe wtyczkijQuery.

Bootstrap - instalacjaMamy kilka możliwości wykorzystania Bootstrapa:

• pobranie skompilowanych i zminifikowanych plików CSS i JS - wrzucamy do projektu iużywamy

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

• wykorzystanie biblioteki dostępnej poprzez CDN:

5

https://github.com/twbs/bootstrap


• 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)

• ...

Darmowe i płatne bardziej profesjonalne szablonyPrzykładowe szablony ze strony https://startbootstrap.com/

• Business Casual

• New Age

• Application za 49$

• ...

3.2 Układ elementów

Układ elementów - RWDKomponenty 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 wy-korzystywać wielokrotnie, np. komentarze na blogu, twitty, polubienia (doc. Media object),

• różnych użytecznych klas czy narzędzi pozwalających na wygodne rozmieszczanie elemen-tów na stronie, np. pokazywanie/ukrywanie elementów, justowanie, kontrola odległości,marginesy itp. (doc. Utilities for layout).

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.

7


Układ elementów - charakterystyczne szerokości ekranuPunkty charakterystyczne responsywnej strony w Bootstrapie:

• Bootstrap jest projektowany najpierw pod urządzenia mobilne,

• używa zapytań o media (ang. media queries) w celu stworzenia sensownych punktów charaktery-stycznych do tworzenia układów stron i interfejsów,

• punkty charakterystyczne bazują głównie na minimalnej szerokości okna przeglą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 ekranuZdefiniowanie szerokości charakterystycznych pozwala używać w kodzie Sass Bootstrapa

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 tylko do określo-nej wielkości ekranu:

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

8

Z-index

• z-index to właściwość elementów określająca w plikach CSS ich położenie po 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ędzie pewnie wymagałazmiany wszystkich.

Siatka

Siatka ISiatka:

• 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 dlajednego zakresu szerokości okna,

• poziomy responsywności można modyfikować w plikach Sass i korzystając z domie-szek Sass

• zdefiniowane poziomy i całą siatkę używamy korzystając z predefiniowanych klasBootstrapa

Siatka IISiatka:

• używa serii pojemników, wierszy i kolumn w celu ułożenia i wyjustowania zawartoś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 pionowe wyjustowaniekolumn,

• treści umieszczamy w kolumnach i tylko one mogą być bezpośrednim dzieckiem 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 podstawowych chcemy wykorzy-stać; trzy takie same kolumny to np. .col-sm-4,

• szerokości kolumn są określane w procentach więc są one płynne o rozmiarze zależnym odrozmiaru rodzica,

9

Siatka IIISiatka:

• kolumny mają poziome dopełnienia (ang. padding), które tworzą odstępy pomiędzy ko-lumnami; można je usunąć dodająć klasę .no-gutters do wiersza zawierającego kolumny,

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

• zakresy szerokości okna siatki bazują na minimalnej szerokości; zostają zastosowane dodanego 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 od wielkościczcionki.

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 kolumnSiatka - automatyczny układ kolumnBez z góry określonej szerokości, cała szerokość kontenera będzie równo podzielona 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 w stosy. Odpodanego progu są one umieszczane w jednym wierszu odpowiednio go dzieląc, jak obok:

10

Siatka - automatyczny układ kolumn IIDla ekranów bardzo małych (xs), czyli poniżej md i sm, kolumny są ustawiane w stosy w

obu wierszach, dla ekranów małych (sm), czyli poniżej md stosy są tylko w drugim wierszu:

Siatka - podana szerokość jednej kolumnySiatka - podana szerokość jednej kolumnyUstalenie szerokość jednej kolumny (niektórych z nich) spowoduje automatyczne dostosowa-

nie 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>


11

Siatka - szerokość zależna od zawartościSiatka - szerokość zależna od zawartościUżycie klas col-{breakpoint}-auto pozwala kolumnom dopasować szerokość do ich zawartości.

Dobrze współgra też z poziomym wyjustowaniem, łatwo wyśrodkować układ przy różnych szerokościachkolumn:

<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 wierszachSiatka - takie same kolumny w wielu wierszachDzielimy kolumny z jednego wiersza w dowolnym miejscu wstawiając element o szerokoś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>


3.3 Komponenty składowe

Bootstrap - komponenty ILista 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),

12

• 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 IILista 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ów nawigacyjnych za-leżnie przewijanej treści (doc. Scrollspy),

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

3.4 Narzędzia użytkowe

Bootstrap - elementy użytkowe ILista 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 replace-ment),

13

Bootstrap - elementy użytkowe IILista elementów (i klas) użytkowych z dokumentacji:

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

• czytniki ekranowe, pozwala ukryć elementy dla wszystkich urządzeń oprócz czytnikówekranowych (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 styl czcionki (doc.Text)

• wyjustowanie pionowe (doc. Vertical align),

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

3.5 Elementy dodatkowe - ikony

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.

4 Źródła

Ź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

• http://getbootstrap.com/

14

https://fontawesome.com/

https://feathericons.com/

https://octicons.github.com/

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://startbootstrap.com/

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

• https://feathericons.com/

15

https://kursbootstrap.pl/



https://feathericons.com/

Frameworki CSS, Bootstrap · Technika CSS wprowadzona w CSS3. Używa reguły @media żeby...

Documents

Transcript of Frameworki CSS, Bootstrap · Technika CSS wprowadzona w CSS3. Używa reguły @media żeby...