1
00:00:00,390 --> 00:00:06,210
Bem-vindo novamente nesta unidade, vou mostrar-lhe alguns outros componentes, incluindo jumbotron e bootstrap

2
00:00:06,210 --> 00:00:07,420
formas e entradas.

3
00:00:07,530 --> 00:00:12,120
Mas antes que eu faça isso quero dar um momento para abordar algo que é realmente muito importante

4
00:00:12,120 --> 00:00:14,520
quando estamos aprendendo novas ferramentas como esta, como o bootstrap.

5
00:00:14,760 --> 00:00:19,620
E na minha experiência de ensinar as pessoas a tornarem-se desenvolvedores web, percebi que um bootstrap é

6
00:00:19,620 --> 00:00:25,230
um dos primeiros lugares em que alguns dos alunos começam a se sentir desconfortáveis ​​e sentem que não sabem

7
00:00:25,230 --> 00:00:29,820
se estão fazendo e então porque Estamos de repente incluindo um monte de código que alguém

8
00:00:29,820 --> 00:00:31,200
escreveu em nosso aplicativo.

9
00:00:31,200 --> 00:00:36,810
Mas se você olha os documentos aqui, eles são muito longos, eles são abrangentes, o que é ótimo,

10
00:00:36,810 --> 00:00:42,810
mas há muito aqui e eu quero que você enquadre isso não como um manual que você deve ler

11
00:00:42,810 --> 00:00:43,550
para entender tudo.

12
00:00:43,560 --> 00:00:47,980
Este não é como um guia para que você precise terminar antes de usar o bootstrap.

13
00:00:48,300 --> 00:00:53,790
É uma referência em que, se você decidir que precisa de um formulário, veja a seção do formulário se precisar de uma tabela.

14
00:00:53,850 --> 00:00:56,780
Você acessará a seção da tabela se precisar de uma barra de navegação.

15
00:00:56,850 --> 00:01:01,920
como esse, você vai usá-los sem parar, voltando até aqui referenciando bits de código individuais, copiando

16
00:01:02,100 --> 00:01:08,310
seus segmentos de código, verificando algumas demonstrações que lê exemplos que usei para o bootstrapped para anos neste momento.

17
00:01:08,310 --> 00:01:12,810
Você olha para a seção NFR, mas é importante que você trate os documentos

18
00:01:12,930 --> 00:01:14,630
E eu me sinto muito bem com a maioria.

19
00:01:14,760 --> 00:01:18,220
Mas deixo os documentos abertos quando estou trabalhando em qualquer coisa com o bootstrap.

20
00:01:18,330 --> 00:01:24,450
Estou constantemente referenciando os exemplos em um dos vídeos realmente adiantados neste curso. Eu falei sobre

21
00:01:24,450 --> 00:01:26,900
como se tornar um desenvolvedor web.

22
00:01:27,060 --> 00:01:32,490
Você não está se tornando um especialista em memorização e em saber cada informação.

23
00:01:32,730 --> 00:01:33,960
Sim, você precisa saber as coisas.

24
00:01:33,960 --> 00:01:38,700
Sim, você tem que entender e memorizar algumas coisas, mas você não está se tornando um especialista ou memorização.

25
00:01:39,210 --> 00:01:41,990
Você está se tornando um especialista em acessar informações.

26
00:01:42,120 --> 00:01:48,180
E algumas dessas informações que você terá memorizado e muito estará disponível na documentação ou exemplos

27
00:01:48,450 --> 00:01:52,410
de livros de vídeos de todos os tipos de recursos.

28
00:01:52,410 --> 00:01:54,350
Tudo bem, para resumir toda a conversa.

29
00:01:54,450 --> 00:01:58,890
Basicamente eu só quero que você tenha em mente que sim, há muito para inicializar e você verá 20

30
00:01:58,920 --> 00:02:01,430
30 por cento dele e há muito mais por aí.

31
00:02:01,440 --> 00:02:03,210
Mas não seja intimidado por isso.

32
00:02:03,240 --> 00:02:07,110
sentir confortável ao acessar os documentos se você precisa fazer algo que eu não mostro como fazer.

33
00:02:07,110 --> 00:02:07,800
Você deve se

34
00:02:07,860 --> 00:02:09,480
Abra os documentos e procure-o.

