Bentornati in questa lezione ti mostrerò come installare bootstrap nelle tue applicazioni.
E poi, una volta fatto, ti mostrerò alcune delle nozioni fondamentali sull'uso dell'intonazione.
Quindi sono su get dot con bootstrap solo sulla homepage e c'è un link qui per scaricare bootstrap.
E in realtà non è un link per il download diretto perché abbiamo due scelte principali su come utilizzare il bootstrap.
Possiamo scaricare i file e lo farò per iniziare.
Quindi possiamo prendere quei file e aggiungerli nella nostra applicazione prima di andare oltre.
Ho un semplice team di ricerca che scriverò che sto chiamando roba di base h DML m.
E aggiungerò semplicemente un titolo e aggiungeremo solo alcuni elementi diversi di bootstrap.
Una volta installato, non renderemo nulla di completo, lo useremo come un parco giochi
per alcuni dei componenti base di bootstrap.
OK, iniziamo aggiungendo semplicemente una semplice base di avvio H-1 e
salviamo.
E poi apriamolo nel browser.
Tienilo lì per ora.
Ora per installare bootstrap.
L'ho scaricato.
Quindi se apro quel file puoi vedere all'interno di qui ci sono alcuni componenti diversi.
C'è una directory C S S e all'interno della directory CCS ci sono alcuni file ma c'è
davvero solo un file importante che viene caricato in automatico sul CSSA.
E questo è in realtà lo stesso file qui avviato per i minuti.
SS eccetto che è stata una lotta minuta rimpicciolita per occupare meno spazio.
Quindi questi due sono i file importanti per utilizzare effettivamente il bootstrap.
E questo è un tema di bootstrap e tutti e tre di questi sono usati per aiutare ad aggiungere un tema personalizzato al
bootstrap in modo che non importi altrettanto.
Tutto ciò di cui abbiamo bisogno è la valutazione bootstrap di Dotsie.
E iniziamo aprendolo appena in modo da poter vedere con cosa stiamo lavorando.
Questo è il file rivalutato dei bootstrap principali.
Sono solo un sacco di lezioni.
Se guardi ogni singola riga di CSSA è quasi un punto di dichiarazione di classe semplicemente.
E poi quello che possiamo fare è usare quelle classi invece delle nostre applicazioni.
Quindi, se vogliamo avere un pulsante con testo bianco e uno sfondo rosso, applicheremo il pericolo del
pulsante punto.
E questo è quello che sta facendo qui.
Ma il pericolo ha il testo bianco uno sfondo rosso e un bordo rossastro.
Quindi andiamo avanti e includetelo nella nostra applicazione proprio come qualsiasi altro file CSSA.
Quindi quello che farò è semplicemente trascinarlo qui nella stessa directory in cui ho il mio gruppo di studio di base
e potrei anche fare il backup dei minuti di avvio al posto di questo.
Non importa.
Tecnicamente questo carica un po 'più veloce perché se lo apro puoi vedere che è come una linea gigante che tutti
gli spazi bianchi sono stati rimossi.
Quindi è più facile da caricare, ma userò questa versione più lunga solo per poter vedere
esattamente con cosa stiamo lavorando.
Ora andremo nel nostro file reale qui chiuderò questo e includeremo
CSX bootstrap.
Quindi, proprio come qualsiasi altro foglio di stile, abbiamo bisogno di un tag collegato e il Tref è bootstrap punto C Ss
e se salviamo e siamo freschi la nostra pagina qui noterete una leggera differenza.
Guarda il font su questo H-1.
Cambia.
Ora abbiamo installato il bootstrap o almeno il C Ss che accompagna il bootstrap e questo è tutto ciò di cui abbiamo
bisogno per ora.
Non lavoreremo con il javascript ma non c'è ancora un'altra opzione
per l'installazione di bootstrap che ti danno effettivamente sul sito Get bootstrap qui.
Bootstrap CDN possiamo prendere questo link qui e aggiungerlo al nostro codice.
Ed è un collegamento a una versione ospitata degli stessi file.
Quindi se lo apriamo nel browser e lo incolliamo, puoi vedere che ha il contenuto del
file ridotto al minimo ed è ospitato in questo modo, quindi possiamo semplicemente avere un link a cui tu puoi quindi sostituirlo.
Un altro link
Tagga e incolla che sei Ellen e commenterò questo.
Per ora e tornare indietro e aggiornare.
E nulla cambia.
L'unica differenza è che nel primo caso avevamo il file scaricato sul nostro computer
che collegava e nel secondo caso ci colleghiamo a un file esterno che è ospitato online.
Ora andiamo ai documenti di bootstrap e iniziamo a giocare o alcuni di questi componenti.
bootstrap e facciamo clic su C Ss e sto solo indicando alcuni dei pezzi più importanti che useremo.
Quindi torna indietro per ottenere il
Iniziamo con i pulsanti.
Se vogliamo usare un pulsante tutto ciò che dobbiamo fare è usare una classe battuta seguita da un tipo di pulsante
che è tra default che ci darà un pulsante bianco ma che è anche VTAM informazioni di accesso BATNA
primarie.
Attenzione pericolo e collegamento e sono tutti in stile leggermente diverso.
E naturalmente possiamo cambiare questi colori da soli, ma useremo solo il
built-in per iniziare e lui può anche vedere quassù.
Non dobbiamo usare solo un elemento del pulsante, possiamo usare un tag di ancoraggio, un pulsante o un input.
Quindi proviamolo.
Ciao questo H-1.
Aggiungiamo semplicemente un tag button e questo tag button dice solo clic su di me e aggiorna semplicemente la pagina in
questo momento e dai un'occhiata a questo.
È un brutto bottone.
Ma se andiamo ad aggiungere quella classe PTEN e poi tra facciamo successo e salviamo ora otteniamo questo
fantastico pulsante verde.
Quindi, è piuttosto facile ottenere alcuni stili di base.
E torniamo indietro e ti mostrerò alcune altre cose sui pulsanti di dimensioni diverse che possiamo
usare anche noi ed è davvero facile.
Abbiamo solo bisogno di aggiungere un pulsante piccolo o piccolo o un pulsante extra piccolo in modo che venga provato dopo il successo
del pulsante e non debba seguirlo.
Non importa l'ordine delle classi, ma lo farò dopo di qui DTN e facciamo piccoli extra e aggiorniamo
la tua pagina.
Eccoci.
Ora lo sposterò e aggiungiamo altri pulsanti, ma questo sarà un tag di ancoraggio e questo
sarà inserito in un tag o abbiamo H. F. equivale alla barra dei due punti barra DP
che legge ogni giorno il punto com bootstrap e quindi il testo dirà solo i documenti bootstrap.
Quindi rendi questo un po 'più grande e poi aggiungerai in classe alle esigenze della classe per eguagliare PTEN
e andiamo a fare tra le informazioni di Desch e lo renderizzeremo con un grande trattino di PTEN Elgie e aggiorneremo.
Ora abbiamo due pulsanti.
Uno è un elemento pulsante reale.
Un altro ha un tag di ancoraggio e se clicco su questo puoi vederlo come un tag di ancoraggio.
Quindi già nel primo minuto di utilizzo del bootstrap siamo riusciti a ottenere pulsanti dall'aspetto decente.
Ci sarebbero volute da 10 a 15 linee di CSSA da replicare.
Torniamo indietro ora.
Rendi di nuovo questo schermo intero e ti mostrerò alcune altre cose sui pulsanti.
Quindi abbiamo dimensioni.
Abbiamo anche diversi stati in cui possiamo far apparire un pulsante come se fosse attivo e
per farlo basta aggiungere la classe attiva.
si presenti abbastanza bene sul cast dello schermo che questo sembra attivo.
Quindi se proviamo ora aggiungiamo un pulsante A in modo da duplicare il nostro piccolo pulsante Click Me in miniatura tre volte e
l'ultimo nella parte centrale della classe attiva e aggiorna e puoi vedere si spera che
Torniamo indietro e possiamo anche disabilitare un pulsante aggiungendo questo attributo.
Disabilitato equivale disabilitato.
Torniamo indietro e disabilitiamo l'ultimo aggiornamento.
E ora questo pulsante è disabilitato.
Otteniamo quella bella piccola icona.
Non ha un effetto di passaggio del mouse dove cambia di colore più.
È chiaramente un pulsante disabilitato.
Ultima cosa che ti mostrerò in modo che possiamo cambiare di nuovo i colori in modo che il pulsante notte
pericolo ci dia quell'arancio rossastro e puoi vedere tutti i colori qui.
E ovviamente potresti cambiarli sovrascrivendo gli stili in modo da poter fare qualcosa di simile piuttosto che creare
un altro foglio di stile.
Lo farò solo qui per ora.
Quindi faremo solo una battuta e apprezzeremo anche la bellezza e il pericolo.
così che puoi entrare e sovrascrivere gli stili in modo da non dover usa ciò che bootstrap ti dà fuori dalla scatola.
Possiamo cambiare il colore per essere arancione e ora potrebbe mettere in pericolo l'arancione del Texas e se
volessi effettivamente cambiare lo sfondo avrei potuto fare lo sfondo è arancione ed è
E molti posti no.
OK, ecco i pulsanti e questo è tutto ciò che farò in questo video.
Volevo solo darti un assaggio veloce di come funziona il bootstrap.
Questo schema di aggiungere classi agli elementi esistenti e quelle classi sono definite in quel bootstrap che
il file CSSA nel prossimo video evidenzierò alcuni degli altri pezzi importanti che
vengono con bootstrap inclusi moduli e input.