Giunsa Pagsulat ang usa ka Mobile-Friendly nga App Gamit ang JQuery & Bootstrap
Sa Bahin 1 niini nga serye, nag-set up mi og batakang HTML 5 nga proyekto gamit ang Netbeans isip among IDE, ug gipresentar usab namo ang pipila ka elemento nga gidugang niining bag-ong espesipikasyon sa pinulongan.
[ Tingali ganahan ka usab: 27 Best IDEs para sa C/C++ Programming o Source Code Editors sa Linux ]
Sa pipila ka mga pulong, mahimo nimong hunahunaon ang jQuery isip usa ka cross-browser ug cross-platform nga Javascript library nga makapasayon pag-ayo sa client-side scripting sa HTML nga mga panid. Sa laing bahin, ang Bootstrap mahimong mahulagway nga usa ka kompleto nga balangkas nga naghiusa sa HTML, CSS, ug Javascript nga mga himan aron makahimo og mobile-friendly ug responsive nga mga web page.
Niining artikuloha, ipaila-ila ka namo sa jQuery ug Bootstrap, duha ka bililhong kagamitan aron mas daling masulat ang HTML 5 code. Ang jQuery ug Bootstrap parehong lisensyado ubos sa MIT ug Apache 2.0 nga mga lisensya, nga nahiuyon sa GPL ug busa libre nga software.
Palihug timan-i nga ang batakang HTML, CSS, ug Javascript nga mga konsepto wala masakop sa bisan unsang artikulo niini nga serye. Kung gibati nimo nga kinahanglan nimo nga paspasan una kini nga mga hilisgutan sa dili pa magpadayon, girekomenda ko ang HTML 5 nga panudlo sa W3Schools.
Pag-apil sa jQuery ug Bootstrap sa Atong Proyekto
Aron ma-download ang jQuery, adto sa website sa proyekto sa http://jquery.com ug i-klik ang buton nga nagpakita sa pahibalo alang sa pinakabag-o nga stable nga bersyon.
Moadto kami niining ikaduha nga kapilian niini nga giya. AYAW i-klik ang download link pa. Mamatikdan nimo nga mahimo nimong i-download ang usa ka compressed .min.js o usa ka uncompressed .js nga bersyon sa jQuery.
Ang una gituyo ilabi na alang sa mga website ug makatabang sa pagpakunhod sa oras sa pagkarga sa mga panid (ug sa ingon ang Google mag-ranggo sa imong site nga mas maayo), samtang ang ikaduha gipunting kasagaran sa mga coder alang sa mga katuyoan sa pagpalambo.
Alang sa kamubo ug kasayon sa paggamit, among i-download ang compressed (nailhan usab nga minified) nga bersyon sa scripts folder sulod sa among site structure.
$ cd /home/ubuntu/NetBeansProjects/TecmintTest/public_html/scripts/ $ wget https://code.jquery.com/jquery-3.6.0.min.js
Karon na ang panahon aron idugang ang Bootstrap sa among proyekto. Adto sa http://getbootstrap.com ug i-klik ang Download Bootstrap. Sa sunod nga panid, i-klik ang gipasiugda nga kapilian sama sa gipakita sa ubos aron ma-download ang minified nga mga sangkap, andam gamiton, sa usa ka zip file:
Kung makompleto na ang pag-download, adto sa imong folder sa Pag-download, unzip ang file, ug kopyaha ang gipasiugda nga mga file sa gipakita nga mga direktoryo sa sulod sa imong proyekto:
# cd ~/Downloads # unzip -a bootstrap-5.1.3-dist.zip # cd bootstrap-5.1.3-dist/
Karon kopyaha ang CSS ug JS nga mga file sa tagsa-tagsa nga mga folder sa istruktura sa proyekto.
# cp css/bootstrap.min.css /home/ubuntu/NetBeansProjects/TecmintTest/public_html/styles # cp js/bootstrap.min.js /home/ubuntu/NetBeansProjects/TecmintTest/public_html/scripts
Kung gipalapdan nimo karon ang istruktura sa imong site sa Netbeans, kinahanglan kini tan-awon sama sa mosunod:
Pagdugang mga Reperensya
Kana segurado nga nindot tan-awon, apan wala gihapon namo gisulti ang among index.html nga payl sa paggamit sa bisan unsa niadtong mga payl. Alang sa kayano, atong pulihan ang mga sulod niana nga file sa usa ka barebones html file una:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jQuery and Bootstrap</title> </head> <body> <!-- // Your code will appear here. --> </body> </html>
Dayon, i-drag ug ihulog lang ang matag file gikan sa project navigator section ngadto sa code, sulod sa tags, sama sa imong makita sa mosunod nga screencast. Siguruha nga ang paghisgot sa jQuery makita sa wala pa ang paghisgot sa Bootstrap tungod kay ang ulahi nagdepende sa nauna:
Mao na - gidugang nimo ang mga reperensiya sa jQuery ug Bootstrap, ug mahimo nang magsugod sa pagsulat sa code.
Pagsulat sa Imong Unang Responsive Code
Magdugang kita ug navigation bar ug ibutang kini sa ibabaw sa atong panid. Mobati nga gawasnon sa paglakip sa 4-5 ka link nga adunay dummy nga teksto ug ayaw kini i-link sa bisan unsang dokumento sa pagkakaron – isulod lang ang mosunod nga code snippet sulod sa lawas sa dokumento.
Ayaw kalimti ang paggahin ug panahon sa pagkasinati sa bahin sa auto-completion sa Netbeans, nga magpakita kanimo sa mga klase nga magamit sa Bootstrap samtang nagsugod ka sa pag-type.
Sa kasingkasing sa code snippet sa ubos mao ang Bootstrap container class, nga gigamit sa pagbutang sa sulod sa sulod sa usa ka pinahigda nga sudlanan nga awtomatik nga mag-usab sa gidak-on depende sa gidak-on sa screen diin kini gitan-aw. Ang dili kaayo hinungdanon mao ang klase sa sulud nga likido, nga magsiguro nga ang sulud sa sulod mag-okupar sa tibuuk nga gilapdon sa screen.
<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>
Ang laing nagpalahi nga bahin sa Bootstrap mao nga kini nagwagtang sa panginahanglan alang sa mga lamesa sa HTML code. Hinunoa, naggamit kini og grid system sa paghan-ay sa sulod ug himoon kini nga husto sa dagko ug gagmay nga mga himan (gikan sa mga telepono hangtod sa dagkong mga desktop o laptop screen).
Sa sistema sa grid sa Bootstrap, ang layout sa screen gibahin sa 12 ka kolum:
Usa ka tipikal nga setup naglangkob sa paggamit sa 12-kolum nga layout gibahin ngadto sa 3 ka grupo sa 4 ka kolum matag usa, ingon sa mosunod:
Aron ipakita kini nga kamatuoran sa code, ug aron kini mapakita sa ingon nga paagi sugod sa medium-size nga mga himan (sama sa mga laptop) ug pataas, idugang ang mosunod nga code ubos sa panapos nga tag:
...
</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 -->
Tingali nakamatikod ka nga ang mga klase sa kolum sa grid sa Bootstrap nagpakita sa pagsugod nga layout alang sa piho nga gidak-on sa aparato ug pataas, tungod kay ang md niini nga pananglitan nagpasabut sa medium (nga naglangkob usab sa lg, o dagkong mga aparato).
Alang sa mas gagmay nga mga himan (sm ug xs), ang mga div sa sulud mag-stack ug makita ang usa sa ibabaw sa sunod.
Sa mosunod nga screencast, imong makita kung unsa ang hitsura sa imong panid karon. Timan-i nga mahimo nimong usbon ang gidak-on sa bintana sa imong browser aron ma-simulate ang lain-laing mga gidak-on sa screen human ilunsad ang proyekto gamit ang Run project button sama sa among nakat-unan sa Part 1.
Summary
Mga pahalipay! Kinahanglan nga nagsulat ka usa ka yano, apan magamit, responsive nga panid karon. Ayaw kalimti ang pagsusi sa website sa Bootstrap aron mahimong mas pamilyar sa halos walay kinutuban nga pagpaandar niini nga gambalay.
Sama sa kanunay, kung adunay ka pangutana o komento, ayaw pagduhaduha sa pagkontak kanamo gamit ang porma sa ubos.