35
00:02:09,600 --> 00:02:13,760
E sempre há ótimos exemplos e explicações sobre obter o pontocom bootstrapped.

36
00:02:14,120 --> 00:02:19,130
Ok, então, sem mais adiante, vamos passar a falar sobre alguns desses

37
00:02:19,140 --> 00:02:22,110
componentes importantes e vou começar mostrando Jumbotron.

38
00:02:22,500 --> 00:02:28,170
Então, um Jumbotron de acordo com os documentos oficiais é um componente leve e flexível que pode, opcionalmente, estender a

39
00:02:28,170 --> 00:02:31,680
janela de exibição inteira para mostrar o conteúdo da chave em seu site.

40
00:02:31,680 --> 00:02:37,670
Você pode ver um exemplo de um aqui e, se queremos usar um Jumbotron, é realmente muito fácil.

41
00:02:37,680 --> 00:02:43,680
Tudo o que precisamos fazer é escrever div class jumbotron e, em seguida, o que quer que colocamos dentro disso

42
00:02:43,680 --> 00:02:44,750
fará parte do Jumbotron.

43
00:02:44,970 --> 00:02:46,680
Então vamos tentar isso.

44
00:02:47,190 --> 00:02:58,940
Basta fazê-lo abaixo, os botões terão um div com a classe Jumbotron jumbo tron ​​e, em seguida, dentro, se houvermos fazer um

45
00:02:59,370 --> 00:03:09,630
H1 ou H-1, dirá que este é um jumbotron e, em seguida, adicione um botão lá, como eles têm

46
00:03:09,630 --> 00:03:17,300
aqui e nós vamos adicione um parágrafo também em nosso parágrafo será apenas um jibberish.

47
00:03:17,790 --> 00:03:19,420
Bom o suficiente por enquanto.

48
00:03:20,310 --> 00:03:21,060
oi lá.

49
00:03:24,330 --> 00:03:28,460
E um botão e nosso botão apenas dirão

50
00:03:28,800 --> 00:03:29,250
ESTÁ BEM.

51
00:03:29,250 --> 00:03:31,830
E então, um botão, temos algumas escolhas.

52
00:03:31,980 --> 00:03:39,680
Vamos fazer um sucesso de botão e vou fazer isso grande e salvar.

53
00:03:39,940 --> 00:03:41,620
Vamos dar uma olhada no que recebemos.

54
00:03:41,790 --> 00:03:47,400
E há um Jumbotron que você pode ver que ele ocupa toda a largura da nossa janela do navegador e normalmente

55
00:03:47,400 --> 00:03:48,740
não é o que queremos.

56
00:03:49,050 --> 00:03:54,840
que está acontecendo é que o JumboTron está configurado para ocupar 100% de qualquer recipiente que esteja dentro de.

57
00:03:54,840 --> 00:03:55,510
E o

58
00:03:55,640 --> 00:03:57,740
Neste caso, não está fora de nada.

59
00:03:57,900 --> 00:04:02,550
Mas em breve vou mostrar-lhe o sistema de grade e o bootstrap onde podemos controlar exatamente o quanto

60
00:04:02,550 --> 00:04:07,620
você deseja que ele ocupe a tela se quiser que ele seja centrado e ocupe um terço da tela.

61
00:04:07,650 --> 00:04:12,180
Dois terços da tela, um quarto da tela, temos todas essas escolhas diferentes que podemos fazer

62
00:04:12,180 --> 00:04:14,150
usando o sistema de grade de bootstraps.

63
00:04:14,310 --> 00:04:21,480
Por agora, vou mostrar-lhe outro elemento que não podemos em que é uma div com classe igual ao recipiente e o

64
00:04:23,600 --> 00:04:25,140
que o recipiente irá fazer.

65
00:04:25,140 --> 00:04:31,800
Se colocarmos coisas dentro do contentor de classe div, isso dá algum espaçamento com algum estofamento ao redor dele e

66
00:04:31,800 --> 00:04:32,950
ele concentra coisas.

67
00:04:33,360 --> 00:04:35,130
Então, o contêiner descobre

68
00:04:38,550 --> 00:04:46,750
que ele ocupa todo esse espaço aqui que você pode ver, mas tem um pouco de margem nisso.

