Come collegare fail di Bootstrap 3 alla nostra pagina html.

Abbiamo conosciuto tutti i fail di Bootstrap. Ora si può iniziare ad utilizzarli per creare la prima pagina HTML per vedere tutta la forza e utilita di Bootstrap. Vediamo di realizzare  una semlice struttura in  html di una pagina web vuota  (di qui anche nel corso Css pratica).

 La nostra prima pagina con Bootstrap3

In questo articolo parleremo di come creare una semplice pagina html e come colegare a questa pagina tutti i fail necesari per coretto funzionamento del Bootstrap3, per renderla piu che altro responsiva.

<!DOCTYPE >
<html>
    <head>
    <meta charset="utf-8">
     <title>Titolo</title>
        </head>
 <body>
</body>
</html>

Spero che,  questa struttura, la conoscete già ! DOCTYPE aiuta al nostro browser capire come interpretare il codice  e viene diviso in due parti testa e corpo (Corso HTML gratuito).

Creiamo una semplice pagina html nel vostro editore preferito, vi consiglio al inizio Notepad ++, ci copiamo il codice del esempio  e salviamo  nostra nuova pagina in una cartella con fail di Bootstrap 3 ,scaricati in precedenza come abbiamo detto nella lezione precedente, con estensione html chiamandola index.html.
Come farlo nei corsi Css e HTML, nonché nel corso Css pratica.  Dovremo otenere una struttura come ilustrato nel disegno.
1 2
Dopo di che dovremo aggiungere nel fail index.html nel tag head nella sezione di metatag la seguente stringa del codice:

<link rel="stylesheet" href="/css/bootstrap.min.css" >

Oltre ai fail  di stili  Bootstrap creeremo un altro fail  CSS con i stili personalizzati anche se per adesso il fail sara vuoto e ci servira per il dopo, anche esso dovremmo collegare  alla nostra pagina index.html

<link rel="stylesheet" href="/css/style.css" >

E come risultato il nostro fail index.html, sara cosi

<!DOCTYPE >
<html>
<head>
    <title>Titolo</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/css/bootstrap.min.css" >
    <link rel="stylesheet" href="/css/style.css" >
 
</head>
 
<body>
</body>
</html> 

Collegare la libreria jQuery

