1
00:00:00,180 --> 00:00:04,680
Bentornati in questa lezione ti mostrerò come installare bootstrap nelle tue applicazioni.

2
00:00:04,740 --> 00:00:08,370
E poi, una volta fatto, ti mostrerò alcune delle nozioni fondamentali sull'uso dell'intonazione.

3
00:00:08,850 --> 00:00:14,180
Quindi sono su get dot con bootstrap solo sulla homepage e c'è un link qui per scaricare bootstrap.

4
00:00:14,850 --> 00:00:19,580
E in realtà non è un link per il download diretto perché abbiamo due scelte principali su come utilizzare il bootstrap.

5
00:00:20,430 --> 00:00:24,340
Possiamo scaricare i file e lo farò per iniziare.

6
00:00:24,530 --> 00:00:29,360
Quindi possiamo prendere quei file e aggiungerli nella nostra applicazione prima di andare oltre.

7
00:00:29,430 --> 00:00:35,230
Ho un semplice team di ricerca che scriverò che sto chiamando roba di base h DML m.

8
00:00:35,790 --> 00:00:40,770
E aggiungerò semplicemente un titolo e aggiungeremo solo alcuni elementi diversi di bootstrap.

9
00:00:40,800 --> 00:00:45,510
Una volta installato, non renderemo nulla di completo, lo useremo come un parco giochi

10
00:00:45,510 --> 00:00:47,960
per alcuni dei componenti base di bootstrap.

11
00:00:48,510 --> 00:00:54,840
OK, iniziamo aggiungendo semplicemente una semplice base di avvio H-1 e

12
00:00:57,720 --> 00:00:58,460
salviamo.

13
00:00:58,700 --> 00:01:01,790
E poi apriamolo nel browser.

14
00:01:03,240 --> 00:01:05,280
Tienilo lì per ora.

15
00:01:05,280 --> 00:01:06,690
Ora per installare bootstrap.

16
00:01:06,780 --> 00:01:08,190
L'ho scaricato.

17
00:01:08,250 --> 00:01:13,720
Quindi se apro quel file puoi vedere all'interno di qui ci sono alcuni componenti diversi.

18
00:01:13,830 --> 00:01:19,650
C'è una directory C S S e all'interno della directory CCS ci sono alcuni file ma c'è

19
00:01:19,650 --> 00:01:23,890
davvero solo un file importante che viene caricato in automatico sul CSSA.

20
00:01:24,630 --> 00:01:27,710
E questo è in realtà lo stesso file qui avviato per i minuti.

21
00:01:27,740 --> 00:01:32,290
SS eccetto che è stata una lotta minuta rimpicciolita per occupare meno spazio.

22
00:01:32,460 --> 00:01:36,280
Quindi questi due sono i file importanti per utilizzare effettivamente il bootstrap.

23
00:01:36,600 --> 00:01:41,850
E questo è un tema di bootstrap e tutti e tre di questi sono usati per aiutare ad aggiungere un tema personalizzato al

24
00:01:41,850 --> 00:01:43,370
bootstrap in modo che non importi altrettanto.

25
00:01:43,380 --> 00:01:45,680
Tutto ciò di cui abbiamo bisogno è la valutazione bootstrap di Dotsie.

26
00:01:45,780 --> 00:01:49,430
E iniziamo aprendolo appena in modo da poter vedere con cosa stiamo lavorando.

27
00:01:49,470 --> 00:01:52,200
Questo è il file rivalutato dei bootstrap principali.

28
00:01:52,770 --> 00:01:54,280
Sono solo un sacco di lezioni.

29
00:01:54,300 --> 00:02:00,510
Se guardi ogni singola riga di CSSA è quasi un punto di dichiarazione di classe semplicemente.

30
00:02:00,690 --> 00:02:05,340
E poi quello che possiamo fare è usare quelle classi invece delle nostre applicazioni.

31
00:02:05,340 --> 00:02:12,060
Quindi, se vogliamo avere un pulsante con testo bianco e uno sfondo rosso, applicheremo il pericolo del

32
00:02:12,060 --> 00:02:12,720
pulsante punto.

