U ovom postu ćemo početi sa pravljenjem sajta sa Bootstrapom, okvir otvorenog koda koji nam olakšava da ga učinimo prilagodljivim i pružimo mu malo interaktivnosti. To je osnovni predložak automatski generiran od strane dodatka razvojnog okruženja koji smo prije preporučili i koji ćemo morati modificirati.
U prethodni članak Pronaći ćete uputstva za instalaciju VS Codium-a, prevođenje korisničkog interfejsa na španski i instaliranje dodatka za Bootstrap.
Dvije stvari koje treba imati na umu:
- Komande koje koristimo su prečice na tastaturi, morate ih ukucati. Copy/paste ne radi.
- Naš menadžer sadržaja ne dozvoljava mi da prikažem HTML kod pa moram da koristim snimke ekrana. Tako da imate pristup kodu primjera koje sam postavio na GitHub.
Kako klonirati GitHub spremište
Ono što velikane odvaja od nas ostalih je način na koji reaguju na probleme. Richardu Stallmanu se nije svidio njegov drajver za štampač i pošto mu nisu dozvolili da ga promeni, pokrenuo je pokret slobodnog softvera. Linusa Torvaldsa nije uvjerila nijedna platforma za razmjenu koda i stvorio je vlastitu. git.
Za razliku od tradicionalnih sistema za distribuciju softvera u kojima je jedina dozvoljena interakcija korisnika preuzimanje, sa Gitom možete pratiti razvoj projekta tokom vremena. Drugi ljudi mogu klonirati spremište, napraviti modifikacije i predložiti da ih programeri originalnog projekta ugrade. Ako se prihvati, programeri to mogu lako učiniti bez potrebe za preuzimanjem i ponovnim učitavanjem datoteka.
Postoji nekoliko servisa baziranih na Gitu, ja sam izabrao GitHub jednostavno zato što se integriše sa VS Codium.
Da biste preuzeli uzorke datoteka na svoj računar, samo trebate instalirati git paket slijedeći upute vaše distribucije za instaliranje paketa u terminal.
Zatim ukucajte sledeće komande.
Više volim da sačuvam datoteke u fascikli Dokumenti pa promenim direktorijum sa
cd Documentos
Zatim kloniram fajlove sa:
git clone https://github.com/dggonzalez1971/bootstrap.git
Podsjetit ću vas na ove korake u svakom od preostalih članaka, jer ćete na taj način ažurirati primjere datoteka kako budu učitani.
Da biste vidjeli datoteke, samo otvorite File Explorer i potražite mapu bootstrap.
Izrada sajta sa Bootstrapom
U slučaju da preferirate ručno upisivanje koda počinjemo kreiranjem foldera u koji ćemo sačuvati stranicu. Možete staviti koje god ime želite.
Zatim slijedimo sljedeće korake:
- Idemo na meni Arhiva.
- Kliknite na Nova tekstualna datoteka.
- Kliknite na Spremi
- Tražimo mapu koju smo kreirali i stavljamo naziv datoteke primjer1.html.
- Kliknite na Spremi
Ponekad prozor File Explorera može biti skriven od strane VSCodium.
Neka ekstenzija kreira osnovni šablon za nas. Za ovo kucamo !b5-$
Ovo će generirati kod koji ćete pronaći u folderu primjeri kao primjer1.html
Vidjet ćemo sljedeće:
Ovo je kod koji generiše ekstenzija Bootstrap.
Napravit ćemo neke promjene u ovom fajlu. Pronaći ćete modifikacije pod imenom primjer2.html
- U redu 2 mijenjamo jezik zamjenom eng sa es. Ovo označava pretraživačima da je jezik sajta španski.
- U 6. redu mijenjamo tekst koji se nalazi ispod oznaka naslov. Mi smo stavili Moja prva Bootstrap stranica.
- U redu 12 mijenjamo sadržaj između oznaka h1 por Ovo je stranica napravljena pomoću Bootstrapa.
Zatim ćemo napraviti neke važne modifikacije. Ove modifikacije se odnose na:
- Programer dodataka ne može pratiti Bootstrap verzije, a postoje i više aktuelne.
- Postoji mnogo opcija za bootstrap komponente, a mene zanima još jedna.
- Prema službenoj dokumentaciji, pozivi Javascript bibliotekama moraju biti unutar tagova tijela.
Na primjer 2 izmijenili smo sadržaj reda 7, izbrisali redove 8 i 9 i učitali preostali sadržaj kako bismo održali kompatibilnost numeriranja. Zatim kliknemo na kraj reda 10 da kreiramo novi red 11 i stavimo vezu na Javascript biblioteke.
Ne brinite ako ne razumijete kod. Objasnit ću funkciju svake linije u sljedećem članku.