Wéi schreift een eng mobilfrëndlech App mat JQuery & Bootstrap
Am Deel 1 vun dëser Serie hu mir e Basis HTML 5 Projet opgeriicht mat Netbeans als eis IDE, a mir hunn och e puer Elementer presentéiert, déi an dëser neier Spezifizéierung vun der Sprooch bäigefüügt goufen.
[Dir kënnt och gär hunn: 27 Bescht IDEs fir C/C++ Programméierung oder Quellcode Editoren op Linux]
An e puer Wierder kënnt Dir un jQuery als Cross-Browser an Cross-Plattform Javascript Bibliothéik denken, déi Client-Säit Scripting an HTML Säiten immens vereinfachen kann. Op der anerer Säit kann Bootstrap als e komplette Kader beschriwwe ginn deen HTML, CSS, an Javascript Tools integréiert fir mobilfrëndlech a reaktiounsfäeg Websäiten ze kreéieren.
An dësem Artikel wäerte mir Iech jQuery a Bootstrap virstellen, zwee wäertvoll Utilities fir HTML 5 Code méi einfach ze schreiwen. Béid jQuery a Bootstrap sinn ënner der MIT an Apache 2.0 Lizenzen lizenzéiert, déi mat der GPL kompatibel sinn an domat gratis Software sinn.
Notéiert w.e.g. datt Basis HTML, CSS, an Javascript Konzepter net an all Artikel vun dëser Serie ofgedeckt sinn. Wann Dir Iech fillt datt Dir musst fir d'éischt mat dësen Themen upassen ier Dir weidergoe kënnt, ech recommandéieren den HTML 5 Tutorial an W3Schools.
JQuery a Bootstrap an eise Projet integréieren
Fir jQuery erofzelueden, gitt op d'Websäit vum Projet op http://jquery.com a klickt op de Knäppchen deen d'Notiz fir déi lescht stabil Versioun weist.
Mir wäerte mat dëser zweeter Optioun an dësem Guide goen. Klick NET op den Download Link nach. Dir wäert feststellen datt Dir entweder eng kompriméiert .min.js oder eng onkompriméiert .js Versioun vun jQuery erofluede kënnt.
Déi éischt ass speziell fir Websäite geduecht an hëlleft d'Laaschtzäit vu Säiten ze reduzéieren (an domat wäert Google Är Site besser rangéieren), während déi zweet meeschtens op Coderen fir Entwécklungszwecker gezielt ass.
Fir d'Kürzegkeet an d'Einfachheet ze benotzen, wäerte mir déi kompriméiert (och bekannt als minifizéiert) Versioun eroflueden an de Skript-Ordner an eiser Sitestruktur.
$ cd /home/ubuntu/NetBeansProjects/TecmintTest/public_html/scripts/ $ wget https://code.jquery.com/jquery-3.6.0.min.js
Elo ass et Zäit Bootstrap zu eisem Projet ze addéieren. Gitt op http://getbootstrap.com a klickt op Download Bootstrap. Op der nächster Säit, klickt op déi markéiert Optioun wéi hei ënnendrënner fir déi minifizéiert Komponenten erofzelueden, prett fir ze benotzen, an enger Zip Datei:
Wann den Download fäerdeg ass, gitt an Ären Downloads Dossier, unzip d'Datei a kopéiert déi markéiert Dateien an déi uginn Verzeichnisser an Ärem Projet:
# cd ~/Downloads # unzip -a bootstrap-5.1.3-dist.zip # cd bootstrap-5.1.3-dist/
Elo kopéiert CSS- a JS-Dateien op jeeweileg Ordner an der Projektstruktur.
# cp css/bootstrap.min.css /home/ubuntu/NetBeansProjects/TecmintTest/public_html/styles # cp js/bootstrap.min.js /home/ubuntu/NetBeansProjects/TecmintTest/public_html/scripts
Wann Dir elo d'Struktur vun Ärem Site an Netbeans ausbaut, sollt et esou ausgesinn:
Referenze derbäi
Dat gesäit sécher gutt aus, awer mir hunn eis index.html Datei nach ëmmer net gesot fir eng vun dësen Dateien ze benotzen. Fir d'Einfachheet ersetzen mir den Inhalt vun där Datei fir d'éischt mat enger Barebones HTML Datei:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jQuery and Bootstrap</title> </head> <body> <!-- // Your code will appear here. --> </body> </html>
Dann, zitt a fällt just all Datei aus der Projektnavigator Sektioun op de Code, bannent den Tags, wéi Dir am folgenden Screencast kënnt gesinn. Vergewëssert Iech datt d'Referenz op jQuery virun der Referenz op Bootstrap erschéngt, well déi lescht hänkt vun der fréierer of:
Dat ass et - Dir hutt d'Referenzen op jQuery a Bootstrap bäigefüügt, a kënnt elo ufänken Code ze schreiwen.
Schreiwen Ären éischte reaktiounsfäeger Code
Loosst eis elo eng Navigatiounsbar addéieren a se uewen op eiser Säit setzen. Fillt Iech gratis 4-5 Linke mat Dummy-Text anzebezéien an et fir de Moment net mat engem Dokument ze verbannen - setzt just de folgende Code Snippet am Kierper vum Dokument an.
Vergiesst net e bëssen Zäit ze verbréngen fir d'Auto-Completion Feature an Netbeans kennen ze léieren, déi Iech d'Klassen weisen, déi vum Bootstrap zur Verfügung gestallt ginn, wéi Dir ufänkt ze tippen.
Am Häerz vum Code Snippet hei drënner ass d'Bootstrap Container Klass, déi benotzt gëtt fir Inhalt an engem horizontalen Container ze placéieren deen automatesch d'Gréisst änneren ofhängeg vun der Gréisst vum Écran wou et gekuckt gëtt. Net manner wichteg ass d'Container-Flësseg Klass, déi garantéiert datt den Inhalt bannen d'ganz Breet vum Bildschierm besetzt.
<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>
Eng aner ënnerscheedend Feature vu Bootstrap ass datt et de Besoin fir Dëscher am HTML Code eliminéiert. Amplaz benotzt et e Gittersystem fir Inhalter ze plangen a mécht et richteg op grouss a kleng Apparater (vu Telefone bis zum groussen Desktop oder Laptopbildschierm).
Am Bootstrap's Gittersystem ass den Écran Layout an 12 Kolonnen opgedeelt:
En typesche Setup besteet aus der Benotzung vun der 12-Kolonn Layout opgedeelt an 3 Gruppe vu 4 Kolonnen all, wéi follegt:
Fir dës Tatsaach am Code unzeweisen, a fir et esou ugewisen ze hunn a mëttelgrouss Geräter (wéi Laptops) a méi héich, füügt de folgende Code ënnert dem Schluss Tag:
...
</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 -->
Dir musst wahrscheinlech gemierkt hunn datt d'Kolonnklassen am Bootstrap Gitter de Startlayout fir spezifesch Apparatgréisst a méi uginn, well md an dësem Beispill fir Medium steet (wat och lg, oder grouss Apparater ofdeckt).
Fir méi kleng Apparater (sm an xs), ginn d'Inhaltsdivs gestapelt a schéngen een iwwer déi nächst.
Am folgenden Screencast kënnt Dir kucken wéi Är Säit elo soll ausgesinn. Notéiert datt Dir d'Gréisst vun Ärem Browserfenster änneren kënnt fir verschidde Bildschirmgréissten ze simuléieren nodeems Dir de Projet lancéiert huet mam Run Project Knäppchen wéi mir am Deel 1 geléiert hunn.
Resumé
Gratulatioun! Dir musst elo eng einfach, awer funktionell, reaktiounsfäeg Säit geschriwwen hunn. Vergiesst net d'Bootstrap Websäit ze kontrolléieren fir méi vertraut ze ginn mat der bal onbegrenzter Funktionalitéit vun dësem Kader.
Wéi ëmmer, am Fall wou Dir eng Fro oder Bemierkung hutt, da kontaktéiert eis gratis mam Formulaire hei ënnen.