Ora sei pronto per collegare alla tua pagina i fail di java script. Abbiamo bisogno di esso per far funzionare Bootstrap 3. Uno di questi sara il fail di Bootstrap.js stesso scaricato in precedenza e sto parlando di bootstrap.min.js una versione senza spazi fra le rige e parole per diminuire il peso  ​​e un altro fail della libreria  jQuery. Vediamo quest ultima. In un certo senso anche jQuery e un framework creato per facilitare utilizzo del linguaggio java script , esso viene utilizzato quasi dappertutto (in varie CMS tipo Joomla  e anche in varie applicazioni, al giorno d'oggi è il linguaggio piu utilizzato della programmazione e non sto parlando di web ma in generale ).

Posiamo collegare la libreria jQuery al nostro documento Html in due modi o scaricare una libreria e fare riferimento su di essa, o utilizzare la libreria jQuery di rete cosi detto  CDN. Nel primo caso, si ottiene una garanzia che questa libreria sara sempre caricata sul nostro sito (e non dipendo da fonti esterne, che potrebbero teoricamente diventare indisponibili per un tempo).

Il vantaggio della connessione tramite la rete CDN  è che l'utente potrebbe avere gia questo fail nel cache del browser. Datto che jQuery pesa, questa opzione permetterà al vostro  progetto di aprirsi  più velocemente in browser di tali utenti. La rete di  Consegna Network Library raramente si trova in stato  off-line, quindi la probabilità di trovare dei problemi nel utilizzo del metodo di connessione attraverso il CDN è estremamente bassa. Se scegli la prima soluzione clicca immagine e scarica fail della libreria.

2 2

Al momento della lettura del articolo potrebbe essere che sia uscita una nuova versione di jQuery . Per noi non cambia ma e sempre utile utilizzare quella piu recente. Al momento della scrittura del articolo ultima era 2.x. Quindi dopo aver scelto il metodo o scaricare fail o utilizzare fail remoto procediamo.
Colleghiamo i fail di jQuery alla nostra pagina. Di solito i fail di java script vengono collegati nella sezione <head> della nostra pagina. Ma in certi occasioni è meglio collegarlo in fondo della pagina prima della chiusura del tag body. Perché così? Per rendere caricamento piu veloce e in realta fail di  jQuery comincera svolgere il suo lavoro solo a pagina completamete caricata quindi inutile in certo senso caricare questo fail prima se intanto rimane in atesa.
Strada facendo potrete notare che nel codice di jQuery e presente la condizione di eseguire lo script solo dopo il caricamento completo della pagina. Quindi non c'e bisogno in questo caso collegarla per forza al interno del tag <head>  </head>

 Collegare libreria jQuery dalla rete utilizando CDN

Vediamo come collegare la libreria jQuery dalla  rete  (senza scaricare nel nostro computer per questa prova che stiamo facendo) il codice è comune per tutti i casi e sarà simile a questo:

<script src="http://code.jquery.com/jquery-latest.min.js"></script>

Per distinguere il codice di collegamento dal resto del codice della pagina  e sempre utile aggiungere un commento . Ad esempio:

<!-- libreria jQuery  -->
<script src="http://code.jquery.com/jquery-latest.min.js"></script>

Collegare il file java script di Bootstrap

Per collegare alla pagina index.html il file java script di Bootstrap 3 mini (e sempre meglio la versione mini dove il codice viene semplicemente compreso per abbassare il peso ) dobiamo scrivere cosi:

<!-- fali js di bootstrp  -->
<script src="/js/bootstrap.min.js"></script>/* nel mio caso come illustrato sopra il fail bootstrap.min.js si trova nella cartella js*/

Penso che sia chiaro che se si vuole utilizare la libreria jQuery nel tuo sito è necessario scaricare il fail, metterlo nella cartella js e indicare il percorso per arrivare a bootstrap.min.js. Ma vi consigliamo di utilizzare la soluzione con CDN, come è stato dimostrato sopra.

Vorrei subito far notare che prima dovrebbe andare la chiamata di libreria jQuery e solo dopo la chiamata di java script bootstrap.js  perché bootstrap dipende dalla libreria jQueri e non viceversa.

Quindi, il file index.html finale nella cartella Bootstrap 3 della nostra prima pagina con questo framework sarà simile a questo:

<!Doctype>
<html>
<head>
    <title>Titolo</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">/* agiungeremo anche questa stringa come consigliato dai creatori di bootstrap*/
    <link rel="stylesheet" href="/css/bootstrap.min.css" >
    <link rel="stylesheet" href="/css/style.css" >
    
</head>
 
<body>
<!-- JS codice -->
<script src="http://code.jquery.com/jquery-latest.min.js"></script>/* il fail sara caricato dalla rete */
<script src="/js/bootstrap.min.js"></script>/* il fail sara caricato dalla  cartella interna */
</body>
</html>

Ora abbiamo tutto per costruire una pagina in Bootstrap. Abbiamo collegato tutti i fail js e stili. Quindi è possibile procedere con riempimento della parte visiva al utente .

Nota, se lavorate sempre collegati a internet quindi possiamo colegare anche i fail di Bootstrap diretamente dalla retta utilizando sempre CDN e  in questo caso la nostra carcassa della pagina html appare cosi

<!Doctype >
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>Esmpio della griglia di Bootstrap</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">/* fail di stili css di Bootstrap sara caricato dalla rete*/
    <style>/* propriii stili possono essere diversi da queli indicati li ho inseriti soltanto per mostrare che posiamo avere anche dei stili proprii */
        body {
            padding: 0 16px;
        }
       
    </style>
    </head>
 
<body>
<!-- JS codice -->
    <!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>/* versione remota della jQuery*/
<!-- Latest compiled JavaScript di bootstrap -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>/* versione remota del framework Bootstrp */
   
  </body>
</html>

Ok, abbiamo completato la nostra bozza della pagina che posiamo usare per qualsiasi sperimentazione in futuro e ti consiglio di salvare questo fail per le lezioni sucesivi dove proseguiremo di conoscere bootstrap.

Nel esempio sopra ho inserito dei proprii stili che posiamo sempre inserire nal fail che ho citato al inizio e sto parlando del fail con gli stili personalizzatii CSS per la nostra pagina. E gia in questo fail posiamo anche inserire delle modiffice di certe regole di bootsrap stesso, segundo la regola di precedenza di interpretazione di stili CSS da parte del browser (browser fra due selletori uguali con le regole di stili diversi scegliera quello che si trovera piu sotto nel codice ) , come per esempio  vorrei inserire un padding di 16 px sulla destar e sinistra  per il tag body

Principali nozioni su Bootstrap.

  1. Introduzione a Bootstrap
  2. Colegare fail di bootstrap
  3. La sistema a grglia
  4. Offset in Bootstrp. Spazio fra le colonne
  5. Ordine delle colonne
  6. La prima pagina html su Bootstrap
  7. Header con bootstrap
  8. Come realizzare menu responsive con Bootstrap
  9. Formatazione del testo.
  10. Come creare bottoni con Bootstrap
  11. Come rendere immagini responsive con Bootstrap
  12. Carosello bootstrap
  13. Bricioli di pane con Bootstrap
  14. Come realizzare accordeon
Letto 2549 volte