Sekcia 1


Prehľad zavádzacích zariadení

Bootstrap je najobľúbenejší frontendový vývojový framework. Bootstrap uľahčuje každému, kto má pracovné znalosti HTML a CSS a webhostingový účet, veľmi rýchlo navrhnúť a zverejniť špičkovú mobilnú webovú stránku. Najnovšiu verziu môžete získať (Bootstrap 4.0.0 v čase uverejnenia tohto článku) tu.

Tento článok je určený všetkým, ktorí majú pracovné znalosti HTML a CSS a majú prístup k účtu webhostingu, ktorý chce navrhnúť novú webovú stránku alebo prepracovať existujúcu webovú stránku..

Tento článok bude prínosom alebo pre vlastníka alebo správcu webovej stránky, ktorý bude dohliadať na dizajn svojich webových stránok. Základné porozumenie dostupných možností pomocou najobľúbenejšieho rámca pre vývoj webových aplikácií pomocou nástroja Bootstrap pomôže správcovi webových stránok porozumieť týmto možnostiam a efektívnejšie komunikovať s webovým dizajnérom..

Bootstrap a webhosting

Existujú dva základné spôsoby použitia Bootstrapu. Jedným z nich je prístup prostredníctvom siete na doručovanie obsahu spoločnosti Bootstrap (CDN), ktorá vám umožňuje prepojiť sa na súbory Bootstrap z vašich dokumentov HTML. CDN je systém distribuovaných serverov, ktoré poskytujú obsah používateľom. CDN produktu Bootstrap poskytuje jednoduchý spôsob použitia nástroja Bootstrap bez jeho inštalácie na webový server.

Prepojenie na súbory Bootstrap CDN CSS z HTML dokumentov je najjednoduchšou a najbežnejšou metódou použitia Bootstrapu. Mnoho tém a šablón predpokladá túto metódu používania nástroja Bootstrap ako predvolenú, pretože funguje s akýmkoľvek účtom webhostingu a nevyžaduje rootský prístup k serveru..

Druhou metódou použitia Bootstrapu je inštalácia na váš server alebo virtuálny server (ak máte hosting VPS). Získate tak väčšiu kontrolu nad operačným systémom Bootstrap, čo vám umožní viac prispôsobenia a kontrolu nad infraštruktúrou, čo môže byť dôležité, ak máte web s veľmi vysokou návštevnosťou..

Ak chcete nainštalovať Bootstrap na svoj webový server, budete potrebovať buď kontrolu nad vyhradeným serverom alebo VPS serverom (tj root prístup), aby ste mohli nainštalovať Bootstrap, alebo vaša webhostingová služba bude musieť poskytnúť mechanizmus, pomocou ktorého môžete Bootstrap nainštalovať do zdieľaného hostingový účet. Zdieľané hostingové účty zvyčajne neprichádzajú s prístupom typu root, hoci vaša webhostingová služba môže ponúknuť Bootstrap ako možnosť inštalácie jedným kliknutím. Pozrite si dokumentáciu k vašej webhostingovej službe, kde nájdete informácie o inštalačných funkciách Bootstrap.

V opačnom prípade sú niektoré z najlepších služieb webhostingu uvedené v ponuke Hostadvice "One-Click" Inštalácia Bootstrap, alebo ju môžete jednoducho nainštalovať z vášho c-panelu pomocou Softaculous .

Ak máte vyhradený server alebo hosting VPS a chcete nainštalovať Bootstrap, pozrite si nižšie uvedenú časť zdrojov, kde nájdete odkaz na oficiálnu dokumentáciu Bootstrap, vrátane podrobných informácií o inštalácii Bootstrap..

Niektoré služby webhostingu dokonca obsahujú balíčky webhostingu Bootstrap, ktoré sú balíčkami webhostingu špecificky určené na hosťovanie webových stránok Bootstrap.

Čo potrebujete vedieť, aby ste mohli používať Bootstrap

Bootstrap je veľmi populárny u všetkých webových vývojárov, od začiatočníkov po expertov. Základné vedomosti o HTML, CSS a o tom, ako publikovať svoje webové stránky na svoj účet webhostingu, všetko, čo potrebujete na používanie Bootstrapu.

