Frameworki CSS, Bootstrap - rperlinski.pl

Post on 18-May-2022

14 views 0 download

Transcript of Frameworki CSS, Bootstrap - rperlinski.pl

Frameworki CSS, BootstrapTworzenie serwisów Web 2.0

dr inż. Robert Perlińskirperlinski@icis.pcz.pl

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

Frameworki CSS, Bootstrap 2/51

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

}

Frameworki CSS, Bootstrap 3/51

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

Frameworki CSS, Bootstrap 5/51

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ść)

Frameworki CSS, Bootstrap 6/51

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

}}

Frameworki CSS, Bootstrap 7/51

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

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

Frameworki CSS, Bootstrap 9/51

Bootstrap

http://getbootstrap.com/

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

Frameworki CSS, Bootstrap 10/51

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.

Frameworki CSS, Bootstrap 11/51

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.

Frameworki CSS, Bootstrap 12/51

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

Frameworki CSS, Bootstrap 13/51

Bootstrap - zawartość

Prekompilowana zawartość biblioteki Bootstrap:

bootstrap/|-- css/| |-- bootstrap.css| |-- bootstrap.css.map| |-- bootstrap.min.css| |-- bootstrap.min.css.map| |-- bootstrap-grid.css| |-- bootstrap-grid.css.map| |-- bootstrap-grid.min.css| |-- bootstrap-grid.min.css.map| |-- bootstrap-reboot.css| |-- bootstrap-reboot.css.map| |-- bootstrap-reboot.min.css| '-- bootstrap-reboot.min.css.map'-- js/

|-- bootstrap.bundle.js|-- bootstrap.bundle.js.map|-- bootstrap.bundle.min.js|-- bootstrap.bundle.min.js.map|-- bootstrap.js|-- bootstrap.js.map|-- bootstrap.min.js'-- bootstrap.min.js.map

Frameworki CSS, Bootstrap 14/51

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

<!-- Bootstrap CSS --><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>

<!-- Optional JavaScript --><!-- jQuery first, then Popper.js, then Bootstrap JS --><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/popper.js@1.16.0/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>

Frameworki CSS, Bootstrap 15/51

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)

...

Frameworki CSS, Bootstrap 16/51

Przykładowe szablony - Starter template

Frameworki CSS, Bootstrap 17/51

Przykładowe szablony - Jumbotron

Frameworki CSS, Bootstrap 18/51

Przykładowe szablony - Navbar

Frameworki CSS, Bootstrap 19/51

Przykładowe szablony - Album

Frameworki CSS, Bootstrap 20/51

Przykładowe szablony - Cover

Frameworki CSS, Bootstrap 21/51

Przykładowe szablony - Carousel

Frameworki CSS, Bootstrap 22/51

Przykładowe szablony - Blog

Frameworki CSS, Bootstrap 23/51

Przykładowe szablony - Dashboard

Frameworki CSS, Bootstrap 24/51

Przykładowe szablony - Checkout Form

Frameworki CSS, Bootstrap 25/51

Przykładowe szablony - Pricing

Frameworki CSS, Bootstrap 26/51

Przykładowe szablony - Off-canvas

Frameworki CSS, Bootstrap 27/51

Darmowe i płatne bardziej profesjonalne szablony

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

Business Casual

New Age

Application za 49$

...

Frameworki CSS, Bootstrap 28/51

Przykładowe szablony - Bussines Casual

Frameworki CSS, Bootstrap 29/51

Przykładowe szablony - New Age

Frameworki CSS, Bootstrap 30/51

Przykładowe szablony - Application

Frameworki CSS, Bootstrap 31/51

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

Frameworki CSS, Bootstrap 32/51

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.

Frameworki CSS, Bootstrap 33/51

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) { ... }

Frameworki CSS, Bootstrap 34/51

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) { ... }

Frameworki CSS, Bootstrap 35/51

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.

Frameworki CSS, Bootstrap 36/51

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

Frameworki CSS, Bootstrap 37/51

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,

Frameworki CSS, Bootstrap 38/51

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-

Frameworki CSS, Bootstrap 39/51

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><!-- /.container -->

Frameworki CSS, Bootstrap 40/51

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>

</div></div><!-- /.container -->

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:

Frameworki CSS, Bootstrap 41/51

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:

Frameworki CSS, Bootstrap 42/51

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>

</div></div><!-- /.container -->

Frameworki CSS, Bootstrap 43/51

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>

</div></div><!-- /.container -->

Frameworki CSS, Bootstrap 44/51

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>

</div></div><!-- /.container -->

Frameworki CSS, Bootstrap 45/51

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

Frameworki CSS, Bootstrap 46/51

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

Frameworki CSS, Bootstrap 47/51

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

Frameworki CSS, Bootstrap 48/51

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

Frameworki CSS, Bootstrap 49/51

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.

Frameworki CSS, Bootstrap 50/51

Ź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/

https://kursbootstrap.pl/

https://startbootstrap.com/

https://github.com/twbs/bootstrap

https://feathericons.com/

Frameworki CSS, Bootstrap 51/51