Jinsi ya Kuandika Programu Inayotumika kwa Simu kwa Kutumia JQuery & Bootstrap
Katika Sehemu ya 1 ya mfululizo huu, tulianzisha mradi wa msingi wa HTML 5 kwa kutumia Netbeans kama IDE yetu, na pia tuliwasilisha vipengele vichache ambavyo vimeongezwa katika maelezo haya mapya ya lugha.
[ Unaweza pia kupenda: Vitambulisho 27 Bora vya Kuprogramu C/C++ au Vihariri vya Msimbo wa Chanzo kwenye Linux ]
Kwa maneno machache, unaweza kufikiria jQuery kama kivinjari-mtambuka na maktaba ya Javascript ya jukwaa ambayo inaweza kurahisisha sana uandishi wa upande wa mteja katika kurasa za HTML. Kwa upande mwingine, Bootstrap inaweza kuelezewa kama mfumo kamili unaounganisha zana za HTML, CSS, na Javascript ili kuunda kurasa za wavuti zinazofaa kwa simu na zinazoitikia.
Katika makala haya, tutakutambulisha kwa jQuery na Bootstrap, huduma mbili za bei nafuu za kuandika msimbo wa HTML 5 kwa urahisi zaidi. jQuery na Bootstrap zote zimeidhinishwa chini ya leseni za MIT na Apache 2.0, ambazo zinaendana na GPL na hivyo ni programu zisizolipishwa.
Tafadhali kumbuka kuwa dhana za kimsingi za HTML, CSS, na Javascript hazijashughulikiwa katika makala yoyote ya mfululizo huu. Ikiwa unahisi unahitaji kupata kasi ya mada hizi kwanza kabla ya kuendelea, ninapendekeza sana mafunzo ya HTML 5 katika W3Schools.
Kujumuisha jQuery na Bootstrap kwenye Mradi Wetu
Ili kupakua jQuery, nenda kwenye tovuti ya mradi katika http://jquery.com na ubofye kitufe kinachoonyesha arifa ya toleo la hivi punde thabiti.
Tutaenda na chaguo hili la pili katika mwongozo huu. USIBONYEZE kiunga cha kupakua bado. Utagundua kwamba unaweza kupakua ama .min.js iliyobanwa au toleo lisilobanwa la .js la jQuery.
Ya kwanza inakusudiwa mahususi kwa tovuti na husaidia kupunguza muda wa upakiaji wa kurasa (na hivyo Google itaweka tovuti yako bora zaidi), huku ya pili ikilenga zaidi coders kwa madhumuni ya ukuzaji.
Kwa ajili ya ufupi na urahisi wa matumizi, tutapakua toleo lililobanwa (pia linajulikana kama minified) kwenye folda ya hati ndani ya muundo wa tovuti yetu.
$ cd /home/ubuntu/NetBeansProjects/TecmintTest/public_html/scripts/ $ wget https://code.jquery.com/jquery-3.6.0.min.js
Sasa ni wakati wa kuongeza Bootstrap kwenye mradi wetu. Nenda kwa http://getbootstrap.com na ubofye Pakua Bootstrap. Katika ukurasa unaofuata, bofya chaguo lililoangaziwa kama ilivyoonyeshwa hapa chini ili kupakua vijenzi vilivyopunguzwa, vilivyo tayari kutumika, katika faili ya zip:
Upakuaji unapokamilika, nenda kwenye folda yako ya Vipakuliwa, fungua faili, na unakili faili zilizoangaziwa kwenye saraka zilizoonyeshwa ndani ya mradi wako:
# cd ~/Downloads # unzip -a bootstrap-5.1.3-dist.zip # cd bootstrap-5.1.3-dist/
Sasa nakili faili za CSS na JS kwenye folda husika katika muundo wa mradi.
# cp css/bootstrap.min.css /home/ubuntu/NetBeansProjects/TecmintTest/public_html/styles # cp js/bootstrap.min.js /home/ubuntu/NetBeansProjects/TecmintTest/public_html/scripts
Ikiwa sasa unapanua muundo wa tovuti yako katika Netbeans, inapaswa kuonekana kama ifuatavyo:
Kuongeza Marejeleo
Hakika hiyo inaonekana nzuri, lakini bado hatujaambia faili yetu ya index.html kutumia faili zozote kati ya hizo. Kwa ajili ya unyenyekevu, tutabadilisha yaliyomo kwenye faili hiyo na faili ya barebones html kwanza:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jQuery and Bootstrap</title> </head> <body> <!-- // Your code will appear here. --> </body> </html>
Kisha, buruta tu na udondoshe kila faili kutoka kwa sehemu ya kirambazaji cha mradi hadi kwenye msimbo, ndani ya lebo za , kama unavyoweza kuona kwenye skrini ifuatayo. Hakikisha kuwa rejeleo la jQuery linaonekana kabla ya rejeleo la Bootstrap kwa sababu ya mwisho inategemea ya kwanza:
Hiyo ndiyo yote - umeongeza marejeleo kwa jQuery na Bootstrap, na sasa unaweza kuanza kuandika msimbo.
Kuandika Msimbo wako wa Kwanza wa Kuitikia
Hebu sasa tuongeze upau wa kusogeza na uiweke juu ya ukurasa wetu. Jisikie huru kujumuisha viungo 4-5 vilivyo na maandishi ya dummy na usiiunganishe na hati yoyote kwa sasa - ingiza tu kijisehemu cha msimbo kifuatacho ndani ya mwili wa hati.
Usisahau kutumia muda kufahamiana na kipengele cha kukamilisha kiotomatiki katika Netbeans, ambacho kitakuonyesha madarasa yanayotolewa na Bootstrap unapoanza kuandika.
Kiini cha kijisehemu cha msimbo hapa chini ni darasa la chombo cha Bootstrap, ambacho hutumika kuweka maudhui ndani ya kontena iliyo mlalo ambayo itabadilisha ukubwa kiotomatiki kulingana na saizi ya skrini inakotazamwa. Si muhimu zaidi ni darasa la maji ya chombo, ambalo litahakikisha kwamba maudhui ndani yatachukua upana mzima wa skrini.
<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>
Kipengele kingine cha kutofautisha cha Bootstrap ni kwamba huondoa hitaji la jedwali katika nambari ya HTML. Badala yake, hutumia mfumo wa gridi ya taifa kupanga yaliyomo na kuifanya ionekane ipasavyo kwenye vifaa vikubwa na vidogo (kutoka kwa simu hadi kwenye skrini kubwa ya kompyuta ya mezani au ya kompyuta ndogo).
Katika mfumo wa gridi ya Bootstrap, mpangilio wa skrini umegawanywa katika safu wima 12:
Usanidi wa kawaida unajumuisha kutumia mpangilio wa safu wima 12 uliogawanywa katika vikundi 3 vya safu wima 4 kila moja, kama ifuatavyo:
Ili kuonyesha ukweli huu katika msimbo, na ili ionyeshwe hivyo kuanzia kwenye vifaa vya ukubwa wa wastani (kama vile kompyuta za mkononi) na zaidi, ongeza msimbo ufuatao chini ya lebo ya kufunga ya :
...
</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 -->
Labda umegundua kuwa safu wima katika gridi ya Bootstrap zinaonyesha mpangilio wa kuanzia kwa saizi mahususi ya kifaa na hapo juu, kama md katika mfano huu inasimamia wastani (ambayo pia inashughulikia lg, au vifaa vikubwa).
Kwa vifaa vidogo (sm na xs), div za maudhui hupangwa na kuonekana moja juu ya inayofuata.
Katika skrini ifuatayo, unaweza kuona jinsi ukurasa wako unapaswa kuonekana kwa sasa. Kumbuka kuwa unaweza kubadilisha ukubwa wa dirisha la kivinjari chako ili kuiga ukubwa tofauti wa skrini baada ya kuzindua mradi kwa kutumia kitufe cha Endesha mradi kama tulivyojifunza katika Sehemu ya 1.
Muhtasari
Hongera! Lazima uwe umeandika ukurasa rahisi, lakini unaofanya kazi, na unaojibu kufikia sasa. Usisahau kuangalia tovuti ya Bootstrap ili kufahamu zaidi utendakazi usio na kikomo wa mfumo huu.
Kama kawaida, ikiwa una swali au maoni, jisikie huru kuwasiliana nasi kwa kutumia fomu iliyo hapa chini.