V roce 2011 Twitter představil rámec Bootstrap. Od té doby prošel tento CSS framework dvěma velkými přepisy, přičemž ten nejnovější (Bootstrap 3) byl vydán v roce 2013. Bootstrap 3 transformoval knihovnu CSS implementací mobilního přístupu, který nechal framework zcela reagovat.
Od roku 2022 je Bootstrap ve verzi 5 a je jedním z nejpopulárnějších frontend frameworků. Má rozsáhlý seznam předem sestavených komponent a působivou sbírku pluginů JavaScriptu. V tomto článku se dozvíte, jak používat Bootstrap a jak co nejlépe využít jeho funkce.
Instalace Bootstrapu ve vašem projektu
Existují tři způsoby, jak použijte ve svém projektu Bootstrap. Můžete si stáhnout a hostit soubory CSS a JavaScript, nainstalovat je do projektu pomocí npm nebo zkopírovat a vložit příslušné odkazy cdn do svého projektu.
S přístupem cdn musíte pamatovat na umístění odkazu Bootstrap před jakýkoli jiný odkaz CSS do značky head vašeho souboru HTML.
Některé komponenty Bootstrap mají funkční aktivity, jako je přepínání a umístění tlačítek, které vyžaduje import skriptů JavaScript a Popper. Pokud tedy máte v úmyslu použít nějaké funkční komponenty, budete muset do souboru HTML přidat také značku skriptu.
Poslední věc, kterou potřebujete, abyste mohli začít používat Bootstrap, je výřez štítek.
Protože Bootstrap je mobilní technologie, výřez štítek pomůže v responzivním designu. Jednoduchý způsob, jak použít bootstrap ve vašem projektu, je pouze zkopírovat Startovací šablona bootstrapu.
Vytvoření webu pomocí Bootstrapu
Když vytváříte nový web, jedna z prvních věcí, kterou musíte zvážit, je rozvržení. Poté se můžete přesunout k dalším komponentám, jako jsou tlačítka a typografie.
Bootstrap má kolekci strukturálních komponent, které můžete použít k uspořádání prvků na webové stránce. Tyto struktury rozložení zahrnují:
- Kontejnery
- Mřížka
- Sloupce
- Žlaby
- Body zlomu
Pomocí mírně pozměněné verze startovací šablony Bootstrap můžete začít navrhovat strukturu své webové stránky a přidávat nové komponenty.
Soubor index.html
Povinné meta tagyBootstrap CSS
Bootstrap
Samostatný Popper a Bootstrap JS
Třída Bootstrap Container Class
Bootstrap kontejner class vloží, obsahuje a zarovná prvky na vaší webové stránce. Pokud plánujete používat Bootstrap's výchozí mřížka, pak budete muset také použít Bootstrap's kontejner třída. Existují tři typy kontejner třídy; kontejner, nádoba-tekutina, a kontejner-{breakpoint}. Třída kontejneru je výchozí kontejner; je responzivní a má pevnou šířku v každém ze šesti zaváděcích bodů.
Šest výchozích bodů přerušení Bootstrapu zahrnuje:
- Extra malý: Méně než 576 pixelů.
- Malý: Větší nebo rovno 576 pixelům.
- Střední: Větší nebo rovno 768 pixelů.
- Velký: Větší nebo rovno 992 pixelů.
- X-velký: Větší nebo rovno 1200 pixelů.
- XX-velký: Větší nebo rovno 1400 pixelů.
Chcete-li použít Bootstrap kontejner ve svém projektu můžete jednoduše přidat požadovanou třídu kontejneru do externího div na vaší webové stránce.
Pomocí kontejneru Bootstrap
umístěte sem prvky webu Vložením výše uvedeného kódu do těla vašeho stávajícího souboru HTML bude vaše webová stránka responzivní a také vytvoří výplň na každé straně vaší webové stránky.
Bootstrap Grid System
Mřížka Bootstrapu využívá systém dvanácti sloupců, který spoléhá na řádek a kol třídy grid, stejně jako třída kontejneru. Každý řádek má dvanáct sloupců a libovolný prvek se může rozprostírat přes jeden nebo více těchto sloupců. Třída sloupců udává, kolik sloupců by měl prvek zabírat. Například prvek používající sloupek-2 class bude zahrnovat dva sloupce, prvek používající sloupek-3 třída bude zahrnovat tři sloupce a tak dále.
Systém Bootstrap grid je založen na modulu flexbox. Pokud jeden řádek zabírají pouze dva sloupce, rozdělí si prostor mezi sebou rovnoměrně. The okap třída je jedním ze strukturálních prvků Bootstrapu a řídí rozestupy mezi jednotlivými sloupci v mřížkový systém. Každý mřížka sloupec má na každé straně 12px odsazení.
Použití Bootstrap's Grid System
hlavní obsah na webové stránce
Článek
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorem porro non quae
obcaecati illo laboriosam a, voluptate molestias eum velit, differentio impedit
ratione facere numquam, optio eligendi delectus cumque quos.
Vložením výše uvedeného kódu do kontejneru div vytvoříte systém mřížky Bootstrap se třemi řádky a dvěma sloupci. První řádek nahoře bude obsahovat navigační panel, třetí řádek dole bude obsahovat zápatí webu a druhý řádek uprostřed bude obsahovat obsah webové stránky. Druhý řádek má dva sloupce – hlavní článek a vedlejší.
Vytvoření místního souboru CSS a přidání ohraničení do každé části mřížky vám umožní vidět ji jasněji.
Soubor style.css
.řádek{
ohraničení: 2px modrá plná;
}
.col, .col-sm-4{
ohraničení: 2px červená plná;
}
Propojením se souborem CSS výše vytvoříte ve vašem prohlížeči následující výstup:
Zjevným rozdílem na obrázku výše je velikost sloupců. Obvykle dva (nebo více) sloupce v řadě zabírají stejné množství místa, pokud výslovně neuvedete jinak. The col-sm-4 class ve výše uvedeném HTML kódu zajišťuje, že druhý sloupec zabírá pouze čtyři z dvanácti sloupců v řádku. The sm v col-sm-4 třída představuje malou zarážku, takže postranní sekce bude zabírat pouze čtyři sloupce od malé zarážky a výše.
Bootstrap komponenty
Poté, co se rozhodnete pro rozvržení své webové stránky, je dalším krokem přidání prvků vytváření webových stránek, které Bootstrap nazývá komponenty. Seznam komponent Bootstrapu zahrnuje:
- Navbar
- Tlačítka
- Skupina tlačítek
- Seznam skupiny
- karty
- Kolaps
- Rozbalovací seznamy
Třída Bootstrap Navbar
Každý navigační panel Bootstrap vyžaduje navigační lišta třída. Vyžadují také použití nebo přiřazení klíčového slova „navigation“ k Bootstrap role atribut v nadřazeném navigačním panelu div. Aby navigační panel reagoval, budete muset použít sbalit plugin JavaScript.
Bootstrap navigační lišta třída používá an árie-proud atribut, který přebírá hodnotu „page“ k označení aktuální stránky nebo „true“ k označení aktuální části webové stránky. Hodnota, kterou přiřadíte, bude záviset na struktuře vašeho webu (jedna stránka nebo více stránek). Měli byste také použít aktivní třída k označení aktuální stránky nebo sekce.
Pomocí navigační lišty Bootstrapu
Výměna navigace řádek Bootstrapu mřížka s výše uvedeným kódem vytvoří ve vašem prohlížeči následující výstup:
Ve výše uvedeném kódu je několik dalších důležitých tříd a atributů Bootstrap, jako je navbar-brand třídy, která cílí na část vašeho loga navigační lišta. The navigační lišta je také zcela responzivní díky sbalit plugin JavaScript.
Responzivní navigační panel
Možná si vzpomínáte, že Bootstrap má šest výchozích zlomové body a jeden z těchto bodů přerušení je velký (lg). The navbar-expand-lg třídy v výše se rozvine do vodorovného seznamu navigačních položek na velkém zarážkovém bodu a nad ním a tento seznam se vrátí na tlačítko u libovolného zarážkového bodu pod velkým.
Pokud se chcete dozvědět více o vytváření responzivních webů, dali jsme dohromady stručný přehled jak to udělat s mediálními dotazy v HTML a CSS.
Komponenta tlačítka Bootstrap
Bootstrap knoflík komponenta využívá a vyžaduje, abyste nastavili typ atribut k „tlačítku“.
Bootstrap má několik typů tlačítek. K vytvoření konvenčnějšího tlačítka byste použili btn třídy, ale k vytvoření tlačítka na hamburger jako v kódu výše byste použili navbar-toggle třída.
Kdy byste měli použít Bootstrap?
Bootstrap je známý jako jeden z nejpopulárnějších frameworků CSS, protože je průkopníkem. Dlouho předtím, než byl responzivní design tak samozřejmostí ve vývoji softwaru, se Bootstrap proměnil ve zcela responzivní framework.
V průběhu let se Bootstrap neustále vyvíjel a zlepšoval, díky čemuž se stal volbou číslo jedna pro špičkové společnosti, jako je Twitter a Spotify. Ne vždy to však bude nejlepší volba pro vaše potřeby vývoje softwaru. Pokud například vytváříte aplikaci React, existuje návrhový systém zvaný MUI, který je přizpůsoben pro aplikace React.
Material-UI má nový název a jeho cílem je vytvořit nový designový systém alternativu k Material Designu. Zde je návod, jak můžete použít MUI v projektech ReactJS.
Přečtěte si další
- Programování
- Cvrlikání
- Tipy pro kódování
- Programování
- Programovací nástroje
Kadeisha Kean je vývojář úplného softwaru a technický/technologický autor. Má výraznou schopnost zjednodušit některé z nejsložitějších technologických konceptů; vyrábí materiál, který může snadno pochopit každý technologický nováček. Je nadšená psaním, vývojem zajímavého softwaru a cestováním po světě (prostřednictvím dokumentů).
Přihlaste se k odběru našeho newsletteru
Připojte se k našemu zpravodaji a získejte technické tipy, recenze, bezplatné e-knihy a exkluzivní nabídky!
Chcete-li se přihlásit k odběru, klikněte sem
