frameworki css, bootstrap - rperlinski.pl
TRANSCRIPT
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
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/[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>
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