Bootstrap aneb je to sice rychlejší, ale zato lepší výsledek
Vložit
- čas přidán 19. 06. 2024
- Bootstrap skýtá úžasné možnosti při formátování obsahu webových stránek, a to dokonce při menším úsilí, než v případě vlastnoručního klasického formátování prostřednictvím kaskádových stylů. Představíme si tuto technologii, ukážeme si, jak ji přidat do svého projektu a jaké možnosti řešení layoutu a responzivity nabízí. Následně si vytvoříme plnohodnotnou one-page stránku s mnoha sekcemi, na kterých si postupně ukážeme jednotlivé možnosti a konstrukce, ale i celkovou filozofii Bootstrapu, jako komplexního nástroje pro koncepční rychlou tvorbu moderních, vzhledných a přizpůsobivých webů.
0:00:00 - Připojení Bootstrapu
0:01:58 - Instalace vhodných rozšíření do Visual Studia Code
0:05:21 - Horizontální řešení layoutu stránky
0:13:46 - Skrytí/zobrazení/výměna prvků na základě šířky okna
0:16:40 - One-page stránka - ukázka plánovaného výsledku
0:18:32 - Základní HTML dokument
0:19:10 - Navigace (menu)
0:22:37 - Bootstrap ikony
0:25:18 - Navigace - dokončení
0:31:26 - Tmavý panel s výzvou
0:36:49 - Formulář pro přihlášení k newsletteru s odezvou
0:42:43 - Obrázek vpravo
0:44:58 - Podporované systémy - 3/2/1 položek vedle sebe
0:51:01 - Carousel - prezentace obrázků
0:57:49 - Karty s tarify
1:06:11 - Modální dialog
1:08:04 - FAQ - Otázky a rozevírací odpovědi
1:11:57 - Zápatí stránky (footer)
1:12:50 - Rekapitulace
1:17:13 - Konec
Celá série: • Weby
Aktuální hlasované díly: • Hlasování
Prodloužená verze, zdrojové kódy a další části: herohero.co/petrvobornik
Aktuální informace: / programovat - Věda a technologie
Pekná ukážka, dávno som dačo s Bootstrap neriešil, akurát viem že sa tiež pekne vyvíja... A teda vidím v praxi že sa s tým dá pekne a jednoducho robiť základný web.
Za mě Bootstrap má pořád smysl, i když je dneska trend nechat generovat kód automaticky viz. Figma, Canva, elementor a další, ale pak co z toho leze je katastrofa. Takto má člověk pořád kontrolu nad kódem nehledě k rychlosti, kdy se nemusí načítat spousta balastu ... Díky za připomenutí :)
HTML a CSS kód generovaný od AI je dobrá, ale zatím ne úplně všespásná, pomůcka. Úplně super je to na menší části, ze kterých se to poskládá, nebo konkrétní CSS triky, ale celoweb se mi od toho zatím moc nelíbil. Na druhou stranu to lze vzít jako základ a doladit si ho, ať již vlastními úpravami, nebo nutit AI, aby to postupně přegenerovávala do našich představ.
Každopádně se to zatím bez vlastní znalosti syntaxe, prostředí a triků daného kódu jen těžko obejde. S ní je AI skvělý pomocník, bez znalostí ty výsledky zatím nebývají nic moc. Ale časem se může ještě leccos změnit, i když spoléhejte se kompletně na kód od AI, který nikdo živý nezkontroloval. U HTML a CSS asi ještě OK, tam se to dá otestovat, ale ve funkčních jazycích se může skrývat všelijaké překvapení ;)
Podle mě jsou Bootstrap a jiné CSS frameworky odporné co se kódu týče. Oddělovat CSS od HTML má význam.
Souhlasím, ale je to různé projekt od projektu. Ideální je mít přehled o obojím (popř. i o dalších CSS frameworcích) a zvolit si to pravé pro každý z nich. CSS bylo probráno v předchozí části série: czcams.com/video/9ZXKMTUN3DU/video.html
Vezme-li se to ale doslovně, tak oddělené to stále je a hodnoty proměnných (barev, koeficientů apod.) umožňuje Bootstrap snadno změnit externím přídavkem. Pokud jde o "ohýbání" HTML kódu pro jeho potřeby, tak u CSS se bez toho lze také jen stěží obejít.
Bootstrap nebrání použití vlastních CSS tříd jen nabízí spoustu již hotových, které mohou některé (především začínající) vývojáře vést i k vyšší konzistentnosti webu a lepšímu uživatelskému zážitku, než při úplné volnosti a zároveň nutnosti neustále psát vlastní CSS třídy. Takové opakování obvykle postupem času vede systematičtěji smýšlející autory k vývoji vlastního podobného frameworku jako je Bootstrap, což i kdyby bylo cílem plánovaným, může být on dobrou inspirací či základem pro urychlení tohoto procesu.
Co se týče uživatelů, ne všichni vítají weby, které jsou od všech ostatních odlišné, ale jsou-li zvyklí na určité barvy, tvary a systematičnosti v jedné aplikaci, většina jich uvítá, když s učením té další nebudou muset začínat od začátku, ale budou moci aplikovat již dříve naučená schémata. Ale jak říkám, je to individuální, jak u uživatelů, tak u vývojářů, naštěstí možností obou stran jsou nepřeberné. Některé z nich se pokusím v této sérii nastínit.