Otu esi ede ngwa enyi na enyi na-eji JQuery & Bootstrap
Na akụkụ 1 nke usoro isiokwu a, anyị ji Netbeans hibere ọrụ HTML 5 bụ isi dị ka IDE anyị, anyị gosikwara ihe ole na ole agbakwunyere na nkọwapụta ọhụrụ a nke asụsụ a.
Ị nwekwara ike ịmasị: 27 IDE kacha mma maka mmemme C/C++ ma ọ bụ ndị editọ koodu isi na Linux.
N'okwu ole na ole, ị nwere ike iche maka jQuery dị ka ihe nchọgharị na-agafe na ọbá akwụkwọ Javascript nke nwere ike ime ka ọ dị mfe n'akụkụ ndị ahịa na ibe HTML. N'aka nke ọzọ, Bootstrap nwere ike ịkọwa dịka nhazi zuru oke nke na-ejikọta HTML, CSS, na Javascript ngwaọrụ iji mepụta ibe weebụ enyi na enyi na nke na-anabata.
N'isiokwu a, anyị ga-ewebata gị jQuery na Bootstrap, ụlọ ọrụ abụọ dị oke ọnụ iji dee koodu HTML 5 ngwa ngwa. Ma jQuery na Bootstrap nwere ikikere n'okpuru ikikere MIT na Apache 2.0, nke dakọtara na GPL ma bụrụkwa ngwanrọ efu.
Biko rịba ama na HTML, CSS na echiche Javascript adịghị ekpuchi n'isiokwu ọ bụla nke usoro isiokwu a. Ọ bụrụ na ị chere na ị ga-ebu ụzọ bilie ngwa ngwa na isiokwu ndị a tupu ịga n'ihu, ana m akwado nkuzi HTML 5 na W3Schools.
Ịgbakwunye jQuery na Bootstrap n'ime ọrụ anyị
Iji budata jQuery, gaa na webụsaịtị ọrụ a na http://jquery.com wee pịa bọtịnụ na-egosipụta ọkwa maka ụdị kwụsiri ike kachasị ọhụrụ.
Anyị ga-eji nhọrọ nke abụọ a na ntuziaka a. Apịkwala na njikọ nbudata ahụ. Ị ga-achọpụta na ị nwere ike ibudata ma ọ bụ .min.js abịakọrọ ma ọ bụ ụdị jQuery .js na-enweghị mkpakọ.
Nke mbụ pụtara maka weebụsaịtị ma na-enyere aka belata oge ibu nke ibe (ya mere Google ga-edobe saịtị gị nke ọma), ebe nke abụọ na-elekwasị anya na coders maka ebumnuche mmepe.
N'ihi nkenke na ịdị mfe iji, anyị ga-ebudata ụdị abịakọrọ (nke a makwaara dị ka miniified) na nchekwa scripts n'ime nhazi saịtị anyị.
$ cd /home/ubuntu/NetBeansProjects/TecmintTest/public_html/scripts/ $ wget https://code.jquery.com/jquery-3.6.0.min.js
Ugbu a bụ oge ịgbakwunye Bootstrap na ọrụ anyị. Gaa na http://getbootstrap.com wee pịa Budata Bootstrap. Na ibe na-esote, pịa nhọrọ egosipụtara dị ka egosiri n'okpuru iji budata ihe ndị dị ntakịrị, dị njikere iji, na faịlụ zip:
Mgbe nbudata ahụ gwụchara, gaa na nchekwa ihe nbudata gị, wepụ faịlụ ahụ, ma detuo faịlụ ndị egosipụtara na akwụkwọ ndekọ aha egosipụtara n'ime ọrụ gị:
# cd ~/Downloads # unzip -a bootstrap-5.1.3-dist.zip # cd bootstrap-5.1.3-dist/
Ugbu a detuo faịlụ CSS na JS na nchekwa dị iche iche na nhazi ọrụ ahụ.
# cp css/bootstrap.min.css /home/ubuntu/NetBeansProjects/TecmintTest/public_html/styles # cp js/bootstrap.min.js /home/ubuntu/NetBeansProjects/TecmintTest/public_html/scripts
Ọ bụrụ na ị gbasaa nhazi saịtị gị na Netbeans, ọ ga-adị ka ndị a:
Na-agbakwụnye ntụaka
O doro anya na ọ dị mma, mana anyị agwabeghị faịlụ index.html ka iji nke ọ bụla n'ime faịlụ ndị ahụ. Maka ịdị mfe, anyị ga-ebu ụzọ dochie ọdịnaya nke faịlụ ahụ na faịlụ html efu:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jQuery and Bootstrap</title> </head> <body> <!-- // Your code will appear here. --> </body> </html>
Mgbe ahụ, dị nnọọ ịdọrọ na dobe ọ bụla faịlụ site na oru ngo navigator ngalaba na koodu, n'ime mkpado, dị ka ị pụrụ ịhụ na-esonụ screencast. Jide n'aka na ntụnye aka na jQuery pụtara n'ihu ntụaka Bootstrap n'ihi na nke ikpeazụ dabere na nke mbụ:
Nke ahụ bụ ya - ị gbakwunyela ntụnyere aka na jQuery na Bootstrap, ma nwee ike ịmalite ide koodu.
Na-ede koodu nzaghachi mbụ gị
Ka anyị tinye ugbu a mmanya igodo ma tinye ya n'elu ibe anyị. Na-enwere onwe gị itinye njikọ 4-5 na ederede dummy ma ejikọtala ya na akwụkwọ ọ bụla maka oge a - tinye naanị snippet koodu n'ime ahụ akwụkwọ ahụ.
Echefula iwepụta oge mara mma na njirimara mmecha akpaaka na Netbeans, nke ga-egosi gị klaasị nke Bootstrap mere ka ị na-amalite ịpị.
N'ime obi nke koodu snippet dị n'okpuru bụ klas akpa Bootstrap, nke a na-eji etinye ọdịnaya n'ime akpa kwụ ọtọ nke ga-agbanwe ozugbo dabere n'ogo ihuenyo ebe a na-elele ya. Ọ dịghị obere ihe dị mkpa bụ klaasị-mmiri mmiri, nke ga-ahụ na ọdịnaya dị n'ime ga-eburu obosara ihuenyo ahụ.
<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>
Ihe ọzọ dị iche iche nke Bootstrap bụ na ọ na-ewepụ mkpa maka tebụl na koodu HTML. Kama nke ahụ, ọ na-eji usoro grid iji hazie ọdịnaya ma mee ka ọ dị mma ma na nnukwu na obere ngwaọrụ (site na ekwentị ruo na nnukwu desktọọpụ ma ọ bụ ihuenyo laptọọpụ).
Na sistemụ grid Bootstrap, a na-ekewa nhazi ihuenyo na kọlụm iri na abụọ:
Ntọala a na-ahụkarị bụ iji nhazi kọlụm 12 kewara n'ime otu 3 nke kọlụm 4 nke ọ bụla, dị ka ndị a:
Iji gosi eziokwu a na koodu, na iji gosi ya otú ahụ malite na ngwaọrụ ndị nwere ọkara (dị ka laptọọpụ) na n'elu, tinye koodu a n'okpuru mkpado :
...
</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 -->
Ọ ga-abụrịrị na ị chọpụtala na klaasị kọlụm dị na grid Bootstrap na-egosi nhazi mmalite maka nha ngwaọrụ akọwapụtara na karịa, dịka md na ihe atụ a na-anọchi anya ọkara (nke na-ekpuchikwa lg, ma ọ bụ nnukwu ngwaọrụ).
Maka ngwaọrụ ndị pere mpe (sm na xs), a na-achịkọta ọdịnaya divs wee pụta otu n'elu nke na-esote.
Na nseta ihuenyo na-esote, ị nwere ike ịhụ ka ibe gị kwesịrị ịdị ugbu a. Rịba ama na ị nwere ike megharịa windo ihe nchọgharị gị iji mee ka nha ihuenyo dị iche iche mgbe ịmalitere ọrụ ahụ site na iji bọtịnụ Run Project dị ka anyị mụtara na Part 1.
Nchịkọta
Ekele! Ị ga-abụrịrị na ịdela ibe dị mfe ma na-arụkwa ọrụ ma na-anabata ya ugbu a. Echefula ịlele webụsaịtị Bootstrap ka ị mara nke ọma na arụmọrụ na-enweghị njedebe nke usoro a.
Dị ka mgbe niile, ọ bụrụ na ị nwere ajụjụ ma ọ bụ ikwu, nweere onwe gị ịkpọtụrụ anyị site na iji ụdị dị n'okpuru.