1
00:00:00,180 --> 00:00:04,680
Bem-vindo novamente nesta lição Eu vou mostrar-lhe como instalar o bootstrap em seus próprios aplicativos.

2
00:00:04,740 --> 00:00:08,370
E então, uma vez que você fez isso, vou mostrar-lhe alguns dos princípios básicos importantes do uso do tom.

3
00:00:08,850 --> 00:00:14,180
Então eu estou no get bootstrapped dot com apenas na página inicial e há um link aqui download bootstrap.

4
00:00:14,850 --> 00:00:19,580
E não é realmente um link de download direto porque temos duas opções principais sobre como usar o bootstrap.

5
00:00:20,430 --> 00:00:24,340
Podemos baixar os arquivos e vou fazer isso para começar.

6
00:00:24,530 --> 00:00:29,360
Então podemos levar esses arquivos e adicioná-los ao nosso aplicativo antes de avançarmos.

7
00:00:29,430 --> 00:00:35,230
Eu tenho uma equipe de pesquisa simples, vou arquivar que eu estou chamando de coisas básicas h DML m l.

8
00:00:35,790 --> 00:00:40,770
E eu vou apenas adicionar um título e vamos adicionar apenas alguns elementos diferentes do bootstrap.

9
00:00:40,800 --> 00:00:45,510
Depois de instalá-lo, não faremos nada abrangente, só o usaremos como um campo de

10
00:00:45,510 --> 00:00:47,960
jogos para alguns dos componentes básicos do bootstrap.

11
00:00:48,510 --> 00:00:54,840
OK, então comecemos por adicionar apenas um simples básico de bootstrap H-1 e

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

13
00:00:58,700 --> 00:01:01,790
E então vamos abrir isso no navegador.

14
00:01:03,240 --> 00:01:05,280
Apenas mantenha isso por agora.

15
00:01:05,280 --> 00:01:06,690
Agora, para instalar o bootstrap.

16
00:01:06,780 --> 00:01:08,190
Eu baixei isso.

17
00:01:08,250 --> 00:01:13,720
Então, se eu abrir esse arquivo que você poderia ver dentro daqui, existem alguns componentes diferentes.

18
00:01:13,830 --> 00:01:19,650
Há um diretório C S S e dentro do diretório CCS há bastantes arquivos,

19
00:01:19,650 --> 00:01:23,890
mas realmente há apenas um arquivo importante que é bootstrapped CSSA.

20
00:01:24,630 --> 00:01:27,710
E este é realmente o mesmo arquivo aqui bootstrapped up minutos.

21
00:01:27,740 --> 00:01:32,290
SS, exceto que a luta de minutos foi encolhida para ocupar menos espaço.

22
00:01:32,460 --> 00:01:36,280
Portanto, esses dois são os arquivos importantes para realmente usar o bootstrap.

23
00:01:36,600 --> 00:01:41,850
E este é um tema de bootstrap, todos esses três são usados ​​para ajudar a adicionar um tema personalizado ao bootstrap,

24
00:01:41,850 --> 00:01:43,370
de modo que não importa tanto.

25
00:01:43,380 --> 00:01:45,680
Tudo o que precisamos é o bootstrap Dotsie avaliar.

26
00:01:45,780 --> 00:01:49,430
E começamos abrindo apenas para que você possa ver o que estamos trabalhando.

27
00:01:49,470 --> 00:01:52,200
Este é o arquivo re-avaliado do bootstraps principal.

28
00:01:52,770 --> 00:01:54,280
São apenas muitas aulas.

29
00:01:54,300 --> 00:02:00,510
Se você olhar para cada linha de CSSA quase é um ponto de declaração de classe, simplesmente.

30
00:02:00,690 --> 00:02:05,340
E então, o que podemos fazer é usar essas classes em vez de nossas aplicações.

31
00:02:05,340 --> 00:02:12,060
Então, se quisermos ter um botão com texto branco e um fundo vermelho, vamos aplicar o perigo do botão

