1 00:00:03,460 --> 00:00:06,755 Nel modulo precedente, 2 00:00:06,755 --> 00:00:12,335 abbiamo esaminato il numero di componenti Bootstrap che sono puramente basati su CSS. 3 00:00:12,335 --> 00:00:15,945 Quindi, applicando le classi CSS per questi componenti, 4 00:00:15,945 --> 00:00:19,490 siamo stati in grado di crearli sulla nostra pagina web. 5 00:00:19,490 --> 00:00:26,500 In questo modulo, esamineremo più componenti basati su JavaScript di Bootstrap. 6 00:00:26,500 --> 00:00:30,580 Quindi riassumendo, come abbiamo visto nel modulo precedente, 7 00:00:30,580 --> 00:00:34,755 Bootstrap supporta una serie di classi CSS che possono essere applicate al 8 00:00:34,755 --> 00:00:43,260 markup HTML nelle vostre pagine web per attivare e fare uso di queste classi CSS. 9 00:00:43,260 --> 00:00:49,610 Quindi, potresti vedere come le classi CSS hanno modificato i tag HTML generici e 10 00:00:49,610 --> 00:00:56,365 fornito il modo di Bootstrap di presentare le stesse informazioni. 11 00:00:56,365 --> 00:01:02,180 Quindi, i componenti che sono puramente basati su CSS possono essere facilmente attivati 12 00:01:02,180 --> 00:01:04,260 applicando le classi CSS bootstrap ai 13 00:01:04,260 --> 00:01:09,270 vari tag HTML presenti nelle tue pagine web. 14 00:01:09,270 --> 00:01:14,525 Bootstrap di per sé può essere utilizzato esclusivamente per le sue classi CSS. 15 00:01:14,525 --> 00:01:19,500 Un altro aspetto delle classi CSS Bootstraps che abbiamo visto era 16 00:01:19,500 --> 00:01:24,630 che la maggior parte di questi componenti ha iniziato con una classe base che hai applicato. 17 00:01:24,630 --> 00:01:27,660 Come ad esempio, quando guardi il pulsante, 18 00:01:27,660 --> 00:01:31,575 hai visto che la classe base era la classe BTN. 19 00:01:31,575 --> 00:01:33,160 Quindi applicheresti qualcosa come 20 00:01:33,160 --> 00:01:38,160 un primario BTN che aggiungerà i loro colori al BTN, 21 00:01:38,160 --> 00:01:43,175 quindi potresti definire la dimensione del pulsante dicendo BTN SM. 22 00:01:43,175 --> 00:01:49,905 Quindi puoi anche definire il pulsante come un intero blocco utilizzando la classe di blocco BTN. 23 00:01:49,905 --> 00:01:56,260 Quindi, tutte queste classi e modificatori successivi alla classe BTN di base. 24 00:01:56,260 --> 00:01:59,430 Quindi questo approccio, lo vedrai 25 00:01:59,430 --> 00:02:03,330 più e più volte in molti dei componenti Bootstraps. 26 00:02:03,330 --> 00:02:07,925 Quindi avrai una classe base quindi insieme di classi modificatori che possono essere 27 00:02:07,925 --> 00:02:14,164 applicate per modificare il comportamento del componente base. 28 00:02:14,164 --> 00:02:20,210 Questo facilita la progettazione facile della tua pagina web. 29 00:02:20,210 --> 00:02:24,260 Prendendo un altro esempio, possiamo guardare la classe Nav. 30 00:02:24,260 --> 00:02:28,020 Usiamo la classe Nav nella barra NAV-che 31 00:02:28,020 --> 00:02:33,635 abbiamo incluso nella nostra pagina web nel modulo precedente. 32 00:02:33,635 --> 00:02:40,130 La classe Nav, modifichiamo che applicando la classe NAV-bar Nav ad esso. 33 00:02:40,130 --> 00:02:45,660 Questo ci ha fornito un certo modo di presentare le informazioni di navigazione. 34 00:02:45,660 --> 00:02:51,310 In questo modulo, esamineremo NAV-tabs e 35 00:02:51,310 --> 00:02:58,295 NAV-pills che sono ancora un altro modo di presentare le informazioni di navigazione per la pagina web. 36 00:02:58,295 --> 00:03:04,180 Le schede e le pillole che presentiamo di nuovo la navigazione, 37 00:03:04,180 --> 00:03:10,265 supportate da un plugin JavaScript, 38 00:03:10,265 --> 00:03:15,195 forniscono un modo migliorato di fornire la navigazione all'interno dei tuoi contenuti. 39 00:03:15,195 --> 00:03:18,835 Quindi, lo esamineremo in questo particolare modulo. 40 00:03:18,835 --> 00:03:23,620 Lo uso come esempio per illustrarvi come è iniziato da una classe base, 41 00:03:23,620 --> 00:03:28,075 è possibile modificare applicando le classi modificatori alla classe base. 42 00:03:28,075 --> 00:03:30,640 Naturalmente, se vuoi portare 43 00:03:30,640 --> 00:03:35,285 in azione la parte JavaScript dei tuoi componenti Bootstrap, 44 00:03:35,285 --> 00:03:38,670 allora dovresti iniziare ad applicare le classi JavaScript. 45 00:03:38,670 --> 00:03:41,725 Quindi, Bootstrap supporta un numero di componenti che 46 00:03:41,725 --> 00:03:44,970 sono supportati tramite plugin JavaScript. 47 00:03:44,970 --> 00:03:47,880 Ora, quando si utilizzano questi plugin nella vostra pagina web, 48 00:03:47,880 --> 00:03:52,890 è possibile includere singoli plugin che si sta effettivamente andando a utilizzare nel vostro sito web, 49 00:03:52,890 --> 00:03:55,815 o l'intero set di plugin. 50 00:03:55,815 --> 00:03:59,500 Ora, quello che faremo negli esercizi è, 51 00:03:59,500 --> 00:04:03,495 includere l'intero set di plugin perché vogliamo solo esplorare tutti loro. 52 00:04:03,495 --> 00:04:05,870 Ma se stai progettando un sito web, 53 00:04:05,870 --> 00:04:09,000 puoi includere solo un sottoinsieme di questi plugin 54 00:04:09,000 --> 00:04:12,300 che stai effettivamente utilizzando nel tuo sito web, 55 00:04:12,300 --> 00:04:15,630 riducendo così la quantità di codice JavaScript che deve 56 00:04:15,630 --> 00:04:21,470 essere inviato a un utente che sta visualizzando la tua pagina web. 57 00:04:21,470 --> 00:04:27,590 Questo è il modo in cui guardo l'approccio Bootstrap all'utilizzo di JavaScript nel 58 00:04:27,590 --> 00:04:33,905 proprio supporto per i componenti Bootstrap abilitati con JavaScript. 59 00:04:33,905 --> 00:04:36,785 Se guardi JavaScript da solo, 60 00:04:36,785 --> 00:04:44,845 fornisce molta flessibilità e ti consente di fare molte cose interessanti. 61 00:04:44,845 --> 00:04:46,695 Ma ciò comporta anche la 62 00:04:46,695 --> 00:04:52,200 scrittura di codice JavaScript da utilizzare quando si progetta il tuo sito web. 63 00:04:52,200 --> 00:04:58,730 Ora, guardo JavaScript come un grande lottatore di sumo con un sacco di capacità, 64 00:04:58,730 --> 00:05:02,670 un sacco di potenza, ma selvaggio. 65 00:05:02,670 --> 00:05:09,875 Ora, jQuery come libreria costruita su JavaScript, 66 00:05:09,875 --> 00:05:14,815 prende essenzialmente il wrestler di sumo e poi lo impacchetta in un modo migliore per rendere 67 00:05:14,815 --> 00:05:20,435 questo gorilla da cento libbre in una dimensione più gestibile, 68 00:05:20,435 --> 00:05:23,790 più facile da avvicinare e più facile da 69 00:05:23,790 --> 00:05:28,235 includere e utilizzare nel tuo sito web design. 70 00:05:28,235 --> 00:05:31,855 Quindi, se stai usando direttamente la libreria jQuery, 71 00:05:31,855 --> 00:05:34,510 puoi sicuramente sfruttare molti 72 00:05:34,510 --> 00:05:40,175 dei componenti jQuery e farne uso nella tua pagina web. 73 00:05:40,175 --> 00:05:44,480 Ora, questo è un approccio che puoi sempre prendere perché jQuery 74 00:05:44,480 --> 00:05:48,170 sarà già incluso nella tua pagina web Bootstrap, 75 00:05:48,170 --> 00:05:52,910 se hai intenzione di sfruttare i componenti basati su Java. 76 00:05:52,910 --> 00:05:56,545 Bootstrap fa un ulteriore passo avanti, 77 00:05:56,545 --> 00:05:59,145 e poi guardando l' 78 00:05:59,145 --> 00:06:04,395 approccio di Bootstrap immagine è quello di prendere il wrestler di sumo e poi metterlo in una scatola. 79 00:06:04,395 --> 00:06:09,730 Essenzialmente in piedi per confezionare i 80 00:06:09,730 --> 00:06:18,935 tuoi plugin JavaScript in un componente che puoi utilizzare più facilmente nelle tue pagine web. 81 00:06:18,935 --> 00:06:24,775 Quindi, i componenti basati su JavaScript Bootstrap prendono essenzialmente il supporto basato su jQuery, 82 00:06:24,775 --> 00:06:28,760 ma poi li impacchettano in modo da poterli impiegare nella 83 00:06:28,760 --> 00:06:34,390 tua pagina web anche senza scrivere una singola riga di codice JavaScript. 84 00:06:34,390 --> 00:06:38,955 Questo è dove il componente JavaScript Bootstrap 85 00:06:38,955 --> 00:06:43,030 può essere utilizzato senza scrivere una singola riga di codice. 86 00:06:43,030 --> 00:06:46,620 Il modo in cui è supportato in Bootstrap è che, 87 00:06:46,620 --> 00:06:51,400 i componenti JavaScript supportano una serie di 88 00:06:51,400 --> 00:06:56,940 attributi stella trattino dati che è possibile applicare ai tag HTML. 89 00:06:56,940 --> 00:07:00,120 Quindi, mi vedrai usare cose come data-toggle, 90 00:07:00,120 --> 00:07:04,370 data-spy, data-target, e così via. 91 00:07:04,370 --> 00:07:07,795 Se ricordi, quando abbiamo progettato la barra di navigazione, 92 00:07:07,795 --> 00:07:11,120 avevi effettivamente visto un paio di questi attributi. 93 00:07:11,120 --> 00:07:15,660 Lì abbiamo progettato il pulsante per gli schermi extra piccoli. 94 00:07:15,660 --> 00:07:21,550 Ora, è tempo per noi di [inudibile] perché l'abbiamo fatto nel modulo precedente. 95 00:07:21,550 --> 00:07:26,935 Quindi, esploreremo questo approccio in dettaglio in questo modulo, 96 00:07:26,935 --> 00:07:33,000 esaminando diversi componenti Bootstrap che sfruttano il supporto JavaScript. 97 00:07:33,000 --> 00:07:35,015 Naturalmente, è possibile sfruttare 98 00:07:35,015 --> 00:07:38,650 l'API JavaScript completa 99 00:07:38,650 --> 00:07:42,945 disponibile per tutti questi componenti scrivendo effettivamente codice JavaScript. 100 00:07:42,945 --> 00:07:46,130 Faremo rinviare questo al modulo successivo, 101 00:07:46,130 --> 00:07:51,370 dove esamineremo come è possibile scrivere codice JavaScript semplice basato 102 00:07:51,370 --> 00:07:54,580 sulla sintassi jQuery per aggiungere 103 00:07:54,580 --> 00:08:00,070 più funzionalità ai componenti Bootstrap basati su JavaScript.