Aj keď máte v úmysle najať niekoho, aby vám navrhol web, je pre majiteľov webových stránok užitočné naučiť sa základy najpopulárnejšieho rámca pre webový dizajn, čo vám umožní efektívnejšie komunikovať s dizajnérmi.

Bootstrap odvodzuje svoju funkčnosť od štandardných nástrojov dostupných pre každého zákazníka, ktorý ponúka webhosting: HTML, CSS, JavaScript a JQuery (knižnica JavaScript). Aj keď Bootstrap používa JavaScript pre niektoré zo svojich interaktívnych funkcií, nemusíte byť programátorom na navrhovanie webových stránok s Bootstrapom..

Prečo Bootstrap

Mobilná responzívna – Bootstrap je framework založený na mobilných zariadeniach, ktorý uľahčuje vytváranie webových stránok reagujúcich na mobilné zariadenia.

Konzistentný dizajn na vašich webových stránkach – Bootstrap používa centrálnu knižnicu šablón a štýlov dizajnu, ktorá vám pomôže vytvoriť a udržiavať konzistentný vzhľad a dojem z dizajnu.

Zadarmo a otvorený zdroj – Bootstrap je zadarmo pre každého, kto ho môže použiť, a vývojári môžu prispieť k samotnému projektu Bootstrap.

Jednoduché použitie – Každý, kto má pracovné znalosti HTML a CSS, môže pomocou nástroja Bootstrap vytvoriť krásnu a funkčnú webovú stránku. Pracovné znalosti JavaScriptu a JQuery by boli užitočné na zvýšenie interaktivity vášho webu.

Ľahko publikovať na ľubovoľný účet webhostingu – Na publikovanie svojich webových stránok na svoj webhostingový účet stačí použiť klienta File Transfer Protocol (FTP).

Oddiel 2

Získanie Bootstrapu pre váš projekt

Aj keď si môžete stiahnuť a nainštalovať Bootstrap, ak máte vyhradený server alebo webhosting s virtuálnym privátnym serverom (VPS), pre tento primér odkazujeme na CDN Bootstrap, čo je oveľa jednoduchšie ako nainštalovať Bootstrap na server..

Ak máte vyhradený server alebo server VPS s prístupom root k serveru, môžete nainštalovať program Bootstrap priamo na vyhradený server alebo virtuálny server. Vyžaduje si to omnoho viac technických zručností, ako sa vyžaduje len na prepojenie so zavádzacou technológiou z vašich súborov HTML.

Tu je to, čo potrebujete v každom dokumente HTML, aby ste mohli používať Bootstrap. Upozorňujeme, že ak začínate šablónou alebo motívom, všetky tieto prvky sa už nachádzajú v dokumentoch HTML. K dispozícii je veľa šablón a tém (pozrite si časť Zdroje v dolnej časti tohto článku).

Pridajte doctype HTML5 do hornej časti dokumentu HTML a nastavte jazyk na svoj jazyk.

príklad kódu boostrap 1

Tesne pod prvok pridajte metaznačku znakovej sady.

príklad kódu boostrap 2

Pretože Bootstrap je prvý mobilný, nastavte názov metadáta výrezu nasledovne, uistite sa, že prehliadače vykresľujú vaše webové stránky správne a umožňujú dotykové priblíženie na zariadeniach.

príklad kódu boostrap 3

Prepojenie na Bootstrap 4.0.0 CSS a sprístupnenie všetkého štýlu CSS.

príklad kódu boostrap 4

Pridajte nejaký zástupný obsah, ktorý môžete neskôr nahradiť skutočným obsahom webovej stránky.

Príklad kódu bootovacieho systému 5

Odkaz na JavaScript Bootstrap v dolnej časti prvku.

príklad kódu bootstrap 6

To je všetko, aby ste mohli začať používať Bootstrap 4.0.0! Bootstrap má komplexnú dokumentáciu a aktívnu komunitu. Príloha tohto článku obsahuje odkazy na dokumentáciu, príručky a ďalšie užitočné zdroje.

Oddiel 3

Vytvorenie webovej stránky pomocou zavádzacieho systému

Kontajnery: stavebné kamene systému Bootstrap