32
00:02:12,060 --> 00:02:12,720
de ponto.

33
00:02:12,900 --> 00:02:14,510
E é isso que isso está fazendo aqui.

34
00:02:14,730 --> 00:02:19,590
Mas o perigo tem texto branco um fundo vermelho e uma borda avermelhada.

35
00:02:19,650 --> 00:02:24,410
Então, vamos em frente e inclua isso em nosso aplicativo como qualquer outro arquivo CSSA.

36
00:02:24,750 --> 00:02:31,880
Então, o que eu vou fazer é simplesmente arrastá-lo aqui para o mesmo diretório onde eu tenho minha equipe de estudo

37
00:02:32,540 --> 00:02:37,020
básica e eu também poderia fazer o bootstrapped up minutos reavaliar no lugar deste.

38
00:02:37,020 --> 00:02:38,520
Realmente não importa.

39
00:02:38,550 --> 00:02:45,420
Tecnicamente, este carrega um pouco mais rápido, porque se eu abri-lo, você pode ver que é como uma linha gigante que todos

40
00:02:45,690 --> 00:02:47,570
os espaços em branco foram removidos.

41
00:02:47,850 --> 00:02:53,640
Então é mais fácil de carregar, mas vou usar essa versão mais longa apenas para que você possa ver

42
00:02:53,640 --> 00:02:55,450
exatamente com o que estamos trabalhando.

43
00:02:55,470 --> 00:03:02,130
Agora vamos entrar no nosso arquivo atual aqui vou fechar isso e vamos incluir o

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

45
00:03:03,220 --> 00:03:11,370
Assim, assim como qualquer outra folha de estilo, precisamos de uma etiqueta vinculada e o Tref é bootstrap dot C Ss

46
00:03:11,370 --> 00:03:16,310
e, se salvarmos e estamos frescos, nossa página aqui notará uma pequena diferença.

47
00:03:16,320 --> 00:03:18,140
Assista a fonte neste H-1.

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

49
00:03:19,620 --> 00:03:24,720
Agora temos o bootstrap instalado ou, pelo menos, o C Ss que acompanha o bootstrap e é tudo o que

50
00:03:24,720 --> 00:03:25,500
precisamos por enquanto.

51
00:03:25,650 --> 00:03:30,060
Nós não estaremos trabalhando com o javascript ainda não há outra opção

52
00:03:30,510 --> 00:03:35,310
para instalar o bootstrap que eles realmente lhe dão no site Get bootstrap aqui.

53
00:03:35,400 --> 00:03:40,750
Bootstrap CDN, podemos pegar este link aqui e adicioná-lo ao nosso código.

54
00:03:41,010 --> 00:03:44,870
E é um link para uma versão hospedada desses mesmos arquivos.

55
00:03:45,120 --> 00:03:49,920
Então, se abrimos isso no navegador e colemos isso, você pode ver que ele tem o conteúdo

56
00:03:49,920 --> 00:03:56,670
do arquivo minimizado e ele está hospedado neste u r l para que possamos ter apenas um link para você e eu posso substituir isso.

57
00:03:56,970 --> 00:03:57,540
Outro link.

58
00:03:57,540 --> 00:04:01,530
Marque e cole que você é Ellen e eu vou comentar isso.

59
00:04:01,530 --> 00:04:04,230
Por enquanto e volte e atualize.

60
00:04:04,380 --> 00:04:06,020
E nada muda.

61
00:04:06,030 --> 00:04:10,950
A única diferença é que, no primeiro caso, tivemos o arquivo baixado no

62
00:04:10,950 --> 00:04:16,650
nosso computador que estava ligando e, no segundo caso, estamos vinculando um arquivo externo hospedado on-line.

63
00:04:16,650 --> 00:04:20,750
Agora vamos aos documentos do bootstrap e comece a brincar ou a alguns desses componentes.

64
00:04:21,240 --> 00:04:27,330
e vamos clicar em C Ss e só vou apontar algumas das peças mais importantes que usaremos.

