Në këtë postim do të fillojmë duke krijuar një faqe me Bootstrap, kuadri me burim të hapur që na e bën të lehtë ta bëjmë atë të përgjegjshëm dhe t'i ofrojmë njëfarë ndërveprimtarie. Është një shabllon bazë i krijuar automatikisht nga një shtojcë e mjedisit të zhvillimit që e kemi rekomanduar më parë dhe që do të duhet ta modifikojmë.
Në artikulli i mëparshëm Do të gjeni udhëzimet për të instaluar VS Codium, për të përkthyer ndërfaqen e tij të përdoruesit në spanjisht dhe për të instaluar shtojcën Bootstrap.
Dy gjëra për të mbajtur parasysh:
- Komandat që përdorim janë shkurtore të tastierës, ju duhet t'i shkruani ato. Kopjimi/ngjitja nuk funksionon.
- Menaxheri ynë i përmbajtjes nuk më lejon të shfaq kodin HTML, kështu që më duhet të përdor pamjet e ekranit. Kështu që ju të keni akses në kodin e shembujve që i kam ngarkuar në GitHub.
Si të klononi një depo GitHub
Ajo që i ndan të mëdhenjtë nga ne të tjerët është mënyra se si ata reagojnë ndaj problemeve. Richard Stallman nuk e pëlqeu shoferin e tij të printerit dhe meqë nuk e linin ta ndryshonte, ai filloi lëvizjen e softuerit të lirë. Linus Torvalds nuk ishte i bindur nga asnjë nga platformat e ndarjes së kodit dhe krijoi të tijën. git.
Ndryshe nga sistemet tradicionale të shpërndarjes së softuerit, në të cilat i vetmi ndërveprim i lejuar i përdoruesit është shkarkimi, me Git mund të ndiqni evolucionin e projektit me kalimin e kohës. Njerëz të tjerë mund të klonojnë depon, të bëjnë modifikime dhe të propozojnë që zhvilluesit e projektit origjinal t'i përfshijnë ato. Nëse pranohet, zhvilluesit mund ta bëjnë këtë lehtësisht pa pasur nevojë të shkarkojnë dhe ri-ngarkojnë skedarët.
Ka disa shërbime të bazuara në Git, unë zgjodha GitHub thjesht sepse integrohet me VS Codium.
Për të shkarkuar skedarët e mostrës në kompjuterin tuaj, thjesht duhet të instaloni paketën git duke ndjekur udhëzimet e shpërndarjes suaj për instalimin e paketave në terminal.
Pastaj shkruani komandat e mëposhtme.
Unë preferoj t'i ruaj skedarët në dosjen Documents, kështu që unë ndryshoj direktorinë me
cd Documentos
Pastaj klonoj skedarët me:
git clone https://github.com/dggonzalez1971/bootstrap.git
Unë do t'ju kujtoj këto hapa në secilin prej artikujve të mbetur, pasi në këtë mënyrë ju do të përditësoni skedarët e shembullit ndërsa ngarkohen.
Për të parë skedarët, thjesht hapni eksploruesin e skedarëve dhe kërkoni dosjen bootstrap.
Krijimi i një faqeje me Bootstrap
Në rast se preferoni të shkruani kodin me dorë, ne fillojmë duke krijuar një dosje në të cilën do të ruajmë faqen. Ju mund të vendosni cilindo emër që ju pëlqen.
Më pas ndjekim hapat e mëposhtëm:
- Le të shkojmë në menu Arkivi.
- Klikoni mbi Skedar i ri teksti.
- Klikoni mbi Ruaj.
- Kërkojmë dosjen që kemi krijuar dhe vendosim emrin e skedarit shembull1.html.
- Klikoni mbi Ruaj.
Ndonjëherë dritarja e File Explorer mund të fshihet nga ajo VSCodium.
Le të lëmë shtesën të krijojë shabllonin bazë për ne. Për këtë ne shkruajmë !b5-$
Kjo do të gjenerojë kodin që do të gjeni në dosjen e shembujve si shembull1.html
Ne do të shohim sa vijon:
Ky është kodi i krijuar nga zgjerimi Bootstrap.
Ne do të bëjmë disa ndryshime në këtë skedar. Do t'i gjeni modifikimet nën emrin shembull2.html
- Në rreshtin 2 ne ndryshojmë gjuhën duke zëvendësuar eng me es. Kjo tregon për motorët e kërkimit se gjuha e faqes është spanjisht.
- Në rreshtin 6 ne ndryshojmë tekstin që është nën etiketat titull. Vendosëm Faqja ime e parë Bootstrap.
- Në rreshtin 12 ne ndryshojmë përmbajtjen midis etiketave h1 nga Kjo është një faqe e krijuar me Bootstrap.
Më pas do të bëjmë disa modifikime të rëndësishme. Këto modifikime kanë të bëjnë me:
- Zhvilluesi i shtojcave nuk mund të vazhdojë me versionet e Bootstrap dhe ka më të reja.
- Ka shumë opsione për komponentët e bootstrap dhe unë jam i interesuar për një tjetër.
- Sipas dokumentacionit zyrtar, thirrjet në bibliotekat Javascript duhet të jenë brenda etiketave të trupit.
Për shembull 2 ne modifikuam përmbajtjen e rreshtit 7, fshimë rreshtat 8 dhe 9 dhe ngarkuam përmbajtjen e mbetur për të ruajtur përputhshmërinë e numrave. Pastaj klikojmë në fund të rreshtit 10 për të krijuar një rresht të ri 11 dhe vendosim lidhjen me bibliotekat Javascript.
Mos u shqetësoni nëse nuk e kuptoni kodin. Unë do të shpjegoj funksionin e çdo rreshti në artikullin vijues.