33
00:02:12,900 --> 00:02:14,510
E questo è quello che sta facendo qui.

34
00:02:14,730 --> 00:02:19,590
Ma il pericolo ha il testo bianco uno sfondo rosso e un bordo rossastro.

35
00:02:19,650 --> 00:02:24,410
Quindi andiamo avanti e includetelo nella nostra applicazione proprio come qualsiasi altro file CSSA.

36
00:02:24,750 --> 00:02:31,880
Quindi quello che farò è semplicemente trascinarlo qui nella stessa directory in cui ho il mio gruppo di studio di base

37
00:02:32,540 --> 00:02:37,020
e potrei anche fare il backup dei minuti di avvio al posto di questo.

38
00:02:37,020 --> 00:02:38,520
Non importa.

39
00:02:38,550 --> 00:02:45,420
Tecnicamente questo carica un po 'più veloce perché se lo apro puoi vedere che è come una linea gigante che tutti

40
00:02:45,690 --> 00:02:47,570
gli spazi bianchi sono stati rimossi.

41
00:02:47,850 --> 00:02:53,640
Quindi è più facile da caricare, ma userò questa versione più lunga solo per poter vedere

42
00:02:53,640 --> 00:02:55,450
esattamente con cosa stiamo lavorando.

43
00:02:55,470 --> 00:03:02,130
Ora andremo nel nostro file reale qui chiuderò questo e includeremo

44
00:03:02,130 --> 00:03:03,120
CSX bootstrap.

45
00:03:03,220 --> 00:03:11,370
Quindi, proprio come qualsiasi altro foglio di stile, abbiamo bisogno di un tag collegato e il Tref è bootstrap punto C Ss

46
00:03:11,370 --> 00:03:16,310
e se salviamo e siamo freschi la nostra pagina qui noterete una leggera differenza.

47
00:03:16,320 --> 00:03:18,140
Guarda il font su questo H-1.

48
00:03:18,420 --> 00:03:19,590
Cambia.

49
00:03:19,620 --> 00:03:24,720
Ora abbiamo installato il bootstrap o almeno il C Ss che accompagna il bootstrap e questo è tutto ciò di cui abbiamo

50
00:03:24,720 --> 00:03:25,500
bisogno per ora.

51
00:03:25,650 --> 00:03:30,060
Non lavoreremo con il javascript ma non c'è ancora un'altra opzione

52
00:03:30,510 --> 00:03:35,310
per l'installazione di bootstrap che ti danno effettivamente sul sito Get bootstrap qui.

53
00:03:35,400 --> 00:03:40,750
Bootstrap CDN possiamo prendere questo link qui e aggiungerlo al nostro codice.

54
00:03:41,010 --> 00:03:44,870
Ed è un collegamento a una versione ospitata degli stessi file.

55
00:03:45,120 --> 00:03:49,920
Quindi se lo apriamo nel browser e lo incolliamo, puoi vedere che ha il contenuto del

56
00:03:49,920 --> 00:03:56,670
file ridotto al minimo ed è ospitato in questo modo, quindi possiamo semplicemente avere un link a cui tu puoi quindi sostituirlo.

57
00:03:56,970 --> 00:03:57,540
Un altro link

58
00:03:57,540 --> 00:04:01,530
Tagga e incolla che sei Ellen e commenterò questo.

59
00:04:01,530 --> 00:04:04,230
Per ora e tornare indietro e aggiornare.

60
00:04:04,380 --> 00:04:06,020
E nulla cambia.

61
00:04:06,030 --> 00:04:10,950
L'unica differenza è che nel primo caso avevamo il file scaricato sul nostro computer

62
00:04:10,950 --> 00:04:16,650
che collegava e nel secondo caso ci colleghiamo a un file esterno che è ospitato online.

63
00:04:16,650 --> 00:04:20,750
Ora andiamo ai documenti di bootstrap e iniziamo a giocare o alcuni di questi componenti.

64
00:04:21,240 --> 00:04:27,330
bootstrap e facciamo clic su C Ss e sto solo indicando alcuni dei pezzi più importanti che useremo.

65
00:04:27,330 --> 00:04:29,150
Quindi torna indietro per ottenere il

