Nel modulo precedente,
abbiamo esaminato il numero di componenti Bootstrap che sono puramente basati su CSS.
Quindi, applicando le classi CSS per questi componenti,
siamo stati in grado di crearli sulla nostra pagina web.
In questo modulo, esamineremo più componenti basati su JavaScript di Bootstrap.
Quindi riassumendo, come abbiamo visto nel modulo precedente,
Bootstrap supporta una serie di classi CSS che possono essere applicate al
markup HTML nelle vostre pagine web per attivare e fare uso di queste classi CSS.
Quindi, potresti vedere come le classi CSS hanno modificato i tag HTML generici e
fornito il modo di Bootstrap di presentare le stesse informazioni.
Quindi, i componenti che sono puramente basati su CSS possono essere facilmente attivati
applicando le classi CSS bootstrap ai
vari tag HTML presenti nelle tue pagine web.
Bootstrap di per sé può essere utilizzato esclusivamente per le sue classi CSS.
Un altro aspetto delle classi CSS Bootstraps che abbiamo visto era
che la maggior parte di questi componenti ha iniziato con una classe base che hai applicato.
Come ad esempio, quando guardi il pulsante,
hai visto che la classe base era la classe BTN.
Quindi applicheresti qualcosa come
un primario BTN che aggiungerà i loro colori al BTN,
quindi potresti definire la dimensione del pulsante dicendo BTN SM.
Quindi puoi anche definire il pulsante come un intero blocco utilizzando la classe di blocco BTN.
Quindi, tutte queste classi e modificatori successivi alla classe BTN di base.
Quindi questo approccio, lo vedrai
più e più volte in molti dei componenti Bootstraps.
Quindi avrai una classe base quindi insieme di classi modificatori che possono essere
applicate per modificare il comportamento del componente base.
Questo facilita la progettazione facile della tua pagina web.
Prendendo un altro esempio, possiamo guardare la classe Nav.
Usiamo la classe Nav nella barra NAV-che
abbiamo incluso nella nostra pagina web nel modulo precedente.
La classe Nav, modifichiamo che applicando la classe NAV-bar Nav ad esso.
Questo ci ha fornito un certo modo di presentare le informazioni di navigazione.
In questo modulo, esamineremo NAV-tabs e
NAV-pills che sono ancora un altro modo di presentare le informazioni di navigazione per la pagina web.
Le schede e le pillole che presentiamo di nuovo la navigazione,
supportate da un plugin JavaScript,
forniscono un modo migliorato di fornire la navigazione all'interno dei tuoi contenuti.
Quindi, lo esamineremo in questo particolare modulo.
Lo uso come esempio per illustrarvi come è iniziato da una classe base,
è possibile modificare applicando le classi modificatori alla classe base.
Naturalmente, se vuoi portare
in azione la parte JavaScript dei tuoi componenti Bootstrap,
allora dovresti iniziare ad applicare le classi JavaScript.
Quindi, Bootstrap supporta un numero di componenti che
sono supportati tramite plugin JavaScript.
Ora, quando si utilizzano questi plugin nella vostra pagina web,
è possibile includere singoli plugin che si sta effettivamente andando a utilizzare nel vostro sito web,
o l'intero set di plugin.
Ora, quello che faremo negli esercizi è,
includere l'intero set di plugin perché vogliamo solo esplorare tutti loro.
Ma se stai progettando un sito web,
puoi includere solo un sottoinsieme di questi plugin
che stai effettivamente utilizzando nel tuo sito web,
riducendo così la quantità di codice JavaScript che deve
essere inviato a un utente che sta visualizzando la tua pagina web.
Questo è il modo in cui guardo l'approccio Bootstrap all'utilizzo di JavaScript nel
proprio supporto per i componenti Bootstrap abilitati con JavaScript.
Se guardi JavaScript da solo,
fornisce molta flessibilità e ti consente di fare molte cose interessanti.
Ma ciò comporta anche la
scrittura di codice JavaScript da utilizzare quando si progetta il tuo sito web.
Ora, guardo JavaScript come un grande lottatore di sumo con un sacco di capacità,
un sacco di potenza, ma selvaggio.
Ora, jQuery come libreria costruita su JavaScript,
prende essenzialmente il wrestler di sumo e poi lo impacchetta in un modo migliore per rendere
questo gorilla da cento libbre in una dimensione più gestibile,
più facile da avvicinare e più facile da
includere e utilizzare nel tuo sito web design.
Quindi, se stai usando direttamente la libreria jQuery,
puoi sicuramente sfruttare molti
dei componenti jQuery e farne uso nella tua pagina web.
Ora, questo è un approccio che puoi sempre prendere perché jQuery
sarà già incluso nella tua pagina web Bootstrap,
se hai intenzione di sfruttare i componenti basati su Java.
Bootstrap fa un ulteriore passo avanti,
e poi guardando l'
approccio di Bootstrap immagine è quello di prendere il wrestler di sumo e poi metterlo in una scatola.
Essenzialmente in piedi per confezionare i
tuoi plugin JavaScript in un componente che puoi utilizzare più facilmente nelle tue pagine web.
Quindi, i componenti basati su JavaScript Bootstrap prendono essenzialmente il supporto basato su jQuery,
ma poi li impacchettano in modo da poterli impiegare nella
tua pagina web anche senza scrivere una singola riga di codice JavaScript.
Questo è dove il componente JavaScript Bootstrap
può essere utilizzato senza scrivere una singola riga di codice.
Il modo in cui è supportato in Bootstrap è che,
i componenti JavaScript supportano una serie di
attributi stella trattino dati che è possibile applicare ai tag HTML.
Quindi, mi vedrai usare cose come data-toggle,
data-spy, data-target, e così via.
Se ricordi, quando abbiamo progettato la barra di navigazione,
avevi effettivamente visto un paio di questi attributi.
Lì abbiamo progettato il pulsante per gli schermi extra piccoli.
Ora, è tempo per noi di [inudibile] perché l'abbiamo fatto nel modulo precedente.
Quindi, esploreremo questo approccio in dettaglio in questo modulo,
esaminando diversi componenti Bootstrap che sfruttano il supporto JavaScript.
Naturalmente, è possibile sfruttare
l'API JavaScript completa
disponibile per tutti questi componenti scrivendo effettivamente codice JavaScript.
Faremo rinviare questo al modulo successivo,
dove esamineremo come è possibile scrivere codice JavaScript semplice basato
sulla sintassi jQuery per aggiungere
più funzionalità ai componenti Bootstrap basati su JavaScript.