Bentornato in questa unità introdurrò un nuovo strumento chiamato Bootstrap e sono nella home
page del bootstrap con dotcom bootstrap.
E voglio solo dedicare qualche minuto a questo video introduttivo per spiegare cos'è bootstrap e perché lo
stiamo usando.
E poi anche per mostrarti alcuni esempi di siti che usano bootstrap.
Quindi iniziamo solo leggendo il blurb bootstrap ufficiale.
Bootstrap è il più popolare TMLC SS in javascript framework per lo sviluppo di primi
progetti mobili responsive sul Web.
Riassumiamolo un po '.
Bootstrap è estremamente popolare.
In effetti è il repository più stellato e biforcato su get hub, che in pratica significa che ha il maggior
numero di persone che lo utilizzano, il maggior numero di persone preferisce aggiungerlo per ottenere aiuto e tutto ciò che è
bootstrap è in realtà un singolo file di successo e un singolo file di javascript .
Ora ci sono molti C S S e molti javascript in questi file, ma sono solo
due file e possiamo includerli nella nostra applicazione.
di bell'aspetto reattivi e ci aiuta a renderli veloci senza dover scrivere una tonnellata del nostro codice.
Fondamentalmente prendiamo il codice di qualcun altro e da Bootstrap che abbiamo aggiunto alla nostra applicazione e
ci aiuta a creare siti
Ci sono due ragioni principali che ti sto mostrando in questo corso.
Il primo è che è molto popolare.
Un sacco di posti lo usano.
Molte aziende usano molti sviluppatori e vale la pena saperlo.
Ma il secondo è che ci aiuterà a creare siti Web di bell'aspetto abbastanza rapidamente in questo corso.
bootstrap e possiamo ottenere le cose andando in 10 15 minuti e sembreremo abbastanza bene.
Quindi, quando impariamo a tornare e cose quando ci stiamo concentrando su Node ed express e Mongo e mangusta
e ginocchia e tutto questo complesso di back e logic possiamo ancora fare qualcosa che sembra buono senza dover
dedicare un'ora o due ore video per lo styling qualcosa possiamo collegare
La prossima cosa che farò è darti un rapido tour dei dock, ma bootstrap ha una buona documentazione
e molti buoni esempi e in realtà usano il bootstrap su questo sito che ha un senso.
Quindi, iniziamo facendo clic su C Ss e questo è menzionato bootstrap è solo un singolo file
CSSA un singolo file javascript all'interno del file CSSA.
C'è un sacco di cose che otteniamo gratuitamente.
Quindi diamo un'occhiata ai pulsanti.
Quindi, se vogliamo creare un pulsante e abbiamo incluso bootstrap nella nostra applicazione, possiamo aggiungere
questa classe alla classe in realtà è Beati e PTEN predefiniti e otteniamo questi pulsanti.
Possiamo fare diversi colori
Diamo un'occhiata ai moduli.
Riceviamo bei input qui.
Ed è anche molto importante notare che tutto è reattivo sul sito in modo che tu possa vedere che
riceviamo cose che rispondono alla larghezza dello schermo.
Abbiamo anche diversi tipi di forme.
Puoi combinare i diversi pezzi.
Quindi qui stanno usando un pulsante con un modulo.
Quindi è come il bootstrap di Lego e molti altri modi di lego che puoi
mettere insieme e aggiungere al tuo sito come meglio credi.
Esamineremo la maggior parte di questi componenti.
La maggior parte di questi pezzi grandi una volta che iniziamo a lavorarci e scriviamo codice bootstrap.
alcuni dei pezzi più grandi di bootstrap che possiamo usare e che include cose come le barre di navigazione.
Quindi per ora andremo avanti e quando mostreremo la prossima scheda che è componenti componenti contengono
E questo è probabilmente uno degli aspetti più popolari del bootstrap che molti siti usano come si
può vedere con un po 'di codice.
Sembra molto ma ti assicuro che è molto meno di quanto sarebbe se stessimo scrivendo una
barra NAV da zero.
E questo viene fornito con il menu a tendina e ci sono diversi tipi di barre di colori
diversi, alcuni dei quali sono fissati in cima alla pagina.
come il Jumbotron che è un modo per mostrare alcuni contenuti sulle barre di avanzamento del tuo sito Web.
Ci sono altri componenti
E questi vengono tutti con il bootstrap.
Quindi ti starai chiedendo adesso se il bootstrap arriva a tutti questi pezzi e sono già pre-disegnati quello
che ogni sito che usa il bootstrap ha lo stesso aspetto.
E la risposta è sì e no.
Dipende da come il sito utilizza il bootstrap.
o un progetto che utilizza bene il bootstrap rende difficile dire che in realtà stanno usando il
bootstrap perché usano quei componenti principali e quindi si può entrare e scrivere i propri stili in cima.
Direi che una società
Cambia i colori cambia i caratteri cambia alcuni degli effetti di passaggio del mouse.
Non è necessario utilizzare esattamente gli stessi colori e tutto ciò che viene fornito con il bootstrap, ma
ciò non significa che ci sia qualcosa di intrinsecamente cattivo nell'usare gli stili Bootstrap integrati.
E faremo sicuramente entrambe le cose.
Quindi, quando realizziamo un sito e il focus non è davvero sul front end, vogliamo solo
creare qualcosa che sia presentabile rapidamente.
Fondamentalmente il prototipo del front end userà il bootstrap e non modificheremo davvero molti pezzi.
Ma se stiamo lavorando a qualcosa di un qualcosa di più grande che
non vogliamo sembrare usiamo il bootstrap senza cambiare nulla, quindi entreremo e aggiungeremo alcuni dei nostri stili aggiungendo fondamentalmente
una mano di vernice spray in cima al bootstrap.
La prossima cosa che voglio fare è mostrarti alcuni dei siti che sono stati creati con bootstrap e Buddh
trip ha un sito Web ufficiale in cui vengono mostrati alcuni di questi siti.
Se clicchi su Expo, lo apro già.
Puoi vedere che mettono in mostra gli usi belli e stimolanti di un bootstrap, così possiamo aprire alcuni
di questi per aprirli e nuove schede.
E questi sono solo quelli più recenti.
Ce ne sono centinaia su questo sito.
Puoi vederne tantissime e puoi continuare a scorrere e scorrere e poi andare a qualcuno più vecchio e
ci sono così tanti diversi siti che lo stanno usando.
E in realtà non sembrano tutti uguali.
Sì, forse molti di loro hanno una barra di navigazione.
Forse molti di loro hanno questo grande layout di immagine a schermo intero, ma è più una
tendenza di design che qualcosa che lo ha semplicemente rimpiazzato.
Diamo un'occhiata ad alcuni di questi.
Questo è Tim creativo che è una società che realizza i modelli di siti Web.
E puoi vedere che abbiamo questa bella griglia di immagini.
È molto reattivo
Se riesco a rimpicciolire, prendiamo la nostra piccola barra di navigazione qui.
Quindi questo è un componente bootstrap nel modo in cui tutto è disposto in questa griglia.
Bootstrap ne è parzialmente responsabile, ma puoi anche vedere che non stanno utilizzando i
pulsanti predefiniti di Bootstrap.
Li hanno cambiati.
Le cose sembrano diverse.
Quindi penso che questo sia un bell'uso di bootstrap che è un sito davvero carino.
Funziona bene e utilizza il bootstrap ma non si basa su bootstrap al 100 percento.
Diamo un'occhiata a uno o due di più.
Quindi questo è chiamato Indicus o indica qualcosa del genere.
Apparentemente progettano e costruiscono prodotti digitali che le persone amano usare.
Quindi scendiamo qui.
Dai un'occhiata a ciò che abbiamo.
Quindi c'è del contenuto che è probabilmente costruito con il sistema di griglia di bootstrap
che aiuta a organizzare e sistemare le cose, come ho detto prima è notoriamente difficile in Pearcey SS.
Sta migliorando, ma il bootstrap è davvero molto utile per aiutarci a sistemare le cose sulla nostra applicazione.
piccolo footer bar c'è una barra di navigazione qui, quindi è davvero divertente andare a bootstrap Expo prendersi un po 'di tempo
per esplorare alcuni dei progetti che sono abituati a bootstrap e vedere come lo usano e tutti i
diversi modi in cui le aziende stanno modificando aggiunge nei propri caratteri i propri colori e capisce veramente quali
sono i componenti principali che un sacco di siti utilizzano e perché decide di utilizzare il bootstrap.
E abbiamo un
E a mio parere si tratta davvero del sistema a griglia che dedicheremo un video
in questa unità e le barre di navigazione e la reattività di tutto.
OK.
Quindi, per concludere, ti mostrerò un sito semplice che realizzeremo.
Questa è la nostra startup chiamata petting pesante.
Ti aiuta a trovare la tua anima gemella perfetta e usa il bootstrap.
Puoi vedere che abbiamo una barra di navigazione qui, proprio così, abbiamo registrato i pulsanti Morgan.
Otteniamo queste piccole icone, quindi abbiamo il nostro testo qui e la piccola riga di tag e poi il nostro pulsante.
E quando ridimensiono le cose tutto è reattivo, puoi vedere che le cose si stanno muovendo spostandosi.
E soprattutto riceviamo quel piccolo hamburger e abbiamo una barra di navigazione mobile.
Alla fine di questa unità lavoreremo alla creazione di questa pagina di destinazione di avvio fittizia che
abbina persone e animali domestici a relazioni romantiche