[MUSIC]
In questo esercizio, vedremo il supporto di Bootstrap per pulsanti e moduli.
Quindi ci accingiamo ad includere alcuni pulsanti e gruppo di pulsanti nella nostra pagina web.
E guardiamo anche alla progettazione di moduli e styling dei moduli utilizzando le classi Bootstrap.
Per iniziare, vai alla pagina delle istruzioni e
scarica il file contactus.html.zip che ti abbiamo fornito.
Quindi fai clic con il pulsante destro del mouse su questo,
quindi salva questo link nella tua cartella Confusione.
Come,
contactus.html.zip file.
E poi una volta scaricato il file zip, decomprimere il file per ottenere la pagina contactus.html.
Quindi è possibile eliminare il file zip.
Una volta decompresso il file e ottieni la pagina contactus.html,
noterai che quando carichi questa pagina nel tuo
browser usando localhost: 3000/ contactus.html,
vedrai che questa pagina è già preformata con alcuni contenuti.
Quindi puoi notare che hai già la barra di navigazione lì.
Abbiamo il jumbotron già formattato per noi.
E si noterebbe che ho il pangrattato e
il contatto con noi che si dirige qui formattato.
Quindi vedrai alcune informazioni aggiuntive, l'indirizzo qui.
Inoltre, noterai che il piè di pagina è già formato.
Ma noterai due cose qui,
noterai che c'è una linea qui che dice che i gruppi di pulsanti vanno qui e
poi un'altra riga qui che dice modulo va qui.
Quindi stiamo andando a sostituire questi due con un gruppo di pulsanti e un modulo.
E lungo la strada, impara il supporto di Bootstrap per pulsanti e moduli.
Prima di procedere in avanti, ora che abbiamo tre pagine nel nostro sito web,
è una buona idea per noi di collegarle insieme,
sia nella barra di navigazione che nei link nel piè di pagina.
Modificiamo questi due in modo da poter navigare tra queste tre pagine facilmente.
Quindi andando alla pagina contactus.html, noterai che nella barra di navigazione,
ho già i collegamenti a index.html impostati correttamente.
E noteresti che in basso
qui hai il link di contatto qui.
Ma il link corrispondente a about non è stato configurato correttamente.
Quindi vai a questo link qui e poi aggiorna a
aboutus.html.
Il link di contatto può essere lasciato solo in quanto tale.
E poi salvare le modifiche.
Ora allo stesso modo, vai al piè di pagina di questa pagina.
E noterai che nel piè di pagina abbiamo questi tre link qui.
E questo potrebbe essere un buon punto per sostituire i link
con i link alle pagine corrispondenti.
Quindi dirò, index.html, aboutus.html,
e, contactus.html.
E salvare le modifiche.
Allo stesso modo, vai a index.html, e quindi in index.html anche,
il link contattaci non è stato impostato.
Quindi aggiorniamo che a contactus.html.
E quindi allo stesso modo, aggiorna i collegamenti nel piè di pagina.
Vai anche a aboutus.html e quindi aggiustare i collegamenti anche lì.
Quindi anche nel aboutus.html, nell'intestazione ho intenzione di riparare il link.
E anche nel piè di pagina di aboutus.html.
Così ora, quando vai al tuo sito web,
sarai in grado di tornare alla tua home page, alla tua pagina di informazioni.
E dalla pagina su, puoi persino tornare alla pagina dei contatti.
Quindi tutti i collegamenti tra le tre pagine nelle intestazioni corrispondenti, e
anche i piè di pagina, qui dovrebbero essere configurati.
In modo che se fai clic su uno di questi ti porterà alla pagina appropriata.
Ora è il momento di iniziare a lavorare sui pulsanti che stiamo per
includere nella nostra pagina contactus.html.
Quindi quello che farò è sostituire questa riga con il codice per il
pulsante e il gruppo di pulsanti e
poi, dopo di ciò, torneremo per spiegare come funziona tutta questa cosa.
Aprendo contactus.html nel nostro editor,
troveremo il luogo in cui questa affermazione, gruppo di pulsanti va qui, esiste.
E poi lo sostituirò con il codice corrispondente a
quel gruppo di pulsanti prima.
E poi tornerò per spiegare come funziona questo codice.
Quindi salviamo le modifiche e poi diamo un'occhiata a
come appare questo gruppo di pulsanti nel nostro browser.
Andando al tuo browser, ora puoi vedere che nella nostra
pagina web è stato creato il gruppo di pulsanti.
Così si può vedere che ci sono tre pulsanti qui, Chiama,
Skype e Email pulsanti.
Ora, tutti questi tre sono uniti insieme in una singola barra o barra dei
pulsanti o ciò che è in termini Bootstrap chiamato gruppo di pulsanti.
Quindi diamo un'occhiata a come andiamo a costruire qualcosa di simile nel
codice Bootstrap.
Quindi qui ho sia la finestra del browser che il mio codice aperti fianco a fianco.
Quindi diamo un'occhiata a come creiamo questo codice pulsante.
Dando un'occhiata al codice, si nota che
i pulsanti sono inclusi all'interno di un div qui.
Al div, applichiamo la classe, btn-group.
Quindi, se hai un gruppo di pulsanti che vuoi unire e
presentare come un gruppo di pulsanti, come una barra di pulsanti,
allora useresti un div con la classe di gruppo di pulsanti e
il ruolo come gruppo qui a quel div.
Ora al suo interno, noterai che sto usando il
tag, a, per definire i tre pulsanti.
Quindi diamo un'occhiata a come definiamo i tre pulsanti.
Diamo un'occhiata a come definiamo il pulsante Chiama.
Quindi questa particolare linea definisce il pulsante Chiama.
Quindi dico, a, il ruolo è uguale al pulsante.
Quindi questo, un tag qui,
lo sto usando come un pulsante qui.
Ecco perché specifico il ruolo come pulsante.
Quindi questo è importante.
E poi guarda le classi che sto applicando a questo.
Quindi il primo è la classe btn.
La classe btn è la classe pulsante del Bootstrap.
Quindi lo mostrerà come un classico pulsante Bootstrap.
La seconda parte dice è btn-primaria.
Quindi, questo è ciò che definisce il colore del pulsante qui.
Quindi, in questo caso questo colore del pulsante è blu.
E così, questo è il colore principale in Bootstrap.
Quindi btn-primario.
E poi, dopo, guarda l'uso dell'href qui.
Quindi, poiché questo è un tag A, posso usare un attributo href in quel tag A.
Quindi, l'attributo href punta al numero di telefono.
E poi seguendo che noti che sto usando un'icona di carattere qui per il telefono.
Ecco perché ho i classe fa fa-phone e poi dopo la parola chiamata.
Quindi, questo è ciò che consente di costruire questo
pulsante blu, che è incluso in questa barra dei pulsanti qui.
Allo stesso modo, il prossimo, si nota che questo dice anche pulsante ruolo.
E poi mentre si passa attraverso, si vede che btn-info.
BTN-Info gli dà un colore di un colore azzurro.
Quindi, per impostazione predefinita btn-info si riferisce a un pulsante di colore blu chiaro qui.
E poi, puoi vedere che ho definito Skype qui.
E poi il terzo che, è un pulsante verde lì con e-mail.
Si noti che specifico lettere un ruolo = classe pulsante = btn btn-successo.
Quindi, quando dici btn-successo, questo sarà un pulsante verde qui.
Quindi, hai alcuni colori che sono già definiti in Bootstrap.
Primaria si riferisce al blu per il primo, il successo azzurro si riferisce
al colore verde, quindi si dispone di un avvertimento che sarebbe un colore giallo pallido, e
quindi pericolo, che è un colore rosso.
Quindi, questi sono colori predefiniti che sono stati impostati in Bootstrap.
E poi la configurazione di href, con il mailto qui, e
poi dopo quello, hai il file.
Font come icona qui e poi l'email lì.
Quindi questi tre tag e, che attualmente agiscono come pulsanti,
sono racchiusi nel lato di quelli div, che funge da btn group.
Quindi, è così che mostriamo un gruppo di pulsanti in Bootstrap.
Se vuoi solo un pulsante singolo,
tutto quello che devi fare è includere solo una di queste righe lì.
Quindi, potresti anche usare il tag button.
Se si utilizza il tag pulsante, quindi non è necessario specificare il ruolo,
invece si dice semplicemente pulsante di tipo.
Perché un pulsante potrebbe anche fungere da pulsante di invio lì.
Quindi più tardi, nelle forme vedremo l'uso del tag button,
per creare un pulsante da includere nel nostro modulo.
Continuando con l'esercizio, il nostro prossimo passo sarebbe quello di iniziare,
sviluppando il modulo che intendiamo includere nella pagina contactus.html.
Lo faremo passo dopo passo, in modo che in ogni passo impariamo un po 'di
come includi alcuni elementi nella loro forma.
Quindi, come inizio, quando vai alla pagina contactus.html,
proprio lì, vedrai questa affermazione chiamata, il modulo va qui.
Ora, quello che ho intenzione di fare è cambiare questo da col-sm
a col-md, in modo che per
schermi di dimensioni extra piccole o piccole, il mio modulo sarà disposto
occupando l'intera larghezza dello schermo, perché usa col-xs-12.
Ma da schermo di medie dimensioni sui reparti,
occuperà solo 9 fuori le 12 colonne.
Quindi, iniziamo a costruire il modulo.
Quindi, quello che sto per fare è, ho intenzione di sostituire questo, con il mio primo pezzo di codice.
Abbiamo intenzione di includere due campi nel nostro modulo, per
il nome e il cognome dell'utente.
Lasciami aggiungere il codice, quindi vedremo il risultato.
E poi, torneremo e esamineremo il codice.
Quindi, aggiungendo il codice a quel punto,
come sempre questo frammento di codice è nelle istruzioni.
Quindi, lasciami salvare le modifiche.
E poi torneremo indietro e guarderemo come appare questo modulo nel browser.
Dando un'occhiata al modulo, vedrai che ora hanno due temi nel modulo qui.
Il primo, ha un'etichetta sul lato sinistro che dice Nome e
poi hai la casella di input qui.
E poi il Cognome, e poi una casella di input qui.
Ora noti anche che questo modulo è disposto, in modo
che questa parte occupa la parte semi dello schermo, e
la parte rimanente è occupata dalla parte rimanente dello schermo.
Cominci a chiederti, come facciamo a fare questo?
La griglia Bootstrap ci aiuta a decidere su queste dimensioni.
Sarebbe un'ottima domanda da farti.
Vediamo il codice e capiamo come appare.
Prima di farlo, diamo un'occhiata allo stesso layout dei moduli,
nella dimensione dello schermo extra piccola.
Quindi, passando alla dimensione dello schermo extra piccola.
Quindi andremo al Galaxy S5.
Si nota, come il modulo è disposto nella dimensione dello schermo extra piccola.
Quindi, vedrai che l'etichetta è in cima, e
quindi la casella stessa, casella di input stessa è la parte inferiore, allo stesso modo per il cognome.
Quindi, si nota che Bootstrap.
A proposito, fornisce quelle classi di modulo.
Automaticamente, rende il modulo reattivo, in modo che quando è
disposto su schermi di diverse dimensioni, il modulo sarà disposto in modo appropriato, in
modo che non venga tutto schiacciato su schermi di piccole dimensioni.
Ma per le dimensioni dello schermo più grandi, perché si dispone di immobili più grandi,
si è in grado di allungare la forma, per fare uso dello spazio extra che si dispone.
Dando un'occhiata a quel codice sorgente, e il modulo fianco a fianco, ovviamente
la prima cosa che noti, è che il tuo modulo inizia con il tag form qui.
Quindi, modulo e poi il modulo di chiusura, tag qui.
Quindi, lì dentro, stai descrivendo le varie parti del tuo modulo.
Quindi, diamo un'occhiata a come viene costruito il nome,
il cognome ovviamente come sembra dovrebbe usare un approccio simile.
Quindi, di default, quello che noti è che, c'è un div qui.
Elemento Div qui, con il div di chiusura qui.
Quindi questo elemento div ha una classe chiamata form-group.
E poi seguito da una classe di riga.
Quindi la classe form-group essenzialmente,
dice che qualunque cosa sia all'interno di questo div sarà trattata come un gruppo di elementi.
E poi saranno disposti di conseguenza.
E la seconda parte, si vede l'uso della riga qui.
Quindi, vedresti che la riga del gruppo Bootstrap entra in gioco qui.
E così questo particolare gruppo di moduli, può essere disposto
usando la riga e le classi di colonna che hai dalla griglia Bootstrap.
Quindi ora, se applichi la riga a questo div,
qualunque cosa sia dentro, puoi usare le classi
di colonna, per decidere esattamente quanto spazio ognuno di essi occuperà sullo schermo.
Ora, in modo che lo rende più chiaro, in modo che quei gruppi di moduli racchiudono.
Questa unita'.
Vedremo questa ripetizione più e
più volte quando stiamo progettando i vari elementi del modulo.
Quindi, sotto di quello, vedi questo tag etichetta qui.
Per il tag etichetta, ci sono alcuni attributi che sono stati assegnati ad esso.
Quindi vedi che il tag etichetta usa un nome per nome.
Quindi questa etichetta è per qualcosa con l'id firstname.
Quindi qual è la casella di input che segue proprio sotto quella.
Lo guarderemo tra un po'.
E poi guarda le classi che vengono applicate alla classe etichetta, col-md-2.
Quindi significa che per schermi medio-extra grandi,
questo particolare elemento sta per occupare 2 colonne dello spazio.
E poi nota l'altro.
Dice «Col-Form-Label».
Quindi il col-form-label specifica essenzialmente
che questa etichetta deve essere posizionata per essere allineata con
l'altro elemento che fa parte di questo gruppo di moduli.
Quindi, in questo caso, la casella di input.
E quindi questo significa anche che
l'etichetta è allineata al centro,
orizzontalmente con la casella di input.
Quindi questo è il motivo per cui usiamo la classe col-form-label.
Se non lo applichi, l'etichetta verrà
allineata nella parte superiore della casella di input.
Che il tuo modulo non sarà così grande su schermi di dimensioni medio-extra grandi.
Ora, sul lato sinistro, ovviamente, perché questa finestra del browser è schiacciata,
quindi mostra la vista in una dimensione dello schermo piccola o extra piccola qui.
Ecco perché vedi l'etichetta che si accumula qui sopra la casella di input.
Quindi questa è l'etichetta che specifica.
Quindi, se hai un'etichetta che vuoi assegnare a un elemento,
ecco come assegnerai l'etichetta.
Qui sotto, vedi una classe div col-md-10.
Quindi questo occupa le restanti 10 delle 12 colonne.
Quindi due colonne che sono occupate dall'etichetta.
E le restanti dieci colonne occupate da questo, ma è racchiusa all'interno del div.
E all'interno di questo div,
vedi che c'è un elemento tag di input lì con il testo del tipo.
Quindi il che significa che questa casella di input accetta input di testo.
E la classe, guarda la classe qui.
C' e' scritto «controllo modulo».
Questo è importante da applicare alla casella di input qui.
Quindi form control e id firstname.
E il nome che è firstname.
Quindi segnaposto Nome.
Quindi il segnaposto è ciò che appare all'interno della casella come segnaposto per
la casella di input.
Quindi tutti questi attributi sono assegnati.
Quindi, cosa più importante,
notare l'uso della classe di controllo del modulo applicata al tipo di input.
Quindi questo è il modo in cui strutturate questi due elementi nella vostra forma.
Per schermi di piccole dimensioni e sotto, impila le due cose.
Ma per medio-extra large,
hai visto che li sta posizionando orizzontalmente fianco a fianco.
La stessa cosa vale anche per il codice di cognome.
Sarà molto simile a come il nome è strutturato.
Quindi vorrei che passassi un po 'di tempo anche a dare un'occhiata a questo codice. In
modo da vedere, sulla base della vostra comprensione di questo,
come questo è anche formattato.
Il prossimo tipo di evento formale che aggiungeremo è un elemento di gruppo di input.
Permettetemi di aggiungere il codice.
Vedremo quale sarà il modulo.
E poi torneremo indietro ed esamineremo il codice.
Quindi proprio qui, dopo il secondo div, dopo il campo cognome,
includerò il codice per l'elemento successivo qui.
E poi salviamo le modifiche.
E poi, immediatamente,
vedresti un paio di altre cose aggiunte nel tuo modulo.
Viene visualizzato un campo numero di telefono aggiunto qui.
Questo, dall'aspetto di esso, si vede che questo è molto simile a quello.
Quindi non ho intenzione di spiegare il codice per questo.
Questo dovrebbe essere molto semplice per voi da capire.
E poi anche questo campo di posta elettronica dovrebbe essere molto semplice per
voi da capire.
Perché questo sembra molto simile al cognome.
Tranne che per questo, il campo di input, il tipo sarà impostato su e-mail.
In modo che le funzionalità di controllo dei moduli integrate
del browser accendano automaticamente.
In modo che quando digiti qualcosa che non sembra un'e-mail,
allora si lamenterà in modo appropriato.
Quindi esaminiamo questa particolare parte del modulo qui.
Si noti che in questo caso, stiamo aggiungendo tra parentesi sinistra e
la parentesi destra a questa particolare casella di input.
Quindi, come si aggiungono cose nella tua scatola in questo modo?
Dando un'occhiata al codice qui nel tuo editor,
vedi che hai ancora la riga del gruppo di moduli che hai già capito.
E qui sotto, hai input type form element id telnum,
e così via, che dovrebbe anche essere molto chiaro per te.
Quindi non credo di doverti spiegare questa parte.
Si noti come sto usando le classi di colonna della griglia di Bootstrap per ognuna di queste.
Quindi l'etichetta è data col-md-2.
E poi il numero di telefono uno è dato
col-xs-7 col-sm-6 e col-md-7 qui.
In questo modo, il numero di telefono, questo elemento è posizionato correttamente.
Ma, in particolare, prestiamo attenzione a questa parte.
Quindi questo qui è all'interno di questo div.
Quindi all'interno di questo div, nota la classe data ad esso.
La classe dice input-group.
Quindi, essenzialmente, significa che qualunque cosa sia all'interno di questo div sarà trattata come
un gruppo di elementi qui.
Ecco perché la classe data è input-group.
Ora, per aggiungere qualcosa di simile, userai
una classe chiamata come input-group-addon.
E poi notare che sto usando un div per tenere quell'elemento.
Posso usare qualsiasi cosa qui, ma un div è utile qui.
Quindi dico div classe input-group-addon.
E poi il tipo div di chiusura all'interno, dove,
notare che ho la parentesi sinistra.
Quindi questo è ciò che ti permette di aggiungere qualche
appendice extra alla tua casella di input qui.
Allo stesso modo, quello qui sotto è anche una parentesi destra di ingresso-gruppo-addon.
Quindi questo è ciò che aggiunge l'altra parentesi giusta qui.
Ora, tra questi due, ovviamente, hai il tipo di input.
L' input con il tipo tel e la classe form control, id, nome,
segnaposto, tutto a posto qui.
Quindi questa non è altro che la parte prefisso.
Quindi se usi questo gruppo di input insieme a input-group-addons
come questo su entrambi i lati.
Quelle cose verranno aggiunte al tuo elemento di input come questo.
Questo ti fornisce un bel modo di progettare il tuo modulo con alcuni aggiunti in.
Ad esempio, se si dispone di un campo che accetta
denaro come input, si potrebbe semplicemente aggiungere un simbolo del dollaro sul lato sinistro per
indicare all'utente che si tratta di un campo che prende valore di valuta al momento. In
questo caso, in questo caso, questo campo accetta un prefisso.
E se vedete come i prefissi sono scritti negli Stati Uniti e in
Canada, sapete che sono racchiusi tra parentesi destra e sinistra.
Quindi, questo è ciò che mi permette di specificare qualcosa del genere nella mia forma lì.
Il mio prossimo set di elementi che aggiungerò al mio
modulo sono una casella di controllo e una selezione.
Allora, come lo aggiungiamo?
Quindi, se si ha familiarità con i moduli HTML, si capisce come funziona la selezione e
si capisce come funzionano le caselle di controllo nei moduli HTML.
Ora, Bootstrap ti fornisce alcune
classi aggiuntive che ti permettono di formattare questi elementi in modo appropriato.
Quindi, lasciatemi aggiungere la citazione.
Salviamo le modifiche.
Dai un'occhiata a ciò che questo si traduce nel modulo qui.
E poi dai un'occhiata al codice.
Quindi qui, vedi che ho una casella di controllo e qualche messaggio qui.
E poi questo è un selettore che mi permette di selezionare tra un insieme di scelte qui.
Ora il modulo così come esiste qui è quello che vedrai in piccole ed
extra piccole dimensioni dello schermo.
Diamo un'occhiata a questo su una dimensione dello schermo più grande.
La stessa forma quando disposta su
schermi di dimensioni medio-extra grandi sarà simile a questa.
Quindi puoi vedere come il numero di telefono del contatto è posizionato qui,
e l'e-mail è posizionata qui.
Quindi si noti che queste etichette sono
allineate su una linea nel mezzo con le caselle qui.
Questo è ciò che la classe di etichetta col form raggiunge prima.
Ora, concentriamoci su questo che abbiamo appena aggiunto.
Qui, vediamo che abbiamo una casella di controllo aggiunta in.
E poi, un campo di testo qui.
Allora, possiamo contattarla?
Quindi, ad esempio, ti aspetteresti che l'utente lo controlli e lo disattivi.
Quindi qual è la ragione di una casella di controllo?
Allo stesso modo, potresti avere dei pulsanti di opzione.
Bootstrap supporta i pulsanti di opzione disponibili in moduli HTML.
E fornire alcune classi per lo styling corretto.
E poi questo è ovviamente il selettore che ti permette di selezionare tra le scelte.
Quindi tornando indietro e guardando il codice.
Vediamo come questo sono implementati.
Tornando a dare un'occhiata al codice, vedi che questo è di nuovo un
gruppo di moduli div riga qui che racchiude due cose qui.
Uno è un modulo di controllo
col-md-6 offset md-2.
Quindi questo è ciò che racchiude una casella di controllo all'interno di questo elemento div.
E poi qui sotto ho una classe div, Col-MD-3 offset-md-1.
Quindi nota che qui, questo dice form check col-md-6 offset md-2.
Il motivo per cui sto facendo un offset md-2 è che non ho un'etichetta.
Quindi in genere stavo usando due colonne per le etichette.
Quindi, poiché questa casella di controllo dovrebbe allinearsi al lato destro nel modulo.
Ecco perché ho usato offset-md-2 qui.
E poi dentro qui dice etichetta class = «form-check-label».
E poi fornisce tag di input
qui con casella di controllo del tipo.
Quindi è così che crei una casella di controllo.
E poi la classe, la classe Bootstrap che applicherai alla
tua casella di controllo è il controllo del modulo.
E poi il nome e il valore iniziale sono vuoti.
E poi, questa è l'etichetta effettiva che vedi essere
applicata a quella particolare casella di controllo lì.
Quindi nota come questi due sono racchiusi all'interno di un tag etichetta qui.
Quindi questo è il modo in cui crei una casella di controllo insieme alla sua etichetta e
quindi posizionala nel tuo modulo qui.
Quindi questo qui usa l'etichetta di controllo del modulo.
E poi qui dentro, devi avere una casella di controllo, input type = «checkbox», e
poi etichettarsi.
Quindi qui vedi forte, possiamo contattarti?
Ecco perché è visualizzato in grassetto proprio accanto alla casella di controllo qui.
Ora sotto nel codice, hai una classe div col-md-3 offset-md-1.
Quindi questo occupa tre colonne all'interno di una colonna offset.
Quindi il totale di quattro colonne qui.
Quindi questo è col-md-6 più 2, quindi questo è otto colonne.
Quindi 8 più 4, 12.
Così che si prende cura delle tue 12 colonne per la tua griglia lì.
Ora all'interno di questo, si vede una selezione applicata qui.
Ora questa è l'opzione di selezione che i moduli di file HTML supportano.
E guarda la classe applicata a questo.
Dice class = «form-control» alla selezione.
E poi dai le opzioni nella selezione qui.
Così Tel., Email e così via.
Quindi questo è il modo in cui si specificano le opzioni per il campo di selezione nel modulo qui.
Quindi questo è l'uso di selezioni e caselle di controllo nel tuo modulo.
Allo stesso modo, se controlli la documentazione di Bootstrap vedrai l'uso di
pulsanti di opzione e altri elementi del modulo.
Dando un'occhiata alla nostra forma,
ora vediamo che abbiamo già molte delle cose di cui abbiamo bisogno nella nostra forma.
Hai un nome e un cognome.
Quindi questo modulo è qualcosa che costruiamo per consentire agli utenti di
inviare feedback al ristorante.
Quindi qui abbiamo nome,
cognome e numero di telefono di contatto e poi una e-mail.
E poi, naturalmente,
un'opzione per consentire all'utente di vedere se possono essere contattati o meno.
Quindi questo è implementato usando una casella di controllo e un selettore qui.
Ora, l'unica cosa rimasta e' un pulsante di invio per noi.
Quindi aggiungeremo in un pulsante di invio a questo modulo e
poi dare un'occhiata finale al modulo.
Prima di aggiungere un pulsante di invio, forse vogliamo fornire una casella per
gli utenti di digitare il loro feedback.
Quindi, in questo caso, ho intenzione di fare uso di un'area di testo per fornire questo.
Quindi lasciami incollare il codice.
E poi esamineremo il codice qui.
Quindi questo codice, come vedi dice,
div class = «form-group row» che sai già cosa significa.
E poi questa è l'etichetta che già sai come è costruita.
E sotto di esso, vedi un tag textarea utilizzato per il modulo.
Quindi dice, textarea class, con class = «form-control»,
che hai già visto prima.
E poi id, nome e quindi il numero di righe per
l'area di testo specificata qui.
Quindi, salviamo le modifiche e diamo un'occhiata al modulo.
Quindi, dando un'occhiata al modulo, vedi che insieme a questo, proprio qui sotto,
hai una grande casella di testo in cui i commenti di feedback possono essere digitati dall'utente.
Quindi il modulo ha nome, cognome, numero di telefono
, e-mail e un'approvazione per contattare l'utente, quindi una casella di feedback.
L' ultima cosa sarebbe il pulsante Invia.
Infine, aggiungiamo un pulsante Invia al modulo.
Quindi, dopo un div, nell'area di testo,
ho intenzione di incollare il codice per il pulsante Invia qui.
Quindi incollando di nuovo il codice per il pulsante Invia, guardando il codice, vedi
che questa è una classe div ="form-gruppo">, che già conosci da prima.
E poi questo dice, div class="offset-md-2 col-md-10">.
Capisci di cosa si tratta e
poi, all'interno di questo div, vedi un pulsante racchiuso qui.
Ora, dato che abbiamo visto la costruzione di un pulsante utilizzando il tag a,
prestiamo attenzione a come si costruisce un pulsante utilizzando il tag HTML pulsante.
Quindi, se stai usando il tag HTML del pulsante, allora dici pulsante e
quindi il tipo viene inviato.
Questo fungerà da pulsante Invia per il mio modulo, quindi
è per questo che ho detto che il tipo è inviare.
Si imposta il tipo su pulsante, agirà come un normale pulsante qui.
E poi a questo dico, pulsante di classe, pulsante primario.
Quindi questo è un pulsante di colore blu e quindi il pulsante
contiene questo testo all'interno del pulsante per inviare il testo di feedback all'interno del pulsante.
Quindi salviamo le modifiche.
Quindi questa sarebbe l'ultima modifica al mio modulo qui.
Quindi salviamo le modifiche e poi andiamo a dare un'occhiata al pulsante.
Tornando al browser, ora vedi che nel tuo modulo proprio qui sotto,
hai il pulsante Invia feedback.
Quindi, quando l'utente compila il modulo,
farà clic sul pulsante Invia feedback per inviare il feedback all'azienda.
Quindi questo completa la progettazione di un modulo.
Quindi questa è una di queste forme che puoi includere.
Ci sono molte altre classi che sono disponibili in Bootstrap per
moduli di supporto.
Ti esorto vivamente a consultare la documentazione del modulo per vedere
gli altri tipi di classi disponibili per la costruzione di default.
Quindi, se avete concettualmente nella vostra mente una forma che si desidera costruire,
allora basta cercare tutti i diversi elementi possibili che si desidera includere
nel modulo e quindi progettare il modulo di conseguenza.
La cosa più importante che hai notato nella costruzione del modulo usando Bootstrap,
sono tutte le classi Bootstrap disponibili.
Controllo modulo, gruppo di moduli, modalità di utilizzo delle classi riga e colonna.
E tutte queste classi diverse che sono supportate
in Bootstrap per progettare moduli, il film Bootstrap.
Ultimo set, fai il commit git, quindi, porteremo la pagina git.
Ho intenzione di commentare le modifiche che ho fatto a circa,
contactus e indice.
E poi dire pulsanti e
moduli Bootstrap, e poi che
si sarebbe impegnato nel mio repository git.
Con questo, completiamo questo esercizio.
Qui abbiamo imparato come includere pulsanti ed
elementi di forma nel nostro passo di progettazione Bootstrap.
[ MUSIC]