Kontajnery sú základnými stavebnými kameňmi webovej stránky Bootstrap. Pevný kontajner (reagujúci na veľkosť obrazovky) zostáva rovnaký, až kým prehliadač nedosiahne určité zlomové body, čo predstavuje výrez rôznych zariadení, ktoré ľudia používajú na prezeranie webových stránok.

Existuje jeden hlavný kontajner, do ktorého umiestnite kontajnery pre každú súčasť svojho webu vrátane všetkého od kontajnera s navigačnou lištou až po pätu a všetko medzi tým. Mysli na kontajner ako na krabicu s obsahom.

Kontajnery s pevnou šírkou

Tu je kontajner s pevnou šírkou pomocou triedy kontajnerov Bootstrap s pevnou šírkou.

príklad kódu kontajnera 1

Nádoby na tekutiny

Nádoba na tekutinu pokrýva celú šírku výrezu bez ohľadu na použité zariadenie. Typické použitie pre kvapalinovú nádrž by bolo pre navar bar alebo pätu. Tu je príklad jednoduchej nádoby na tekutinu.

Body odozvy reagujúce na mobil

Bootstrap začína predpokladom, že návštevník webovej stránky používa mobilný telefón na zobrazenie vašich webových stránok, pričom zmena rozloženia webovej stránky závisí od zariadenia používaného návštevníkom a vašich špecifikácií..

Môžete určiť, ktorý bod prerušenia, bod, kde sa rozloženie zmení, prispôsobenie rozloženia podľa veľkosti výrezu zariadenia. Bootstrap sa stará o mediálne otázky, určuje, aký výrez (veľkosť obrazovky zariadenia) každý návštevník používa, a podľa potreby upravuje. Musíte len povedať Bootstrapu, kde nastaviť body prerušenia.

Pre všetky veľkosti nad extra malé (xs), Bootstrap určuje veľkosť výrezu prostredníctvom mediálnych dopytov, ktoré zisťujú veľkosť výrezu výrezu každého návštevníka vašej webovej stránky a primerane odpovedajú.

tabuľky 1 veľkosti zavádzacieho pásu

Stohovanie pre mobilnú odozvu

Stohovanie je základný koncept, vďaka ktorému sa vaše webové stránky môžu správať tak, ako chcete, pri rôznych veľkostiach obrazovky (výrezu). Keď nastavíte niekoľko riadkov v kontajneri, nastavíte tiež bod prerušenia, čo znamená výrez veľkosti, v ktorom sa stĺpce začnú stohovať nad sebou, nie vedľa seba..

Tu je myšlienka, že je ťažké, ak nie nemožné, prečítať webovú stránku s viacerými stĺpcami na menšom výreze, takže stĺpce sa ukladajú na seba, aby čítanie a posúvanie obsahu pre návštevníka webu bolo veľmi jednoduché..

Napríklad, ak ste v kontajneri vytvorili rozloženie s dvoma stĺpcami, nastavenie bodu prerušenia na sm, čo znamená, že pre malé (telefóny na šírku) a extra malé zariadenia (zahrnuté bez špecifikovania, pretože extra malý je predvolený Bootstrap), by stĺpce stohovali jeden na seba. V prípade prenosných počítačov a iných väčších zariadení by sa dva stĺpce zobrazovali vedľa seba.

Ak nezadáte bod prerušenia, systém Bootstrap bude predvolene nastavený na malý malý výrez ako bod prerušenia (t. J. Mobilné telefóny). Tu je kód HTML pre dvojstĺpcové rozloženie s zlomom malého bodu (sm), ktorý začne ukladať rozloženie dvoch stĺpcov pre tých, ktorí si prezerajú vaše webové stránky pomocou telefónu na šírku a menšieho (xs).

stohovací príklad kódu

Dvanásť stĺpec mriežky

Bootstrap rozdelí stránku do 12 stĺpcovej mriežky (podobne ako väčšina rámcov CSS), čo uľahčuje rozloženie vašej webovej stránky..

