Kuinka kirjoittaa mobiiliystävällinen sovellus JQueryn ja Bootstrapin avulla
Tämän sarjan osassa 1 perustimme HTML 5 -perusprojektin käyttämällä Netbeansia IDE:nä, ja esittelimme myös muutamia elementtejä, jotka on lisätty tähän uuteen kielen määritykseen.
Muutamalla sanalla voit ajatella jQueryä selain- ja alustojen välisenä Javascript-kirjastona, joka voi yksinkertaistaa huomattavasti asiakaspuolen komentosarjaa HTML-sivuilla. Toisaalta Bootstrap voidaan kuvata täydelliseksi kehykseksi, joka yhdistää HTML-, CSS- ja Javascript-työkalut mobiiliystävällisten ja responsiivisten verkkosivujen luomiseen.
Tässä artikkelissa esittelemme sinulle jQueryn ja Bootstrapin, kaksi korvaamatonta apuohjelmaa, joiden avulla voit kirjoittaa HTML 5 -koodin helpommin. Sekä jQuery että Bootstrap ovat lisensoituja MIT- ja Apache 2.0 -lisensseillä, jotka ovat yhteensopivia GPL:n kanssa ja ovat siten ilmaisia ohjelmistoja.
Huomaa, että HTML-, CSS- ja Javascript-peruskäsitteitä ei käsitellä missään tämän sarjan artikkelissa. Jos sinusta tuntuu, että sinun on perehdyttävä näihin aiheisiin ennen kuin jatkat, suosittelen W3Schoolsin HTML 5 -opetusohjelmaa.
jQueryn ja Bootstrapin sisällyttäminen projektiimme
Lataa jQuery siirtymällä projektin verkkosivustolle osoitteessa http://jquery.com ja napsauttamalla painiketta, joka näyttää uusimman vakaan version ilmoituksen.
Käytämme tässä oppaassa tätä toista vaihtoehtoa. ÄLÄ napsauta vielä latauslinkkiä. Huomaat, että voit ladata joko pakatun .min.js- tai pakkaamattoman .js-version jQuerysta.
Ensimmäinen on tarkoitettu erityisesti verkkosivustoille ja auttaa lyhentämään sivujen latausaikaa (ja siten Google sijoittuu sivustosi paremmin), kun taas toinen on suunnattu enimmäkseen koodaajille kehitystarkoituksiin.
Lyhyyden ja käytön helpottamiseksi lataamme pakatun (tunnetaan myös nimellä pienennetty) version skriptit-kansioon sivustomme sisällä.
cd /home/ubuntu/NetBeansProjects/TecmintTest/public_html/scripts/
wget https://code.jquery.com/jquery-3.6.0.min.js
Nyt on aika lisätä Bootstrap projektiimme. Mene osoitteeseen http://getbootstrap.com ja napsauta Lataa Bootstrap. Napsauta seuraavalla sivulla korostettua vaihtoehtoa alla kuvatulla tavalla ladataksesi pienennetyt komponentit käyttövalmiina zip-tiedostona:
Kun lataus on valmis, siirry Lataukset-kansioosi, pura tiedosto ja kopioi korostetut tiedostot merkittyihin hakemistoihin projektin sisällä:
cd ~/Downloads
unzip -a bootstrap-5.1.3-dist.zip
cd bootstrap-5.1.3-dist/
Kopioi nyt CSS- ja JS-tiedostot vastaaviin kansioihin projektirakenteessa.
cp css/bootstrap.min.css /home/ubuntu/NetBeansProjects/TecmintTest/public_html/styles
cp js/bootstrap.min.js /home/ubuntu/NetBeansProjects/TecmintTest/public_html/scripts
Jos nyt laajennat sivustosi rakennetta Netbeansissa, sen pitäisi näyttää seuraavalta:
Viitteiden lisääminen
Se näyttää varmasti hyvältä, mutta emme vieläkään ole käskeneet index.html-tiedostoamme käyttämään mitään näistä tiedostoista. Yksinkertaisuuden vuoksi korvaamme tiedoston sisällön ensin barebone-html-tiedostolla:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery and Bootstrap</title>
</head>
<body>
<!-- // Your code will appear here. -->
</body>
</html>
Vedä ja pudota sitten jokainen tiedosto projektinavigaattoriosiosta koodiin -tunnisteiden sisällä, kuten näet seuraavassa kuvassa. Varmista, että viittaus jQueryyn näkyy ennen viittausta Bootstrapiin, koska jälkimmäinen riippuu edellisestä:
Siinä kaikki – olet lisännyt viittaukset sekä jQueryyn että Bootstrapiin ja voit nyt alkaa kirjoittaa koodia.
Ensimmäisen reagoivan koodin kirjoittaminen
Lisätään nyt navigointipalkki ja sijoitetaan se sivumme yläosaan. Voit lisätä 4–5 linkkiä valetekstillä äläkä linkitä sitä toistaiseksi mihinkään dokumenttiin – lisää vain seuraava koodinpätkä dokumentin runkoon.
Älä unohda viettää aikaa tutustuaksesi Netbeansin automaattiseen täydennysominaisuuteen, joka näyttää sinulle Bootstrapin tarjoamat luokat, kun alat kirjoittaa.
Alla olevan koodinpätkän ytimessä on Bootstrap container -luokka, jota käytetään sisällön sijoittamiseen vaakasuuntaiseen säilöön, jonka koko muuttuu automaattisesti sen näytön koon mukaan, jossa sitä tarkastellaan. Vähintään tärkeä on säiliö-nesteluokka, joka varmistaa, että sisällä oleva sisältö vie koko näytön leveyden.
<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>
Toinen Bootstrapin erottuva piirre on, että se eliminoi taulukoiden tarpeen HTML-koodissa. Sen sijaan se käyttää ruudukkojärjestelmää sisällön asetteluun ja saa sen näyttämään oikein sekä suurilla että pienillä laitteilla (puhelimista aina isoihin pöytäkoneiden tai kannettavien ruutuihin).
Bootstrapin ruudukkojärjestelmässä näytön asettelu on jaettu 12 sarakkeeseen:
Tyypillinen kokoonpano koostuu 12 sarakkeen asettelusta, joka on jaettu kolmeen 4 sarakkeen ryhmään seuraavasti:
Jos haluat ilmoittaa tämän tosiasian koodissa ja saada sen näkyviin keskikokoisista laitteista (kuten kannettavista tietokoneista) ja sitä suuremmista alkaen, lisää seuraava koodi sulkevan -tunnisteen alle:
...
</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 -->
Olet varmaan huomannut, että Bootstrap-ruudukon sarakeluokat osoittavat aloitusasettelun tietylle laitekoolle ja sitä suuremmalle, sillä md tässä esimerkissä tarkoittaa mediumia (joka kattaa myös lg > tai suuret laitteet).
Pienemmissä laitteissa (sm ja xs) sisällön divs pinotaan ja ilmestyy päällekkäin.
Seuraavassa kuvalähetyksessä näet, miltä sivusi pitäisi näyttää tähän mennessä. Huomaa, että voit muuttaa selainikkunan kokoa simuloidaksesi eri näyttökokoja projektin käynnistämisen jälkeen käyttämällä Suorita projekti -painiketta, kuten opimme osassa 1.
Yhteenveto
Onnittelut! Olet jo kirjoittanut yksinkertaisen, mutta toimivan ja reagoivan sivun. Älä unohda tarkistaa Bootstrap-verkkosivustoa tutustuaksesi paremmin tämän kehyksen lähes rajattomiin toimivuuteen.
Kuten aina, jos sinulla on kysyttävää tai kommentteja, ota meihin yhteyttä alla olevalla lomakkeella.