Inštalácia bootstrapu 4. Vertikálne zarovnanie responzívnych blokov

V tejto lekcii sa naučíme, ako stiahnuť a pripojiť rámec Bootstrap (verzia 3 alebo 4) na stránku.

Bootstrap Learning Toolkit

Minimálna sada nástrojov (programov) na vytváranie webových projektov pomocou rámca Bootstrap:

textový editor pre prácu s kódom (Notepad, Brackets, Notepad++ atď.);
prehliadač (Google Chrome, Mozilla Firefox, Opera, Safari, Internet Explorer atď.).

Sťahovanie rámca Bootstrap

Vytvorenie webového projektu, ktorého dizajn je založený na frameworku Bootstrap, vždy začína jeho stiahnutím. Existujú rôzne spôsoby, ako stiahnuť rámec Bootstrap. Napríklad prostredníctvom odkazu umiestneného na stránke getbootstrap.com alebo pomocou správcu balíkov npm, Composer, Bower atď., Ako to urobiť, závisí od vašich skúseností alebo konkrétnej situácie.

Ako nainštalovať rámec Bootstrap pomocou správcov balíkov, ako aj ako ho zostaviť pomocou Grunt, si môžete prečítať v tomto článku.

Najjednoduchší spôsob stiahnutia je použiť odkaz. Na stránke Bootstrap sú 2 odkazy.

Prvý odkaz obsahuje súbory CSS a JavaScript pripravené na použitie. Táto zostava sa používa hlavne na štúdium rámca alebo na použitie v projektoch, ktorých dizajn môže byť vytvorený v predvolených štýloch stanovených autormi.

Stiahnuť Bootstrap 3.4.1 Stiahnite si Bootstrap 4.3.1

Druhý odkaz obsahuje rámec v zdrojovom kóde. Táto verzia je vhodnejšia pre vývoj webových stránok, pretože... umožňuje veľmi jednoducho meniť štýly, farby komponentov, konfigurovať ich atď. Tieto zdrojové súbory však bude potrebné pred použitím na stránke skompilovať a zminifikovať. Tento proces je zvyčajne automatizovaný, napríklad pomocou Gulp.

Zdrojové kódy Bootstrapu 3.4.1 Zdrojové kódy Bootstrapu 4.3.1 Rozbalenie archívu Bootstrap

Po stiahnutí archívu (so súbormi CSS a JavaScript pripravenými na použitie) ho musíte rozbaliť do adresára vášho webového projektu.

Ak sa pozriete na archív, všimnete si, že má nasledujúci obsah (ako príklad použite Bootstrap 3.4.1):

Bootstrap/ ├── css/ │ ├── bootstrap.css │ ├── bootstrap.min.css │ ├── bootstrap-theme.css │ └ ├─ j-me / │ ├ ── bootstrap.js │ └── bootstrap.min.js └── fonty/ ├── glyphicons-halflings-regular.eot ├── glyphicons──regulative├── glyphicons└vflings—flings-regular. .tt f └ ── glyfikony-polovice-pravidelné.woff

Adresár css obsahuje štýly rámca Bootstrap a adresár js obsahuje pluginy na fungovanie niektorých komponentov. Zásuvné moduly sú napísané pomocou funkcií knižnice jQuery. Preto pred Bootstrap JS musíte zahrnúť knižnicu jQuery.

Ako vidíte, archív obsahuje 2 verzie CSS a JavaScript súborov, t.j. s príponou min a bez nej. Verzia súboru s min sa nelíši od bez min , je jednoducho minimalizovaná (komprimovaná).

V produkcii (na produkčnom mieste) je lepšie používať minimalizované verzie súborov. Tieto súbory sú menšie, a preto zabezpečujú rýchlejšie načítanie stránok lokality.

Neminifikované verzie sú pohodlnejšie na použitie počas vývoja, ako aj na štúdium.

Okrem týchto súborov obsahuje tento archív aj ikonový font „Glyphicons“. Písmo Glyphicons obsahuje viac ako 250 ikon zo sady Glyphicon Halflings. Písmo je prezentované pomocou 4 súborov: glyphicons-halflings-regular.eot, glyphicons-halflings-regular.svg, glyphicons-halflings-regular.ttf, glyphicons-halflings-regular.woff).

Takáto rozmanitosť formátov rovnakého písma je potrebná na zabezpečenie jeho zobrazenia vo všetkých prehliadačoch.

O ikonách vo formáte písma, ako aj o tom, aké výhody a nevýhody majú, si môžete prečítať v tomto článku.

Archív rámca Bootstrap 4 sa prakticky nelíši od Bootstrapu 3. Jeho hlavným rozdielom je, že neobsahuje písmo „Glyphicons“. Ak potrebujete ikony písma, budete ich musieť pripojiť sami. Napríklad pomocou niektorej z nasledujúcich sád: FontAwesome, Octicons, Glyphicons, IcoMoon alebo iné Ak nechcete použiť hotové písmo, ale vytvoríte si vlastný, ktorý bude pozostávať len z potrebných ikon, tak použite táto informácia.

Okrem toho archív Bootstrap 4 obsahuje aj súbory bootstrap-grid.css a bootstrap-reboot.css. Tieto súbory sú potrebné len pre tých, ktorí nepotrebujú celý rámec, ale iba jeho časť.

Prvý súbor (bootstrap-grid.css) obsahuje mriežku Bootstrap a druhý (bootstrap-reboot.css) je normalizátor, ktorý nastavuje základné štýly tak, aby boli rovnaké pre všetky prvky HTML vo všetkých prehliadačoch.

Pripojenie Bootstrapu k HTML stránke

Proces inštalácie rámca Bootstrap 3 pozostáva z pripojenia nasledujúcich súborov k stránke HTML 5:

Bootstrap CSS (bootstrap.min.css);

Najnovšia verzia knižnice jQuery (vyžaduje sa pre fungovanie doplnkov Bootstrap JS);

Bootstrap JavaScript (bootstrap.min.js).