Rozloženie a body prerušenia môžete zmeniť tak, aby vyhovovali vašim potrebám, pričom určíte počet z dvanástich dostupných stĺpcov Bootstrapu, ktoré by sa mali rozmiestniť. Napríklad môžete zadať ľavý stĺpec na osem stĺpcov a pravý stĺpec na preklenutie štyroch stĺpcov spolu so špecifikovaním bodu prerušenia, keď sa majú dva stĺpce začať ukladať. Upozorňujeme, že 8 + 4 = 12. Pri rozmiestnení webových stránok skontrolujte, či počet stĺpcov predstavuje až 12.

12 stĺpcový mriežkový kód

Prvé dva stĺpce zaberajú 2 stĺpce a posledný stĺpec zaberá 8 dostupných stĺpcov Bootstraps 12. Okolo týchto stĺpcov som vytvoril orámovanie vo svojich vlastných štýloch, aby bol kontrast ľahšie viditeľný.

Tu sú tri stĺpce na veľkej obrazovke:

3 veľké obrazovky

A tu sú rovnaké 3 stĺpce zobrazené na telefóne (bod prerušenia bol nastavený na „sm“), stĺpce sú naskladané na seba, aby boli prístupné pomocou telefónu alebo tabletu..

3 riadky reagujú na seba

Navigačná lišta

Základným kameňom väčšiny webových stránok je navigačná lišta. Hlavnú navigačnú lištu pre svoj web zvyčajne umiestnite v hornej časti stránky. Pre navigačné panely je k dispozícii veľa možností, ale my sa len sústredíme na jednoduchý navigačný panel, aby ste mohli začať.

Toto je navigačná lišta založená na príklade uvedenom na webových stránkach Get Boot Strap. Tento navigačný panel obsahuje rozbaľovaciu ponuku, ktorá je k dispozícii pre väčšie veľkosti obrazovky (notebooky a stolové počítače), a takzvanú „hamburgerovú ponuku“, ktorú je možné ľahko použiť z mobilného zariadenia. Na ľavej strane je značka navigačného panela a na pravej strane vyhľadávací formulár (pre návštevníkov, ktorí prehľadávajú váš web).

navigačný čiarový kód

Ako vyzerá tento navigačný panel na pracovných plochách.

veľký navigačný panel

A takto vyzerá táto navigačná lišta v tabletoch a telefónoch. Navigáciu nahrádza „hamburgerové menu“ a všetky položky sú naskladané pre ľahší prístup z výrezu tabletu alebo telefónu.

responzívna navigačná lišta v mobile

Bootstrap typografia

Bootstrap 4.0.0, rovnako ako minulé verzie Bootstrap, má predvolené štýly typografie, ktoré môžete prepísať pomocou CSS.

Text tela

Bootstrap 4 aplikuje predvolený štýl textu tela na prvok HTML je 16 pixlov, pričom na prvok tela sa použije veľkosť písma 1rem (rovná sa prvku HTML)..

Pretože Bootstrap používa zásobník natívnych fontov (predvolené písma návštevníkov webových stránok), predvolené záložné práva sú Helvetica Neue, Arial a sans-serif..

Nadpisy HTML

Bootstrap štandardne podporuje .h1 (Semibold 36px) až h6 (Semibold 12px).

Zobrazte nadpis

Bootstrap robí nadpis nad krokom nad rámec bežných hlavičiek HTML pomocou „Display Headings“, ktoré majú skutočne vyniknúť od bežných nadpisov a podporovať štyri veľkosti: .display-1, .display-2, .display-3 a .display-4.

Hlavná veta a Mark

Ak chcete, aby boli vaše „hlavné“ vety vynikajúce, použite triedu .lead z Bootstrapu. Pomocou tohto prvku zvýraznite kľúčové body.

príklad typografického kódu

olovo a značka typografie

Blockquotes

Tento prvok je v HTML5 štandardom, aj keď naň môžete použiť štýl Bootstrapu pomocou triedy .blockquote.

Môžete zahrnúť prvky a do bloku quote.

príklad kódu bloku

blockquote

zoznamy

Pre zoznamy bez štýlu zoznamu a ľavého okraja môžete použiť triedu Bootstrap .list-unstyled. Na zobrazenie zoznamov inline môžete použiť položky .list-inline a .list-inline-item

uvádza zoznam príkladov

Samozrejme môžete použiť bežné zoradené a neusporiadané zoznamy, ako aj blokovanie alebo vloženie.