65
00:04:27,330 --> 00:04:29,150
Então, volte para obter bootstrap

66
00:04:29,400 --> 00:04:31,940
Então, vamos começar simples com botões.

67
00:04:32,460 --> 00:04:40,650
Se quisermos usar um botão, tudo o que temos a fazer é usar uma classe batida seguida de um tipo de botão que

68
00:04:40,990 --> 00:04:48,510
esteja entre o padrão, o que nos dará um botão branco, mas também é a informação de acesso BAMNA primária da

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

70
00:04:49,260 --> 00:04:54,080
Aviso de perigo e ligação e todos eles são estilo de forma ligeiramente diferente.

71
00:04:54,240 --> 00:04:58,860
E é claro que podemos mudar essas cores por conta própria, mas vamos usar apenas

72
00:04:58,860 --> 00:05:02,500
o construído uma vez para começar e ele também pode ver aqui.

73
00:05:02,700 --> 00:05:08,600
Não precisamos usar apenas um elemento de botão, podemos usar uma marca de âncora com um botão ou uma entrada.

74
00:05:08,820 --> 00:05:10,720
Então vamos tentar isso.

75
00:05:11,730 --> 00:05:13,030
Olá, H-1.

76
00:05:13,230 --> 00:05:22,740
Vamos apenas adicionar uma etiqueta de botão e essas tags de botão apenas digam clic em mim e apenas atualize a

77
00:05:22,740 --> 00:05:25,860
página agora e dê uma olhada nisso.

78
00:05:25,950 --> 00:05:27,310
Esse é um botão bastante feio.

79
00:05:27,690 --> 00:05:37,740
Mas se nós vamos adicionar essa classe PTEN e, em seguida, entre vamos fazer sucesso e salvar, agora temos esse

80
00:05:37,740 --> 00:05:39,200
incrível botão verde.

81
00:05:39,330 --> 00:05:41,870
Então, é muito fácil conseguir alguns estilos básicos.

82
00:05:42,190 --> 00:05:47,670
E vamos voltar e vou lhe mostrar algumas outras coisas sobre botões que são tamanhos diferentes que

83
00:05:47,670 --> 00:05:50,110
podemos usar também e é muito fácil.

84
00:05:50,130 --> 00:05:58,410
Nós só precisamos adicionar em qualquer botão grande e pequeno ou botão extra pequeno, então ele é testado após o sucesso do botão

85
00:05:58,410 --> 00:06:00,500
e não precisa ir atrás dele.

86
00:06:00,510 --> 00:06:08,600
Não importa a ordem das aulas, mas vou fazer isso depois da DTN e vamos fazer extra pequeno e

87
00:06:08,600 --> 00:06:09,740
atualizar sua página.

88
00:06:09,750 --> 00:06:11,170
Aqui vamos nós.

89
00:06:11,170 --> 00:06:16,710
Eu vou mover isso agora e vamos adicionar mais alguns botões, mas esse será uma marca de âncora

90
00:06:16,710 --> 00:06:24,640
e isso será em uma etiqueta ou teremos H. F. é igual a barra diagonal de barra diagonal que

91
00:06:24,660 --> 00:06:30,480
lê todos os dias, obtenha boot com ponto com e, em seguida, o texto apenas diga documentos de inicialização.

92
00:06:30,550 --> 00:06:38,550
Então, faça isso um pouco maior e, em seguida, adicionei na classe na classe precisa igualar

93
00:06:38,550 --> 00:06:47,330
PTEN e vamos fazer entre as informações de Desch e faremos o grande PTEN dash Elgie e atualizaremos.

94
00:06:47,340 --> 00:06:48,690
Agora temos dois botões.

95
00:06:48,750 --> 00:06:50,620
Um é um elemento de botão real.

96
00:06:50,620 --> 00:06:55,210
Outro tem uma marca de âncora e, se eu clicar nisso, você pode vê-lo como uma marca de âncora.

