V roku 2011 Twitter predstavil rámec Bootstrap. Odvtedy tento rámec CSS zaznamenal dve veľké prepisy, pričom najnovšia (Bootstrap 3) bola vydaná v roku 2013. Bootstrap 3 transformoval knižnicu CSS implementáciou mobilného prístupu, ktorý nechal rámec úplne reagovať.
Od roku 2022 je Bootstrap vo verzii päť a je jedným z najpopulárnejších frontend frameworkov. Má rozsiahly zoznam vopred zostavených komponentov a pôsobivú zbierku doplnkov JavaScript. V tomto článku sa dozviete, ako používať Bootstrap a čo najlepšie využiť jeho funkcie.
Inštalácia Bootstrapu vo vašom projekte
Existujú tri spôsoby použite Bootstrap vo svojom projekte. Môžete si stiahnuť a hostiť súbory CSS a JavaScript, nainštalovať ich do projektu pomocou npm alebo skopírovať a prilepiť príslušné odkazy cdn do svojho projektu.
Pri prístupe cdn si musíte pamätať, že odkaz Bootstrap umiestnite pred akýkoľvek iný odkaz CSS do značky head vášho súboru HTML.
Niektoré komponenty Bootstrap majú funkčné aktivity, ako napríklad prepínanie tlačidiel a ich umiestnenie, ktoré si vyžaduje import skriptov JavaScript a Popper. Takže, ak máte v úmysle použiť akékoľvek funkčné komponenty, budete musieť do súboru HTML pridať aj značku skriptu.
Posledná vec, ktorú potrebujete, aby ste mohli začať používať Bootstrap, je výrez tag.
Keďže Bootstrap je mobilná technológia, výrez tag pomôže pri responzívnom dizajne. Jednoduchý spôsob, ako použiť bootstrap vo svojom projekte, je jednoducho skopírovať Štartovacia šablóna bootstrapu.
Vytvorenie webovej stránky pomocou Bootstrapu
Keď vytvárate novú webovú stránku, jednou z prvých vecí, ktoré musíte zvážiť, je rozloženie. Potom môžete prejsť na ďalšie komponenty, ako sú tlačidlá a typografia.
Bootstrap má kolekciu štrukturálnych komponentov, ktoré môžete použiť na usporiadanie prvkov na webovej stránke. Tieto štruktúry rozloženia zahŕňajú:
- Nádoby
- Mriežka
- Stĺpce
- Odkvapy
- Body zlomu
Pomocou mierne pozmenenej verzie štartovacej šablóny Bootstrap môžete začať navrhovať štruktúru svojej webovej stránky a pridávať nové komponenty.
Súbor index.html
Povinné metaznačkyBootstrap CSS
Bootstrap
Samostatný Popper a Bootstrap JS
Trieda kontajnerov Bootstrap
Bootstrap kontajner class vloží, obsahuje a zarovná prvky na vašej webovej stránke. Ak plánujete použiť Bootstrap's predvolená mriežka, potom budete musieť použiť aj Bootstrap's kontajner trieda. Existujú tri typy kontajner triedy; kontajner, nádoba-tekutinaa kontajner-{breakpoint}. Trieda kontajnera je predvolený kontajner; je citlivý a má fixnú šírku v každom zo šiestich bodov prerušenia bootstraps.
Šesť predvolených bodov prerušenia Bootstrapu zahŕňa:
- Extra malý: Menej ako 576 pixelov.
- Malý: Väčšie alebo rovné 576 pixelom.
- Stredná: Väčšie alebo rovné 768 pixelov.
- Veľký: Väčšie alebo rovné 992 pixelov.
- X-Large: Väčšie alebo rovné 1200 pixelov.
- XX-Veľký: Väčšie alebo rovné 1400 pixelov.
Ak chcete použiť Bootstrap kontajner vo svojom projekte môžete jednoducho pridať požadovanú triedu kontajnera do externého div na vašej webovej stránke.
Použitie kontajnera Bootstrap
umiestnite sem prvky webovej stránky Vložením vyššie uvedeného kódu do tela vášho existujúceho súboru HTML bude vaša webová stránka responzívna a vytvorí sa tiež výplň na každej strane vašej webovej stránky.
Bootstrap Grid System
Mriežka Bootstrapu využíva dvanásťstĺpcový systém, ktorý sa spolieha na riadok a kol mriežkové triedy, ako aj kontajnerová trieda. Každý riadok má dvanásť stĺpcov a ľubovoľný prvok sa môže rozprestierať naprieč jedným alebo viacerými z týchto stĺpcov. Trieda stĺpcov bude udávať, koľko stĺpcov by mal prvok zaberať. Napríklad prvok používajúci stĺpec-2 class sa bude rozprestierať cez dva stĺpce, pričom prvok používa stĺpec-3 trieda bude zahŕňať tri stĺpce atď.
Systém mriežky Bootstrap je založený na module flexbox. Ak len dva stĺpce zaberajú riadok, rozdelia si priestor medzi sebou rovnomerne. The žľab trieda je jedným zo štrukturálnych prvkov Bootstrapu a riadi medzery medzi jednotlivými stĺpcami v mriežkový systém. Každý mriežka stĺpec má 12px výplne na oboch stranách.
Používanie mriežkového systému Bootstrap
hlavný obsah webovej stránky
Článok
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 vyššie uvedeného kódu do kontajnera div vytvoríte systém mriežky Bootstrap pozostávajúci z troch riadkov a dvoch stĺpcov. Prvý riadok hore bude obsahovať navigačný panel, tretí riadok dole bude obsahovať pätu webovej stránky a druhý riadok v strede bude obsahovať obsah webovej stránky. Druhý riadok má dva stĺpce – hlavný článok a vedľajší článok.
Vytvorenie lokálneho súboru CSS a pridanie okraja do každej časti mriežky vám umožní vidieť to jasnejšie.
Súbor style.css
.riadok{
orámovanie: 2px modrá plná;
}
.col, .col-sm-4{
orámovanie: 2px červená plná;
}
Prepojením so súborom CSS vyššie sa vo vašom prehliadači vytvorí nasledujúci výstup:
Zjavným rozdielom na obrázku vyššie je veľkosť stĺpcov. Zvyčajne dva (alebo viac) stĺpcov v riadku zaberajú rovnaké množstvo miesta, pokiaľ výslovne neuvediete inak. The col-sm-4 class v kóde HTML vyššie zaisťuje, že druhý stĺpec presahuje iba štyri z dvanástich stĺpcov v riadku. The sm v col-sm-4 trieda predstavuje malý bod prerušenia, takže vedľajšia časť bude zaberať iba štyri stĺpce od malého bodu prerušenia a vyššie.
Bootstrap komponenty
Keď sa rozhodnete pre rozloženie svojej webovej stránky, ďalším krokom je pridanie prvkov vytvárania webových stránok, ktoré Bootstrap nazýva komponenty. Zoznam komponentov Bootstrapu zahŕňa:
- Navbar
- Tlačidlá
- Skupina tlačidiel
- Zoznam skupiny
- karty
- kolaps
- Rozbaľovacie ponuky
Trieda Bootstrap Navbar
Každý navigačný panel Bootstrap vyžaduje navigačná lišta trieda. Vyžadujú tiež použitie alebo priradením kľúčového slova „navigation“ k Bootstrap úlohu atribút v nadradenom navigačnom paneli div. Ak chcete, aby navigačný panel reagoval, budete musieť použiť zbaliť doplnok JavaScript.
Bootstrap navigačná lišta trieda používa an ária-prúd atribút, ktorý preberá hodnotu „page“ na označenie aktuálnej stránky alebo „true“ na označenie aktuálnej časti webovej stránky. Hodnota, ktorú priradíte, bude závisieť od štruktúry vášho webu (jedna stránka alebo viacero stránok). Mali by ste tiež použiť aktívna trieda na označenie aktuálnej stránky alebo sekcie.
Pomocou navigačného panela Bootstrapu
Výmena navigácie riadok Bootstrapu mriežka s vyššie uvedeným kódom vytvorí vo vašom prehliadači nasledujúci výstup:
Vo vyššie uvedenom kóde je niekoľko ďalších dôležitých tried a atribútov Bootstrap, ako napr navbar-brand triedy, ktorá je zacielená na časť vášho loga navigačná lišta. The navigačná lišta je tiež úplne pohotový vďaka zbaliť doplnok JavaScript.
Responzívny navigačný panel
Možno si spomínate, že Bootstrap má šesť predvolených nastavení zlomové body a jeden z týchto bodov zlomu je veľký (lg). The navbar-expand-lg trieda v hore sa rozbalí do vodorovného zoznamu navigačných položiek pri veľkom bode prerušenia a nad ním a tento zoznam sa vráti na tlačidlo v ktoromkoľvek bode prerušenia pod veľkým.
Ak sa chcete dozvedieť viac o vytváraní responzívnych webových stránok, zostavili sme stručný prehľad ako to urobiť s mediálnymi dopytmi v HTML a CSS.
Súčasť tlačidla Bootstrap
Bootstrap tlačidlo komponent používa a vyžaduje, aby ste nastavili typu atribút „tlačidlo“.
Bootstrap má niekoľko typov tlačidiel. Na vytvorenie konvenčnejšieho tlačidla by ste použili btn triedy, ale na vytvorenie tlačidla na hamburger ako v kóde vyššie by ste použili navbar-toggle trieda.
Kedy by ste mali použiť Bootstrap?
Bootstrap je známy ako jeden z najpopulárnejších rámcov CSS, pretože je priekopníkom. Dávno predtým, ako bol responzívny dizajn taký bežný vo vývoji softvéru, Bootstrap sa premenil na úplne responzívny rámec.
V priebehu rokov Bootstrap neustále napredoval a zlepšoval sa, vďaka čomu je voľbou číslo jedna pre špičkové spoločnosti, ako sú Twitter a Spotify. Nie vždy to však bude najlepšia voľba pre vaše potreby vývoja softvéru. Ak napríklad vytvárate aplikáciu React, existuje systém dizajnu s názvom MUI, ktorý je prispôsobený pre aplikácie React.
Material-UI má nový názov a jeho cieľom je vytvoriť nový dizajnový systém alternatívu k Material Designu. Tu je návod, ako môžete použiť MUI v projektoch ReactJS.
Prečítajte si ďalej
- Programovanie
- Tipy na kódovanie
- Programovanie
- Programovacie nástroje
Kadeisha Kean je vývojár úplného softvéru a technicko-technologický spisovateľ. Má výraznú schopnosť zjednodušiť niektoré z najzložitejších technologických konceptov; produkovať materiál, ktorý je ľahko zrozumiteľný pre každého technologického nováčika. Je nadšená písaním, vývojom zaujímavého softvéru a cestovaním po svete (prostredníctvom dokumentárnych filmov).
prihlásiť sa ku odberu noviniek
Pripojte sa k nášmu bulletinu a získajte technické tipy, recenzie, bezplatné e-knihy a exkluzívne ponuky!
Kliknutím sem sa prihlásite na odber
