Sa post na ito magsisimula tayo sa paggawa ng isang site gamit ang Bootstrap, ang open source na framework na nagpapadali para sa amin na gawin itong tumutugon at bigyan ito ng ilang interaktibidad. Ito ay isang pangunahing template na awtomatikong binuo ng isang development environment plugin na inirerekomenda namin noon at kailangan naming baguhin.
Sa artículo nauuna Makikita mo ang mga tagubilin sa pag-install ng VS Codium, isalin ang user interface nito sa Spanish at i-install ang Bootstrap plugin.
Dalawang bagay na dapat tandaan:
- Ang mga utos na ginagamit namin ay mga keyboard shortcut, kailangan mong i-type ang mga ito. Hindi gumagana ang kopyahin/i-paste.
- Hindi ako pinapayagan ng aming content manager na ipakita ang HTML code kaya kailangan kong gumamit ng mga screenshot. Upang magkaroon ka ng access sa code ng mga halimbawang na-upload ko sa kanila sa GitHub.
Paano i-clone ang isang repositoryo ng GitHub
Ang naghihiwalay sa mga dakila sa iba sa atin ay ang paraan ng kanilang reaksyon sa mga problema. Hindi nagustuhan ni Richard Stallman ang kanyang printer driver at dahil hindi nila ito pinayagang baguhin ito, sinimulan niya ang libreng kilusan ng software. Si Linus Torvalds ay hindi kumbinsido sa alinman sa mga platform ng pagbabahagi ng code at lumikha ng kanyang sarili. git.
Hindi tulad ng tradisyonal na mga sistema ng pamamahagi ng software kung saan ang tanging pakikipag-ugnayan ng user na pinapayagan ay ang pag-download, sa Git maaari mong sundin ang ebolusyon ng proyekto sa paglipas ng panahon. Maaaring i-clone ng ibang mga tao ang repositoryo, gumawa ng mga pagbabago, at magmungkahi na isama sila ng mga developer ng orihinal na proyekto. Kung tatanggapin, madali itong magagawa ng mga developer nang hindi kinakailangang i-download at muling i-upload ang mga file.
Mayroong ilang mga serbisyo batay sa Git, pinili ko ang GitHub dahil lamang ito ay sumasama sa VS Codium.
Upang ma-download ang mga sample na file sa iyong computer kailangan mo lang i-install ang git package kasunod ng mga tagubilin ng iyong pamamahagi para sa pag-install ng mga package sa terminal.
Pagkatapos ay i-type mo ang sumusunod na mga utos.
Mas gusto kong i-save ang mga file sa folder ng Documents kaya binago ko ang direktoryo gamit ang
cd Documentos
Pagkatapos ay kino-clone ko ang mga file gamit ang:
git clone https://github.com/dggonzalez1971/bootstrap.git
Ipapaalala ko sa iyo ang mga hakbang na ito sa bawat natitirang artikulo, dahil sa paraang ito ay ia-update mo ang mga halimbawang file habang ina-upload ang mga ito.
Upang makita ang mga file buksan lamang ang file explorer at hanapin ang folder bootstrap.
Paggawa ng isang site gamit ang Bootstrap
Kung sakaling mas gusto mong i-type ang code nang manu-mano, magsisimula kami sa pamamagitan ng paglikha ng isang folder kung saan ise-save namin ang site. Maaari mong ilagay ang anumang pangalan na gusto mo.
Pagkatapos ay sinusunod namin ang mga susunod na hakbang:
- Pumunta tayo sa menu Archive
- Mag-click sa Bagong Text File.
- Mag-click sa I-save ang.
- Hinahanap namin ang folder na aming ginawa at inilagay ang pangalan ng file example1.html.
- Mag-click sa I-save ang.
Minsan ang window ng File Explorer ay maaaring itago ng VSCodium.
Ipagawa natin sa extension ang pangunahing template para sa atin. Para dito nagta-type kami !b5-$
Bubuo ito ng code na makikita mo sa folder ng mga halimbawa bilang example1.html
Makikita natin ang sumusunod:
Ito ang code na nabuo ng Bootstrap extension.
Gagawa kami ng ilang pagbabago sa file na ito. Makikita mo ang mga pagbabago sa ilalim ng pangalang example2.html
- Sa linya 2 binabago namin ang wika sa pamamagitan ng pagpapalit ng eng ng es. Ipinapahiwatig nito sa mga search engine na ang wika ng site ay Espanyol.
- Sa linya 6 binabago namin ang teksto na nasa ilalim ng mga label pamagat. Inilagay namin Ang aking unang Bootstrap site.
- Sa linya 12 binabago namin ang nilalaman sa pagitan ng mga tag h1 sa pamamagitan ng Ito ay isang site na ginawa gamit ang Bootstrap.
Susunod, gagawa kami ng ilang mahahalagang pagbabago. Ang mga pagbabagong ito ay may kinalaman sa:
- Ang nag-develop ng plugin ay hindi makakasabay sa mga bersyon ng Bootstrap at mayroong higit pang mga kasalukuyan.
- Maraming mga opsyon para sa mga bahagi ng bootstrap at interesado ako sa isa pa.
- Ayon sa opisyal na dokumentasyon, ang mga tawag sa mga library ng Javascript ay dapat nasa loob ng mga body tag.
Halimbawa 2, binabago namin ang nilalaman ng linya 7, tinatanggal ang mga linya 8 at 9 at ina-upload ang natitirang nilalaman upang mapanatili ang pagkakatugma sa pagnunumero. Pagkatapos ay nag-click kami sa dulo ng linya 10 upang lumikha ng bagong linya 11 at ilagay ang link sa mga library ng Javascript.
Huwag mag-alala kung hindi mo naiintindihan ang code. Ipapaliwanag ko ang tungkulin ng bawat linya sa susunod na artikulo.