Nella Parte 1 di questa serie, abbiamo creato un progetto HTML 5 di base utilizzando Netbeans come nostro IDE e abbiamo anche presentato alcuni elementi che sono stati aggiunti in questa nuova specifica del linguaggio.
In poche parole, puoi pensare a jQuery come libreria Javascript cross-browser e multipiattaforma che può semplificare notevolmente lo scripting lato client nelle pagine HTML. D'altra parte, Bootstrap può essere descritto come un framework completo che integra strumenti HTML, CSS e Javascript per creare pagine Web ottimizzate per dispositivi mobili e reattive.
In questo articolo ti presenteremo jQuery e Bootstrap , due utilità inestimabili per scrivere HTML 5 codificare più facilmente. Entrambi jQuery e Bootstrap sono concessi in licenza con le licenze MIT e Apache 2.0, che sono compatibili con la GPL e sono quindi software libero.
Tieni presente che i concetti di base di HTML, CSS e Javascript non sono trattati in nessun articolo di questa serie. Se ritieni di dover acquisire familiarità con questi argomenti prima di procedere, ti consiglio vivamente il tutorial HTML 5 in W3Schools.
Incorporazione di jQuery e Bootstrap nel nostro progetto
Per scaricare jQuery, vai al sito Web del progetto all'indirizzo http://jquery.com e fai clic sul pulsante che mostra l'avviso per l'ultima versione stabile.
Andremo con questa seconda opzione in questa guida. NON clicca ancora sul link per il download. Noterai che puoi scaricare un .min.js compresso o un .js non compresso versione di jQuery.
Il primo è pensato appositamente per i siti Web e aiuta a ridurre il tempo di caricamento delle pagine (e quindi Google classificherà meglio il tuo sito), mentre il secondo è rivolto principalmente ai programmatori per scopi di sviluppo.
Per ragioni di brevità e facilità d'uso, scaricheremo il compresso (noto anche come minimificato ) agli script cartella all'interno della struttura del nostro sito.
$ cd /home/ubuntu/NetBeansProjects/TecmintTest/public_html/scripts/ $ wget https://code.jquery.com/jquery-3.6.0.min.js
Ora è il momento di aggiungere Bootstrap al nostro progetto. Vai su http://getbootstrap.com e fai clic su Scarica Bootstrap. Nella pagina successiva, fai clic sull'opzione evidenziata come indicato di seguito per scaricare i componenti ridotti, pronti per l'uso, in un file zip:
Al termine del download, vai ai tuoi Download cartella, decomprimi il file e copia i file evidenziati nelle directory indicate all'interno del tuo progetto:
# cd ~/Downloads # unzip -a bootstrap-5.1.3-dist.zip # cd bootstrap-5.1.3-dist/
Ora copia i file CSS e JS nelle rispettive cartelle nella struttura del progetto.
# cp css/bootstrap.min.css /home/ubuntu/NetBeansProjects/TecmintTest/public_html/styles # cp js/bootstrap.min.js /home/ubuntu/NetBeansProjects/TecmintTest/public_html/scripts
Se ora espandi la struttura del tuo sito in Netbeans, dovrebbe apparire come segue:
Aggiunta di riferimenti
Sembra sicuramente buono, ma non l'abbiamo ancora detto al nostro index.html file per utilizzare uno di questi file. Per semplicità, sostituiremo prima il contenuto di quel file con un file html barebone:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jQuery and Bootstrap</title> </head> <body> <!-- // Your code will appear here. --> </body> </html>
Quindi, trascina e rilascia ogni file dalla sezione del navigatore di progetto al codice, all'interno del </head> tag, come puoi vedere nel seguente screencast. Assicurati che il riferimento a jQuery appaia prima del riferimento a Bootstrap perché quest'ultimo dipende dal primo:
Ecco fatto:hai aggiunto i riferimenti sia a jQuery che a Bootstrap e ora puoi iniziare a scrivere codice.
Scrivere il tuo primo codice reattivo
Aggiungiamo ora una barra di navigazione e la posizioniamo nella parte superiore della nostra pagina. Sentiti libero di includere 4-5 collega con testo fittizio e non collegarlo a nessun documento per il momento:inserisci semplicemente il seguente snippet di codice all'interno del corpo del documento.
Non dimenticare di dedicare un po' di tempo a familiarizzare con la funzione di completamento automatico in Netbeans, che ti mostrerà le classi rese disponibili da Bootstrap mentre inizi a digitare.
Al centro dello snippet di codice di seguito c'è il contenitore Bootstrap class, che viene utilizzata per posizionare il contenuto all'interno di un contenitore orizzontale che si ridimensionerà automaticamente in base alle dimensioni dello schermo in cui viene visualizzato. Non meno importante è la classe container-fluid, che assicurerà che il contenuto all'interno occupi l'intera larghezza dello schermo.
<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>
Un'altra caratteristica distintiva di Bootstrap è che elimina la necessità di tabelle nel codice HTML. Invece, utilizza un sistema a griglia per il layout del contenuto e lo fa apparire correttamente sia su dispositivi grandi che piccoli (dai telefoni fino ai grandi schermi desktop o laptop).
Nel sistema a griglia di Bootstrap, il layout dello schermo è diviso in 12 colonne:
Una configurazione tipica consiste nell'usare le 12 colonne layout suddiviso in 3 gruppi di 4 colonne ciascuno, come segue:
Per indicare questo fatto nel codice e per averlo visualizzato in questo modo a partire da dispositivi di medie dimensioni (come laptop) e superiori, aggiungi il seguente codice sotto il </nav> di chiusura 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 -->
Probabilmente avrai notato che le classi di colonna nella griglia Bootstrap indicano il layout iniziale per dimensioni specifiche del dispositivo e superiori, come md in questo esempio sta per medium (che copre anche lg o dispositivi di grandi dimensioni).
Per dispositivi più piccoli (sm e xs ), il contenuto div vengono impilati e appaiono uno sopra il successivo.
Nel seguente screencast, puoi vedere come dovrebbe apparire la tua pagina a questo punto. Tieni presente che puoi ridimensionare la finestra del browser per simulare dimensioni dello schermo diverse dopo aver avviato il progetto utilizzando il pulsante Esegui progetto, come abbiamo appreso nella Parte 1 .
Riepilogo
Congratulazioni! A questo punto devi aver scritto una pagina semplice, ma funzionale e reattiva. Non dimenticare di controllare il sito Web Bootstrap per acquisire maggiore familiarità con le funzionalità quasi illimitate di questo framework.
Come sempre, in caso di domande o commenti, non esitare a contattarci utilizzando il modulo sottostante.