Yadda Ake Rubutun Waya Mai Kyau Ta Amfani da JQuery & Bootstrap


A cikin Sashe na 1 na wannan jerin, mun kafa ainihin aikin HTML 5 ta amfani da Netbeans a matsayin IDE, kuma mun gabatar da wasu abubuwa kaɗan waɗanda aka ƙara a cikin wannan sabon ƙayyadaddun harshe.

Hakanan kuna iya son: 27 Mafi kyawun IDE don shirye-shiryen C/C++ ko Editocin Code Source akan Linux.

A cikin ƴan kalmomi, zaku iya tunanin jQuery azaman mai binciken giciye da ɗakin karatu na Javascript na dandamali wanda zai iya sauƙaƙe rubutun gefen abokin ciniki a cikin shafukan HTML. A gefe guda, ana iya bayyana Bootstrap a matsayin cikakken tsarin da ke haɗa kayan aikin HTML, CSS, da Javascript don ƙirƙirar shafukan yanar gizo masu dacewa da wayar hannu.

A cikin wannan labarin, za mu gabatar muku da jQuery da Bootstrap, kayan aiki marasa tsada guda biyu don rubuta lambar HTML 5 cikin sauƙi. Duk jQuery da Bootstrap suna da lasisi a ƙarƙashin lasisin MIT da Apache 2.0, waɗanda suka dace da GPL kuma don haka software ne na kyauta.

Lura cewa ainihin HTML, CSS, da Javascript ba a rufe su a cikin kowane labarin wannan jerin ba. Idan kun ji kuna buƙatar tashi da sauri tare da waɗannan batutuwa kafin ci gaba, Ina ba da shawarar koyawa HTML 5 a W3Schools.

Haɗa jQuery da Bootstrap cikin Ayyukanmu

Don saukar da jQuery, je zuwa gidan yanar gizon aikin a http://jquery.com kuma danna maɓallin da ke nuna sanarwar sabuwar sigar barga.

Za mu tafi tare da wannan zaɓi na biyu a cikin wannan jagorar. KAR KA danna mahaɗin zazzagewa tukuna. Za ku lura cewa za ku iya zazzage ko dai ta matsar da .min.js ko sigar jQuery .js maras nauyi.

Na farko ana nufin musamman don gidajen yanar gizo kuma yana taimakawa rage lokacin lodin shafuka (saboda haka Google zai fifita rukunin yanar gizonku mafi kyau), yayin da na biyu an yi niyya galibi akan coders don dalilai na ci gaba.

Don taƙaitawa da sauƙin amfani, za mu zazzage sigar da aka matsa (wanda aka fi sani da ƙarami) zuwa babban fayil ɗin rubutun da ke cikin tsarin rukunin yanar gizon mu.

$ cd /home/ubuntu/NetBeansProjects/TecmintTest/public_html/scripts/
$ wget https://code.jquery.com/jquery-3.6.0.min.js

Yanzu lokaci ya yi da za mu ƙara Bootstrap zuwa aikinmu. Je zuwa http://getbootstrap.com kuma danna kan Zazzage Bootstrap. A shafi na gaba, danna kan zaɓin da aka haskaka kamar yadda aka nuna a ƙasa don zazzage abubuwan da aka rage, a shirye don amfani, a cikin fayil ɗin zip:

Lokacin da zazzagewar ta cika, je zuwa babban fayil ɗin Zazzagewar ku, cire zip ɗin fayil ɗin, sannan kwafi fayilolin da aka yi wa alama zuwa kundayen adireshi da aka nuna a cikin aikinku:

# cd ~/Downloads
# unzip -a bootstrap-5.1.3-dist.zip
# cd bootstrap-5.1.3-dist/

Yanzu kwafi fayilolin CSS da JS zuwa manyan manyan fayiloli a cikin tsarin aikin.

# cp css/bootstrap.min.css /home/ubuntu/NetBeansProjects/TecmintTest/public_html/styles
# cp js/bootstrap.min.js /home/ubuntu/NetBeansProjects/TecmintTest/public_html/scripts

Idan yanzu kun fadada tsarin rukunin yanar gizon ku a cikin Netbeans, yakamata ya kasance kamar haka:

Ƙara Nassoshi

