1 00:00:00,000 --> 00:00:04,797 [MUSIC] 2 00:00:04,797 --> 00:00:11,490 In questo esercizio, vedremo il supporto di Bootstrap per pulsanti e moduli. 3 00:00:11,490 --> 00:00:17,293 Quindi ci accingiamo ad includere alcuni pulsanti e gruppo di pulsanti nella nostra pagina web. 4 00:00:17,293 --> 00:00:24,190 E guardiamo anche alla progettazione di moduli e styling dei moduli utilizzando le classi Bootstrap. 5 00:00:25,780 --> 00:00:31,080 Per iniziare, vai alla pagina delle istruzioni e 6 00:00:31,080 --> 00:00:36,900 scarica il file contactus.html.zip che ti abbiamo fornito. 7 00:00:36,900 --> 00:00:39,798 Quindi fai clic con il pulsante destro del mouse su questo, 8 00:00:39,798 --> 00:00:44,969 quindi salva questo link nella tua cartella Confusione. 9 00:00:48,512 --> 00:00:49,568 Come, 10 00:00:54,264 --> 00:01:01,598 contactus.html.zip file. 11 00:01:01,598 --> 00:01:08,580 E poi una volta scaricato il file zip, decomprimere il file per ottenere la pagina contactus.html. 12 00:01:09,740 --> 00:01:11,580 Quindi è possibile eliminare il file zip. 13 00:01:13,440 --> 00:01:18,764 Una volta decompresso il file e ottieni la pagina contactus.html, 14 00:01:18,764 --> 00:01:23,084 noterai che quando carichi questa pagina nel tuo 15 00:01:23,084 --> 00:01:28,107 browser usando localhost: 3000/ contactus.html, 16 00:01:28,107 --> 00:01:34,748 vedrai che questa pagina è già preformata con alcuni contenuti. 17 00:01:34,748 --> 00:01:38,550 Quindi puoi notare che hai già la barra di navigazione lì. 18 00:01:38,550 --> 00:01:42,846 Abbiamo il jumbotron già formattato per noi. 19 00:01:42,846 --> 00:01:48,061 E si noterebbe che ho il pangrattato e 20 00:01:48,061 --> 00:01:52,190 il contatto con noi che si dirige qui formattato. 21 00:01:52,190 --> 00:01:57,730 Quindi vedrai alcune informazioni aggiuntive, l'indirizzo qui. 22 00:01:57,730 --> 00:02:04,180 Inoltre, noterai che il piè di pagina è già formato. 23 00:02:04,180 --> 00:02:06,580 Ma noterai due cose qui, 24 00:02:06,580 --> 00:02:11,820 noterai che c'è una linea qui che dice che i gruppi di pulsanti vanno qui e 25 00:02:11,820 --> 00:02:15,678 poi un'altra riga qui che dice modulo va qui. 26 00:02:15,678 --> 00:02:20,280 Quindi stiamo andando a sostituire questi due con un gruppo di pulsanti e un modulo. 27 00:02:20,280 --> 00:02:25,380 E lungo la strada, impara il supporto di Bootstrap per pulsanti e moduli. 28 00:02:25,380 --> 00:02:31,015 Prima di procedere in avanti, ora che abbiamo tre pagine nel nostro sito web, 29 00:02:31,015 --> 00:02:34,585 è una buona idea per noi di collegarle insieme, 30 00:02:34,585 --> 00:02:39,525 sia nella barra di navigazione che nei link nel piè di pagina. 31 00:02:39,525 --> 00:02:45,165 Modificiamo questi due in modo da poter navigare tra queste tre pagine facilmente. 32 00:02:45,165 --> 00:02:52,008 Quindi andando alla pagina contactus.html, noterai che nella barra di navigazione, 33 00:02:52,008 --> 00:02:56,816 ho già i collegamenti a index.html impostati correttamente. 34 00:02:58,908 --> 00:03:03,568 E noteresti che in basso 35 00:03:03,568 --> 00:03:08,450 qui hai il link di contatto qui. 36 00:03:08,450 --> 00:03:15,550 Ma il link corrispondente a about non è stato configurato correttamente. 37 00:03:15,550 --> 00:03:19,905 Quindi vai a questo link qui e poi aggiorna a 38 00:03:19,905 --> 00:03:24,430 aboutus.html. 39 00:03:24,430 --> 00:03:27,788 Il link di contatto può essere lasciato solo in quanto tale. 40 00:03:27,788 --> 00:03:31,050 E poi salvare le modifiche. 41 00:03:31,050 --> 00:03:35,070 Ora allo stesso modo, vai al piè di pagina di questa pagina. 42 00:03:35,070 --> 00:03:40,975 E noterai che nel piè di pagina abbiamo questi tre link qui. 43 00:03:40,975 --> 00:03:45,215 E questo potrebbe essere un buon punto per sostituire i link 44 00:03:45,215 --> 00:03:48,015 con i link alle pagine corrispondenti. 45 00:03:48,015 --> 00:03:54,342 Quindi dirò, index.html, aboutus.html, 46 00:03:54,342 --> 00:03:59,665 e, contactus.html. 47 00:03:59,665 --> 00:04:01,325 E salvare le modifiche. 48 00:04:01,325 --> 00:04:08,117 Allo stesso modo, vai a index.html, e quindi in index.html anche, 49 00:04:08,117 --> 00:04:12,280 il link contattaci non è stato impostato. 50 00:04:12,280 --> 00:04:18,640 Quindi aggiorniamo che a contactus.html. 51 00:04:18,640 --> 00:04:21,900 E quindi allo stesso modo, aggiorna i collegamenti nel piè di pagina. 52 00:04:23,050 --> 00:04:27,258 Vai anche a aboutus.html e quindi aggiustare i collegamenti anche lì. 53 00:04:27,258 --> 00:04:32,540 Quindi anche nel aboutus.html, nell'intestazione ho intenzione di riparare il link. 54 00:04:37,461 --> 00:04:41,690 E anche nel piè di pagina di aboutus.html. 55 00:04:41,690 --> 00:04:44,050 Così ora, quando vai al tuo sito web, 56 00:04:44,050 --> 00:04:49,290 sarai in grado di tornare alla tua home page, alla tua pagina di informazioni. 57 00:04:49,290 --> 00:04:52,950 E dalla pagina su, puoi persino tornare alla pagina dei contatti. 58 00:04:52,950 --> 00:04:57,780 Quindi tutti i collegamenti tra le tre pagine nelle intestazioni corrispondenti, e 59 00:04:57,780 --> 00:05:01,480 anche i piè di pagina, qui dovrebbero essere configurati. 60 00:05:01,480 --> 00:05:06,500 In modo che se fai clic su uno di questi ti porterà alla pagina appropriata. 61 00:05:08,190 --> 00:05:12,660 Ora è il momento di iniziare a lavorare sui pulsanti che stiamo per 62 00:05:12,660 --> 00:05:17,040 includere nella nostra pagina contactus.html. 63 00:05:17,040 --> 00:05:23,060 Quindi quello che farò è sostituire questa riga con il codice per il 64 00:05:23,060 --> 00:05:25,580 pulsante e il gruppo di pulsanti e 65 00:05:25,580 --> 00:05:30,465 poi, dopo di ciò, torneremo per spiegare come funziona tutta questa cosa. 66 00:05:30,465 --> 00:05:34,650 Aprendo contactus.html nel nostro editor, 67 00:05:34,650 --> 00:05:40,402 troveremo il luogo in cui questa affermazione, gruppo di pulsanti va qui, esiste. 68 00:05:40,402 --> 00:05:44,230 E poi lo sostituirò con il codice corrispondente a 69 00:05:44,230 --> 00:05:46,920 quel gruppo di pulsanti prima. 70 00:05:46,920 --> 00:05:51,600 E poi tornerò per spiegare come funziona questo codice. 71 00:05:51,600 --> 00:05:56,570 Quindi salviamo le modifiche e poi diamo un'occhiata a 72 00:05:56,570 --> 00:06:00,920 come appare questo gruppo di pulsanti nel nostro browser. 73 00:06:02,550 --> 00:06:07,224 Andando al tuo browser, ora puoi vedere che nella nostra 74 00:06:07,224 --> 00:06:12,310 pagina web è stato creato il gruppo di pulsanti. 75 00:06:12,310 --> 00:06:15,040 Così si può vedere che ci sono tre pulsanti qui, Chiama, 76 00:06:15,040 --> 00:06:17,540 Skype e Email pulsanti. 77 00:06:17,540 --> 00:06:21,990 Ora, tutti questi tre sono uniti insieme in una singola barra o barra dei 78 00:06:21,990 --> 00:06:26,800 pulsanti o ciò che è in termini Bootstrap chiamato gruppo di pulsanti. 79 00:06:26,800 --> 00:06:31,350 Quindi diamo un'occhiata a come andiamo a costruire qualcosa di simile nel 80 00:06:31,350 --> 00:06:32,390 codice Bootstrap. 81 00:06:33,530 --> 00:06:41,530 Quindi qui ho sia la finestra del browser che il mio codice aperti fianco a fianco. 82 00:06:41,530 --> 00:06:44,990 Quindi diamo un'occhiata a come creiamo questo codice pulsante. 83 00:06:44,990 --> 00:06:48,536 Dando un'occhiata al codice, si nota che 84 00:06:48,536 --> 00:06:53,745 i pulsanti sono inclusi all'interno di un div qui. 85 00:06:53,745 --> 00:06:57,060 Al div, applichiamo la classe, btn-group. 86 00:06:57,060 --> 00:07:02,255 Quindi, se hai un gruppo di pulsanti che vuoi unire e 87 00:07:02,255 --> 00:07:06,225 presentare come un gruppo di pulsanti, come una barra di pulsanti, 88 00:07:06,225 --> 00:07:10,990 allora useresti un div con la classe di gruppo di pulsanti e 89 00:07:10,990 --> 00:07:14,540 il ruolo come gruppo qui a quel div. 90 00:07:14,540 --> 00:07:18,332 Ora al suo interno, noterai che sto usando il 91 00:07:18,332 --> 00:07:20,550 tag, a, per definire i tre pulsanti. 92 00:07:20,550 --> 00:07:23,590 Quindi diamo un'occhiata a come definiamo i tre pulsanti. 93 00:07:23,590 --> 00:07:26,430 Diamo un'occhiata a come definiamo il pulsante Chiama. 94 00:07:26,430 --> 00:07:30,030 Quindi questa particolare linea definisce il pulsante Chiama. 95 00:07:30,030 --> 00:07:33,718 Quindi dico, a, il ruolo è uguale al pulsante. 96 00:07:33,718 --> 00:07:38,375 Quindi questo, un tag qui, 97 00:07:38,375 --> 00:07:42,565 lo sto usando come un pulsante qui. 98 00:07:42,565 --> 00:07:44,955 Ecco perché specifico il ruolo come pulsante. 99 00:07:44,955 --> 00:07:46,545 Quindi questo è importante. 100 00:07:46,545 --> 00:07:49,591 E poi guarda le classi che sto applicando a questo. 101 00:07:49,591 --> 00:07:54,926 Quindi il primo è la classe btn. 102 00:07:54,926 --> 00:07:59,880 La classe btn è la classe pulsante del Bootstrap. 103 00:07:59,880 --> 00:08:03,720 Quindi lo mostrerà come un classico pulsante Bootstrap. 104 00:08:03,720 --> 00:08:07,300 La seconda parte dice è btn-primaria. 105 00:08:07,300 --> 00:08:10,940 Quindi, questo è ciò che definisce il colore del pulsante qui. 106 00:08:10,940 --> 00:08:15,910 Quindi, in questo caso questo colore del pulsante è blu. 107 00:08:15,910 --> 00:08:18,750 E così, questo è il colore principale in Bootstrap. 108 00:08:18,750 --> 00:08:20,670 Quindi btn-primario. 109 00:08:20,670 --> 00:08:25,510 E poi, dopo, guarda l'uso dell'href qui. 110 00:08:25,510 --> 00:08:30,850 Quindi, poiché questo è un tag A, posso usare un attributo href in quel tag A. 111 00:08:30,850 --> 00:08:33,610 Quindi, l'attributo href punta al numero di telefono. 112 00:08:35,110 --> 00:08:40,940 E poi seguendo che noti che sto usando un'icona di carattere qui per il telefono. 113 00:08:40,940 --> 00:08:47,560 Ecco perché ho i classe fa fa-phone e poi dopo la parola chiamata. 114 00:08:47,560 --> 00:08:53,170 Quindi, questo è ciò che consente di costruire questo 115 00:08:53,170 --> 00:08:58,550 pulsante blu, che è incluso in questa barra dei pulsanti qui. 116 00:08:58,550 --> 00:09:04,150 Allo stesso modo, il prossimo, si nota che questo dice anche pulsante ruolo. 117 00:09:04,150 --> 00:09:07,795 E poi mentre si passa attraverso, si vede che btn-info. 118 00:09:07,795 --> 00:09:12,235 BTN-Info gli dà un colore di un colore azzurro. 119 00:09:12,235 --> 00:09:18,665 Quindi, per impostazione predefinita btn-info si riferisce a un pulsante di colore blu chiaro qui. 120 00:09:18,665 --> 00:09:22,975 E poi, puoi vedere che ho definito Skype qui. 121 00:09:22,975 --> 00:09:28,172 E poi il terzo che, è un pulsante verde lì con e-mail. 122 00:09:28,172 --> 00:09:34,542 Si noti che specifico lettere un ruolo = classe pulsante = btn btn-successo. 123 00:09:34,542 --> 00:09:38,132 Quindi, quando dici btn-successo, questo sarà un pulsante verde qui. 124 00:09:38,132 --> 00:09:44,102 Quindi, hai alcuni colori che sono già definiti in Bootstrap. 125 00:09:44,102 --> 00:09:48,322 Primaria si riferisce al blu per il primo, il successo azzurro si riferisce 126 00:09:49,390 --> 00:09:54,250 al colore verde, quindi si dispone di un avvertimento che sarebbe un colore giallo pallido, e 127 00:09:54,250 --> 00:09:56,150 quindi pericolo, che è un colore rosso. 128 00:09:56,150 --> 00:09:59,763 Quindi, questi sono colori predefiniti che sono stati impostati in Bootstrap. 129 00:10:01,712 --> 00:10:06,602 E poi la configurazione di href, con il mailto qui, e 130 00:10:06,602 --> 00:10:10,140 poi dopo quello, hai il file. 131 00:10:11,972 --> 00:10:16,030 Font come icona qui e poi l'email lì. 132 00:10:16,030 --> 00:10:21,410 Quindi questi tre tag e, che attualmente agiscono come pulsanti, 133 00:10:21,410 --> 00:10:26,780 sono racchiusi nel lato di quelli div, che funge da btn group. 134 00:10:26,780 --> 00:10:32,100 Quindi, è così che mostriamo un gruppo di pulsanti in Bootstrap. 135 00:10:32,100 --> 00:10:34,470 Se vuoi solo un pulsante singolo, 136 00:10:34,470 --> 00:10:37,220 tutto quello che devi fare è includere solo una di queste righe lì. 137 00:10:38,270 --> 00:10:41,130 Quindi, potresti anche usare il tag button. 138 00:10:41,130 --> 00:10:44,270 Se si utilizza il tag pulsante, quindi non è necessario specificare il ruolo, 139 00:10:44,270 --> 00:10:46,730 invece si dice semplicemente pulsante di tipo. 140 00:10:46,730 --> 00:10:49,700 Perché un pulsante potrebbe anche fungere da pulsante di invio lì. 141 00:10:49,700 --> 00:10:54,140 Quindi più tardi, nelle forme vedremo l'uso del tag button, 142 00:10:54,140 --> 00:10:57,040 per creare un pulsante da includere nel nostro modulo. 143 00:10:58,600 --> 00:11:03,900 Continuando con l'esercizio, il nostro prossimo passo sarebbe quello di iniziare, 144 00:11:03,900 --> 00:11:08,790 sviluppando il modulo che intendiamo includere nella pagina contactus.html. 145 00:11:08,790 --> 00:11:13,350 Lo faremo passo dopo passo, in modo che in ogni passo impariamo un po 'di 146 00:11:13,350 --> 00:11:17,610 come includi alcuni elementi nella loro forma. 147 00:11:17,610 --> 00:11:24,480 Quindi, come inizio, quando vai alla pagina contactus.html, 148 00:11:24,480 --> 00:11:29,430 proprio lì, vedrai questa affermazione chiamata, il modulo va qui. 149 00:11:29,430 --> 00:11:34,771 Ora, quello che ho intenzione di fare è cambiare questo da col-sm 150 00:11:34,771 --> 00:11:39,480 a col-md, in modo che per 151 00:11:39,480 --> 00:11:44,290 schermi di dimensioni extra piccole o piccole, il mio modulo sarà disposto 152 00:11:44,290 --> 00:11:49,352 occupando l'intera larghezza dello schermo, perché usa col-xs-12. 153 00:11:49,352 --> 00:11:53,024 Ma da schermo di medie dimensioni sui reparti, 154 00:11:53,024 --> 00:11:57,290 occuperà solo 9 fuori le 12 colonne. 155 00:11:57,290 --> 00:11:59,600 Quindi, iniziamo a costruire il modulo. 156 00:11:59,600 --> 00:12:05,470 Quindi, quello che sto per fare è, ho intenzione di sostituire questo, con il mio primo pezzo di codice. 157 00:12:06,580 --> 00:12:11,300 Abbiamo intenzione di includere due campi nel nostro modulo, per 158 00:12:11,300 --> 00:12:14,280 il nome e il cognome dell'utente. 159 00:12:14,280 --> 00:12:17,440 Lasciami aggiungere il codice, quindi vedremo il risultato. 160 00:12:17,440 --> 00:12:19,750 E poi, torneremo e esamineremo il codice. 161 00:12:19,750 --> 00:12:23,190 Quindi, aggiungendo il codice a quel punto, 162 00:12:23,190 --> 00:12:27,820 come sempre questo frammento di codice è nelle istruzioni. 163 00:12:27,820 --> 00:12:30,510 Quindi, lasciami salvare le modifiche. 164 00:12:30,510 --> 00:12:35,690 E poi torneremo indietro e guarderemo come appare questo modulo nel browser. 165 00:12:35,690 --> 00:12:40,250 Dando un'occhiata al modulo, vedrai che ora hanno due temi nel modulo qui. 166 00:12:42,060 --> 00:12:46,790 Il primo, ha un'etichetta sul lato sinistro che dice Nome e 167 00:12:46,790 --> 00:12:49,780 poi hai la casella di input qui. 168 00:12:49,780 --> 00:12:52,800 E poi il Cognome, e poi una casella di input qui. 169 00:12:52,800 --> 00:12:56,710 Ora noti anche che questo modulo è disposto, in modo 170 00:12:56,710 --> 00:13:00,510 che questa parte occupa la parte semi dello schermo, e 171 00:13:00,510 --> 00:13:03,620 la parte rimanente è occupata dalla parte rimanente dello schermo. 172 00:13:03,620 --> 00:13:08,400 Cominci a chiederti, come facciamo a fare questo? 173 00:13:09,720 --> 00:13:15,095 La griglia Bootstrap ci aiuta a decidere su queste dimensioni. 174 00:13:15,095 --> 00:13:18,725 Sarebbe un'ottima domanda da farti. 175 00:13:18,725 --> 00:13:21,695 Vediamo il codice e capiamo come appare. 176 00:13:21,695 --> 00:13:26,595 Prima di farlo, diamo un'occhiata allo stesso layout dei moduli, 177 00:13:26,595 --> 00:13:29,595 nella dimensione dello schermo extra piccola. 178 00:13:29,595 --> 00:13:32,795 Quindi, passando alla dimensione dello schermo extra piccola. 179 00:13:32,795 --> 00:13:34,425 Quindi andremo al Galaxy S5. 180 00:13:35,490 --> 00:13:40,060 Si nota, come il modulo è disposto nella dimensione dello schermo extra piccola. 181 00:13:40,060 --> 00:13:44,304 Quindi, vedrai che l'etichetta è in cima, e 182 00:13:44,304 --> 00:13:50,590 quindi la casella stessa, casella di input stessa è la parte inferiore, allo stesso modo per il cognome. 183 00:13:50,590 --> 00:13:53,420 Quindi, si nota che Bootstrap. 184 00:13:53,420 --> 00:13:57,500 A proposito, fornisce quelle classi di modulo. 185 00:13:57,500 --> 00:14:02,460 Automaticamente, rende il modulo reattivo, in modo che quando è 186 00:14:02,460 --> 00:14:07,450 disposto su schermi di diverse dimensioni, il modulo sarà disposto in modo appropriato, in 187 00:14:07,450 --> 00:14:12,550 modo che non venga tutto schiacciato su schermi di piccole dimensioni. 188 00:14:13,610 --> 00:14:17,220 Ma per le dimensioni dello schermo più grandi, perché si dispone di immobili più grandi, 189 00:14:17,220 --> 00:14:23,480 si è in grado di allungare la forma, per fare uso dello spazio extra che si dispone. 190 00:14:24,830 --> 00:14:31,150 Dando un'occhiata a quel codice sorgente, e il modulo fianco a fianco, ovviamente 191 00:14:31,150 --> 00:14:36,140 la prima cosa che noti, è che il tuo modulo inizia con il tag form qui. 192 00:14:36,140 --> 00:14:40,160 Quindi, modulo e poi il modulo di chiusura, tag qui. 193 00:14:40,160 --> 00:14:45,970 Quindi, lì dentro, stai descrivendo le varie parti del tuo modulo. 194 00:14:45,970 --> 00:14:49,150 Quindi, diamo un'occhiata a come viene costruito il nome, 195 00:14:49,150 --> 00:14:54,390 il cognome ovviamente come sembra dovrebbe usare un approccio simile. 196 00:14:54,390 --> 00:15:01,240 Quindi, di default, quello che noti è che, c'è un div qui. 197 00:15:01,240 --> 00:15:06,480 Elemento Div qui, con il div di chiusura qui. 198 00:15:06,480 --> 00:15:10,515 Quindi questo elemento div ha una classe chiamata form-group. 199 00:15:11,920 --> 00:15:15,108 E poi seguito da una classe di riga. 200 00:15:15,108 --> 00:15:17,080 Quindi la classe form-group essenzialmente, 201 00:15:17,080 --> 00:15:22,580 dice che qualunque cosa sia all'interno di questo div sarà trattata come un gruppo di elementi. 202 00:15:22,580 --> 00:15:26,120 E poi saranno disposti di conseguenza. 203 00:15:26,120 --> 00:15:30,902 E la seconda parte, si vede l'uso della riga qui. 204 00:15:30,902 --> 00:15:35,740 Quindi, vedresti che la riga del gruppo Bootstrap entra in gioco qui. 205 00:15:35,740 --> 00:15:40,610 E così questo particolare gruppo di moduli, può essere disposto 206 00:15:40,610 --> 00:15:45,480 usando la riga e le classi di colonna che hai dalla griglia Bootstrap. 207 00:15:45,480 --> 00:15:48,506 Quindi ora, se applichi la riga a questo div, 208 00:15:48,506 --> 00:15:52,956 qualunque cosa sia dentro, puoi usare le classi 209 00:15:52,956 --> 00:15:58,741 di colonna, per decidere esattamente quanto spazio ognuno di essi occuperà sullo schermo. 210 00:15:58,741 --> 00:16:05,390 Ora, in modo che lo rende più chiaro, in modo che quei gruppi di moduli racchiudono. 211 00:16:05,390 --> 00:16:06,650 Questa unita'. 212 00:16:06,650 --> 00:16:08,570 Vedremo questa ripetizione più e 213 00:16:08,570 --> 00:16:14,460 più volte quando stiamo progettando i vari elementi del modulo. 214 00:16:14,460 --> 00:16:20,020 Quindi, sotto di quello, vedi questo tag etichetta qui. 215 00:16:20,020 --> 00:16:25,180 Per il tag etichetta, ci sono alcuni attributi che sono stati assegnati ad esso. 216 00:16:25,180 --> 00:16:28,740 Quindi vedi che il tag etichetta usa un nome per nome. 217 00:16:28,740 --> 00:16:33,650 Quindi questa etichetta è per qualcosa con l'id firstname. 218 00:16:33,650 --> 00:16:37,690 Quindi qual è la casella di input che segue proprio sotto quella. 219 00:16:37,690 --> 00:16:39,790 Lo guarderemo tra un po'. 220 00:16:39,790 --> 00:16:46,136 E poi guarda le classi che vengono applicate alla classe etichetta, col-md-2. 221 00:16:46,136 --> 00:16:50,029 Quindi significa che per schermi medio-extra grandi, 222 00:16:50,029 --> 00:16:56,040 questo particolare elemento sta per occupare 2 colonne dello spazio. 223 00:16:56,040 --> 00:16:57,884 E poi nota l'altro. 224 00:16:57,884 --> 00:17:00,764 Dice «Col-Form-Label». 225 00:17:00,764 --> 00:17:05,957 Quindi il col-form-label specifica essenzialmente 226 00:17:05,957 --> 00:17:11,780 che questa etichetta deve essere posizionata per essere allineata con 227 00:17:11,780 --> 00:17:18,270 l'altro elemento che fa parte di questo gruppo di moduli. 228 00:17:18,270 --> 00:17:20,576 Quindi, in questo caso, la casella di input. 229 00:17:20,576 --> 00:17:24,508 E quindi questo significa anche che 230 00:17:24,508 --> 00:17:29,868 l'etichetta è allineata al centro, 231 00:17:29,868 --> 00:17:35,550 orizzontalmente con la casella di input. 232 00:17:35,550 --> 00:17:39,535 Quindi questo è il motivo per cui usiamo la classe col-form-label. 233 00:17:39,535 --> 00:17:43,725 Se non lo applichi, l'etichetta verrà 234 00:17:43,725 --> 00:17:48,185 allineata nella parte superiore della casella di input. 235 00:17:48,185 --> 00:17:53,551 Che il tuo modulo non sarà così grande su schermi di dimensioni medio-extra grandi. 236 00:17:53,551 --> 00:17:59,727 Ora, sul lato sinistro, ovviamente, perché questa finestra del browser è schiacciata, 237 00:17:59,727 --> 00:18:05,360 quindi mostra la vista in una dimensione dello schermo piccola o extra piccola qui. 238 00:18:05,360 --> 00:18:11,650 Ecco perché vedi l'etichetta che si accumula qui sopra la casella di input. 239 00:18:11,650 --> 00:18:14,560 Quindi questa è l'etichetta che specifica. 240 00:18:14,560 --> 00:18:18,380 Quindi, se hai un'etichetta che vuoi assegnare a un elemento, 241 00:18:18,380 --> 00:18:20,890 ecco come assegnerai l'etichetta. 242 00:18:20,890 --> 00:18:25,740 Qui sotto, vedi una classe div col-md-10. 243 00:18:25,740 --> 00:18:29,120 Quindi questo occupa le restanti 10 delle 12 colonne. 244 00:18:29,120 --> 00:18:31,670 Quindi due colonne che sono occupate dall'etichetta. 245 00:18:31,670 --> 00:18:36,070 E le restanti dieci colonne occupate da questo, ma è racchiusa all'interno del div. 246 00:18:36,070 --> 00:18:38,230 E all'interno di questo div, 247 00:18:38,230 --> 00:18:43,493 vedi che c'è un elemento tag di input lì con il testo del tipo. 248 00:18:43,493 --> 00:18:49,734 Quindi il che significa che questa casella di input accetta input di testo. 249 00:18:49,734 --> 00:18:52,170 E la classe, guarda la classe qui. 250 00:18:52,170 --> 00:18:54,800 C' e' scritto «controllo modulo». 251 00:18:54,800 --> 00:18:57,730 Questo è importante da applicare alla casella di input qui. 252 00:18:57,730 --> 00:19:01,301 Quindi form control e id firstname. 253 00:19:01,301 --> 00:19:04,550 E il nome che è firstname. 254 00:19:04,550 --> 00:19:07,630 Quindi segnaposto Nome. 255 00:19:07,630 --> 00:19:12,840 Quindi il segnaposto è ciò che appare all'interno della casella come segnaposto per 256 00:19:12,840 --> 00:19:14,610 la casella di input. 257 00:19:14,610 --> 00:19:17,470 Quindi tutti questi attributi sono assegnati. 258 00:19:17,470 --> 00:19:18,690 Quindi, cosa più importante, 259 00:19:18,690 --> 00:19:23,810 notare l'uso della classe di controllo del modulo applicata al tipo di input. 260 00:19:23,810 --> 00:19:29,960 Quindi questo è il modo in cui strutturate questi due elementi nella vostra forma. 261 00:19:29,960 --> 00:19:35,425 Per schermi di piccole dimensioni e sotto, impila le due cose. 262 00:19:35,425 --> 00:19:37,118 Ma per medio-extra large, 263 00:19:37,118 --> 00:19:41,500 hai visto che li sta posizionando orizzontalmente fianco a fianco. 264 00:19:41,500 --> 00:19:45,645 La stessa cosa vale anche per il codice di cognome. 265 00:19:45,645 --> 00:19:49,670 Sarà molto simile a come il nome è strutturato. 266 00:19:49,670 --> 00:19:54,380 Quindi vorrei che passassi un po 'di tempo anche a dare un'occhiata a questo codice. In 267 00:19:54,380 --> 00:19:58,150 modo da vedere, sulla base della vostra comprensione di questo, 268 00:19:58,150 --> 00:20:00,230 come questo è anche formattato. 269 00:20:01,550 --> 00:20:08,360 Il prossimo tipo di evento formale che aggiungeremo è un elemento di gruppo di input. 270 00:20:08,360 --> 00:20:09,330 Permettetemi di aggiungere il codice. 271 00:20:09,330 --> 00:20:13,111 Vedremo quale sarà il modulo. 272 00:20:13,111 --> 00:20:15,560 E poi torneremo indietro ed esamineremo il codice. 273 00:20:15,560 --> 00:20:19,542 Quindi proprio qui, dopo il secondo div, dopo il campo cognome, 274 00:20:19,542 --> 00:20:24,840 includerò il codice per l'elemento successivo qui. 275 00:20:25,880 --> 00:20:28,142 E poi salviamo le modifiche. 276 00:20:28,142 --> 00:20:30,466 E poi, immediatamente, 277 00:20:30,466 --> 00:20:36,360 vedresti un paio di altre cose aggiunte nel tuo modulo. 278 00:20:36,360 --> 00:20:38,975 Viene visualizzato un campo numero di telefono aggiunto qui. 279 00:20:38,975 --> 00:20:42,985 Questo, dall'aspetto di esso, si vede che questo è molto simile a quello. 280 00:20:42,985 --> 00:20:45,335 Quindi non ho intenzione di spiegare il codice per questo. 281 00:20:45,335 --> 00:20:48,110 Questo dovrebbe essere molto semplice per voi da capire. 282 00:20:48,110 --> 00:20:52,073 E poi anche questo campo di posta elettronica dovrebbe essere molto semplice per 283 00:20:52,073 --> 00:20:53,747 voi da capire. 284 00:20:53,747 --> 00:20:56,537 Perché questo sembra molto simile al cognome. 285 00:20:56,537 --> 00:21:02,477 Tranne che per questo, il campo di input, il tipo sarà impostato su e-mail. 286 00:21:02,477 --> 00:21:06,739 In modo che le funzionalità di controllo dei moduli integrate 287 00:21:06,739 --> 00:21:10,094 del browser accendano automaticamente. 288 00:21:10,094 --> 00:21:14,113 In modo che quando digiti qualcosa che non sembra un'e-mail, 289 00:21:14,113 --> 00:21:16,860 allora si lamenterà in modo appropriato. 290 00:21:16,860 --> 00:21:21,780 Quindi esaminiamo questa particolare parte del modulo qui. 291 00:21:21,780 --> 00:21:27,500 Si noti che in questo caso, stiamo aggiungendo tra parentesi sinistra e 292 00:21:27,500 --> 00:21:31,430 la parentesi destra a questa particolare casella di input. 293 00:21:31,430 --> 00:21:36,570 Quindi, come si aggiungono cose nella tua scatola in questo modo? 294 00:21:36,570 --> 00:21:41,330 Dando un'occhiata al codice qui nel tuo editor, 295 00:21:41,330 --> 00:21:45,750 vedi che hai ancora la riga del gruppo di moduli che hai già capito. 296 00:21:45,750 --> 00:21:50,942 E qui sotto, hai input type form element id telnum, 297 00:21:50,942 --> 00:21:54,460 e così via, che dovrebbe anche essere molto chiaro per te. 298 00:21:54,460 --> 00:21:57,360 Quindi non credo di doverti spiegare questa parte. 299 00:21:57,360 --> 00:22:04,366 Si noti come sto usando le classi di colonna della griglia di Bootstrap per ognuna di queste. 300 00:22:04,366 --> 00:22:08,060 Quindi l'etichetta è data col-md-2. 301 00:22:08,060 --> 00:22:12,062 E poi il numero di telefono uno è dato 302 00:22:12,062 --> 00:22:16,880 col-xs-7 col-sm-6 e col-md-7 qui. 303 00:22:16,880 --> 00:22:23,100 In questo modo, il numero di telefono, questo elemento è posizionato correttamente. 304 00:22:23,100 --> 00:22:27,310 Ma, in particolare, prestiamo attenzione a questa parte. 305 00:22:27,310 --> 00:22:31,470 Quindi questo qui è all'interno di questo div. 306 00:22:32,670 --> 00:22:36,250 Quindi all'interno di questo div, nota la classe data ad esso. 307 00:22:36,250 --> 00:22:38,689 La classe dice input-group. 308 00:22:38,689 --> 00:22:43,587 Quindi, essenzialmente, significa che qualunque cosa sia all'interno di questo div sarà trattata come 309 00:22:43,587 --> 00:22:45,350 un gruppo di elementi qui. 310 00:22:45,350 --> 00:22:49,030 Ecco perché la classe data è input-group. 311 00:22:49,030 --> 00:22:53,600 Ora, per aggiungere qualcosa di simile, userai 312 00:22:53,600 --> 00:22:59,000 una classe chiamata come input-group-addon. 313 00:22:59,000 --> 00:23:04,490 E poi notare che sto usando un div per tenere quell'elemento. 314 00:23:04,490 --> 00:23:08,200 Posso usare qualsiasi cosa qui, ma un div è utile qui. 315 00:23:08,200 --> 00:23:12,980 Quindi dico div classe input-group-addon. 316 00:23:12,980 --> 00:23:16,250 E poi il tipo div di chiusura all'interno, dove, 317 00:23:16,250 --> 00:23:18,500 notare che ho la parentesi sinistra. 318 00:23:18,500 --> 00:23:25,477 Quindi questo è ciò che ti permette di aggiungere qualche 319 00:23:25,477 --> 00:23:30,963 appendice extra alla tua casella di input qui. 320 00:23:30,963 --> 00:23:38,390 Allo stesso modo, quello qui sotto è anche una parentesi destra di ingresso-gruppo-addon. 321 00:23:38,390 --> 00:23:42,350 Quindi questo è ciò che aggiunge l'altra parentesi giusta qui. 322 00:23:42,350 --> 00:23:46,270 Ora, tra questi due, ovviamente, hai il tipo di input. 323 00:23:46,270 --> 00:23:51,094 L' input con il tipo tel e la classe form control, id, nome, 324 00:23:51,094 --> 00:23:54,310 segnaposto, tutto a posto qui. 325 00:23:54,310 --> 00:23:57,190 Quindi questa non è altro che la parte prefisso. 326 00:23:57,190 --> 00:24:02,049 Quindi se usi questo gruppo di input insieme a input-group-addons 327 00:24:02,049 --> 00:24:04,440 come questo su entrambi i lati. 328 00:24:04,440 --> 00:24:10,070 Quelle cose verranno aggiunte al tuo elemento di input come questo. 329 00:24:10,070 --> 00:24:15,880 Questo ti fornisce un bel modo di progettare il tuo modulo con alcuni aggiunti in. 330 00:24:15,880 --> 00:24:20,170 Ad esempio, se si dispone di un campo che accetta 331 00:24:22,450 --> 00:24:27,360 denaro come input, si potrebbe semplicemente aggiungere un simbolo del dollaro sul lato sinistro per 332 00:24:27,360 --> 00:24:33,050 indicare all'utente che si tratta di un campo che prende valore di valuta al momento. In 333 00:24:33,050 --> 00:24:37,558 questo caso, in questo caso, questo campo accetta un prefisso. 334 00:24:37,558 --> 00:24:43,330 E se vedete come i prefissi sono scritti negli Stati Uniti e in 335 00:24:43,330 --> 00:24:47,640 Canada, sapete che sono racchiusi tra parentesi destra e sinistra. 336 00:24:47,640 --> 00:24:52,680 Quindi, questo è ciò che mi permette di specificare qualcosa del genere nella mia forma lì. 337 00:24:53,900 --> 00:24:56,460 Il mio prossimo set di elementi che aggiungerò al mio 338 00:24:56,460 --> 00:25:01,530 modulo sono una casella di controllo e una selezione. 339 00:25:01,530 --> 00:25:03,460 Allora, come lo aggiungiamo? 340 00:25:03,460 --> 00:25:09,014 Quindi, se si ha familiarità con i moduli HTML, si capisce come funziona la selezione e 341 00:25:09,014 --> 00:25:13,070 si capisce come funzionano le caselle di controllo nei moduli HTML. 342 00:25:13,070 --> 00:25:15,880 Ora, Bootstrap ti fornisce alcune 343 00:25:15,880 --> 00:25:20,080 classi aggiuntive che ti permettono di formattare questi elementi in modo appropriato. 344 00:25:20,080 --> 00:25:21,740 Quindi, lasciatemi aggiungere la citazione. 345 00:25:23,400 --> 00:25:25,120 Salviamo le modifiche. 346 00:25:25,120 --> 00:25:29,695 Dai un'occhiata a ciò che questo si traduce nel modulo qui. 347 00:25:29,695 --> 00:25:32,480 E poi dai un'occhiata al codice. 348 00:25:32,480 --> 00:25:38,060 Quindi qui, vedi che ho una casella di controllo e qualche messaggio qui. 349 00:25:38,060 --> 00:25:45,372 E poi questo è un selettore che mi permette di selezionare tra un insieme di scelte qui. 350 00:25:47,324 --> 00:25:53,309 Ora il modulo così come esiste qui è quello che vedrai in piccole ed 351 00:25:53,309 --> 00:25:56,080 extra piccole dimensioni dello schermo. 352 00:25:56,080 --> 00:25:59,940 Diamo un'occhiata a questo su una dimensione dello schermo più grande. 353 00:25:59,940 --> 00:26:04,740 La stessa forma quando disposta su 354 00:26:04,740 --> 00:26:06,760 schermi di dimensioni medio-extra grandi sarà simile a questa. 355 00:26:06,760 --> 00:26:11,440 Quindi puoi vedere come il numero di telefono del contatto è posizionato qui, 356 00:26:11,440 --> 00:26:14,500 e l'e-mail è posizionata qui. 357 00:26:14,500 --> 00:26:19,825 Quindi si noti che queste etichette sono 358 00:26:19,825 --> 00:26:26,510 allineate su una linea nel mezzo con le caselle qui. 359 00:26:26,510 --> 00:26:32,640 Questo è ciò che la classe di etichetta col form raggiunge prima. 360 00:26:32,640 --> 00:26:36,940 Ora, concentriamoci su questo che abbiamo appena aggiunto. 361 00:26:36,940 --> 00:26:40,060 Qui, vediamo che abbiamo una casella di controllo aggiunta in. 362 00:26:40,060 --> 00:26:43,312 E poi, un campo di testo qui. 363 00:26:43,312 --> 00:26:44,650 Allora, possiamo contattarla? 364 00:26:44,650 --> 00:26:51,370 Quindi, ad esempio, ti aspetteresti che l'utente lo controlli e lo disattivi. 365 00:26:51,370 --> 00:26:53,500 Quindi qual è la ragione di una casella di controllo? 366 00:26:53,500 --> 00:26:56,330 Allo stesso modo, potresti avere dei pulsanti di opzione. 367 00:26:56,330 --> 00:27:02,020 Bootstrap supporta i pulsanti di opzione disponibili in moduli HTML. 368 00:27:02,020 --> 00:27:05,650 E fornire alcune classi per lo styling corretto. 369 00:27:05,650 --> 00:27:10,850 E poi questo è ovviamente il selettore che ti permette di selezionare tra le scelte. 370 00:27:10,850 --> 00:27:13,113 Quindi tornando indietro e guardando il codice. 371 00:27:13,113 --> 00:27:15,250 Vediamo come questo sono implementati. 372 00:27:16,340 --> 00:27:22,030 Tornando a dare un'occhiata al codice, vedi che questo è di nuovo un 373 00:27:22,030 --> 00:27:28,630 gruppo di moduli div riga qui che racchiude due cose qui. 374 00:27:28,630 --> 00:27:32,859 Uno è un modulo di controllo 375 00:27:32,859 --> 00:27:38,731 col-md-6 offset md-2. 376 00:27:38,731 --> 00:27:45,120 Quindi questo è ciò che racchiude una casella di controllo all'interno di questo elemento div. 377 00:27:45,120 --> 00:27:53,902 E poi qui sotto ho una classe div, Col-MD-3 offset-md-1. 378 00:27:53,902 --> 00:27:59,979 Quindi nota che qui, questo dice form check col-md-6 offset md-2. 379 00:27:59,979 --> 00:28:04,197 Il motivo per cui sto facendo un offset md-2 è che non ho un'etichetta. 380 00:28:04,197 --> 00:28:08,166 Quindi in genere stavo usando due colonne per le etichette. 381 00:28:08,166 --> 00:28:13,160 Quindi, poiché questa casella di controllo dovrebbe allinearsi al lato destro nel modulo. 382 00:28:13,160 --> 00:28:16,591 Ecco perché ho usato offset-md-2 qui. 383 00:28:16,591 --> 00:28:22,654 E poi dentro qui dice etichetta class = «form-check-label». 384 00:28:22,654 --> 00:28:28,042 E poi fornisce tag di input 385 00:28:28,042 --> 00:28:32,790 qui con casella di controllo del tipo. 386 00:28:32,790 --> 00:28:35,070 Quindi è così che crei una casella di controllo. 387 00:28:35,070 --> 00:28:38,300 E poi la classe, la classe Bootstrap che applicherai alla 388 00:28:38,300 --> 00:28:41,768 tua casella di controllo è il controllo del modulo. 389 00:28:41,768 --> 00:28:49,390 E poi il nome e il valore iniziale sono vuoti. 390 00:28:49,390 --> 00:28:54,262 E poi, questa è l'etichetta effettiva che vedi essere 391 00:28:54,262 --> 00:28:58,670 applicata a quella particolare casella di controllo lì. 392 00:28:58,670 --> 00:29:04,260 Quindi nota come questi due sono racchiusi all'interno di un tag etichetta qui. 393 00:29:04,260 --> 00:29:09,070 Quindi questo è il modo in cui crei una casella di controllo insieme alla sua etichetta e 394 00:29:09,070 --> 00:29:12,980 quindi posizionala nel tuo modulo qui. 395 00:29:12,980 --> 00:29:15,840 Quindi questo qui usa l'etichetta di controllo del modulo. 396 00:29:15,840 --> 00:29:19,880 E poi qui dentro, devi avere una casella di controllo, input type = «checkbox», e 397 00:29:19,880 --> 00:29:21,340 poi etichettarsi. 398 00:29:21,340 --> 00:29:23,620 Quindi qui vedi forte, possiamo contattarti? 399 00:29:23,620 --> 00:29:29,770 Ecco perché è visualizzato in grassetto proprio accanto alla casella di controllo qui. 400 00:29:29,770 --> 00:29:37,390 Ora sotto nel codice, hai una classe div col-md-3 offset-md-1. 401 00:29:37,390 --> 00:29:40,760 Quindi questo occupa tre colonne all'interno di una colonna offset. 402 00:29:40,760 --> 00:29:42,980 Quindi il totale di quattro colonne qui. 403 00:29:42,980 --> 00:29:50,113 Quindi questo è col-md-6 più 2, quindi questo è otto colonne. 404 00:29:50,113 --> 00:29:51,480 Quindi 8 più 4, 12. 405 00:29:51,480 --> 00:29:55,140 Così che si prende cura delle tue 12 colonne per la tua griglia lì. 406 00:29:55,140 --> 00:30:01,740 Ora all'interno di questo, si vede una selezione applicata qui. 407 00:30:02,880 --> 00:30:07,320 Ora questa è l'opzione di selezione che i moduli di file HTML supportano. 408 00:30:07,320 --> 00:30:09,240 E guarda la classe applicata a questo. 409 00:30:09,240 --> 00:30:12,870 Dice class = «form-control» alla selezione. 410 00:30:12,870 --> 00:30:15,830 E poi dai le opzioni nella selezione qui. 411 00:30:15,830 --> 00:30:18,638 Così