66
00:04:29,400 --> 00:04:31,940
Iniziamo con i pulsanti.

67
00:04:32,460 --> 00:04:40,650
Se vogliamo usare un pulsante tutto ciò che dobbiamo fare è usare una classe battuta seguita da un tipo di pulsante

68
00:04:40,990 --> 00:04:48,510
che è tra default che ci darà un pulsante bianco ma che è anche VTAM informazioni di accesso BATNA

69
00:04:48,740 --> 00:04:49,220
primarie.

70
00:04:49,260 --> 00:04:54,080
Attenzione pericolo e collegamento e sono tutti in stile leggermente diverso.

71
00:04:54,240 --> 00:04:58,860
E naturalmente possiamo cambiare questi colori da soli, ma useremo solo il

72
00:04:58,860 --> 00:05:02,500
built-in per iniziare e lui può anche vedere quassù.

73
00:05:02,700 --> 00:05:08,600
Non dobbiamo usare solo un elemento del pulsante, possiamo usare un tag di ancoraggio, un pulsante o un input.

74
00:05:08,820 --> 00:05:10,720
Quindi proviamolo.

75
00:05:11,730 --> 00:05:13,030
Ciao questo H-1.

76
00:05:13,230 --> 00:05:22,740
Aggiungiamo semplicemente un tag button e questo tag button dice solo clic su di me e aggiorna semplicemente la pagina in

77
00:05:22,740 --> 00:05:25,860
questo momento e dai un'occhiata a questo.

78
00:05:25,950 --> 00:05:27,310
È un brutto bottone.

79
00:05:27,690 --> 00:05:37,740
Ma se andiamo ad aggiungere quella classe PTEN e poi tra facciamo successo e salviamo ora otteniamo questo

80
00:05:37,740 --> 00:05:39,200
fantastico pulsante verde.

81
00:05:39,330 --> 00:05:41,870
Quindi, è piuttosto facile ottenere alcuni stili di base.

82
00:05:42,190 --> 00:05:47,670
E torniamo indietro e ti mostrerò alcune altre cose sui pulsanti di dimensioni diverse che possiamo

83
00:05:47,670 --> 00:05:50,110
usare anche noi ed è davvero facile.

84
00:05:50,130 --> 00:05:58,410
Abbiamo solo bisogno di aggiungere un pulsante piccolo o piccolo o un pulsante extra piccolo in modo che venga provato dopo il successo

85
00:05:58,410 --> 00:06:00,500
del pulsante e non debba seguirlo.

86
00:06:00,510 --> 00:06:08,600
Non importa l'ordine delle classi, ma lo farò dopo di qui DTN e facciamo piccoli extra e aggiorniamo

87
00:06:08,600 --> 00:06:09,740
la tua pagina.

88
00:06:09,750 --> 00:06:11,170
Eccoci.

89
00:06:11,170 --> 00:06:16,710
Ora lo sposterò e aggiungiamo altri pulsanti, ma questo sarà un tag di ancoraggio e questo

90
00:06:16,710 --> 00:06:24,640
sarà inserito in un tag o abbiamo H. F. equivale alla barra dei due punti barra DP

91
00:06:24,660 --> 00:06:30,480
che legge ogni giorno il punto com bootstrap e quindi il testo dirà solo i documenti bootstrap.

92
00:06:30,550 --> 00:06:38,550
Quindi rendi questo un po 'più grande e poi aggiungerai in classe alle esigenze della classe per eguagliare PTEN

93
00:06:38,550 --> 00:06:47,330
e andiamo a fare tra le informazioni di Desch e lo renderizzeremo con un grande trattino di PTEN Elgie e aggiorneremo.

94
00:06:47,340 --> 00:06:48,690
Ora abbiamo due pulsanti.

95
00:06:48,750 --> 00:06:50,620
Uno è un elemento pulsante reale.

96
00:06:50,620 --> 00:06:55,210
Un altro ha un tag di ancoraggio e se clicco su questo puoi vederlo come un tag di ancoraggio.

