Anonim

Ako nikada niste čuli za Bootstrap, okvir koji je razvio Twitter za izradu prekrasnih web stranica, nedostaje vam! Bootstrap čini prilično brz i lak za izradu web stranica bez puno znanja o CSS-u (Cascading Style Sheets). Ako ste novi u programiranju za web, ne morate ništa znati o CSS-u da biste počeli učiti kako Bootstrap radi; sve što trebate je jedan HTML dokument. Pogledati ćemo Bootstrap, pokazat ćemo vam o čemu se radi, na koji način funkcionira i je li dobra opcija za svako web mjesto koje izgradite.

Umetanje API-ja za pokretanje sustava u svoju datoteku HTML-a

Imate nekoliko opcija za umetanje Bootstrapa u vašu glavnu datoteku projekta. Prva opcija je da u svoj projekt umetnete sve potrebne datoteke za pokretanje. To možete učiniti preuzimanjem paketa i prijenosom u mapu projekta. Naravno, morat ćete povezati primarnu CSS datoteku Bootstrap sa svojim dokumentom. Službena web stranica Bootstrapa sadrži detaljni vodič kako to učiniti.

Druga je mogućnost preskočiti preuzimanje paketa i koristiti mrežu za dostavu sadržaja (CDN). CDN omogućava vam da povežete primarne datoteke za pokretanje sustava s vašim HTML dokumentom, a da ih nikada ne preuzmete. To, naravno, nije uvijek dobra stvar za profesionalne web stranice, jer ne bih bio previše brz da prepustim sudbinu svoju poslovnu ili portfelj stranicu ako taj poslužitelj ikad ne propadne. Najbolje je imati datoteke u svom projektu, ali u svrhu učenja, CDN će uspjeti.

Da biste umetnuli Bootstrap u svoj HTML dokument, morat ćete samo unijeti sljedeći kôd u polje označite u svom HTML dokumentu:

Nakon što se te veze ubace u tu glavnu oznaku, trebali biste biti spremni za početak korištenja klasa Bootstrap. Vaš dokument bi trebao izgledati ovako:

Bootstrap i klase

Elementi dizalice se raščlanjuju u klase, koje su samo gomila unaprijed napisanih CSS-ova koje možete umetnuti u svoj oznake. Umetanje klasa u vašu oznaku je jednostavno, samo morate znati ime klase koju želite koristiti i zatim je primijeniti na jedan od vaših HTML elemenata koristeći vrijednost class = "classname", kako je objašnjeno u prethodnom članku.

Težak je dio shvatiti kako sve to djeluje zajedno kako bi stvorili nešto lijepo. Sve različite klase dostupne u Bootstrapu možete provjeriti iz službene dokumentacije. Sad, savladavanje Bootstrapa je druga priča. To vas ne možemo naučiti ili bilo tko drugi. Nakon podučavanja možete gledati udžbenike, ali da biste bolje iskoristili okvir, dolazi s puno pokušaja i pogrešaka. A to zahtijeva i da se s time pozabavite vlastitim projektima.

Imajući to na umu, molim vas da pokrenete svoj vlastiti HTML projekt na računalu koristeći Atom ili neki drugi uređivač teksta, pregledajte o čemu se radi u klasu HTML i CSS, a zatim se počnite igrati s Bootstrapom. A ako znate dovoljno markiranja, možda čak napravite vlastitu web stranicu portfelja kao test vježbe.

Je li Bootstrap održiva opcija za svako web mjesto?

Bootstrap je odličan okvir, ali je li održiva opcija za svako web mjesto koje stvorite? Doista ovisi o programeru kao i zahtjevima projekta. U mnogim profesionalnim okruženjima zaista nećete moći izabrati koje tehnologije koristite jer ćete to u velikoj mjeri ovisiti o voditelju projekata. Ako rečeni projektni voditelj odluči koristiti Bootstrap, kombinirat ćete ga i s tonom prilagođenog CSS-a. To obično čini vašu web lokaciju jedinstvenom i različitom od ostalih web mjesta koja koriste Bootstrap.

Osobno ne vidim Bootstrap kao sjajnu opciju za svaku web stranicu. Naravno, može vam pomoći i pružiti neke prečace, ali na kraju sam utvrdio da je dizajniranje iz temelja s CSS-om najbolja ruta, uglavnom zbog kontrole koju imate nad njim. Ali još jednom, ako tek započinjete s web programiranjem, nije loše uopće koristiti Bootstrap, ali nemojte se osloniti na njega u karijeri.

Vrijedno je napomenuti da ako ste početnik programer, ne biste trebali koristiti Bootstrap za sve projekte u svom portfelju. Može se dogoditi da možda znate iskusni API, ali ne znate potpuno oko CSS-a. U skladu s tim, dobro je imati pristojnu mješavinu oba u svom portfelju (ili čak isključivo CSS-a, jer je Bootstrap lako pokupiti).

zatvaranje

To je sve što je Bootstrap ukratko. Kao što sam već spomenuo, potičem vas da pokrenete svoj vlastiti HTML projekt i dodate neke od različitih klasa elementima da biste se počeli igrati oko okvira. Ovdje možete pronaći sve različite komponente koje Bootstrap nudi s objašnjenjima i primjerima koda.

Bootstrap je doista uredan alat, ali imajte na umu da se ne oslanjate samo na njega! Dobro je biti upoznat s njim i znati svoj put oko okvira, ali također budite sigurni da zaronite u CSS kako biste zaista razumjeli što se događa iza scene. I ne samo to, već dobro poznavanje CSS-a puno komplimentira Bootstrap-u, omogućujući vam da uistinu napravite jedinstvene i lijepe web stranice po vlastitom prilagođavanju.

Kako možete koristiti bootstrap za izradu prekrasne web stranice