Poznámka: Súbory JavaScript je lepšie zahrnúť pred uzatváraciu značku body(), pretože to zabezpečí rýchlejšie načítanie a zobrazenie hlavného obsahu webovej stránky.

...

Pripojenie rámca Bootstrap 4 sa vykonáva takto:

...

Bootstrap 4 môžete pripojiť aj pomocou CDN (nemusíte sťahovať Bootstrap do projektu):

Skopírované

...

CDN Bootstrap 3.4.1:

Skopírované

Aby sme otestovali funkčnosť rámca, vytvoríme tlačidlo, ktoré po dotyku zobrazí kontextový popis.

Ukážte mi kurzor $(funkcia () ( $("").popover((spúšťač:"vznášať")); ));

Na základe počtu hviezdičiek na GitHub.

Ak chcete zvládnuť Bootstrap, najmä jeho najnovšiu, štvrtú verziu, tento materiál bol pripravený špeciálne pre vás. Na tomto malom príklade, ktorý sa dá naozaj zvládnuť za pol hodiny, budú demonštrované základy Bootstrapu, akonáhle im porozumiete, budete môcť pomocou tohto rámca urobiť niečo vlastné.

Predpoklady Tento materiál je určený pre začínajúcich webových vývojárov, ktorí majú základné znalosti HTML, CSS a jQuery.

Tu je jednostránková webová stránka, o ktorej budeme hovoriť pomocou Bootstrapu.

Hotový projekt vytvorený pomocou Bootstrap

Npm install bootstrap
Bootstrap je možné pripojiť k stránke pomocou siete na doručovanie obsahu. Ak to chcete urobiť, pridajte do značky nasledujúci odkaz:

Najnovšiu verziu Bootstrapu si môžete stiahnuť odtiaľto a používať lokálne.

Štruktúra projektu by mala vyzerať ako na nasledujúcom obrázku.

Štruktúra projektu O schopnostiach Bootstrap 4 Prvá stabilná verzia Bootstrap 4 bola vydaná koncom januára tohto roku. Bootstrap teraz obsahuje niektoré zaujímavé funkcie, ktoré neboli prítomné v predchádzajúcej verzii. Konkrétne, ak hovoríme o vylepšeniach a zmenách, môžeme si všimnúť nasledovné:

Bootstrap 4 bol prepísaný pomocou technológie flexbox, zatiaľ čo Bootstrap 3 používal technológiu float. Ak nie ste oboznámení s flexboxom, pozrite si tento zdroj.
CSS Bootstrap 4 používa jednotky rem, zatiaľ čo predtým používa jednotky px. môžete zistiť, ako sa líšia.
Niektoré komponenty, ako napríklad panely, boli odstránené. Podrobnosti o zmenách vykonaných v Bootstrap 4.

V skutočnosti má Bootstrap 4 v porovnaní s Bootstrap 3 veľa nových vecí, ak to potrebujete, môžete sa s týmito inováciami zoznámiť. Teraz začíname pracovať na našom vzdelávacom projekte Bootstrap Grid System Bootstrap Grid System je určený na vytváranie rozložení stránok. Uľahčuje vývoj responzívnych webových stránok. V novej verzii Bootstrapu sa názvy tried nezmenili (treba si uvedomiť, že class.xs už neexistuje).

Mriežka je rozdelená na 12 stĺpcov, táto štruktúra, nakonfigurovaná podľa potrieb vývojára, je základom rozloženia stránky.

Aby ste mohli použiť mriežku Bootstrap, musíte do hlavného prvku stránky pridať triedu .row. Pri nastavovaní veľkostí vnorených prvkov sa používajú tieto triedy (namiesto hviezdičky na konci názvu triedy je uvedený počet stĺpcov základnej 12-stĺpcovej mriežky, ktoré má konkrétny prvok zaberať):

col-lg-* – trieda používaná pre stránky určené pre zariadenia s veľkou obrazovkou, ako sú notebooky;
col-md-* – trieda pre stránky určené pre zariadenia so stredne veľkou obrazovkou, ako sú tablety;
col-sm-* – trieda pre stránky, ktoré sú určené pre malé obrazovky, ako napríklad tie, ktoré nájdete na smartfónoch.

Navigačná lišta Navigačné lišty v Bootstrape sa vytvárajú pomocou triedy .navbar. V skutočnosti ide o obal, v ktorom sú umiestnené prvky tvoriace navigačnú lištu. Nižšie je panel, ktorý teraz vytvoríme. Nachádza sa v hornej časti stránky a pri rolovaní nezmizne.

Navigačná lišta

Aby sa teda na stránke objavil navigačný panel, do index.html pridáme značku s triedou .navbar , v rámci ktorej použijeme ďalšie triedy ako .navbar-brand , .navbar-toggler a .nav -item , vytvárame niektoré špeciálne prvky a štruktúru navigačného systému stránky. Trieda .fixed-top vám umožňuje opraviť navigačnú lištu v hornej časti stránky. Tu je rozloženie navigačnej lišty:

Domov

Teraz vytvorte súbor main.css a pripojte ho k stránke umiestnením nasledujúceho do značky súboru index.html:

To vám umožní prispôsobiť štýly prvkov stránky umiestnením pravidiel CSS do tohto súboru. Do tohto súboru CSS pridáme pravidlá, ktoré nastavia farebný dizajn navigačného panela:

