Hvordan skrive en mobilvennlig app ved hjelp av JQuery & Bootstrap


I Del 1 av denne serien satte vi opp et grunnleggende HTML 5-prosjekt med Netbeans som vår IDE, og vi presenterte også noen få elementer som er lagt til i denne nye spesifikasjonen av språket.

Med noen få ord kan du tenke på jQuery som et JavaScript-bibliotek på tvers av nettlesere og på tvers av plattformer som i stor grad kan forenkle klientsideskripting på HTML-sider. På den annen side kan Bootstrap beskrives som et komplett rammeverk som integrerer HTML-, CSS- og Javascript-verktøy for å lage mobilvennlige og responsive nettsider.

I denne artikkelen vil vi introdusere deg til jQuery og Bootstrap, to uvurderlige verktøy for å skrive HTML 5-kode enklere. Både jQuery og Bootstrap er lisensiert under MIT- og Apache 2.0-lisensene, som er kompatible med GPL og er dermed fri programvare.

Vær oppmerksom på at grunnleggende HTML-, CSS- og Javascript-konsepter ikke dekkes i noen artikkel i denne serien. Hvis du føler at du må komme deg i gang med disse emnene først før du fortsetter, anbefaler jeg på det sterkeste HTML 5-opplæringen i W3Schools.

Inkorporerer jQuery og Bootstrap i prosjektet vårt

For å laste ned jQuery, gå til prosjektets nettside på http://jquery.com og klikk på knappen som viser varselet for den siste stabile versjonen.

Vi vil gå med dette andre alternativet i denne veiledningen. IKKE klikk på nedlastingslenken ennå. Du vil legge merke til at du kan laste ned enten en komprimert .min.js eller en ukomprimert .js-versjon av jQuery.

Den første er ment spesielt for nettsteder og bidrar til å redusere lastetiden til sider (og dermed vil Google rangere nettstedet ditt bedre), mens det andre er rettet mest mot kodere for utviklingsformål.

For korthets skyld og brukervennlighet vil vi laste ned den komprimerte (også kjent som minifisert) versjonen til skript-mappen inne i nettstedstrukturen vår.

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

Nå er det på tide å legge til Bootstrap i prosjektet vårt. Gå til http://getbootstrap.com og klikk på Last ned Bootstrap. På neste side klikker du på det uthevede alternativet som vist nedenfor for å laste ned de minifiserte komponentene, klare til bruk, i en zip-fil:

Når nedlastingen er fullført, gå til mappen Nedlastinger, pakk ut filen og kopier de uthevede filene til de angitte katalogene i prosjektet:

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

Kopier nå CSS- og JS-filer til respektive mapper i prosjektstrukturen.

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

Hvis du nå utvider strukturen til nettstedet ditt i Netbeans, bør det se ut som følger:

Legge til referanser

Det ser sikkert bra ut, men vi har fortsatt ikke fortalt index.html-filen vår å bruke noen av disse filene. For enkelhets skyld vil vi først erstatte innholdet i den filen med en barebones html-fil:

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

</body>
</html>

Deretter er det bare å dra og slippe hver fil fra prosjektnavigatordelen til koden, inne i -taggene, som du kan se i følgende skjermkast. Pass på at referansen til jQuery vises før referansen til Bootstrap fordi sistnevnte avhenger av førstnevnte:

Det er det – du har lagt til referansene til både jQuery og Bootstrap, og kan nå begynne å skrive kode.

Skrive din første responsive kode

La oss nå legge til en navigasjonslinje og plassere den øverst på siden vår. Ta gjerne med 4–5 lenker med dummy-tekst og ikke koble den til noe dokument foreløpig – bare legg inn følgende kodebit i hoveddelen av dokumentet.

Ikke glem å bruke litt tid på å bli kjent med funksjonen for automatisk fullføring i Netbeans, som viser deg klassene som er gjort tilgjengelige av Bootstrap når du begynner å skrive.

I hjertet av kodebiten nedenfor er Bootstrap container-klassen, som brukes til å plassere innhold inne i en horisontal beholder som automatisk endrer størrelse avhengig av størrelsen på skjermen der den vises. Ikke mindre viktig er beholder-fluid-klassen, som vil sikre at innholdet i vil oppta hele bredden av skjermen.

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

Et annet kjennetegn ved Bootstrap er at det eliminerer behovet for tabeller i HTML-kode. I stedet bruker den et rutenettsystem for å layoute innhold og får det til å se riktig ut både på store og små enheter (fra telefoner helt til de store stasjonære eller bærbare skjermene).

I Bootstraps rutenettsystem er skjermoppsettet delt inn i 12 kolonner:

Et typisk oppsett består av å bruke 12-kolonne-oppsettet delt inn i 3 grupper med 4 kolonner hver, som følger:

For å indikere dette faktum i kode, og for å få det vist på den måten fra mellomstore enheter (som bærbare datamaskiner) og over, legg til følgende kode under den avsluttende -taggen:

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

Du må sikkert ha lagt merke til at kolonneklassene i Bootstrap-rutenettet indikerer startoppsettet for spesifikk enhetsstørrelse og høyere, ettersom md i dette eksemplet står for medium (som også dekker lg > eller store enheter).

For mindre enheter (sm og xs), blir innholdet divs stablet og vises en over den neste.

I følgende screencast kan du se hvordan siden din skal se ut nå. Merk at du kan endre størrelsen på nettleserens vindu for å simulere forskjellige skjermstørrelser etter å ha startet prosjektet ved å bruke Kjør prosjekt-knappen som vi lærte i Del 1.

Sammendrag

Gratulerer! Du må ha skrevet en enkel, men funksjonell, responsiv side nå. Ikke glem å sjekke Bootstrap-nettstedet for å bli mer kjent med den nesten ubegrensede funksjonaliteten til dette rammeverket.

Som alltid, i tilfelle du har spørsmål eller kommentarer, kontakt oss gjerne ved å bruke skjemaet nedenfor.