JQuery & Bootstrap ulanyp, ykjam dostlukly programma nädip ýazmaly
Bu tapgyryň 1-nji bölüminde Netbeans-y IDE hökmünde ulanyp, esasy HTML 5 taslamasyny gurduk we diliň bu täze spesifikasiýasyna goşulan birnäçe elementi hem hödürledik.
[Şeýle hem halap bilersiňiz: C/C ++ programmirlemek ýa-da Linux-da çeşme kody redaktorlary üçin 27 sany iň gowy IDE]
Birnäçe söz bilen aýdanyňda, jQuery-ny HTML sahypalarynda müşderiniň skriptini ep-esli aňsatlaşdyryp bilýän, brauzer we platforma Javascript kitaphanasy diýip pikir edip bilersiňiz. Başga bir tarapdan, “Bootstrap” -y ykjam we amatly web sahypalaryny döretmek üçin HTML, CSS we Javascript gurallaryny birleşdirýän doly çarçuwa hökmünde suratlandyryp bolar.
Bu makalada, HTML 5 koduny has aňsat ýazmak üçin bahasyna ýetip bolmajak iki sany peýdaly enjam bolan jQuery we Bootstrap bilen tanyşdyrarys. JQuery we Bootstrap ikisi hem GPL bilen utgaşýan we şeýlelik bilen mugt programma üpjünçiligi bolan MIT we Apache 2.0 ygtyýarnamalary bilen ygtyýarlandyrylýar.
Esasy HTML, CSS we Javascript düşünjeleriniň bu seriýanyň haýsydyr bir makalasynda ýokdugyna üns bermegiňizi haýyş edýäris. Dowam etmezden ozal bu mowzuklar bilen çaltlaşmalydygyňyzy duýsaňyz, W3Schools-da HTML 5 sapagyny maslahat berýärin.
JQuery we Bootstrap taslamamyza goşmak
JQuery-i göçürip almak üçin http://jquery.com sahypasynyň web sahypasyna giriň we iň soňky durnukly wersiýasy üçin habarnamany görkezýän düwmä basyň.
Bu gollanmada bu ikinji wariant bilen bararys. Göçürip almak baglanyşygyna entek basmaň. JQuery-nyň gysylan .min.js ýa-da gysylmadyk .js wersiýasyny göçürip alyp biljekdigiňize göz ýetirersiňiz.
Birinjisi ýörite web sahypalary üçin niýetlenendir we sahypalaryň ýükleniş wagtyny azaltmaga kömek edýär (şeýlelik bilen Google sahypaňyzy has gowy tertipleşdirer), ikinjisi esasan ösüş maksatly kodlaýjylara gönükdirilendir.
Gysga we ulanmagyň aňsatlygy üçin gysylan (kiçeldilen hem diýilýär) görnüşini sahypamyzyň gurluşynyň içindäki skript bukjasyna göçürip alarys.
$ cd /home/ubuntu/NetBeansProjects/TecmintTest/public_html/scripts/ $ wget https://code.jquery.com/jquery-3.6.0.min.js
Indi taslamamyza Bootstrap goşmagyň wagty geldi. Http://getbootstrap.com sahypasyna giriň we “Bootstrap” -y göçürip alyň. Indiki sahypada, poçta faýlynda ulanmaga taýyn kiçeldilen komponentleri göçürip almak üçin aşakda görkezilişi ýaly görkezilen opsiýa basyň:
Göçürip alanyňyzdan soň, süklemeler bukjasyna giriň, faýly açyň we görkezilen faýllary taslamaňyzyň içindäki görkezilen kataloglara göçüriň:
# cd ~/Downloads # unzip -a bootstrap-5.1.3-dist.zip # cd bootstrap-5.1.3-dist/
Indi CSS we JS faýllaryny taslama gurluşyndaky degişli bukjalara göçüriň.
# cp css/bootstrap.min.css /home/ubuntu/NetBeansProjects/TecmintTest/public_html/styles # cp js/bootstrap.min.js /home/ubuntu/NetBeansProjects/TecmintTest/public_html/scripts
Indi Netbeans-da sahypaňyzyň gurluşyny giňeltseňiz, aşakdaky ýaly görünmeli:
Salgylar goşmak
Elbetde gowy görünýär, ýöne henizem şol faýllaryň haýsydyr birini ulanmagymyzy index.html faýlymyza aýtmadyk. Ityönekeýlik üçin ilki bilen şol faýlyň mazmunyny barebones html faýly bilen çalyşarys:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jQuery and Bootstrap</title> </head> <body> <!-- // Your code will appear here. --> </body> </html>
Soňra, aşakdaky skrincastda görşüňiz ýaly, her bir faýly taslama nawigator bölüminden koda, bellikleriniň içinde süýräň we taşlaň. JQuery salgylanmasynyň Bootstrap salgylanmasyndan öň peýda bolýandygyna göz ýetiriň, sebäbi ikinjisi öňki görnüşine bagly:
Bu - jQuery we Bootstrap-a salgylanmalary goşduňyz, indi kod ýazyp bilersiňiz.
Ilkinji jogap koduňyzy ýazmak
Geliň indi nawigasiýa çyzgysyny goşalyň we sahypamyzyň ýokarsynda goýalyň. Düwürtikli tekst bilen 4-5 baglanyşyk goşup bilersiňiz we ony häzirlikçe haýsydyr bir resminama baglamaň - resminamanyň içine aşakdaky kod parçasyny salyň.
Netbeans-da awtomatik gutarmak aýratynlygy bilen tanyşmak üçin biraz wagt sarp etmegi ýatdan çykarmaň, bu ýazyp başlanyňyzda Bootstrap tarapyndan hödürlenýän sapaklary görkezer.
Aşakdaky kod parçasynyň merkezinde mazmuny görünýän gorizontal konteýneriň içinde ýerleşdirmek üçin ulanylýan Bootstrap konteýner synpy ýerleşýär, ol ekranyň görkezilişiniň ululygyna baglylykda awtomatiki ölçegini üýtgeder. Içindäki mazmunyň ekranyň ähli giňligini tutmagyny üpjün edýän konteýner-suwuklyk synpy hem möhüm däl.
<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>
“Bootstrap” -yň başga bir tapawutly aýratynlygy, HTML kodundaky tablisalara bolan zerurlygy aradan aýyrmagydyr. Muňa derek mazmuny düzmek üçin gözenek ulgamyny ulanýar we uly we kiçi enjamlarda (telefonlardan uly iş stoluna ýa-da noutbuk ekranlaryna çenli) dogry görünýär.
“Bootstrap” grid ulgamynda ekranyň ýerleşişi 12 sütüne bölünýär:
Adaty gurnama, hersi 4 sütünden ybarat 3 topara bölünen 12 sütünli tertibi ulanmakdan ybaratdyr:
Bu hakykaty kodda görkezmek we orta ölçegli enjamlarda (noutbuklar ýaly) we ýokarda görkezilmegini üpjün etmek üçin, ýapylýan belliginiň aşagyna aşakdaky kody goşuň:
...
</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 -->
“Bootstrap” setindäki sütün synplarynyň belli bir enjamyň ululygy we ondan ýokary başlangyç tertibini görkezýändigine göz ýetiren bolsaňyz gerek, sebäbi bu mysalda md ortaça (lg ýa-da uly enjamlary hem öz içine alýar).
Has kiçi enjamlar (sm we xs) üçin mazmun bölünişikleri ýygnalyp, beýlekisinden ýokarda görünýär.
Aşakdaky ekran ýaýlymynda sahypaňyzyň häzir nähili görünmelidigini görüp bilersiňiz. 1-nji bölümde öwrenişimiz ýaly taslamany işletmek düwmesini ulanyp, taslama başlandan soň dürli ekran ululyklaryny simulirlemek üçin brauzeriňiziň penjiresiniň ölçegini üýtgedip bilersiňiz.
Gysgaça mazmun
Gutlaýarys! Şu wagta çenli ýönekeý, ýöne işleýän, täsirli sahypa ýazan bolmaly. Bu çarçuwanyň çäksiz diýen ýaly işlemegi bilen has tanyş bolmak üçin Bootstrap web sahypasyny barlamagy ýatdan çykarmaň.
Hemişe bolşy ýaly, soragyňyz ýa-da teswiriňiz bar bolsa, aşakdaky formdan peýdalanyp, biziň bilen habarlaşyp bilersiňiz.