69
00:04:46,750 --> 00:04:50,860
Então, se queremos apenas uma melhoria rápida sem ter que usar o sistema

70
00:04:50,860 --> 00:04:55,990
de grade que não falamos, podemos adicionar contêiner de classe div e agora temos esse Jumbotron bonito.

71
00:04:55,990 --> 00:05:01,720
E se movemos esse código que já temos nos recipientes bem, mas não o

72
00:05:01,720 --> 00:05:03,230
colocamos dentro do Jumbotron.

73
00:05:03,310 --> 00:05:07,890
Você verá que ainda é afetado por esse recipiente.

74
00:05:08,020 --> 00:05:15,640
Então, fora do Jumbotron, mas dentro do recipiente, salve e atualize, você pode ver também dentro desse

75
00:05:15,640 --> 00:05:18,120
recipiente e reflete isso visualmente.

76
00:05:18,400 --> 00:05:22,320
OK, vamos voltar aos componentes e a próxima coisa que eu vou mostrar.

77
00:05:22,330 --> 00:05:23,950
Nós vamos ao topo.

78
00:05:24,280 --> 00:05:28,760
Nós temos que ir para avaliar e eu vou mostrar-lhe os formulários e como eles funcionam.

79
00:05:28,990 --> 00:05:33,030
Então, clique nos formulários e há alguns tipos diferentes e exemplos diferentes.

80
00:05:33,070 --> 00:05:35,710
E eu vou percorrê-los primeiro antes de digitar qualquer coisa.

81
00:05:35,980 --> 00:05:39,910
Então, aqui está um exemplo básico de um formulário de inicialização.

82
00:05:39,910 --> 00:05:42,540
Você pode ver o mercado que o cria.

83
00:05:42,760 --> 00:05:49,930
Então temos o que é conhecido como uma forma inline e temos outro tipo de formulário em linha

84
00:05:49,930 --> 00:05:55,320
e ainda outro com diferentes tipos de insumos e outro tipo de formulário.

85
00:05:55,480 --> 00:05:59,140
E agora isso fala sobre todos os diferentes tipos de controles de formulário dos

86
00:05:59,140 --> 00:06:00,420
diferentes tipos de entradas suportadas.

87
00:06:00,430 --> 00:06:03,280
Então, todas essas cores você é.

88
00:06:03,310 --> 00:06:13,450
botões de rádio desativados caixas de seleção inline botões de opção inline os menus suspensos selecionados continuam a diminuir.

89
00:06:13,450 --> 00:06:24,940
Número de e-mail no tempo da semana e assim por diante áreas de texto caixas de seleção diferentes caixas de seleção desativadas

90
00:06:24,970 --> 00:06:26,780
Nós temos outros estados do fórum.

91
00:06:26,780 --> 00:06:28,370
Temos um estado de foco.

92
00:06:28,470 --> 00:06:30,910
Você pode ver esse destaque em torno desse azul.

93
00:06:31,060 --> 00:06:34,420
Esse é o estilo de foco padrão do bootstrap.

94
00:06:34,420 --> 00:06:43,750
Nós também podemos desativar as entradas, adicionando desativado e nós também conseguimos algumas outras coisas que podemos fazer, mas vou voltar e

95
00:06:43,780 --> 00:06:49,780
realmente me concentrar no começo do exemplo básico e vou começar por copiar esse

96
00:06:50,200 --> 00:06:54,610
formulário completo Sobre e depois vamos dissecá-lo pouco a pouco.

97
00:06:54,610 --> 00:06:59,200
Então vamos voltar aqui e vamos adicionar este formulário depois de tudo o resto.

98
00:06:59,200 --> 00:07:01,420
Mas vou fazê-lo dentro do recipiente.

99
00:07:01,420 --> 00:07:03,290
Deixe-me fazer esta tela cheia por um momento.

100
00:07:03,340 --> 00:07:08,580
Nós temos nossa forma e dentro dessa forma temos bastante conteúdo.

101
00:07:08,590 --> 00:07:11,900
Voltemos ao navegador e dê uma olhada no que parece.

102
00:07:12,460 --> 00:07:17,170
E a primeira coisa que você provavelmente notará é que nosso formulário passa todo este contenedor.