formuláre

V prípade formulárov Boostrap použite triedu .form-control pomocou textových, a elementov. Najlepším postupom, ako správne rozmiestniť medzery, je zabaliť štítky a ovládacie prvky do triedy .formgroup súboru Bootstrap, môžete však použiť znak, ak uprednostňujete.

Existuje veľa možností formulára dostupných cez Bootstrap 4.0.0 (pozrite si oficiálnu dokumentáciu pre všetky možnosti), ale vytvorenie jednoduchého vloženého formulára vám dá predstavu o tom, ako vytvoriť formulár pomocou Bootstrapu..

príklad kódu formulára

Vytvára sa oveľa viac. Pozrite si odkaz na komplexnú dokumentáciu Bootstrap v sekcii zdrojov nižšie.

Bootstrap 4: Deväť štýlov tlačidiel

Bootstrap 4 ponúka deväť štýlov tlačidiel pomocou triedy .btn nasledovanej konkrétnou triedou. Tu je všetkých deväť štýlov tlačidiel.

kód typu tlačidla

typy tlačidiel bootstrap

Obrázky citlivé na mobil

Bootstrap umožňuje ľahko nastaviť obrázky tak, aby sa automaticky primerane škálovali na všetkých zariadeniach pomocou triedy .img-tekutina (nahrádza odozvu Boimstrap 3 .img-responzívne), použitie maximálnej šírky: 100% a výšky: auto na obrázok, zmena mierky obrázok v mierke na nadradený prvok.

kód responzívnych obrázkov

Toto je tekutý obrázok vykreslený na veľkej obrazovke.

obrázky na pracovnej ploche

A tu je obrázok primerane upravený a vykreslený na malej obrazovke.

responzívne obrázky prispôsobené pre mobil

Zaoblené rohy, kruhy a miniatúry

Vytvárajte zaoblené rohy alebo kruhy pomocou pomocných tried .rounded- * a pomocou .img-thumbnail, čím získate obrázkom orámovanie 1 pixel.

príklad zaoblených rohov kruhový obrázok s obrázkami

obrázky so zaoblenými rohmi zobrazujú miniatúry

Komponenty zavádzacích zariadení

Bootstrap obsahuje niektoré užitočné komponenty, ktoré zvyšujú funkčnosť a štýl vášho webu. Uvádzame niekoľko príkladov. Viac sa dozviete v oficiálnej dokumentácii spoločnosti Bootstrap, na ktorú sa odkazuje v časti Zdroje nižšie.

Jumbotron

Bootstrap Jumbotron je veľký popis, ktorý chcel upútať pozornosť návštevníkov vašich webových stránok. Vývojári webových stránok často používajú Jumbotrony na volania na akcie na webových stránkach a na vstupných stránkach. Pomocou triedy .jubotron vytvorte Jumbotron. Môžete tiež upraviť podľa svojich predstáv.

Príklad kódu jumbotronu

gombík s gombíkom

karty

Karty sú spôsob, ako usporiadať obsah, aby vynikli. Bootstrap ponúka veľa možností štýlu, ale tu vám ukážeme základnú kartu.

príklad kódu karty

bootstrapové karty

Oddiel 4

Zdroje zavádzacích zariadení

Bootstrap má silnú komunitu, vynikajúcu dokumentáciu a množstvo vysoko kvalitných tém a šablón. Tu je niekoľko užitočných zdrojov Bootstrap dostupných online:

Získajte Bootstrap – oficiálne miesto na získanie Bootstrapu a oficiálnej Bootstrap dokumentácie. Dokumentácia je vynikajúca a komplexná.

Start Bootstrap – webová stránka venovaná poskytovaniu bezplatných tém a šablón.

Bootsnipp – skvelé miesto na nájdenie užitočných útržkov kódu a konštrukčných prvkov, ktoré môžete použiť vo svojich vlastných projektoch Bootstrap.

Font Awesome – Táto sada ikon a sada nástrojov použitá v Bootstrap 4 nahrádza glyfikóny použité v Bootstrap 3.

Theme Forest – Toto je knižnica tém a šablón vrátane mnohých tém pre Bootstrap 4.0.0.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me