Anonim

Ak ste nikdy nepočuli o technológii Bootstrap, ktorá bola vytvorená službou Twitter na vytváranie krásnych webových stránok, vám chýba! Bootstrap umožňuje pomerne rýchlo a ľahko navrhnúť webovú stránku bez väčších vedomostí v CSS (Cascading Style Sheets). Ak ste na programovaní webu nováčikom, nemusíte vedieť niečo o CSS, aby ste sa začali učiť, ako funguje Bootstrap; všetko, čo potrebujete, je jediný dokument HTML. Pozrime sa na Bootstrap, ukážeme vám, o čo ide, ako to funguje a či je to dobrá voľba pre každý web, ktorý vytvoríte.

Vloženie Bootstrap API do vášho HTML súboru

Máte niekoľko možností na vloženie Bootstrapu do hlavného súboru projektu. Prvou možnosťou je vloženie všetkých potrebných súborov Bootstrap do projektu. Môžete to urobiť stiahnutím balíka a jeho odovzdaním do priečinka projektu. Musíte samozrejme prepojiť primárny súbor CSS Bootstrapu s dokumentom. Oficiálna webová stránka spoločnosti Bootstrap obsahuje podrobný návod, ako to urobiť.

Druhou možnosťou je preskočenie sťahovania balíka a použitie siete na doručovanie obsahu (CDN). CDN vám umožňuje prepojiť primárne súbory Bootstrap s dokumentom HTML bez toho, aby ste ho museli niekedy stiahnuť. To samozrejme nie je vždy dobré pre profesionálne webové stránky, pretože by som nebol príliš rýchly na to, aby som opustil svoju firmu alebo stránku portfólia, aby som osudom prepadol. Najlepšie je mať súbory vo vašom projekte, ale za účelom učenia sa bude CDN robiť dobre.

Ak chcete do svojho dokumentu HTML vložiť súbor Bootstrap, musíte do kódu HTML vložiť nasledujúci kód značka v dokumente HTML:

Po vložení týchto odkazov do značky head by ste mali byť všetci pripravení začať používať triedy Bootstrap. Váš dokument by mal vyzerať asi takto:

Bootstrap a triedy

Prvky zavádzacej techniky sú rozdelené do tried, ktoré sú iba zväzkom vopred napísaných CSS, ktoré môžete vložiť do svojich značiek. Vkladanie tried do označenia je jednoduché, stačí poznať názov triedy, ktorú chcete použiť, a potom ju použiť na jeden z prvkov HTML pomocou hodnoty class = ”classname”, ako je uvedené v predchádzajúcom článku.

Najťažšia časť je prísť na to, ako to všetko spolupracuje pri vytváraní niečoho krásneho. Všetky rôzne triedy dostupné v Bootstrap si môžete pozrieť priamo z oficiálnej dokumentácie. Zvládnutie Bootstrapu je teraz ďalší príbeh. To nie je niečo, čo by sme vás alebo nikoho iného mohli naučiť. Výukový program môžete sledovať po výučbe, ale aby ste sa dobre naučili používať rámec, ktorý prichádza s množstvom pokusov a omylov. A to si vyžaduje, aby ste sa s tým porozprávali vo svojich vlastných projektoch.

S ohľadom na to vás žiadam, aby ste na počítači spustili svoj vlastný projekt HTML pomocou Atom alebo iného textového editora, preštudovali si, o čom sú triedy HTML a CSS, a potom sa začnite hrať s programom Bootstrap. A ak viete dosť značkovania, možno si dokonca ako testovacie cvičenie vytvorte vlastnú webovú stránku svojho portfólia.

Je Bootstrap uskutočniteľnou možnosťou pre každý web?

Bootstrap je skvelý rámec, ale je to uskutočniteľná možnosť pre každý web, ktorý vytvoríte? Skutočne záleží na vývojárovi, ako aj na požiadavkách projektu. V mnohých profesionálnych prostrediach nebudete mať naozaj na výber, aké technológie používate, pretože to bude do veľkej miery záležitosťou projektového manažéra. Ak sa projektový manažér rozhodne používať program Bootstrap, budete ho kombinovať aj s množstvom vlastných CSS. To spravidla robí váš web jedinečným a odlišným od iných webových stránok používajúcich Bootstrap.

Ja osobne nevidím Bootstrap ako skvelú možnosť pre každú webovú stránku. Iste, môže to pomôcť a poskytnúť niektoré skratky, ale nakoniec som zistil, že navrhovanie od základov pomocou CSS je najlepšia cesta do značnej miery kvôli kontrole, ktorú nad ňou máte. Ale ešte raz, ak ste práve začínali v programovaní webových stránok, nie je zlé používať Bootstrap vôbec, ale nespoliehajte sa na to pre svoju kariéru.

Stojí za zmienku, že ak ste začínajúci vývojár, nemali by ste používať Bootstrap pre všetky projekty vo vašom portfóliu. Môže sa stať, že ovládate rozhranie API, ale úplne nepoznáte cestu okolo CSS. To znamená, že je dobré mať slušnú kombináciu oboch vo vašom portfóliu (alebo dokonca výlučne CSS, pretože je ľahké si vybrať Bootstrap).

záverečný

To je všetko, čo je Bootstrap v skratke. Ako som už spomenul, odporúčam vám začať svoj vlastný projekt HTML a pridať niektoré z rôznych tried k prvkom, ktoré sa začnú hrať s rámcom. Nájdete všetky rôzne komponenty, ktoré ponúka Bootstrap, s vysvetleniami a príkladmi kódov tu.

Bootstrap je skutočne úhľadný nástroj, ale nezabudnite sa naň spoľahnúť sám! Je dobré sa s tým oboznámiť a poznať svoju cestu okolo rámca, ale tiež sa uistite, že ste sa ponorili do CSS, aby ste skutočne pochopili, čo sa deje v zákulisí. Nielen to, ale pevné znalosti v CSS komplimentom Bootstrap veľa umožňujú, aby ste si skutočne vytvorili jedinečné a krásne webové stránky s vlastným prispôsobením.

Ako môžete pomocou bootstrapu vytvoriť krásny web