103
00:07:17,230 --> 00:07:21,060
Isso ocupa 100 por cento disso e isso é algo que poderemos controlar.

104
00:07:21,100 --> 00:07:27,360
falamos sobre o sistema de grade de bootstrap e poderemos facilmente dizer que isso deve passar 50% no caminho.

105
00:07:27,380 --> 00:07:28,470
Uma vez que

106
00:07:28,480 --> 00:07:32,920
Então, é algo que poderemos mudar facilmente quando falamos sobre o sistema de grade do bootstrap ou

107
00:07:32,920 --> 00:07:34,090
ainda não estamos lá.

108
00:07:34,120 --> 00:07:35,510
Então, vamos apenas ir com ele.

109
00:07:35,530 --> 00:07:37,080
Ele ocupa 100% por enquanto.

110
00:07:37,120 --> 00:07:39,670
É um gigantesco fórum de aparência estranha, mas está bem.

111
00:07:39,820 --> 00:07:41,320
Nós adoramos como é.

112
00:07:41,470 --> 00:07:45,290
Então voltaremos a sublimar e vamos dissecar essa peça por vez.

113
00:07:45,550 --> 00:07:48,730
Então, temos uma etiqueta de fórum dentro dessa tag de fórum.

114
00:07:48,910 --> 00:07:54,880
Há um grupo de formulário de classe div e se você quiser saber mais sobre o que isso faz se você

115
00:07:54,880 --> 00:08:01,840
voltar aos documentos do bootstrap e fazer uma pesquisa para o grupo de formulários e você pode ver os rótulos e controles do rap

116
00:08:01,840 --> 00:08:04,010
no grupo de formulários para um espaçamento ótimo.

117
00:08:04,300 --> 00:08:11,140
Então, se nos livrarmos dessa classe de grupo de forma em torno deste primeiro e nós faremos isso em torno do

118
00:08:11,140 --> 00:08:13,800
primeiro e segundo, você verá o que acabamos.

119
00:08:13,870 --> 00:08:21,520
Vou salvar e atualizar você ver como o espaçamento muda aqui entre essas entradas.

120
00:08:22,150 --> 00:08:27,040
como você o usa onde você tem uma entrada e o rótulo e deseja que eles sejam agrupados juntos.

121
00:08:27,250 --> 00:08:30,640
Então, podemos voltar e adicionar esse grupo de formulário e isso é realmente

122
00:08:30,940 --> 00:08:35,320
Então, preste atenção aqui mesmo, um pouco de espaço é adicionado ali mesmo.

123
00:08:35,320 --> 00:08:40,330
Acabou de adicionar um pouco de espaço aqui, o que efetivamente agrupa esses dois juntos visualmente e,

124
00:08:40,330 --> 00:08:43,660
em seguida, o Grip está juntos visualmente, assim como isso, aqui.

125
00:08:43,660 --> 00:08:45,390
Então esse é o grupo de formulário.

126
00:08:46,000 --> 00:08:47,860
E então os rótulos são apenas normais.

127
00:08:47,860 --> 00:08:54,610
Nós não precisamos adicionar nada extravagante para rotular nenhuma classe de Boucek, mas a entrada lá é um controle de formulário de classe.

128
00:08:55,300 --> 00:08:57,470
Então, vamos ver o que acontece quando eu me livrar disso.

129
00:08:57,700 --> 00:09:03,670
Então, eu vou fazer isso primeiro e colocar a entrada de e-mail e voltar e atualizar.

130
00:09:03,670 --> 00:09:08,590
Observe que isso muda completamente para uma entrada normal do navegador padrão.

131
00:09:08,590 --> 00:09:10,050
Então você não obtém os cantos arredondados.

132
00:09:10,060 --> 00:09:12,800
Não recebemos o mesmo preenchimento e espaçamento das coisas.

133
00:09:13,000 --> 00:09:18,010
E também não temos o mesmo efeito de foco quando eu clicar, nós obtemos um esboço azul, mas

134
00:09:18,010 --> 00:09:19,010
é diferente desse.

135
00:09:19,180 --> 00:09:23,860
óbvias entre os dois, mas, na verdade, há algumas diferenças mais importantes que você verá, uma vez

