Hvernig á að skrifa farsímavænt forrit með JQuery & Bootstrap
Í hluta 1 af þessari röð settum við upp grunn HTML 5 verkefni með því að nota Netbeans sem IDE okkar, og við kynntum einnig nokkra þætti sem hafa verið bætt við í þessari nýju forskrift tungumálsins.
[Þér gæti líka líkað við: 27 bestu IDE fyrir C/C++ forritun eða frumkóða ritstjóra á Linux ]
Í örfáum orðum geturðu hugsað um jQuery sem Javascript bókasafn yfir vafra og palla sem getur einfaldað forskriftarskrif viðskiptavinarhliðar á HTML síðum til muna. Aftur á móti er hægt að lýsa Bootstrap sem fullkomnum ramma sem samþættir HTML, CSS og Javascript verkfæri til að búa til farsímavænar og móttækilegar vefsíður.
Í þessari grein munum við kynna þér jQuery og Bootstrap, tvö ómetanleg tól til að skrifa HTML 5 kóða auðveldara. Bæði jQuery og Bootstrap eru með leyfi samkvæmt MIT og Apache 2.0 leyfum, sem eru samhæf við GPL og eru því ókeypis hugbúnaður.
Vinsamlegast athugaðu að ekki er fjallað um helstu HTML, CSS og Javascript hugtök í neinni grein í þessari röð. Ef þér finnst þú þurfa að kynna þér þessi efni fyrst áður en þú heldur áfram, mæli ég eindregið með HTML 5 kennslunni í W3Schools.
Að fella jQuery og Bootstrap inn í verkefnið okkar
Til að hlaða niður jQuery, farðu á vefsíðu verkefnisins á http://jquery.com og smelltu á hnappinn sem sýnir tilkynninguna fyrir nýjustu stöðugu útgáfuna.
Við munum fara með þennan annan valkost í þessari handbók. EKKI smella á niðurhalstengilinn ennþá. Þú munt taka eftir því að þú getur sótt annað hvort þjappaða .min.js eða óþjappaða .js útgáfu af jQuery.
Sú fyrri er sérstaklega ætluð fyrir vefsíður og hjálpar til við að draga úr hleðslutíma síðna (og þar með mun Google raða síðunni þinni betur), en sú síðari er aðallega miðuð við kóðara í þróunarskyni.
Til að vera stutt og auðveld í notkun munum við hlaða niður þjöppuðu (einnig þekkt sem minified) útgáfunni í forskriftarmöppuna inni í vefsvæðinu okkar.
$ cd /home/ubuntu/NetBeansProjects/TecmintTest/public_html/scripts/ $ wget https://code.jquery.com/jquery-3.6.0.min.js
Nú er kominn tími til að bæta Bootstrap við verkefnið okkar. Farðu á http://getbootstrap.com og smelltu á Download Bootstrap. Á næstu síðu, smelltu á auðkennda valkostinn eins og sýnt er hér að neðan til að hlaða niður smækkuðu íhlutunum, tilbúnum til notkunar, í zip skrá:
Þegar niðurhalinu lýkur, farðu í niðurhalsmöppuna þína, pakkaðu niður skránni og afritaðu auðkenndu skrárnar í tilgreindar möppur inni í verkefninu þínu:
# cd ~/Downloads # unzip -a bootstrap-5.1.3-dist.zip # cd bootstrap-5.1.3-dist/
Afritaðu nú CSS og JS skrár í viðkomandi möppur í verkefnisskipulaginu.
# cp css/bootstrap.min.css /home/ubuntu/NetBeansProjects/TecmintTest/public_html/styles # cp js/bootstrap.min.js /home/ubuntu/NetBeansProjects/TecmintTest/public_html/scripts
Ef þú stækkar nú uppbyggingu síðunnar þinnar í Netbeans ætti hún að líta svona út:
Að bæta við tilvísunum
Það lítur vissulega vel út, en við höfum samt ekki sagt index.html skránni okkar að nota neina af þessum skrám. Til einföldunar munum við fyrst skipta út innihaldi þessarar skráar fyrir barebones html skrá:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jQuery and Bootstrap</title> </head> <body> <!-- // Your code will appear here. --> </body> </html>
Dragðu síðan og slepptu hverri skrá úr verkefnisleiðsöguhlutanum í kóðann, inni í merkjunum, eins og þú sérð í eftirfarandi skjávarpi. Gakktu úr skugga um að tilvísun í jQuery birtist á undan tilvísun í Bootstrap vegna þess að hið síðarnefnda fer eftir því fyrra:
Það er það - þú hefur bætt við tilvísunum í bæði jQuery og Bootstrap og getur nú byrjað að skrifa kóða.
Að skrifa fyrsta móttækilega kóðann þinn
Við skulum nú bæta við siglingastiku og setja hana efst á síðunni okkar. Ekki hika við að hafa 4-5 tengla með dummy texta og ekki tengja það við neitt skjal í bili - settu bara eftirfarandi kóðabút inn í meginmál skjalsins.
Ekki gleyma að eyða tíma í að kynnast sjálfvirkri útfyllingareiginleika í Netbeans, sem mun sýna þér námskeiðin sem Bootstrap býður upp á þegar þú byrjar að skrifa.
Kjarninn í kóðabútinum hér að neðan er Bootstrap gámaflokkurinn, sem er notaður til að setja efni inni í láréttum íláti sem mun sjálfkrafa breyta stærð eftir stærð skjásins þar sem verið er að skoða það. Ekki síður mikilvægur er gáma-vökvaflokkurinn, sem mun tryggja að efnið innan mun taka alla breidd skjásins.
<div class="container">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div><!--/.container-fluid -->
</nav>
</div>
Annar sérkenni Bootstrap er að það útilokar þörfina fyrir töflur í HTML kóða. Þess í stað notar það ristkerfi til að skipuleggja efni og lætur það líta vel út bæði á stórum og litlum tækjum (frá símum alla leið til stóru skjáborða eða fartölvuskjáa).
Í ristkerfi Bootstrap er skjáskipulaginu skipt í 12 dálka:
Dæmigerð uppsetning samanstendur af því að nota 12 dálka skipulagið sem er skipt í 3 hópa með 4 dálkum hver, eins og hér segir:
Til að gefa til kynna þessa staðreynd í kóða, og til að láta hana birta þannig frá og með meðalstórum tækjum (eins og fartölvum) og eldri, bætið við eftirfarandi kóða fyrir neðan lokamerkið:
...
</nav>
<div class="row">
<div class="col-md-4">This is the text in GROUP 1</div>
<div class="col-md-4">This is the text in GROUP 2</div>
<div class="col-md-4">This is the text in GROUP 3</div>
</div>
</div> <!--Closing tag of the container class -->
Þú hlýtur að hafa tekið eftir því að dálkaflokkarnir í Bootstrap-netinu gefa til kynna upphafsuppsetningu fyrir tiltekna tækjastærð og hærri, þar sem md í þessu dæmi stendur fyrir medium (sem nær einnig yfir lg, eða stór tæki).
Fyrir smærri tæki (sm og xs) staflast efnisskilunum og birtast hver fyrir ofan þá næstu.
Í eftirfarandi skjávarpi geturðu séð hvernig síðan þín ætti að líta út núna. Athugaðu að þú getur breytt stærð vafragluggans til að líkja eftir mismunandi skjástærðum eftir að þú hefur sett verkefnið af stað með því að nota hnappinn Keyra verkefni eins og við lærðum í hluta 1.
Samantekt
Til hamingju! Þú hlýtur að hafa skrifað einfalda, en samt hagnýta, móttækilega síðu núna. Ekki gleyma að skoða Bootstrap vefsíðuna til að kynnast næstum takmarkalausri virkni þessa ramma.
Eins og alltaf, ef þú hefur spurningu eða athugasemd, ekki hika við að hafa samband við okkur með því að nota formið hér að neðan.