97
00:06:56,340 --> 00:07:01,200
Quindi già nel primo minuto di utilizzo del bootstrap siamo riusciti a ottenere pulsanti dall'aspetto decente.

98
00:07:01,370 --> 00:07:05,330
Ci sarebbero volute da 10 a 15 linee di CSSA da replicare.

99
00:07:05,760 --> 00:07:06,960
Torniamo indietro ora.

100
00:07:06,990 --> 00:07:10,980
Rendi di nuovo questo schermo intero e ti mostrerò alcune altre cose sui pulsanti.

101
00:07:11,220 --> 00:07:12,720
Quindi abbiamo dimensioni.

102
00:07:12,750 --> 00:07:18,560
Abbiamo anche diversi stati in cui possiamo far apparire un pulsante come se fosse attivo e

103
00:07:18,570 --> 00:07:21,080
per farlo basta aggiungere la classe attiva.

104
00:07:21,390 --> 00:07:27,060
si presenti abbastanza bene sul cast dello schermo che questo sembra attivo.

105
00:07:27,060 --> 00:07:37,140
Quindi se proviamo ora aggiungiamo un pulsante A in modo da duplicare il nostro piccolo pulsante Click Me in miniatura tre volte e

106
00:07:37,140 --> 00:07:43,590
l'ultimo nella parte centrale della classe attiva e aggiorna e puoi vedere si spera che

107
00:07:43,620 --> 00:07:49,290
Torniamo indietro e possiamo anche disabilitare un pulsante aggiungendo questo attributo.

108
00:07:49,290 --> 00:07:51,850
Disabilitato equivale disabilitato.

109
00:07:52,440 --> 00:07:57,950
Torniamo indietro e disabilitiamo l'ultimo aggiornamento.

110
00:07:58,180 --> 00:08:00,020
E ora questo pulsante è disabilitato.

111
00:08:00,120 --> 00:08:01,940
Otteniamo quella bella piccola icona.

112
00:08:02,070 --> 00:08:05,110
Non ha un effetto di passaggio del mouse dove cambia di colore più.

113
00:08:05,220 --> 00:08:07,460
È chiaramente un pulsante disabilitato.

114
00:08:07,560 --> 00:08:14,610
Ultima cosa che ti mostrerò in modo che possiamo cambiare di nuovo i colori in modo che il pulsante notte

115
00:08:14,610 --> 00:08:18,630
pericolo ci dia quell'arancio rossastro e puoi vedere tutti i colori qui.

116
00:08:18,870 --> 00:08:24,300
E ovviamente potresti cambiarli sovrascrivendo gli stili in modo da poter fare qualcosa di simile piuttosto che creare

117
00:08:24,300 --> 00:08:25,850
un altro foglio di stile.

118
00:08:25,860 --> 00:08:27,270
Lo farò solo qui per ora.

119
00:08:27,330 --> 00:08:32,330
Quindi faremo solo una battuta e apprezzeremo anche la bellezza e il pericolo.

120
00:08:32,460 --> 00:08:40,050
così che puoi entrare e sovrascrivere gli stili in modo da non dover usa ciò che bootstrap ti dà fuori dalla scatola.

121
00:08:40,050 --> 00:08:46,440
Possiamo cambiare il colore per essere arancione e ora potrebbe mettere in pericolo l'arancione del Texas e se

122
00:08:46,440 --> 00:08:51,550
volessi effettivamente cambiare lo sfondo avrei potuto fare lo sfondo è arancione ed è

123
00:08:52,200 --> 00:08:53,580
E molti posti no.

124
00:08:54,030 --> 00:08:56,940
OK, ecco i pulsanti e questo è tutto ciò che farò in questo video.

125
00:08:56,940 --> 00:09:00,300
Volevo solo darti un assaggio veloce di come funziona il bootstrap.

126
00:09:00,300 --> 00:09:06,450
Questo schema di aggiungere classi agli elementi esistenti e quelle classi sono definite in quel bootstrap che

127
00:09:06,460 --> 00:09:11,010
il file CSSA nel prossimo video evidenzierò alcuni degli altri pezzi importanti che

128
00:09:11,010 --> 00:09:13,540
vengono con bootstrap inclusi moduli e input.