97
00:06:56,340 --> 00:07:01,200
Então, já no primeiro minuto de usar o bootstrap, conseguimos obter botões decentes.

98
00:07:01,370 --> 00:07:05,330
Teria tomado 10 a 15 linhas de CSSA por conta própria para replicar.

99
00:07:05,760 --> 00:07:06,960
Voltemos agora.

100
00:07:06,990 --> 00:07:10,980
Faça novamente esta tela cheia e eu vou mostrar algumas outras coisas sobre os botões.

101
00:07:11,220 --> 00:07:12,720
Então temos tamanhos.

102
00:07:12,750 --> 00:07:18,560
Também temos estados diferentes em que podemos fazer um botão aparecer como se estivesse ativo e,

103
00:07:18,570 --> 00:07:21,080
para isso, apenas adicionamos a classe ativa.

104
00:07:21,390 --> 00:07:27,060
que isso apareça bem no lançamento da tela que este parece estar ativo.

105
00:07:27,060 --> 00:07:37,140
Então, se tentarmos isso agora, vamos adicionar um botão A, então vou duplicar o nosso pequeno botão miniatura, clique em Me três vezes e

106
00:07:37,140 --> 00:07:43,590
no último no meio da classe ativo e atualizado e você pode ver com sorte

107
00:07:43,620 --> 00:07:49,290
Vamos voltar e também podemos desativar um botão adicionando esse atributo.

108
00:07:49,290 --> 00:07:51,850
Desabilitado é desativado.

109
00:07:52,440 --> 00:07:57,950
Vamos voltar e vamos desativar a última atualização.

110
00:07:58,180 --> 00:08:00,020
E agora este botão está desativado.

111
00:08:00,120 --> 00:08:01,940
Nós conseguimos esse pequeno ícone agradável.

112
00:08:02,070 --> 00:08:05,110
Não tem um efeito hover onde muda de cor mais.

113
00:08:05,220 --> 00:08:07,460
É claramente um botão desativado.

114
00:08:07,560 --> 00:08:14,610
Grande ultima coisa que vou mostrar para que possamos mudar as cores novamente, então a noite de perigo do botão nos

115
00:08:14,610 --> 00:08:18,630
dá essa laranja avermelhada e você pode ver todas as cores aqui.

116
00:08:18,870 --> 00:08:24,300
E é claro que você poderia mudar esses por substituir os estilos para que você pudesse fazer algo assim ao invés

117
00:08:24,300 --> 00:08:25,850
de fazer outra folha de estilo.

118
00:08:25,860 --> 00:08:27,270
Eu vou fazer isso aqui por enquanto.

119
00:08:27,330 --> 00:08:32,330
Então, vamos fazer uma linha e também gostar de beleza e perigo.

120
00:08:32,460 --> 00:08:40,050
assim que você pode entrar e substituir os estilos para que você não precise Use o que o bootstrap dá para você fora da caixa.

121
00:08:40,050 --> 00:08:46,440
Podemos mudar a cor para ser laranja e agora pode ser para pôr em perigo a laranja do Texas e,

122
00:08:46,440 --> 00:08:51,550
se eu realmente queria mudar o fundo, eu poderia fazer o fundo é laranja e é

123
00:08:52,200 --> 00:08:53,580
E a maioria dos lugares não.

124
00:08:54,030 --> 00:08:56,940
OK, então são botões e é tudo o que vou fazer neste vídeo.

125
00:08:56,940 --> 00:09:00,300
Eu só queria dar-lhe um gosto muito rápido de como o bootstrap funciona.

126
00:09:00,300 --> 00:09:06,450
Este padrão de adição de classes a elementos existentes e aquelas classes está definido naquele bootstrap que o

127
00:09:06,460 --> 00:09:11,010
arquivo CSSA no próximo vídeo, eu vou destacar algumas das outras peças importantes

128
00:09:11,010 --> 00:09:13,540
que acompanham o bootstrap incluindo formulários e insumos.