Bentornato in questa unità, vi mostrerò alcuni altri componenti, inclusi i moduli e gli input di
jumbotron e bootstrap.
Ma prima di farlo voglio prendere un momento per affrontare qualcosa che è davvero molto importante
quando stiamo imparando nuovi strumenti come questo bootstrap.
E nella mia esperienza di insegnare alle persone a diventare sviluppatori web ho notato che un bootstrap è
uno dei primi posti in cui alcuni studenti iniziano a sentirsi a disagio a disagio e sentono di non sapere
se lo stanno facendo e poi perché improvvisamente abbiamo incluso un po 'di codice che qualcun altro
ha scritto nella nostra applicazione.
Ma se dai un'occhiata ai documenti qui sono davvero lunghi sono completi che è grandioso ma
c'è molto qui e voglio che tu lo inquadra non come un manuale che devi leggere per
capire tutto.
Questo non è come un modo per guidare che devi finire prima di usare il bootstrap.
È un riferimento in cui, se decidi di aver bisogno di un modulo, guardi la sezione del modulo se hai bisogno di un tavolo.
Colperai la sezione tabella se ti serve una barra di navigazione.
userete loro non-stop tornando qui facendo riferimento a singoli bit di codice che copiano i
loro segmenti di codice verificando alcune dimostrazioni leggendo esempi che ho usato bootstrap per anni a questo punto.
Guardate la sezione NFR ma è importante trattare i documenti come quelli che
E mi sento abbastanza bene per la maggior parte.
Ma lascio i documenti aperti quando sto lavorando su qualsiasi cosa con bootstrap.
Faccio costantemente riferimento agli esempi in uno dei primi video di questo corso, ho parlato
di come diventare uno sviluppatore web.
Non stai diventando un esperto nella memorizzazione e nella conoscenza di ogni bit di informazione.
Sì, devi sapere le cose.
Sì, devi capire e memorizzare alcune cose, ma non stai diventando un esperto o una memorizzazione.
Stai diventando un esperto nell'accesso alle informazioni.
E alcune di quelle informazioni che avrai memorizzato e molte saranno online nella documentazione o
nei video di esempi, libri di ogni sorta di risorse.
Va bene quindi riassumere l'intero discorso d'incoraggiamento.
Fondamentalmente voglio solo che tu tenga presente che sì, c'è molto da fare per il bootstrap e ne vedrai il
20 per cento e ce ne sono molte altre là fuori.
Ma non essere intimidito da questo.
tuo agio nell'accedere ai documenti se devi fare qualcosa che non ti mostro come fare.
Dovresti sentirti a
Apri i documenti e cercalo.
E ci sono sempre ottimi esempi e spiegazioni per ottenere dotcom bootstrap.
OK, quindi, senza ulteriori indugi, passiamo a parlare di alcuni di
questi importanti componenti e inizierò mostrandoti Jumbotron.
Quindi un Jumbotron secondo i documenti ufficiali è un componente flessibile leggero che può facoltativamente estendere
l'intera finestra per mostrare i contenuti chiave sul tuo sito.
Potete vedere un esempio di uno proprio qui e se vogliamo usare un Jumbotron è davvero molto facile.
Tutto quello che dobbiamo fare è scrivere un jumbotron di classe div e poi qualsiasi cosa mettiamo dentro farà
parte del Jumbotron.
Quindi proviamoci.
Basta farlo qui sotto, i pulsanti avranno un div con Jumbotron jumbo tron ​​di classe e poi dentro se andremo a
fare un H1 o H-1 diremo che questo è un jumbotron e quindi aggiungere un pulsante lì come hanno
fatto qui e lo faremo aggiungere un paragrafo nel nostro paragrafo sarà semplicemente riduttivo.
Abbastanza buono per ora.
ciao.
E un pulsante e il nostro pulsante diranno
OK.
E poi un pulsante abbiamo alcune scelte.
Faremo il successo di un pulsante e lo renderò grande e salvo.
Diamo un'occhiata a ciò che otteniamo.
E c'è un Jumbotron che puoi vedere che occupa l'intera larghezza della nostra finestra del browser e che di solito
non è ciò che vogliamo.
che sta succedendo è che il JumboTron è impostato per occupare il 100 percento del container in cui si trova.
E quello
In questo caso non è al di fuori di nulla.
Ma presto ti mostrerò il sistema di griglia e il bootstrap in cui possiamo controllare esattamente
quanto vuoi che questo occupi dello schermo se vuoi che sia centrato e occupi un terzo dello schermo.
Due terzi dello schermo su un quarto dello schermo abbiamo tutte queste diverse scelte che possiamo
fare usando il sistema di griglia bootstrap.
Per ora ho intenzione di mostrarvi un altro elemento che non possiamo in cui è un div con classe uguale a
contenitore e che contenitore farà.
Se mettiamo semplicemente delle cose all'interno di un contenitore di classe div, gli diamo un po 'di spazio attorno ad esso
e centrerà le cose.
Quindi il contenitore trova
che ispeziona tutto questo spazio qui che puoi vedere ma ha un po 'di margine su di esso.
Quindi, se vogliamo solo un rapido miglioramento senza dover utilizzare il sistema di
rete di cui non abbiamo parlato, possiamo aggiungere container div class e ora abbiamo questo bel Jumbotron.
E se spostiamo questo codice che abbiamo già nei contenitori, ma non lo
inseriremo nel Jumbotron.
Vedrai che è ancora influenzato da quel contenitore.
Quindi, al di fuori del Jumbotron, ma all'interno del contenitore si salva e si aggiorna, è possibile vedere che si trova anche all'interno
di quel contenitore e lo riflette visivamente.
OK, torniamo ai componenti e alla prossima cosa che ti mostrerò.
Andiamo in cima.
Dobbiamo andare a vedere valutare e ti mostrerò le forme e come funzionano.
Quindi, fare clic su moduli e ci sono diversi tipi e diversi esempi.
E li farò scorrere prima di digitare qualsiasi cosa.
Quindi, ecco un esempio di base di un modulo di bootstrap.
Puoi vedere il mercato che lo crea.
Poi abbiamo ciò che è noto come un modulo in linea e abbiamo un altro tipo di forma in linea
e ancora un altro con diversi tipi di input e un altro tipo di modulo.
E ora questo parla di tutto il diverso tipo di modulo controlla i diversi tipi
di input che sono supportati.
Quindi tutti questi colori sei.
caselle di controllo in linea i pulsanti di scelta rapida dei menu a discesa consentono di continuare a scendere.
Email numero settimana ora e così via aree di testo diverse caselle di controllo disattivate caselle di controllo disattivate pulsanti di opzione
Abbiamo altri Stati del forum.
Abbiamo uno stato di messa a fuoco.
Puoi vedere questa evidenziazione attorno a quel blu.
Questo è lo stile di messa a fuoco bootstrap predefinito.
Possiamo anche disabilitare gli input aggiungendo disabilitato e abbiamo anche alcune altre cose che possiamo fare, ma tornerò
su e concentrerò l'attenzione sull'esecuzione base e inizierò semplicemente copiando l'intero modulo
e poi lo analizzeremo un po 'alla volta.
Quindi torniamo qui e aggiungeremo questo modulo dopo tutto il resto.
Ma lo farò dentro il contenitore.
Lasciatemi fare questo schermo intero per un momento.
Abbiamo la nostra forma e all'interno di quella forma abbiamo un bel po 'di contenuti.
Torniamo al browser e diamo un'occhiata a come appare.
E la prima cosa che noterai probabilmente è che il nostro modulo attraversa tutto questo contenitore.
Ne prende il 100 percento e questo è qualcosa che saremo in grado di controllare.
parliamo del sistema di griglia di bootstrap, sarà facile dire che questo dovrebbe andare al 50 percento.
Una volta che
Quindi è qualcosa che saremo in grado di cambiare facilmente una volta che parliamo del sistema di griglia bootstrap
o non siamo ancora lì.
Quindi ce ne andremo.
Per ora ci vuole il 100 percento.
È un gigantesco forum dall'aspetto strano ma va bene.
Ci piace come è.
Quindi torneremo al sublime e analizzeremo questo pezzo alla volta.
Quindi abbiamo un tag forum all'interno di quel tag forum.
Esiste un gruppo di moduli di classe div e se vuoi saperne di più su ciò che succede se torni
ai documenti di bootstrap e fai una ricerca per il gruppo di moduli e puoi vedere le etichette rap e i controlli nel
gruppo di moduli per la spaziatura ottimale.
Quindi se ci liberiamo di questa classe del gruppo di moduli attorno a questo primo e lo faremo attorno al
primo e al secondo vedremo cosa finiremo con.
Io salverò e aggiornerò vedrai come la spaziatura cambia qui tra questi input.
davvero il modo in cui lo utilizzi dove hai un input e l'etichetta e vuoi che vengano raggruppati insieme.
Quindi possiamo tornare indietro e aggiungere quel gruppo di moduli e questo è
Quindi fai attenzione proprio qui viene aggiunto un po 'di spazio proprio lì.
Aggiunge solo un po 'di spazio proprio qui che raggruppa visivamente questi due elementi
visivamente e poi li unisce sia visivamente che questi qui.
Quindi questo è il gruppo di forme.
E poi le etichette sono solo normali.
Non dobbiamo aggiungere niente di speciale per etichettare nessuna classe Boucek, ma l'input è un controllo di classe.
Quindi vediamo cosa succede quando me ne sbarazzerò.
Quindi lo farò solo sul primo e inserirò l'input e-mail e tornerò e aggiornerò.
Si noti che questo cambia completamente al normale input del browser predefinito.
Quindi non ottieni gli angoli arrotondati.
Non otteniamo la stessa imbottitura e spaziatura delle cose.
Inoltre, non ottenendo lo stesso effetto di messa a fuoco quando clicco, otteniamo un contorno blu ma è
diverso da questo.
tra i due, ma ci sono in realtà alcune differenze più importanti che vedrete una volta che lavoreremo
con il sistema di griglia e il modo in cui si comportano e interagiscono con gli altri elementi.
Il contorno del bootstrap è un po 'più sottile e quelli sono solo i cambiamenti visivi immediatamente ovvi
Tornerà indietro e aggiungerà nuovamente il controllo del modulo.
Quindi se davvero volessimo distillare tutto questo qui si riduce a formare il gruppo e il controllo della forma.
Queste due classi sono veramente responsabili di rendere le cose belle.
Ora c'è questo blocco della guida di classe paragrafo e possiamo dare un'occhiata a ciò che otteniamo da questo.
piccolo suggerimento a una parte del tuo modulo e quella roba con il blocco di aiuto della classe e poi
abbiamo il nostro pulsante qui che è solo un normale pulsante di Pucelle o che abbiamo tra aeb tendono
a cado e potremmo renderlo più piccolo o più grande, cambiare il colore come qualsiasi altro pulsante.
È questo testo qui sotto che dà un
Quindi puoi già vedere come questo è un po 'come il Lego in cui abbiamo un pulsante Lego che
possiamo aggiungere a un jumbotron.
Possiamo anche solo aggiunto da soli o possiamo aggiungerlo al posto di un modulo.
È solo un piccolo componente plug and play che possiamo aggiungere a diverse parti della nostra applicazione.
Quindi torniamo indietro e diamo un'occhiata a un altro tipo di modulo che è la forma in linea.
Quindi questo sembra leggermente diverso.
un commento qui sotto forma di linea e indentiamo le cose correttamente.
Se semplicemente copiamo questo codice e diamo uno sguardo alle differenze, così lascerò quella prima forma e aggiungiamo
Sembra buono.
Si noti che tutto è identico.
Abbiamo ancora un controllo di forma sugli input che abbiamo nel gruppo di moduli, ma c'è una grande differenza.
Tutto è all'interno di un modulo con forma di classe in linea in modo che una riga.
Vediamo solo cosa sembra iniziare.
Torno ci dà questo bel modulo in linea qui.
E non appena me ne sbarazzerò, salvarlo ora tornerà a una forma regolare come quella che abbiamo qui.
Quindi solo una classe contiene tutti gli stili che la controlleranno.
Quindi lo manterremo come Modulo in linea.
E di nuovo la spaziatura non è ideale in questo momento.
Questo sarà risolto quando parliamo del sistema di rete.
Ci sono molte altre cose di cui possiamo parlare intorno ai moduli di bootstrap.
Potremmo probabilmente fare una conferenza di 45 minuti solo sulla creazione di bootstrap di forme complesse imparando i dettagli
di tutti questi diversi pezzi e cose diverse che possiamo fare validazioni personalizzate dimensionando tutti i tipi di
stili diversi con cui possiamo lavorare.
Ma non ho intenzione di farlo.
Abbiamo coperto le nozioni di base importanti.
Esistono due tipi di moduli: sono il tipo di pane e burro delle forme di Boucek in
cui abbiamo la forma regolare di base e quindi una forma in linea e ci saranno alcune altre funzionalità in
diversi aspetti del bootstrap che usiamo attorno ai moduli.
Ma piuttosto che trascorrere del tempo in questo momento e impantanarsi su tutti i dettagli e i
piccoli dettagli dei moduli PRICHEP, mi limiterò a inserire quei piccoli pezzi quando ne abbiamo bisogno quando
usiamo il bootstrap.
Quindi i due takeaway qui sulle forme sarebbero due classi che sono veramente importanti per il controllo della forma e il
controllo della forma del gruppo di forme rende gli input bootstrap del gruppo di forme semplicemente aggiungendo una bella spaziatura.
Quindi, qualunque cosa tu abbia detto, un gruppo di moduli ottiene una bella spaziatura e poi un modulo di classe singola in linea.
Se si avvolge un modulo in cui l'intero modulo va in linea.
E poi abbiamo anche parlato di Jumbotron.
La classe molto semplice è uguale a Jumbotron.
Quindi puoi vedere un peer.
E poi mettiamo tutto dentro un contenitore.
E se ci liberiamo di quel contenitore per mostrarti cosa succede.
Aggiorna tutta la spaziatura che il bel margine va via.
Quindi i contenitori sono carini, solo per avere un po 'di spazio sulla tua app che rende le cose abbastanza belle.
OK, quindi prima di concludere questo video spenderò 10 secondi per mostrarti un sito che
costruiremo un'applicazione che ha un database back-end completo connesso usando nodo ed express e Mongo e mangusta
e un mucchio di tecnologie e usiamo bootstrap per prototipare l'interfaccia per renderla abbastanza
buona abbastanza velocemente e puoi vedere che abbiamo un Jumbotron proprio qui.
Stiamo usando alcuni dei pulsanti che stiamo usando il sistema a griglia che spiegherò più avanti.
E poi se vado ad accedere, possiamo vedere che abbiamo un modulo.
Quindi questi sono controlli di forma che ho disegnato usando il sistema a griglia in modo che non
occupi l'intera larghezza dello schermo.
Piuttosto, occupa solo questa piccola parte centrale.
Quindi vedremo che una volta parliamo del sistema di rete.
Ma voglio solo mostrarti che questa è una vera applicazione ed è qualcosa su cui useremo il bootstrap
per aiutarci a prototipare e ottenere cose abbastanza decenti abbastanza velocemente