136
00:09:23,860 --> 00:09:28,750
que trabalharmos com o sistema de grade e a forma como eles se comportam e interagem com outros elementos.

137
00:09:28,750 --> 00:09:33,430
O esquema do bootstrap é um pouco mais sutil e essas são apenas as mudanças visuais imediatamente

138
00:09:33,620 --> 00:09:36,170
Voltará e adicione o controle de formulário novamente.

139
00:09:36,400 --> 00:09:45,880
Então, realmente, se quisemos destilar, tudo aqui se resume a formar um grupo e controlar a forma.

140
00:09:46,150 --> 00:09:49,840
Essas duas classes são realmente responsáveis ​​por fazer com que as coisas se vejam bem.

141
00:09:49,840 --> 00:09:55,680
Agora, há este bloqueio de ajuda de classe de parágrafo e podemos dar uma olhada no que obtemos disso.

142
00:09:55,690 --> 00:10:01,910
uma pequena sugestão sobre uma parte do seu formulário e essas coisas com a classe ajudam a bloquear e, em seguida,

143
00:10:01,910 --> 00:10:07,680
temos o nosso botão aqui embaixo, que é apenas um botão Pucelle regular ou temos entre um e B

144
00:10:08,120 --> 00:10:13,570
tendem a cair e podemos torná-lo maior ou menor, extra pequeno, altere a cor como qualquer outro botão.

145
00:10:13,570 --> 00:10:16,080
É este texto aqui embaixo, que apenas dá

146
00:10:16,090 --> 00:10:21,910
Então, você já pode ver como isso é um pouco como Legos, onde temos um botão Lego que podemos

147
00:10:21,910 --> 00:10:23,270
adicionar em um jumbotron.

148
00:10:23,320 --> 00:10:27,360
Nós também podemos simplesmente adicionar por conta própria ou podemos adicioná-lo em vez de um formulário.

149
00:10:27,430 --> 00:10:31,840
É apenas um pequeno componente plug and play que podemos adicionar em diferentes partes da nossa aplicação.

150
00:10:32,500 --> 00:10:36,990
Então vamos voltar e dar uma olhada em um outro tipo de formulário, que é a forma inline.

151
00:10:37,450 --> 00:10:39,120
Então isso parece um pouco diferente.

152
00:10:39,340 --> 00:10:44,800
um comentário aqui em linha e vamos recuar as coisas corretamente.

153
00:10:46,020 --> 00:10:53,860
Se coparmos esse código e examinamos as diferenças, então deixarei esse primeiro formulário e vamos adicionar

154
00:10:54,880 --> 00:10:56,200
Parece bom.

155
00:10:56,200 --> 00:10:58,360
Observe que tudo é idêntico.

156
00:10:58,360 --> 00:11:04,290
Ainda temos um controle de forma nas entradas que formamos, mas há uma grande diferença.

157
00:11:04,360 --> 00:11:09,070
Tudo está dentro de uma forma com a forma de classe na linha, de modo que uma linha.

158
00:11:09,490 --> 00:11:11,550
Vamos mostrar o que parece começar.

159
00:11:11,640 --> 00:11:15,450
Volto dá-nos esta forma agradável aqui.

160
00:11:15,850 --> 00:11:24,870
E assim que eu me livrar disso e salvá-lo agora volta a uma forma regular, como nós temos aqui.

161
00:11:25,210 --> 00:11:29,330
Então, apenas uma classe contém todos os estilos que irão controlar isso.

162
00:11:29,470 --> 00:11:31,340
Então, vamos mantê-lo como formulário na linha.

163
00:11:31,540 --> 00:11:34,270
E novamente, o espaçamento não é ideal neste momento.

164
00:11:34,270 --> 00:11:37,130
Isso será corrigido quando falarmos sobre o sistema de grade.

165
00:11:37,150 --> 00:11:40,090
Há muito mais sobre o que podemos falar sobre os formulários do bootstrap.

166
00:11:40,090 --> 00:11:46,060
Nós poderíamos fazer 30 conferências de 45 minutos apenas criando formas complexas de bootstrap aprendendo os prós e contras de

167
00:11:46,060 --> 00:11:51,640
todas essas peças diferentes e coisas diferentes que podemos fazer validações personalizadas dimensionando todos os tipos de estilos