Navbar( background:#F97300; ) .nav-link , .navbar-brand( color: #f4f4f4; kurzor: pointer; ) .nav-link( margin-right: 1em !important; ) .nav-link:hover( background : #f4f4f4; farba: #f97300; ) .navbar-collapse( justify-content: flex-end; ) .navbar-toggler( background:#fff !important; )
Nová mriežka Bootstrap je založená na flexboxe, takže na zarovnanie obsahu musíte použiť príslušné vlastnosti. Napríklad, ak chcete umiestniť ponuku navigačného panela vpravo, musíte použiť vlastnosť justify-content a nastaviť jej hodnotu na flex-end:

Navbar-collapse( justify-content: flex-end; )
Na prispôsobenie farby pozadia navigačnej lišty môžete použiť triedy .bg-light (svetlé pozadie), .bg-dark (tmavé pozadie) a .bg-primary (primárna farba pozadia). Používame nasledujúce nastavenia:

Bg-dark( background-color:#343a40!important ) .bg-primary( background-color:#343a40!important )

Hlavička stránky Nasledujúca značka sa používa na popis hlavičky stránky:

Pripravíme si rozloženie hlavičky stránky. Chceme, aby zaberal celú výšku okna, takže tu príde vhod jQuery. Vytvorme súbor main.js a pripojíme ho k index.html pred uzatváraciu značku:

Do súboru main.js pridáme nasledovné:

$(document).ready(function())( $(".header").height($(window).height()); ))
Do hlavičky stránky by bolo dobré umiestniť nejaký pekný obrázok na pozadí. Urobme to takto:

/*štýl hlavičky*/ .header( background-image: url("../images/headerback.jpg"); background-attachment: fixed; background-size: cover; background-position: center; )
Týmto sme skončili.

Hlavička stránky s obrázkom na pozadí

Hlavička stránky zatiaľ vyzerá trochu prázdna, tak do nej pridajte prvok, priraďte mu triedu .overlay , čo povedie k vytvoreniu bloku, ktorý sa nachádza na vrchu obrázka na pozadí hlavičky. Zmeňme sekciu súboru index.html, kde sme popísali hlavičku takto:

Potom do main.css pridajte nasledovné:

Prekrytie ( pozícia: absolútna; minimálna výška: 100 %; minimálna šírka: 100 %; vľavo: 0; hore: 0; pozadie: rgba(244, 244, 244, 0,79); )
Teraz do hlavičky pridáme popis projektu. Umiestnime ho do nového prvku s triedou .container . Toto je pomocná trieda pre rámec Bootstrap navrhnutá na rozloženie obsahu na základe potrieb responzívneho rozloženia. Takto sa označenie zmení v tomto kroku:

Teraz sem pridáme ďalší prvok, ktorému priradíme class.description:

▍ Dobrý deň, vitajte na mojej oficiálnej webovej stránke

Cillum dolore eu fugiat nulla pariatur. Okrem sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Pozrieť viac
Tomuto tagu priradíme aj triedu .text-center, čo umožní jeho obsah zarovnať na stred stránky. Na konci popisu stránky je tlačidlo. Poďme si povedať, ako to nastaviť.

Buttons Bootstrap poskytuje mnoho tried pre tlačidlá. Môžete vidieť niekoľko príkladov dizajnu tlačidiel. Ako môžete vidieť v príklade značkovania z predchádzajúcej časti, pridali sme do prvku triedy .btn a . btn-outline-secondary .

Teraz nastavíme štýly pre class.description:

Description( position: absolute; top: 30%; margin: auto; padding: 2em; ) .description h1( color:#F97300 ; ) .description p( color:#666; font-size: 20px; width: 50%; line-height: 1.5; ) .description button( border:1px solid #F97300; background:#F97300; color:#fff; )
Takto bude vyzerať hlavička stránky po dokončení vyššie uvedených krokov:

Hlavička stránky s popisom projektu O sekcii Najprv sa pozrime na to, čo chceme vytvoriť. Tu je časť stránky s informáciami o webovom vývojárovi.

O sekcii

Tu použijeme možnosti mriežky Bootstrapu na vytvorenie rozloženia dvoch častí. Začnime pridaním triedy .row do nadradeného prvku sekcie:

Prvá časť rozloženia bude umiestnená vľavo, bude obsahovať fotografiu. Druhá časť, umiestnená vpravo, obsahuje popis.

Takto vyzerá označenie na ľavej strane tejto sekcie:

// ľavá strana Vývojár S.Web
A toto sa stane po pridaní popisu pravej strany rozloženia sem:

S.Web Developer ▍D.John

Ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud cvičenie ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Okrem sint occaecat cupidatat non

Všimnite si nastavenie šírky stĺpcov pomocou tried col-lg-* , col-md-* a col-sm-* popísaných vyššie.

Tu sú štýly pre toto všetko:

About( margin: 4em 0; padding: 1em; position: relatívna; ) .about h1( color:#F97300; margin: 2em; ) .about img( height: 100%; width: 100%; border-radius: 50% ) .about span( display: block; color: #888; position: absolute; left: 115px; ) .about .desc( padding: 2em; border-left:4px solid #10828C; ) .about .desc h3( color: #10828C; ) .asi .desc p( line-height:2; color:#888; )

Sekcia Portfólio Prejdime teraz k časti, v ktorej bude predstavené portfólio developera. Bude obsahovať galériu diel.

Portfóliová sekcia

Pri vytváraní rozloženia tejto časti sa uplatňujú rovnaké princípy práce s mriežkou, o ktorých sme hovorili vyššie:

Portfólio
Pridaním triedy .img-fluid ku každému z obrázkov budú responzívne.

Každý prvok v našej galérii na stredných a veľkých obrazovkách zaberá 4 stĺpce (pamätajte - trieda col-sm-12 sa používa pre zariadenia s malými obrazovkami, trieda col-md-4 sa používa pre stredné obrazovky, col-lg-4 - pre zariadenia s veľkými obrazovkami). Výsledkom je, že na veľkých a stredných obrazovkách bude jeden prvok predstavovať približne 33,3 % kontajnerového prvku, na malých zariadeniach bude každý prvok zaberať celú obrazovku (12 stĺpcov).

Štýl galérie diel:

/*Portfólio*/ .portfolio( okraj: 4em 0; pozícia: relatívna; ) .portfolio h1( farba:#F97300; okraj: 2em; ) .portfolio img( výška: 15rem; šírka: 100 %; okraj: 1em; )

Sekcia blogu a práca s kartami Poďme sa porozprávať o vytvorení sekcie, ktorá obsahuje oznámenia o materiáloch z blogu spravovaného naším podmieneným webovým vývojárom.

Sekcia blogu

Na vytvorenie tejto sekcie budeme potrebovať takzvané karty (karty v terminológii Bootstrap).

Ak chcete vytvoriť kartu, musíte do rozloženia zahrnúť prvok a pridať k nemu triedu .card. Na konfiguráciu rôznych prvkov karty môžete použiť nasledujúce triedy:

.hlavička-karty: hlavička
.telo karty: hlavný obsah
.card-title: titul
.päta karty: päta
.card-image: image

Označenie HTML pre túto sekciu bude vyzerať takto:

Blog Názov príspevku

Proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Čítaj viac

Názov príspevku

Proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Čítaj viac

Názov príspevku

Proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Čítaj viac
Tu sú štýly kariet:

Blog( okraj: 4em 0; pozícia: relatívna; ) .blog h1( farba:#F97300; okraj: 2em; ) .blog .card( box-shadow: 0 0 20px #ccc; ) .blog .card img( šírka: 100 %; výška: 12 em; ) .blog .card-title( color:#F97300; ) .blog .card-body( padding: 1em; )
Takto bude vyzerať naša jednostránková stránka po vytvorení sekcie Blog:

Stránka po pridaní sekcie Blog Sekcia Team Táto sekcia bude obsahovať informácie o projektovom tíme.

Tímová sekcia

Na vytvorenie tejto časti použijeme mriežku, ktorá rovnomerne rozdelí dostupný priestor medzi obrázky. Každý obrázok (na veľkých a stredných obrazovkách) bude zaberať 3 stĺpce mriežky, čo je 25 % z celkového priestoru.

Tu je označenie HTML pre túto sekciu:

Náš tím Manažérka Sara Chris S.enginner Layla Front End Developer J.Jirard tímový manažér
A tu sú štýly:

Tím( okraj: 4em 0; pozícia: relatívna; ) .tím h1( farba:#F97300; okraj: 2em; ) .tím .item( pozícia: relatívna; ) .tím .des( pozadie: #F97300; farba: #fff ; zarovnanie textu: stred; polomer okraja-dolnej-ľavej strany: 93 %; prechod: 0,3 s uvoľnenie-v-von; )
Ozdobme túto časť animáciou, ktorá sa zobrazí, keď umiestnite kurzor myši na obrázky. Malo by to vyzerať ako na obrázku nižšie.

Animácia pri umiestnení kurzora myši na obrázok

Ak chcete dosiahnuť tento efekt, pridajte do main.css nasledujúce štýly:

Tím .item:hover .des( výška: 100 %; pozadie:#f973007d; pozícia: absolútna; šírka: 89 %; výplň: 5 em; horná časť: 0; polomer okraja-dola-vľavo: 0; )

Formulár spätnej väzby Táto časť stránky bude obsahovať formulár, pomocou ktorého môžu návštevníci lokality posielať správy vlastníkovi lokality. Tu, ako obvykle, na štýlovanie prvkov a zabezpečenie ich odozvy využijeme možnosti Bootstrapu.

Forma spätnej väzby

Podobne ako Bootstrap 3, aj Bootstrap 4 používa triedu .form-control pre vstupné polia, no teraz je tu niečo nové. Napríklad – namiesto zastaraného class.input-group-addon sa používa nový class.input-group-prepend (pre ikony a štítky). Viac podrobností o tom možno nájsť v dokumentácii Bootstrap 4. V našom prípade bude každé vstupné pole umiestnené v prvku, ktorý má priradenú triedu .form-group.

Pridajme do súboru index.html nasledovné:

Ozvite sa
Tu sú štýly pre sekciu formulára spätnej väzby, ktorá by mala byť umiestnená v súbore main.css:

Contact-form( margin: 6em 0; position: relativní; ) .contact-form h1( padding:2em 1px; color: #F97300; ) .contact-form .right( max-width: 600px; ) .contact-form . right .btn-secondary( background: #F97300; color: #fff; border:0; ) .contact-form .right .form-control::placeholder( color: #888; font-size: 16px; )

Písma Štandardné písma nie sú vhodné pre každého. Na používanie písma Raleway v našom projekte sme využili Google Font API. Bude to tu vyzerať veľmi dobre. Ak chcete importovať písmo, pridajte nasledujúcu direktívu do súboru main.css:

@import url("https://fonts.googleapis.com/css?family=Raleway");
Ďalej nastavíme globálne štýly pre rôzne značky HTML:

Html,h1,h2,h3,h4,h5,h6,a( rodina fontov: "Raleway"; )

Efekty rolovania Obrázok nižšie ukazuje správanie stránky, ktoré chceme dosiahnuť.

Posúvanie stránky pri klikaní na odkazy v navigačnom paneli

Aby sa stránka po kliknutí na odkazy navigačnej lišty plynulo posúvala na požadovanú sekciu, budeme sa musieť uchýliť k možnostiam jQuery. Ak túto knižnicu veľmi nepoznáte, vedzte, že tu nie je nič zložité - stačí pridať nižšie uvedený kód do súboru main.js:

$(".navbar a").click(function())( $("body,html").animate(( scrollTop:$("#" + $(this).data("value")).offset ( ).top ),1 000) ))
Potom pridajte atribút hodnoty údajov ku každému z odkazov na navigačnom paneli a upravte označenie takto:

Portfólio

Blog

Tím

Kontakt

Aby to všetko konečne fungovalo, ostáva už len pridať atribút id do hlavného prvku každej sekcie stránky. V tomto prípade sa musíte uistiť, že jeho hodnota je identická s hodnotou uvedenou v atribúte data-value príslušného odkazu. Tu je napríklad zodpovedajúci atribút pre sekciu Informácie:

Týmto je náš príklad dokončený. Pridať značky

Ahojte všetci! V predchádzajúcom článku sme sa pozreli na to, čo je Boostrap a prečo je potrebný, a v tomto článku sa pozrieme na to, ako nainštalovať a začať používať Bootstrap 4.

Prejdite na oficiálnu webovú stránku a stiahnite si Bootstrap 4 kliknutím na tlačidlo Stiahnuť. Nájdete mnoho rôznych spôsobov, ako stiahnuť a nainštalovať tento rámec: npm, skladateľ, bower a ďalšie. Je tiež možné stiahnuť len niektoré súbory, ktoré potrebujete, stiahnuť zdroje atď.

Môžete si vybrať ktorúkoľvek z metód a stiahnuť si framework do svojho počítača alebo prejsť do sekcie Úvod (v pravom stĺpci na stránke), nájsť tam sekciu Starter template, skopírovať všetok tam napísaný kód, vytvoriť priečinok, kde budeme pracujte s rámcom, vytvorte v ňom súbor index.html a vložte tam predtým skopírovaný kód.

Ahoj svet!

Stručne o tom, čo sa tu deje: ide o základnú šablónu, v ktorej sú všetky potrebné CSS a JS súbory prepojené pomocou CDN a pre mobilné zariadenia je nastavený aj meta tag viewport. V podstate je to všetko. Vďaka CDN nepotrebujeme sťahovať všetky potrebné súbory, ale iba internet.

Bootstrap 4 je súprava nástrojov, ktorá obsahuje veľa skvelých a nových funkcií, ako je Flexbox, SASS pre štýl CSS, mapy, kompatibilita Font Awesome atď.

Všetky tieto funkcie vám pomôžu posunúť vaše webové projekty na ďalšiu úroveň pomocou najnovších štandardov pre webový dizajn a vývoj. Zhrnuli sme zoznam niektorých najlepších šablón Bootstrap 4, ktoré sú k dispozícii na stiahnutie zadarmo, ako aj niektoré vysokokvalitné prémiové šablóny Bootstrap 4.

Existuje veľa súprav používateľského rozhrania Bootstrap 4, ktoré môžete použiť na začatie projektu webového dizajnu. Okrem toho sa v tomto príspevku pozrieme na rôzne šablóny, ktoré sú vytvorené pomocou Bootstrap 4 v mnohých rôznych štýloch, ako sú šablóny vstupnej stránky, šablóny panela správcu, šablóny blogu, šablóny portfólia atď.

Ak začínate svoju cestu Bootstrap 4, odporúčame vám použiť populárnu súpravu používateľského rozhrania, ako je Paper Kit 2, ktorá je založená na Bootstrap 4 a ponúka profesionálne navrhnuté komponenty a množstvo vopred pripravených sekcií a vzorových stránok. Súprava používateľského rozhrania, ako je Paper Kit 2, vám môže pomôcť z dlhodobého hľadiska a bude vás stáť menej, ak sa chystáte vytvoriť viacero stránok s Bootstrap 4. Majú tiež bezplatnú verziu.

Našu kolekciu šablón Bootstrap 4 sme rozdelili do niekoľkých sekcií, aby sme vám uľahčili hľadanie šablóny, ktorú potrebujete. Pomocou nižšie uvedených odkazov môžete prejsť do ktorejkoľvek sekcie.

Šablóny Bootstrap 4 už čoskoro

Šablóna Coming Soon sa používa pred samotným spustením webovej stránky a je akýmsi „pahýľom“.

Tieto šablóny zvyčajne obsahujú časovač odpočítavania a poskytujú používateľom možnosť kontaktovať vlastníkov webových stránok alebo sa zaregistrovať na oznámenie o spustení.

Pozrite si šablónu Coming Soon nižšie, postavenú pomocou Bootstrap 4.

Už čoskoro Bootstrap 4 (zadarmo)

Táto šablóna Coming Soon Bootstrap 4 vytvorená tímom TemplateFlip. Obsahuje obrázok na pozadí na celú obrazovku spolu s modernou typografiou a sociálnymi ikonami Font Awesome.

Šablóna už má vstavaný formulár na odber e-mailov. Tento formulár sa zobrazí po kliknutí na tlačidlo „Upozorniť ma“.

Šablóna je úplne zadarmo pod licenciou CCA3 a môže byť použitá pre osobné aj komerčné projekty.

Fluid – animovaná šablóna Už čoskoro (platená)

Fluid je prémiová animovaná šablóna Coming Soon vytvorená pomocou Bootstrap 4. Ponúka štyri rôzne možnosti: Image Background, Graphic Background, Background Slider a Minimal Layout.

Animácia je založená na CSS3 a k stiahnutiu je dodávaná aj šablóna PSD.

Bootstrap 4 šablóny vstupnej stránky

Šablóny vstupnej stránky sa často používajú na demonštráciu funkcií produktu, služby alebo aplikácie. Často majú tlačidlá výzvy na akciu, aby používatelia mohli vyskúšať alebo preskúmať produkt/službu. Môžu tiež obsahovať sekcie, ako sú používateľské recenzie a porovnávacie tabuľky funkcií, ceny.

Nižšie uvádzame bezplatné aj platené šablóny vstupnej stránky vytvorené pomocou Bootstrap 4.

Pristátie materiálu (zadarmo)

Material Landing je šablóna vstupnej stránky vytvorená pomocou súpravy MDB UI Kit a Bootstrap 4.

Má čistý vzhľad kódu, ktorý je ideálny na vytvorenie optimalizovanej vstupnej stránky pre webovú stránku produktu alebo agentúry alebo spoločnosti.

Šablóna má sekcie navrhnuté v dizajne šablóny HTML5 na zobrazenie funkcií produktu/spoločnosti, top projektov, cenového plánu, ako aj členov tímu.

Pri posúvaní vstupnou stránkou sa prehrávajú podmanivé animácie.

Začať jednoducho (zadarmo)

Start Simple je ďalšia bezplatná šablóna vstupnej stránky pre začínajúce podniky a malé podniky, ktorú vytvoril tím TemplateFlip.com.

Šablóna je založená na Bootstrap 4 a obsahuje paralaxné posúvanie v hlavičke a responzívny animovaný posuvník pre sekciu používateľských recenzií.

Úžasná aplikácia (zadarmo)

Awesome App je bezplatná šablóna vstupnej stránky vytvorená pomocou Bootstrap 4 a PaperKit 2. Je vhodná na vytváranie webových stránok a vstupných stránok pre mobilné aplikácie a softvérové produkty.

Šablónu navrhol tím TemplateFlip.com a má kreatívne navrhnutú vstupnú stránku s nádhernou farebnou schémou.

Šablóna obsahuje sekcie na prezentáciu funkcií aplikácie, snímky obrazovky aplikácie, používateľské recenzie, odkazy na stiahnutie aplikácie atď.

A dajú sa ľahko prispôsobiť a rozšíriť.

Pixels – Creative App Landing HTML5 Template

Ak máte radi kreativitu a hľadáte úžasný dizajn pre svoju stránku aplikácie/produktu alebo obchodné účely, potom bude táto prémiová šablóna Bootstrap 4 Pixels pre vás najvhodnejšia.

Táto šablóna ponúka viac ako 15 rôznych dizajnov a má integráciu MailChimp, ako aj funkčný kontaktný formulár.

Bootstrap 4 Startup/Agency Templates

Šablóna Startup/Agency je vhodná pre každú firmu, ktorá chce prezentovať svoje služby.

Nižšie sú uvedené niektoré z najlepších šablón Bootstrap 4, ktoré sú vhodné pre začínajúce podniky a spoločnosti.

Agentúra (zadarmo)

Ako už názov napovedá, ide o bezplatnú šablónu webových stránok pre agentúry a malé firmy, ktorá bola vytvorená pomocou Bootstrap 4. Má sekcie domovskej stránky, ako je mriežka portfólia, responzívna časová os, zoznam členov tímu a ďalšie.

Téma Bell Bootstrap 4 (zadarmo)

Bell je jednostránková šablóna Bootstrap 4 vhodná pre akýkoľvek typ firemnej webovej stránky. Zahŕňa paralaxové bloky s animovaným posúvaním a je k dispozícii zadarmo, ako aj platená verzia, ktorá zahŕňa prémiovú e-mailovú podporu.

Fitness (zadarmo)

Fitness je bezplatná, čistá zdrojová webová šablóna vytvorená pomocou HTML5, Sass, jQuery, Bootstrap 4 a Gulp.

Verzia PSD tejto šablóny je tiež zahrnutá v bezplatnej verzii.

Šablóny panela správcu Bootstrap 4

Bootstrap je predvolenou voľbou pre mnohých webových dizajnérov a vývojárov, pokiaľ ide o vytváranie šablóny panela správcu webu alebo aplikácie. Pomocou Bootstrapu môžete vytvoriť responzívny administračný panel s pokročilými ovládacími prvkami a používateľskými rozhraniami.

Nižšie nájdete platené a bezplatné šablóny riadiaceho panela Bootstrap 4 Admin.

Dashboard Light Bootstrap (zadarmo)

Toto je šablóna správcu Bootstrap 4 vytvorená spoločnosťou CreativeTim.

Má jednoduchý a čistý dizajn a ponúka sadu hotových komponentov, pluginov a vzorových stránok šablón, ktoré vám pomôžu začať s vytváraním administračných panelov pre webové aplikácie a CMS alebo CRM.

Toto je bezplatná šablóna správcu Bootstrap, ktorá je úplne použiteľná vo vašich projektoch. Ak potrebujete ďalšie komponenty, pluginy a vzorové stránky, môžete upgradovať na verziu PRO.

Verzia PRO vám tiež poskytuje prístup k úplnej dokumentácii, súborom SASS, ako aj súborom Sketch pre šablónu.

Modulárny správca (zadarmo)

Modular Admin je bezplatná téma dashboardu zameraná na MIT postavená na Bootstrap 4. Táto téma dashboardu je zostavená modulárnym spôsobom, ktorý uľahčuje škálovanie, úpravu a údržbu. Dokumentácia, ako začať s touto šablónou, sa nachádza v úložisku GitHub.

Správca CoreUI Bootstrap 4 (zadarmo)

CoreUI je ďalšia bezplatná a open source (MIT) Bootstrap šablóna. CoreUI je založené na Bootstrap 4 a ponúka 6 verzií: HTML5 AJAX, HTML5 Static, AngularJS, Angular 2+, React.js a Vue.js.

Stránky – Bootstrap 4 Admin Dashboard Template

Pages je krásne navrhnutá prémiová šablóna riadiaceho panela Bootstrap 4 Admin Dashboard, ktorá ponúka viacero rozložení a vopred zostavených komponentov, ako aj 6 rôznych farebných schém.

Ahojte všetci, priatelia! Bootstrap 3 bol vydaný v polovici roku 2013 a v priebehu rokov sa ukázal ako pohodlný, rozšíriteľný rámec CSS na rýchle vytváranie responzívnych rozložení. Tento framework úspešne využívajú milióny stránok a už sme si na to celkom zvykli.

V pohode

Stammer

18. januára 2018 sa stala dôležitá udalosť - dlho očakávaná verzia Bootstrap 4 vyšla z beta verzie, ktorá je založená na použití modelu Flexbox pre značkovanie, ktorý v súčasnosti už podporuje všetky moderné prehliadače a je pohodlnejší a flexibilnejší. pre vývojárov ako klasický značkovací model založený na Float. Teraz môžeme s úplnou istotou povedať, že to nie je možné, ale MUSÍ byť napísané na stroji pomocou Flex!

Dodatočné materiály na lekciu Bootstrap 4

Všetky príklady lekcií si môžete sami otestovať: Stiahnite si archív

Viac o dokumentácii Bootstrap 4 si môžete prečítať v kancelárii. webové stránky;

Najnovší štartér vrátane Bootstrap 4: OptimizedHTML 5.

Dnes sa bližšie pozrieme na prácu s mriežkou Bootstrap 4, pričom ju porovnáme so starou verziou. Táto lekcia vám bude užitočná nielen ak ste začiatočník a s Bootstrapom sa zoznamujete, ale aj ak ste skúsený vývojár a chcete sa naučiť všetky pravidlá a nuansy rozloženia pomocou mriežky Bootstrap 4 a nástrojov Flexbox, ktoré sú súčasťou to.

1. Základné predvolené parametre siete

Predvolená mriežka Bootstrapu 4 je veľmi podobná 3. verzii, no je tu niekoľko dôležitých rozdielov.

Z tabuľky hlavných možností si môžeme všimnúť zjavné rozdiely oproti mriežke tretej verzie. Predpona triedy „.col-xs-“, ktorá zodpovedá za najmenšie rozlíšenie, je teraz odstránená a nahradená zjednodušenou predponou „.col-“. Môžete si mylne myslieť, že predpona „.col-“ je zodpovedná za minimálne rozlíšenie mobilných zariadení, ale nie je to úplne pravda. Okrem iného je predpona „.col-“ jednou z najdôležitejších inovácií v Bootstrap 4. Ide o triedu, ktorá je zodpovedná za automatické rozloženie stĺpcov pri akomkoľvek rozlíšení. Ale o tom neskôr.

Pre malé rozlíšenia je zodpovedná predpona „.col-sm-“ s mediálnym dopytom 576 pixelov. Šírka kontajnera je 540 px. Stredné rozlíšenia začínajú od 768 pixelov. Šírka kontajnera – 720 px. Vyššie rozlíšenia fungujú s rozlíšením zariadenia 992 pixelov alebo viac. Šírka kontajnera – 960 px. A tie najväčšie - od 1200 pixelov. Šírka kontajnera je pevne stanovená na 1140 px.

Upozorňujeme, že maximálne hodnoty mediálnych dopytov majú nepresné hodnoty so zlomkovou časťou „.98“ v pixeloch. Je to viditeľné pri výbere metódy rozloženia Desktop First, kde je obmedzená maximálna šírka dopytu na médiá. Napríklad pri kompilácii Sass „+media-breakpoint-down(lg)“ dostaneme „@media (max-width: 1199,98px)“. Tu sa uvoľní 0,02 pixelov na spustenie ďalšieho mediálneho dopytu. Majte to na pamäti. V ďalších číslach "Jedi Layout 8" sa na tento a mnohé ďalšie body z tejto lekcie pozrieme na skutočnom príklade.

2. Automatické rozloženie stĺpcov 2.1 Stĺpce rovnakej šírky

Pomocou novej generickej triedy ".col" môžete určiť až 12 stĺpcov v riadku (rodič ".row"), ktorých šírka sa automaticky vypočíta v závislosti od počtu prvkov a bude rovnaká.

Napríklad:

2.2 Nastavenie šírky jedného stĺpca

Môžete tiež explicitne nastaviť šírku jedného stĺpca a zvyšok nechať automatický.

1 z 3 2 z 3 (široký) 3 z 3 1 z 3 2 z 3 (široký) 3 z 3

V tomto príklade má druhý prvok v treťom riadku triedu „.col-6“ a druhý prvok v druhom riadku má triedu „.col-5“, ktoré zaberajú zodpovedajúci počet stĺpcov na všetkých rozlíšeniach obrazovky. Šírka zostávajúcich stĺpcov reaguje a vypočítava sa automaticky, pričom zaberá všetok zostávajúci priestor.

2.3 Obsah premenlivej šírky

Triedu „col-(breakpoint)-auto“ môžete použiť na definovanie obsahu s premenlivou šírkou v závislosti od priestoru, ktorý zaberá obsah stĺpca. Kde bod zlomu je veľkosť obrazovky (xl, lg, md alebo sm).

1 z 3 Obsah s premenlivou šírkou 3 z 3 1 z 3 Obsah s premenlivou šírkou Číslo dva 3 z 3

Tu vidíme, že dva stredné stĺpce zaberajú šírku zodpovedajúcu šírke obsahu, ale v prvom riadku je vďaka triede „.justify-content-sm-center“ triedy „.row“ celý riadok vycentrovaný a celková šírka závisí len od šírky stredového stĺpca, pričom druhý riadok je natiahnutý na plnú dostupnú šírku, ale druhý stĺpec zostáva pevne nastavený na šírku obsahu.

2.4 Viacradové

Vďaka Bootstrap 4 môžete vytvoriť viacero riadkov (pomlčiek) v jednom riadku. Toto je možné implementovať pomocou triedy „.w-100“, ktorá je veľmi podobná značke „br“ a v podstate iba zalamuje stĺpce na nový riadok.

col col col col col

Upozorňujeme, že táto trieda je súčasťou doplnkov Bootstrap 4, ktoré sú súčasťou projektu samostatne, ak používate verziu projektu Bootstrap Sass a nachádzajú sa v priečinku „scss/utilities“. Podľa potreby môžete do svojho projektu pripojiť aj ďalšie doplnky z tohto priečinka. 3. Adaptívne triedy 3.1 Breakpointy

Veľmi zaujímavou funkciou Bootstrapu 4 je možnosť nastavenia univerzálnych stĺpcov, ktoré sa budú zobrazovať pri všetkých rozlíšeniach. Toto je trieda ".col" spomenutá vyššie. Okrem toho môžete definovať triedu, ktorá označuje konkrétny počet stĺpcov, ktoré bude obsah zaberať – sú to triedy s predponou „.col-(počet stĺpcov)“, napríklad „.col-6“ nám hovorí, že obsah zaberie 6 stĺpcov z 12. V prípadoch, keď nie je potrebné zadávať konkrétne množstvo, môžete pokojne použiť univerzálnu triedu „.col“.

col col col col col-8 col-4

3.2 Na mobilných zariadeniach

Môžete použiť predponu triedy ".col-sm-(počet obsadených stĺpcov)" na definovanie základnej mriežky vo všetkých, okrem najmenších rozlíšení. Na malých obrazovkách sa stĺpce takejto mriežky budú naskladať pod seba. Na povoleniach viac - zaberú toľko miesta, koľko ste definovali v triedach.

col-sm-8 col-sm-4 col-sm col-sm col-sm

Tu vidíme, že prvý riadok na zariadeniach s rozlíšením väčším ako „sm“, to znamená viac ako 576 pixelov. je rozdelená do 2 stĺpcov - 8 a 4 z 12 širokých, resp. Šírka stĺpcov v druhom riadku sa vypočíta automaticky, no pri najmenších rozlíšeniach sa tieto stĺpce aj ukladajú pod seba, vďaka triede „.col-sm“.

3.3 Vytvorenie komplexnej kombinovanej siete

Pomocou Bootstrapu môžete pri vytváraní mriežky vytvoriť ľubovoľnú kombináciu stĺpcov. Pre každý stĺpec môžete nastaviť akékoľvek správanie pri rôznych rozlíšeniach pomocou adaptívnych tried. Tu sú rozdiely oproti tretej verzii len v názvoch tried.

.col-12 .col-md-8 .col-6 .col-md-4 .col-6 .col-md-4 .col-6 .col-md-4 .col-6 .col-md-4 .col-6 .col-6

4. Zarovnanie

Bootstrap 4 je založený na „flex“ a dáva nám všetky možnosti tohto modelu, ktoré sú dostupné v jednoduchých hotových triedach. Možnosti zahŕňajú vertikálne a horizontálne zarovnanie.

4.1 Vertikálne zarovnanie Hore Hore Hore Stredne Stredne Stredne Dole Dole Dole

Okrem ovládania zarovnania prostredníctvom nadradeného riadku „.row“ môžete stĺpce zarovnať tak, že im priradíte príslušné triedy:

Hore Stred Dolu

4.2 Horizontálne zarovnanie

Okrem toho má Bootstrap 4 nástroje na horizontálne zarovnanie stĺpcov pomocou predpony „.justify-content-“ na „.row“.

riadok zarovnať-obsah-začiatok riadok zarovnať-obsah-začiatok riadok zarovnať-obsah-centrovať riadok zarovnať-stred obsahu-zarovnať zarovnať-koniec obsahu zarovnať-obsah-koniec zarovnať-obsah-okolo zarovnať-obsah-okolo zarovnať-obsah-medzi zarovnať -obsah-medzi

4.3 Odstránenie okrajov medzi stĺpcami

Veľmi často sa vyskytujú situácie, keď je potrebné odstrániť okraje medzi stĺpcami. Ak napríklad vytvárate galériu a prvky je potrebné umiestniť blízko seba, takto:

Ak to chcete urobiť, nastavte doplnkovú triedu „.no-gutters“ na prvok „.row“.

col-6 col-sm-4 col-md-4 col-6 col-sm-4 col-md-4 col-6 col-sm-4 col-md-4 col-6 col-sm-4 col-md -4 col-6 col-sm-4 col-md-4 col-6 col-sm-4 col-md-4 col-6 col-sm-4 col-md-4 col-6 col-sm-4 col -md-4 col-6 col-sm-4 col-md-4

4.4 Presun stĺpcov do nového riadku

Ak je riadok (.riadok) vyplnený celkovým počtom stĺpcov väčším ako 12, nasledujúci stĺpec sa presunie na nový riadok.

.stĺpec-9 .stĺpec-4
9 + 4 = 13 stĺpcov - to je viac ako 12. Tento prvok, široký 4 stĺpce, sa presunie do nového riadku. .col-6
Nasledujúce stĺpce budú umiestnené pozdĺž čiary.

Všetko je tu rovnaké ako vo verzii 3 Bootstrapu. 5. Poradie prvkov 5.1 Triedy poradia prvkov

Na definovanie poradia prvkov môžete použiť špeciálne triedy s predponou „.order-“. Ak poznáte Flex-layout, tieto pravidlá vám budú známe. Bootstrap 4 vám dáva možnosť nastaviť poradie prvkov pomocou tried. Objednávku môžete nastaviť priamo (.order-1.order-md-2):

Prvý neusporiadaný prvok

Alebo môžete použiť špeciálne triedy, ktoré určujú poradie prvého a posledného prvku (.order-first, .order-last):

Prvý neobjednaný Druhý, objednaný ako posledný Tretí, objednaný ako prvý

5.2 Odsadenie stĺpca

Analogicky s Bootstrap 3, verzia 4 má tiež schopnosť horizontálne odsadzovať stĺpce, ale je to implementované trochu inak a existujú na to špeciálne triedy s predponou „.offset-“.

5.2.1 Triedy posunutia

Stĺpec môžete posunúť doprava pomocou tried „.offset-md-*“, ktoré zväčšia ľavú zarážku o * počet prvkov. Z nižšie uvedeného príkladu trieda ".offset-md-2" posunie stĺpec ".col-md-4" o 2 stĺpce doprava, ostatné príklady fungujú rovnakým spôsobom:

.col-md-4 .col-md-4 .offset-md-4 .col-md-3 .offset-md-3 .col-md-3 .offset-md-3 .col-md-6 .offset -md-3

Offset môžete vynulovať pri všetkých rozlíšeniach vďaka triede „.offset-*-0“, kde * je sm, md, lg alebo xl. 6. Hniezdenie

Je celkom očakávané, že Bootstrap 4 podporuje vkladanie prvkov. Všetko tu funguje rovnako ako v tretej verzii – na vnorenie stĺpcov do iných je potrebné vytvoriť podradenú triedu „.row“ a vnoriť do nej stĺpce.

Úroveň 1: ".col-sm-9" Úroveň 2: ".col-8 .col-sm-6" Úroveň 2: ".col-4 .col-sm-6"

Pozreli sme sa na hlavné funkcie práce s mriežkou Bootstrap 4. Ak sa chcete bližšie zoznámiť so všetkými možnosťami frameworku, odporúčam preštudovať si dokumentáciu na oficiálnej stránke.

V ďalšej lekcii sa pozrieme na nastavenie mriežky Bootstrap pre váš konkrétny projekt na príklade použitia OptimizedHTML 4 v štartovacej šablóne, konkrétne nastavenie, práca s premennými zarážok, zarážok, počtu stĺpcov a ďalších vecí.

Podobné články