Nadpis 1

Podbarvení celého bloku.
Použité třídy .bg-light pro podbarevení a .py-5 pro odsazení (popsáno níže).

Nadpis 2

Podbarvení vnitřku bloku. Třída .bg-light byla použita uvnitř na div .container.

Nadpis 2

Podbarvení vnitřku bloku. Třída .bg-primary byla použita uvnitř na div .container.

Toto je p

Toto je H1

Celý blok je v třídě .ulp-headpage-v1 pro centrování.

Také mohu psát tmavě modře .ulp-color-primary (tedy výchozí barva.

Také mohu psát světle modře .ulp-color-secondary.

Toto je p

Toto je H1 inverzního bloku

Celý blok je v třídě .ulp-inverse pro inverzní barvy.

Také mohu psát tmavě modře .ulp-color-primary (tedy výchozí barva.

Také mohu psát světle modře .ulp-color-secondary.

Nadpis na obrázku

Popis obrázku. Celý blok je v třídě .ulp-headpage-v2.

Video

Nadpis h2

Blok je v .ulp-video a text je vycentrovaný pomocí .text-center.

Popis videa

Ano Pavle, jdu do toho!

Chci využít příležitosti…

Zbývající čas do půlnoci

00 : 00 : 00 : 00

Velký button má třídu .ulp-cta a velký text hodin .display-4 a ztučněný pomocí .font-weight-bold.

Odpočet funguje díky třídě .countdown a vlastnosti data-end-date="2024-03-17T00:00:00".

Aby se text nadpisu dopisoval, stačí použít třídu .write-it.

Také mohu psát tmavě modře .ulp-color-primary (tedy výchozí barva.

Také mohu psát světle modře .ulp-color-secondary.

Zde je jednoduchý oddělovač hr a za ním následuje kratší s třídou .w-60 a výraznější s třídou .bold.

Aplikace

Obal má graident pozadí díky třídě .ulp-gradient a zaoblení rohů díky .rounded + padding díky .p-5.
Nadpis má třídu .font-weight-bold, která jej ztuční.
Buttony pak mají třídy .btn a .ulp-btn-app.

Ke stažení na

App Store

Ke stažení na

Google Play

Ke stažení na

Windows Store

Aplikace

Dle detekce systému – tím, že blok má třídu .ulp-detect-system a buttony .ulp-win, .ulp-apl, .ulp-ggl.

Orámovaný text černě díky třídě .ulp-outline-black a .text-white.

Orámovaný text bíle díky třídě .ulp-outline-white.

Ke stažení na

App Store

Ke stažení na

Google Play

Ke stažení na

Windows Store

H2:Řešíme tu proklad mezi řádky v odstavci

Nastaven řádkový proklad na 1. Zde je první text na této odrážce, který vlastně zobrazuje to, co má být na prvním puntíku. Tento text je dlouhý alespoň přes 2 řádky. Tento text má třídu .ulp-lh-1 pro line-height: 1; A ještě k tomu přidávám text, aby to bylo více vidět ... jsem totiž stále na první odrážce.
Nastaven řádkový proklad na originál!A pak následuje druhá odrážka, také je dobré vidět, jak vypadá přes dva řádky. Tak snad je to dost dlouhé. A ještě k tomu po druhé - dám a přidávám text, aby to bylo více vidět ... jsem totiž stále na druhé odrážce.
Nastaven řádkový proklad na 1,1.Tedy je to třetí odrážka, která je hooodně dlouhá. Tento text má třídu .ulp-lh-1-1 pro line-height: 1.1; A ještě k tomu přidávám text, aby to bylo více vidět ... jsem totiž stále na třetí odrážce.
Čtvrtá odrážka
Pátá odrážka

H4:Velká kolečka v odrážkách

první velké kolečko ul má třídu .ul-big-bullets
druhé velké kolečko
třetí velké kolečko

první velké kolečko v barvě s třídou .color
druhé velké kolečko v barvě
třetí velké kolečko v barvě

Samozřejmě pod tím může být hned třeba p styl pro klasický text atd.

H2: řešíme tu proklad za odstavcem, ponechávám výchozí proklad mezi řádky

Nastaveno odsazení za odstavcem na originál! Tedy podle konstanty! A pak následuje druhá odrážka, také je dobré vidět, jak vypadá přes dva řádky. Tak snad je to dost dlouhé A ještě k tomu po prvé - dám a přidávám text, aby to bylo více vidět ... jsem totiž stále na první odrážce.
Nastaveno odsazení za odstavcem s nulovým odsazením Tedy použiji .mb-0 Zde je první text na této číselné odrážce, který vlastně zobrazuje to, co má být na prvním puntíku. Tento text je dlouhý alespoň přes 2 řádky. Snad i delší, aby to prostě bylo vidět! Tento text má třídu viz výše A ještě k tomu přidávám text, aby to bylo více vidět ... jsem totiž stále na druhé odrážce.
Nastaveno odsazení za odstavcem na 1. Tedy použiji .mb-1 Třetí číselná odrážka. Také obsahuje dlouhý text, co už se dá dělat. Chci vidět, jak si to celé mohu řídit! Tento text je opět dlouhý. Tak snad to bude přes více řádků. A ještě k tomu přidávám text, aby to bylo více vidět ... jsem totiž stále na třetí odrážce.
Čtvrtá odrážka - použiji .mb-2 tak se podívej na předchozí, jak to máme daleko od sebe. 444 Koukám na to, jak se tak děje. Zkrátka a dobře je tu další dlouhý text, ale tento nás nezajímá, protože předchozí je řádkování MEZI odstavci. Tak koukej na tu čtvrtou odrážku.
Pátá odrážka - použiji .mb-3 tak se podívej na předchozí, jak to máme daleko od sebe. Koukám na to, jak se tak děje. Zkrátka a dobře je tu další dlouhý text, ale tento nás nezajímá, protože předchozí je řádkování MEZI odstavci. 555 Tak koukej na tu pátou odrážku.
Šestá odrážka - použiji .mb-4 tak se podívej na předchozí, jak to máme daleko od sebe. Koukám na to, jak se tak děje. Tento text je dlouhý alespoň přes 2 řádky. 666 Snad i delší, aby to prostě bylo vidět! A ještě k tomu přidávám text, aby to bylo více vidět
Sedmá odrážka - použiji .mb-5 tak se podívej na předchozí, jak to máme daleko od sebe. Koukám na to, jak se tak děje. Zkrátka a dobře je tu další dlouhý text, ale tento nás nezajímá, protože předchozí je řádkování MEZI odstavci. 777 Tak koukej na tu sedmou odrážku.
Osmá odrážka - použiji .*** bez *** tak se podívej na předchozí, jak to máme daleko od sebe. Koukám na to, jak se tak děje. Tento text je dlouhý alespoň přes 2 řádky. Snad i delší, aby to prostě bylo vidět! A ještě k tomu přidávám text, aby to bylo více vidět

a také vnořené odrážky:

První odrážka úrovně 1
Druhá odrážka úrovně 1 - zde není LI ukončeno a je za ním hned UL další úrovně
- První odrážka úrovně 2
- Druhá odrážka úrovně 2
- Třetí odrážka úrovně 2

a odrážky s vlastními ikonami, když list má třídu .list-unstyled

➡️ Ikona 1 a k ní je jiná varianta (bacha, przní se to kopírováním - ve zdroji to vypadá stejně!!!): ➡
✅ Ikona 2
▶️ Ikona 3

Seznam s ikonkami

Ikonka šipka

Ikonka obálky

Ikonka check

Větší primární tlačítko

Větší je díky třídě .btn-lg

Zvýrazněné bloky

Styl díky třídě .ulp-list-group

Ikonka šipka

Ikonka obálky

Ikonka check

Popis položky s ikonnkou check

Odkaz na všechny svg ikonky boostrapu je zde

Bloky 4:4:4

Funkce objevení díky parametrům
data-aos="fade-up" data-aos-duration="1000" data-aos-delay="300" data-aos-once="true".
Více informací o fungování JS knihovny zde.

Toto je klasický paragraf
Toto je menší paragraf pod ním

H1 bold: Odsazení

Celý blok je vnitřně odsazen po ose Y díky třídě .py-5.
To odpovídá vlastnosti padding-top: 5rem; padding-bottom: 5rem;.

Vnější odsazení je pak analogicky možné přidat, nebo vynulovat třídou .mb-0,
která v tomto případě nastaví margin-bottom: 0;.

V podstatě jde o py - padding v Y, px - padding v X .... (např. px-5, py-5)

Analogicky my - margin v Y, mx - margin v X .... (např. mx-5, my-5) ... otázka, má to v textu význam?

... a nebo také mohu po jednotlivých stranách - po p či m použít: l - left, r - right, t - top, b - bottom

Podrobněji popsáno zde.

H1 bold: Centrování textu

Tento nemá nastavenou třídu, je to VLEVO

Tento má nastavenou třídu .text-center, je to CENTROVANÉ

Tento má nastavenou třídu .text-right, je to VPRAVO

Text který se počítá 0 a mění text.

Aby se číslo napočítalo, musí mít třídu .counter a vlastnosti data-start="0" data-end="150" data-time="3000".

Aby se měnil text, musí mít třídu .text-changer a vlastnosti data-texts='["První text", "Druhý text"]'.

Barevně zvýrazněná jsou slova díky třídě .ulp-color-primary.

Akordeon pro často kladené otázky

Otázka číslo #1

Vlastní styl akordeonu je dán tím, že má obalující prvek .card navíc třídu .ulp-accordion-card a tlačítko má třídu .ulp-btn-accordion.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Otázka číslo #2

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Otázka číslo #3

H1 styl nadpisu

H2 styl nadpisu hned po H1

H3 styl nadpisu hned po H2

H4 styl nadpisu hned po H3

H1 s následujícím p

První krátký text, který je přímo pod H1 stylem.

H2 s následujícím p

První krátký text, který je přímo pod H2 stylem.

H3 s následujícím p

První krátký text, který je přímo pod H3 stylem.

H4 s následujícím p

První krátký text, který je přímo pod H4 stylem.

H1 s následujícím dlouhým p

První dlouhý text, který je přímo pod H1 stylem. Jde o text, který musím donutit, aby šel na další řádek a byla zřejmá proporcionalita. Konec prvního p pod H1

H2 s následujícím dlouhým p

První dlouhý text, který je přímo pod H2 stylem. Jde o text, který musím donutit, aby šel na další řádek a byla zřejmá proporcionalita. Konec prvního p pod H2

H3 s následujícím dlouhým p

První dlouhý text, který je přímo pod H3 stylem. Jde o text, který musím donutit, aby šel na další řádek a byla zřejmá proporcionalita. Konec prvního p pod H3

H4 s následujícím dlouhým p

První dlouhý text, který je přímo pod H4 stylem. Jde o text, který musím donutit, aby šel na další řádek a byla zřejmá proporcionalita. Konec prvního p pod H4

H1 s následujícím dvěma dlouhými p

První dlouhý text, který je přímo pod H1 stylem. Jde o text, který musím donutit, aby šel na další řádek a byla zřejmá proporcionalita. Konec prvního p pod H1

Druhý dlouhý text, kde se snažím, aby to bylo zase (alespoň) na dva řádky. Jde mi o tu vizuální příjemnou proporcionalitu mezí řádkováním a odělením stylů

H2 s následujícím dvěma dlouhými p

První dlouhý text, který je přímo pod H2 stylem. Jde o text, který musím donutit, aby šel na další řádek a byla zřejmá proporcionalita. Konec prvního p pod H2

Druhý dlouhý text, kde se snažím, aby to bylo zase (alespoň) na dva řádky. Jde mi o tu vizuální příjemnou proporcionalitu mezí řádkováním a odělením stylů

H3 s následujícím dvěma dlouhými p

První dlouhý text, který je přímo pod H3 stylem. Jde o text, který musím donutit, aby šel na další řádek a byla zřejmá proporcionalita. Konec prvního p pod H3

Druhý dlouhý text, kde se snažím, aby to bylo zase (alespoň) na dva řádky. Jde mi o tu vizuální příjemnou proporcionalitu mezí řádkováním a odělením stylů

H4 s následujícím dvěma dlouhými p

První dlouhý text, který je přímo pod H4 stylem. Jde o text, který musím donutit, aby šel na další řádek a byla zřejmá proporcionalita. Konec prvního p pod H4

Druhý dlouhý text, kde se snažím, aby to bylo zase (alespoň) na dva řádky. Jde mi o tu vizuální příjemnou proporcionalitu mezí řádkováním a odělením stylů

H2 za kterou následují texty a odrážky

Zde mohu psát dlouhý text, který je přímo pod H2 stylem. Jde o text, aby šel na další řádek a byla zřejmá proporcionalita. Konec prvního p pod H2 a v podstatě je to uvození pro UL

první krátký text na odrážce
druhý krátký text
ale také to může být třetí hooooodně ukecaná odrážka, která to možná může rozbořit, ale prostě musí na další řádek
čtvrtá odrážka
a pátá vlastnost

H2 možná s modifikátorem oddálení od předchozího

A zase zde mohu psát dlouhý text, který je přímo pod H2 stylem. Jde o text, aby šel na další řádek a byla zřejmá proporcionalita. A tady je ukázka UL, které se modifikuje na základní barvu.

první krátký text na odrážce
také mohu napsat dlouhý text této odrážky, protože je člověk někdy ukecanej, ale z marketingu je to na prd
ale také to může být třetí hooooodně ukecaná odrážka, která to možná může rozbořit, ale prostě musí na další řádek
čtvrtá odrážka
a pátá vlastnost

H2 přes celou šířku dané sekce

Tady je kec přes celou šířku. Zde mohu psát dlouhý text, který je přímo pod H2 stylem. Jde o text, aby šel na další řádek a byla zřejmá proporcionalita. Konec prvního p pod H2 a teď následují 2 sloupce 6:6

6:6 sloupce, vlevo text s odrážkami
druhý krátký text
ale také to může být třetí hooooodně ukecaná odrážka, která to možná může rozbořit, ale prostě musí na další řádek
čtvrtá odrážka
a pátá vlastnost

Uvozuji MALÝ obrázek napravo

H2 přes celou šířku dané sekce

Uvozuji VELIKÝ obrázek napravo, který je v kódu na prvním místě, ale vizuálně je vpravo díky třídě .order-3, pro změnu pořadí.

6:6 sloupce, vlevo text s odrážkami
druhý krátký text
ale také to může být třetí hooooodně ukecaná odrážka, která to možná může rozbořit, ale prostě musí na další řádek
čtvrtá odrážka
a pátá vlastnost

H2 přes celou šířku dané sekce

6:6 sloupce, vlevo text s odrážkami
druhý krátký text
ale také to může být třetí hooooodně ukecaná odrážka, která to možná může rozbořit, ale prostě musí na další řádek
čtvrtá odrážka
a pátá vlastnost

Uvozuji NizkySirokyObrazek obrázek napravo

H2 přes celou šířku dané sekce

6:6 sloupce, vlevo text s odrážkami
druhý krátký text
ale také to může být třetí hooooodně ukecaná odrážka, která to možná může rozbořit, ale prostě musí na další řádek
čtvrtá odrážka
a pátá vlastnost

Uvozuji UzkyVysokyObrazek obrázek napravo

1.2.2024

Porod EDUnina

Milé děti, milý čtenáři (všichni jsme nečí děti). Byla jednou jedna taková divná doba, která se vyznačovala tím, že bylo „zakázáno vycházení ven a už vůbec ne do školy“. A tak se jeden pozorovatel díval na jednu úču, jak to s tím učením páchá. A mezi námi, ...

zarovnat vpravo pomocí .text-right ... pokračování článku ➡ ▶️