Allacciati gli stivali e iniziamo con Bootstrap.
Sono sicuro che le tue dita abbiano voglia di mettere le mani intorno a Bootstrap.
Quindi, primo passo, vai
alle istruzioni di esercizio che seguono questo video
nella pagina del tuo corso Bootstrap su Coursera.
E poi nelle istruzioni,
vedrai un link a questo file Bootstrap4-starter.zip.
Scarica il file zip sul tuo computer.
Inoltre, le istruzioni dettagliate illustrate in questo video
verranno fornite anche nelle istruzioni di esercizio che seguono questo video.
Lì, avrai accesso a tutti gli snippet di codice necessari per questo esercizio.
Questo sarebbe il caso anche per tutti gli esercizi in futuro.
Quindi, se hai bisogno di entrare in possesso degli snippet di codice,
ecco dove li troverai.
Dopo aver scaricato il file zip,
spostare il file zip in una posizione comoda sul computer.
Quindi, qui, l'ho spostato in una cartella chiamata Coursera sul mio computer,
e poi ho il file zip con questo nome lungo lì.
Basta decomprimere il file.
Una volta decompresso il file,
troverai una cartella denominata Bootstrap4 creata nel tuo computer.
All' interno della cartella Bootstrap4,
vedrai un'altra cartella denominata Confusione, lì.
Vai nella cartella Confusione e vedrai due file lì,
index.html e il file package.json.
Ora, aprire una finestra di comando o
un terminale e quindi passare a questa cartella nella finestra di comando o terminale.
Al prompt dei comandi, digitare npm install.
Si noti che ho già il file package.json lì dentro.
Quindi il file package.json è configurato in modo che
la dipendenza di sviluppo lite-server venga installata se digito npm install.
Quindi, una volta digitato npm install,
vedrai che il lite-server verrà installato nella tua cartella node_modules ciascuno.
Una volta completata questa operazione,
apri questa cartella nel tuo editor preferito.
Una volta aperta la cartella nel tuo editor,
crea un file.gitignore e
poi metti node_modules nel file gitignore e salva.
Quindi questo è per garantire che quando si esegue un gitcommit,
la cartella node_modules non verrà impegnata.
Dopodiché, è ora di andare a prendere Bootstrap per l'uso nel nostro progetto.
Prima di recuperare Bootstrap,
facciamo un commit dello stato corrente del file.
Quindi, fai git init e inizializza il tuo repository git.
Quindi puoi controllare lo stato git,
e vedresti che questi file devono essere impegnati,
aggiungi tutti i file,
gitcommit -m «Configurazione iniziale».
Quindi questo è il punto di partenza della tua cartella in questo momento.
Quindi, con questo, il tuo punto di partenza del tuo progetto web è stato ora impegnato a git.
Ora puoi configurare questo git per sincronizzarlo con un repository online,
proprio come abbiamo parlato negli esercizi git.
Quindi puoi impostare un repository su Bitbucket o su Github e quindi
sincronizzare questo progetto con quel repository git.
Il nostro prossimo passo è andare a prendere Bootstrap.
Per fare ciò, aggiungi il tipo di prompt npm install bootstrap @4 .0.0 e anche —save,
e lascia che Bootstrap sia installato.
Una volta installato Bootstrap,
ci rendiamo conto che abbiamo anche bisogno di installare il suo peer,
che è jQuery e Popper.js.
Quindi andiamo avanti e installiamo sia jQuery che Popper.js in questa cartella del progetto.
Quindi, per fare ciò, aggiungi il tipo di prompt npm install
jquery @3 .3.1
e Popper.js @1 .12.9 —save.
Ora, ogni volta che installo uno qualsiasi dei pacchetti npm,
sto specificando esplicitamente la versione del pacchetto che dovresti installare.
La ragione di ciò è che voglio assicurarmi che mentre esegui questo esercizio,
tutti i passaggi funzioneranno correttamente.
Quindi sto specificando la versione esatta dei moduli npm da installare.
Quindi, qui, stiamo installando la versione jQuery 3.3.1 e Popper.js versione 1.12.9.
Successivamente, inoltre, specificherò le versioni esatte dei moduli da installare.
Quindi andiamo avanti e installate questi.
E una volta installati,
possiamo andare al passo successivo.
Tornando alla nostra cartella di progetto,
vedresti che se vai in node_modules,
vedrai una cartella lì chiamata Bootstrap.
E all'interno della cartella denominata Bootstrap,
troverai una cartella denominata dist.
Quindi, all'interno della cartella dist,
troverai due sottocartelle denominate CSS e js.
Se vai nella cartella CSS,
troverai un sacco di file CSS precompilati qui.
Quello che ci interessa all'inizio è Bootstrap min.css.
Questo è il file che stiamo per includere nel nostro
file index.html per fare uso di Bootstrap nel nostro progetto.
Allo stesso modo, andando alla cartella js,
vedresti che c'è un file Bootstrap min.js. Lo
includeremo anche nel nostro index.htm.
Quindi questo sarà il prossimo passo che mi vedrai fare.
Prima di andare al passo successivo,
iniziamo il nostro lite-server in modo da poter vedere le modifiche che apportiamo al
index.html immediatamente riflesse nella nostra pagina web in tempo reale.
Quindi avviamo lite-server.
Quindi, digita il prompt tipo npm start,
e quindi che dovrebbe avviare il tuo lite-server.
Ora puoi vedere, sullo schermo, il
mio editor a sinistra e la versione corrente della pagina index.html a destra.
Quindi, come puoi vedere,
ho già configurato la pagina index.html con alcuni contenuti.
Questa pagina web sembra la tipica pagina web di un professore di informatica.
Apriamo ora la pagina index.html nel nostro editor.
E poi nella parte principale della pagina index.html,
subito prima del titolo,
ho intenzione di incollare un po 'di codice.
Questo frammento di codice ti viene fornito nelle istruzioni.
Quindi puoi semplicemente copiare e incollare questo frammento di codice
e ti guiderò attraverso ciò che questo frammento di codice sta cercando di fare.
Noterai che ho tre meta tag qui.
Il primo dice charset = «utf-8".
Quindi questo è l'unicode che verrà utilizzato.
La seconda riga che dice meta name = «viewport»,
tornerò e
ti spiegherò questa particolare riga nella prossima lezione quando vedremo il web design reattivo.
Ora, permettetemi di attirare la vostra attenzione su questa particolare linea che
dice link rel= «foglio di stile», e poi href.
Nota che sto specificando href come «node_modules/bootstrap/dist/css/bootstrap.min.css».
Quindi quello che sto specificando è che il file bootstrap.min.css,
che contiene le classi CSS corrispondenti a Bootstrap che abbiamo
scaricato usando NPM nella nostra cartella node_modules,
lo includerò nella testa della mia pagina index.html.
Quindi è necessario includere le classi CSS fornite da Bootstrap.
È inoltre necessario includere le classi JavaScript fornite da Bootstrap,
che stiamo andando a fare in fondo a questa pagina.
Andando in fondo a questa pagina, nota,
poco prima del tag body di chiusura,
ho intenzione di incollare il codice per includere tutti gli script lì.
Quindi, per fare ciò,
incolla le tre righe per lo script per includere jQuery
, Popper.js e anche Bootstrap min.js.
E nota l'ordine in cui ho incluso questo.
Quindi il Bootstrap è in basso.
Quindi, poiché Bootstrap dipende sia da jQuery che da Popper in quell'ordine,
quindi inserirò prima jQuery.
E poi, dopo, inseriamo Popper, e infine,
Bootstrap min.js nella parte inferiore del file index.html.
Ora, questo è incluso nella parte inferiore della pagina.
Perché quando si carica la pagina da un server web,
si desidera che le classi CSS vengano caricate immediatamente in modo che quando la pagina inizia
il rendering, quando
il JavaScript viene recuperato, il JavaScript deve essere eseguito per apportare modifiche
alla pagina con il codice JavaScript
e che ci vorrà un po 'di tempo.
Quindi non vuoi che l'utente stia aspettando che
l'intera pagina venga caricata prima che veda qualcosa nella finestra del browser.
Ecco perché normalmente carichiamo le classi JavaScript
verso la fine della nostra pagina html poco prima del body tech.
Dopo aver apportato queste modifiche,
salviamo il file.
Ora, il motivo per cui sto mostrando il
file index.html nel mio editor e anche il browser accanto ad esso è,
nel momento in cui salvi le modifiche apportate al file index.html,
nota come il rendering del browser di quel file si
aggiorna immediatamente e vedi Bootstrap già in azione su la pagina.
In questo momento, vedrai che la tua pagina sta usando Times New Roman per visualizzare tutti i contenuti.
Nel momento in cui salvo la pagina web,
si nota che i font utilizzati sulla pagina web sono cambiati.
Ora, la tua pagina web è impostata per fare uso delle classi Bootstrap,
e sta usando la tipografia predefinita Bootstraps per rendere tutto il contenuto.
Bootstrap per impostazione predefinita utilizza Helvetica Neue per il font.
Puoi cambiare il font predefinito per bootstrap e così via,
ma questo andrà oltre lo scopo della nostra discussione in questo momento.
Quindi, una volta impostata la pagina index.html e salvarla,
vedrai immediatamente Bootstrap entrare in azione nella nostra pagina web.
Quindi questo è come ho intenzione di continuare a illustrare,
come aggiungiamo vari bootstrap, classi CSS
e componenti alla nostra pagina web,
come il rendering di esso nel nostro browser continuerà a cambiare.
Ora, ovviamente, il rendering della pagina nel nostro browser è ancora terribile.
È meglio della tipica pagina web dei professori di informatica,
ma sicuramente non leggibile.
Dobbiamo ora mettere in azione le varie classi CSS e
i componenti JavaScript che il
nostro framework web UI Bootstrap fornisce al fine di progettare la nostra pagina web.
Quindi faremo quel passo dopo passo mentre passiamo attraverso questo esercizio.
Questo potrebbe essere un momento conveniente per fare un git commit
delle modifiche che hai fatto in modo che alla fine di questo esercizio,
il tuo stato della cartella del progetto venga salvato nel tuo repository git.
Andando alla mia cartella Confusione in un'altra scheda della mia finestra del terminale,
se digito git status,
ora vedo che il mio file index.html e il pacchetto del file JSON sono stati modificati.
Quindi ho intenzione di fare un commit.
Quindi, ora, il mio stato
della cartella alla fine di questo esercizio è stato impegnato nel mio repository git.
Puoi sincronizzarlo con il tuo repository online in modo che
lo stato del tuo progetto venga salvato a questo punto.
Con questo, completiamo il nostro primo esercizio Bootstrap.
Ora avete visto come possiamo configurare Bootstrap per essere utilizzato nel nostro progetto web.
Mentre procediamo ai prossimi esercizi,
andremo a dipendenti le classi Bootstrap per progettare le nostre pagine web.