Wannan tabbas yana da kyau, amma har yanzu ba mu gaya wa fayil ɗin mu index.html don amfani da ɗayan waɗannan fayilolin ba. Don sauƙaƙa, za mu maye gurbin abubuwan da ke cikin wancan fayil ɗin da fayil ɗin html mara ƙasusuwa da farko:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>jQuery and Bootstrap</title>
</head>
<body>
 
   <!-- // Your code will appear here. -->

</body>
</html>

Sa'an nan, kawai ja da sauke kowane fayil daga aikin kewayawa sashen zuwa code, a cikin tags, kamar yadda kuke gani a cikin screencast na gaba. Tabbatar cewa ambaton jQuery ya bayyana a gaban ambaton Bootstrap saboda ƙarshen ya dogara da tsohon:

Shi ke nan - kun ƙara nassoshi zuwa duka jQuery da Bootstrap, kuma yanzu kuna iya fara rubuta lambar.

Rubuta Lambar Amsa Ta Farko

Yanzu bari mu ƙara sandar kewayawa kuma mu sanya shi a saman shafinmu. Jin kyauta don haɗa hanyoyin haɗin yanar gizo 4-5 tare da rubutu mara kyau kuma kar a haɗa shi zuwa kowane takarda na ɗan lokaci - kawai saka snippet mai zuwa a cikin jikin takaddar.

Kar a manta da ku ɗan ɗan ɗan ɗanɗana sanin fasalin aikin atomatik a cikin Netbeans, wanda zai nuna muku azuzuwan da Bootstrap ya samar yayin da kuka fara bugawa.

A tsakiyar lambar snippet da ke ƙasa shine ajin Bootstrap, wanda ake amfani da shi don sanya abun ciki a cikin kwandon kwance wanda zai canza girman kai tsaye dangane da girman allon da ake kallo. Ba ƙaramin mahimmanci ba shine aji-ruwa, wanda zai tabbatar da cewa abun ciki a cikin zai mamaye duk faɗin allon.

<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>

Wani fasalin da ke bambanta Bootstrap shine cewa yana kawar da buƙatar tebur a lambar HTML. Madadin haka, yana amfani da tsarin grid don tsara abun ciki kuma yana sanya shi yayi kyau duka akan manya da kanana na'urori (daga wayoyi har zuwa babban allon tebur ko kwamfutar tafi-da-gidanka).

A cikin tsarin grid na Bootstrap, tsarin allo ya kasu zuwa ginshiƙai 12:

Saitin na yau da kullun ya ƙunshi amfani da shimfidar shafi 12 da aka raba zuwa ƙungiyoyi 3 na ginshiƙai 4 kowanne, kamar haka:

Don nuna wannan gaskiyar a lamba, kuma domin a nuna ta ta wannan hanyar farawa a cikin na'urori masu matsakaicin girma (kamar kwamfyutocin tafi-da-gidanka) da sama, ƙara lambar da ke ƙasa da alamar rufe > nav>:

...
    </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 -->

Wataƙila kun lura cewa azuzuwan ginshiƙi a cikin grid na Bootstrap suna nuna shimfidar farawa don takamaiman girman na'urar da sama, kamar yadda md a cikin wannan misalin ke tsaye ga matsakaici (wanda kuma ya ƙunshi lg, ko manyan na'urori).

Don ƙananan na'urori (sm da xs), abubuwan da ke cikin abun ciki suna tattarawa kuma suna bayyana ɗaya sama da na gaba.

A cikin sigar allo mai zuwa, zaku iya ganin yadda shafinku ya kamata ya kasance yanzu. Lura cewa zaku iya canza girman taga mai binciken ku don kwaikwayi girman allo daban-daban bayan ƙaddamar da aikin ta amfani da maɓallin Run aikin kamar yadda muka koya a Sashe na 1.

Takaitawa

Taya murna! Dole ne ka rubuta sauƙi, mai aiki, shafi mai amsawa a yanzu. Kar a manta da duba gidan yanar gizon Bootstrap domin ku saba da kusan ayyuka marasa iyaka na wannan tsarin.

Kamar koyaushe, idan kuna da tambaya ko sharhi, jin daɗin tuntuɓar mu ta amfani da fom ɗin da ke ƙasa.