168
00:11:51,970 --> 00:11:53,750
diferentes com os quais podemos trabalhar.

169
00:11:53,830 --> 00:11:55,120
Mas não vou fazer isso.

170
00:11:55,210 --> 00:11:56,880
Cobrimos os princípios básicos importantes.

171
00:11:56,940 --> 00:12:01,540
Existem dois tipos de formas são o tipo de pão e manteiga de formas Boucek onde

172
00:12:01,600 --> 00:12:07,150
temos a forma básica regular e, em seguida, uma forma inline e haverá algumas outras características em diferentes aspectos

173
00:12:07,150 --> 00:12:09,730
do bootstrap que usamos em torno dos formulários.

174
00:12:09,910 --> 00:12:14,680
Mas ao invés de gastar o tempo agora e encostar-se em todos os prós e contras e os

175
00:12:14,680 --> 00:12:19,540
pequenos detalhes das formas do PRICHEP, eu vou simplesmente jogar essas peças quando precisamos delas quando estamos realmente

176
00:12:19,540 --> 00:12:20,310
usando o bootstrap.

177
00:12:20,530 --> 00:12:27,280
Então, as duas coisas de viagem aqui sobre formas seriam duas classes que são controle de formulário realmente importante e o controle de

178
00:12:27,280 --> 00:12:33,480
forma de formulário do grupo faz com que as entradas do grupo de formulário refinado bootstrap apenas adicionem algum espaçamento agradável.

179
00:12:33,550 --> 00:12:40,660
Então, o que quer que você coloque, disse que um grupo de formulários obtém algum espaço agradável e, em seguida, uma única forma de classe em linha.

180
00:12:40,960 --> 00:12:44,160
Se você envolver um formulário na medida em que o formulário inteiro vai na linha.

181
00:12:44,520 --> 00:12:46,570
E também conversamos sobre Jumbotron.

182
00:12:46,900 --> 00:12:50,020
A classe muito simples é igual a Jumbotron.

183
00:12:50,110 --> 00:12:51,650
Então você pode ver um par.

184
00:12:51,970 --> 00:12:54,230
E então colocamos tudo dentro de um recipiente.

185
00:12:54,460 --> 00:12:59,140
E se nos livrarmos desse recipiente para mostrar o que acontece.

186
00:12:59,880 --> 00:13:04,950
Refresque todo esse espaçamento que a margem agradável vai embora.

187
00:13:05,200 --> 00:13:11,500
Então, os contêineres de maneira agradável apenas para obter um pouco de espaçamento rápido em seu aplicativo tornam as coisas parecidas relativamente boas.

188
00:13:12,140 --> 00:13:17,620
OK, então, antes de terminar este vídeo, passaremos 10 segundos a mostrar-lhe um site em que vamos

189
00:13:17,620 --> 00:13:23,680
criar um aplicativo que tenha um banco de dados de back-end completo conectado usando nó e expressar e Mongo

190
00:13:23,680 --> 00:13:28,780
e mangustão e um monte de tecnologias e nós usamos bootstrap para protótipo da interface para

191
00:13:28,780 --> 00:13:33,160
que pareça relativamente bom muito rápido e você pode ver que temos um Jumbotron aqui.

192
00:13:33,160 --> 00:13:37,820
Estamos usando alguns dos botões que estamos usando o sistema de grade que eu vou explicar mais tarde.

193
00:13:37,960 --> 00:13:40,950
E então, se eu entrar no log pode ver que temos um formulário.

194
00:13:41,260 --> 00:13:46,360
Portanto, esses são controles de formulário que eu usei usando o sistema de grade para que ele não ocupe

195
00:13:46,360 --> 00:13:47,610
toda a largura da tela.

196
00:13:47,680 --> 00:13:50,070
Em vez disso, só ocupa essa pequena seção do meio.

197
00:13:50,170 --> 00:13:52,700
Então, veremos isso uma vez que falamos sobre o sistema de grade.

198
00:13:52,950 --> 00:13:57,490
Mas eu só quero mostrar-lhe que este é um aplicativo real e é algo que usaremos o bootstrap para

199
00:13:57,610 --> 00:14:00,460
nos ajudar a protótipos e que as coisas pareçam decentes, muito rapidamente