1
00:00:00,760 --> 00:00:01,870
Olá e bem vindo de volta.

2
00:00:01,870 --> 00:00:07,270
Então, neste vídeo, vamos começar com o bootstrap para chegar a esta página.

3
00:00:07,270 --> 00:00:15,490
Simplesmente vá para boot com o dot com e então vá para o ph Getting Started, então eu recomendo que ler

4
00:00:15,490 --> 00:00:22,390
isto seja muito curto e talvez explique como começar com bootstraps Então uma das coisas que temos

5
00:00:22,390 --> 00:00:29,140
que fazer é importar os arquivos de bootstrap Nosso ódio de nossos arquivos então bootstrap a única

6
00:00:29,140 --> 00:00:36,400
coisa que vai enviar é realmente é um arquivo CSSA eo arquivo javascript e eles dão ao nosso

7
00:00:36,400 --> 00:00:39,960
site algum estilo, bem como algum usuário ou interatividade.

8
00:00:41,000 --> 00:00:43,420
Mas realmente é um pouco mais que isso.

9
00:00:44,570 --> 00:00:50,450
Porque com esses arquivos CSSA nesses arquivos javascript, a flexibilidade do poder

10
00:00:50,450 --> 00:00:54,460
que eles nos dão é muito fácil de usar.

11
00:00:54,470 --> 00:01:02,900
Então, como você verá quando começarmos com o bootstrap, você verá que usar o bootstrap é, na verdade,

12
00:01:02,900 --> 00:01:10,430
uma questão de adicionar um ou dois atributos aos objetos, que tornam tudo tão rápido e

13
00:01:10,430 --> 00:01:12,070
fácil de usar.

14
00:01:12,170 --> 00:01:18,950
E, no entanto, porque eles trabalharam nisso por um longo tempo e por causa da maneira como foi construído,

15
00:01:18,950 --> 00:01:19,750
é fácil.

16
00:01:19,790 --> 00:01:21,830
O resultado é muito bom.

17
00:01:22,640 --> 00:01:26,490
Portanto, esta peça é provavelmente construída usando o bootstrap.

18
00:01:26,630 --> 00:01:31,900
E eu ficaria surpreso se não fosse um pouco estranho se a página de bootstrap não

19
00:01:32,240 --> 00:01:35,280
fosse construída com bootstrap, mas, no entanto, parece algo assim.

20
00:01:35,300 --> 00:01:45,860
De qualquer forma, se entrarmos no CSX, veremos uma explicação de como o bootstrap é construído e é móvel primeiro.

21
00:01:45,860 --> 00:01:47,510
Esse é um dos fundamentos.

22
00:01:47,720 --> 00:01:55,760
Então, o que significa que é para funcionar é projetado para funcionar em telefones móveis e, em seguida, é projetado para crescer

23
00:01:55,790 --> 00:02:03,230
bem em um bolso de tipo de área de trabalho para taxa normalizar contêineres e coisas assim que o sistema

24
00:02:03,230 --> 00:02:05,970
de grade é muito importante em Bootstrap.

25
00:02:05,980 --> 00:02:13,220
E o que esse sistema de grade é essencialmente bootstrap é dividido em 12 colunas e

26
00:02:13,220 --> 00:02:18,160
então você pode facilmente decidir o quão amplo são seus elementos.

27
00:02:18,290 --> 00:02:22,380
Então, se esta página foi dividida em 12 colunas, você poderia dizer que uma delas ocupa seis.

28
00:02:22,400 --> 00:02:25,450
O outro ocupa seis e depois aparece lado a lado.

29
00:02:25,580 --> 00:02:28,570
Muito fácil de usar.

30
00:02:28,680 --> 00:02:33,720
E vou explicar tudo ao longo do caminho e depois passar para o componente no topo.

31
00:02:33,770 --> 00:02:38,050
E aqui você pode ver todas as diferentes coisas que o bootstraps lhe dá.

32
00:02:39,210 --> 00:02:44,430
Uma coisa é os ícones de glifos com os pequenos ícones que você pode colocar ao lado de itens

33
00:02:44,430 --> 00:02:46,590
de menu e coisas assim parece muito bonito.

34
00:02:46,890 --> 00:02:54,490
E então todo o estilo para drop downs e para desagrupados você pode fazer coisas como paginação.

35
00:02:54,600 --> 00:03:02,660
Você pode fazer coisas como ter listas suspensas coloridas muito facilmente. Você tem grupos de entrada que são basicamente essas

36
00:03:02,660 --> 00:03:09,320
coisas que ficam bem legais em sua web e dão aos usuários uma visão sobre o que

37
00:03:09,410 --> 00:03:10,540
as coisas são.

38
00:03:10,700 --> 00:03:17,060
Então, por exemplo, se você tem isso, você geralmente sabe imediatamente que eles devem colocar a primeira parte de seu

39
00:03:17,060 --> 00:03:23,450
e-mail aqui, embora esta deva ser a última parte correta da sua, você sabe quando tem coisas como essa que

40
00:03:23,450 --> 00:03:27,290
imediatamente informa ao usuário que ele deve colocar algum tipo de moeda

41
00:03:27,290 --> 00:03:27,830
lá.

42
00:03:27,950 --> 00:03:36,630
Muito útil e muito agradável você tem guias de barra de navegação e todos esses chamados puzzles.

43
00:03:36,650 --> 00:03:41,480
Então você tem muitas coisas no Bootstrap e vamos usar as que precisamos.

44
00:03:41,540 --> 00:03:45,480
E, claro, você deve ler e entender todas as diferentes partes.

45
00:03:45,580 --> 00:03:51,020
Ou pelo menos ter uma idéia de que eles existem para que, quando você criar

46
00:03:51,020 --> 00:03:54,370
seu próprio site, você saiba se algo existe ou não.

47
00:03:54,680 --> 00:04:01,250
De qualquer forma o suficiente de mim balbuciando sobre bootstrap se você não está começando e então você

48
00:04:01,250 --> 00:04:09,080
copia o primeiro para os últimos links e então você entra no Python e os coloca no seu pedaço ou engatou

49
00:04:11,840 --> 00:04:19,730
o seu mental e você quer colocar o seu CFS principal arquivo após o bootstrap porque ele diz que é importante

50
00:04:19,730 --> 00:04:22,330
que seu arquivo venha depois do bootstrap.

51
00:04:22,550 --> 00:04:27,490
OK, para que e também o javascript um.

52
00:04:27,490 --> 00:04:29,240
OK, agora estamos usando coisas boas.

53
00:04:29,650 --> 00:04:32,030
É tão simples assim.

54
00:04:32,160 --> 00:04:39,000
O que significa que entramos em diferentes componentes de bootstrap.

55
00:04:39,040 --> 00:04:49,440
Então, se entrarmos na nossa página e entrarmos no lochan, veremos que isso mudou.

56
00:04:49,500 --> 00:04:55,780
Antes costumava ser assim que os campos eram menores o botão parecia

57
00:04:55,770 --> 00:05:00,360
diferente porque bootstrapping fez não Apple não apenas cromo.

58
00:05:00,370 --> 00:05:02,450
Então é um pouco mais padrão.

59
00:05:02,530 --> 00:05:09,340
E nós podemos fazer melhor, claro, se formos para o log Não pegue seu e-mail aqui, podemos

60
00:05:09,340 --> 00:05:11,870
modificar o formulário para ser totalmente bootstrap.

61
00:05:11,920 --> 00:05:18,800
Então, se entrarmos na página de bootstrap e depois clicarmos no CSX, poderemos ver que os formulários estão aqui.

62
00:05:20,410 --> 00:05:27,250
E isso nos dá um ótimo exemplo de como os formulários são implementados e como você pode

63
00:05:27,250 --> 00:05:28,570
adicionar seus formulários.

64
00:05:29,170 --> 00:05:32,400
Então controles individuais de formulário.

65
00:05:32,430 --> 00:05:36,460
Automaticamente recebeu um estilo global que é o que aconteceu com o nosso.

66
00:05:36,540 --> 00:05:41,730
A nossa é apenas uma forma e realmente vê que é uma forma e depois aplica algum estilo

67
00:05:43,200 --> 00:05:44,160
global a ela.

68
00:05:44,170 --> 00:05:46,900
Textarea Em vez disso, os elementos com controle de forma.

69
00:05:47,190 --> 00:05:53,010
Nem é um ponto final antes de eu definir com 100 por cento por padrão e soltar rótulos em controles no grupo

70
00:05:53,040 --> 00:05:54,730
de formulário de ponto para espaçamento ideal.

71
00:05:54,900 --> 00:05:57,130
OK então o que isso significa.

72
00:05:57,180 --> 00:06:07,470
Isso significa que, se dermos esse atributo à nossa área de texto de entrada ou selecionarmos elementos, eles

73
00:06:07,470 --> 00:06:08,790
ficarão assim.

74
00:06:08,950 --> 00:06:17,160
Haveria 100% de seu contêiner e, em seguida, rótulos como este aparecerão no topo se estiverem na classe do

75
00:06:17,160 --> 00:06:23,510
grupo de formulários, então vamos dar uma olhada na classe de controle de formulário.

76
00:06:23,570 --> 00:06:24,110
Primeiro,

77
00:06:27,620 --> 00:06:28,990
vá ao

78
00:06:33,650 --> 00:06:38,970
seu fórum e encontre o tipo de entrada como aqui.

79
00:06:39,090 --> 00:06:43,270
Então aqui podemos ver que eles têm uma forma que eles poderiam dividir e nós vamos olhar para o que

80
00:06:43,270 --> 00:06:44,100
é isso no momento.

81
00:06:44,230 --> 00:06:51,460
E então, finalmente, eles pegaram seu tipo de entrada e perceberam como a classe é controle de forma para todos eles.

82
00:06:51,500 --> 00:06:53,450
Isso lhes dá algum estilo.

83
00:06:53,450 --> 00:06:59,730
Portanto, se encontrarmos nossas entradas, que são essas duas e, em seguida, digitarmos uma classe igual ao

84
00:07:05,420 --> 00:07:08,190
controle de formulário, voltamos ao nosso site.

85
00:07:08,290 --> 00:07:10,080
Observe que agora eles mudaram substancialmente.

86
00:07:10,080 --> 00:07:14,340
Agora eu não estou dizendo que isso parece melhor porque provavelmente não,

87
00:07:14,340 --> 00:07:20,030
porque ainda precisa de mais algum trabalho, mas agora que tem recursos de bootstrap para ele.

88
00:07:20,070 --> 00:07:21,990
Eles são 100% da largura.

89
00:07:22,050 --> 00:07:24,240
Eles não têm margens.

90
00:07:24,240 --> 00:07:28,520
O botão de envio, no entanto, ainda não está parecendo bootstrap.

91
00:07:28,530 --> 00:07:34,540
Então, para fazer com que pareça bootstrap, precisamos mudá-lo um pouco.

92
00:07:34,650 --> 00:07:36,930
Não precisa ser uma entrada de tipos de MIT.

93
00:07:36,960 --> 00:07:40,500
Tem que ser um botão de tipos no MIT com essas classes aqui.

94
00:07:40,560 --> 00:07:46,690
Então, vou copiar esse código e depois ir aqui e mudar isso.

95
00:07:46,690 --> 00:07:48,240
Agora, se você voltar ao nosso site.

96
00:07:48,340 --> 00:07:50,310
Observe como isso agora parece um pouco diferente.

97
00:07:52,090 --> 00:07:52,390
ESTÁ BEM.

98
00:07:52,420 --> 00:07:55,330
Então, por que eles pareciam assim?

99
00:07:55,340 --> 00:07:57,900
E o nosso parece terrível.

100
00:07:58,330 --> 00:08:03,970
Isso porque eles têm esses grupos de formulários e formam um grupo, essencialmente, é um rótulo e um

101
00:08:03,970 --> 00:08:09,160
tipo de entrada, de modo que o rótulo forneça uma descrição de como a entrada deve conter.

102
00:08:09,160 --> 00:08:12,160
E devemos ter isso em nossa forma de registro.

103
00:08:12,160 --> 00:08:19,360
Então, o que vamos fazer é criar um Dave e um div é essencialmente

104
00:08:19,810 --> 00:08:25,090
uma parte do conteúdo que ocupa todo o espaço de lado.

105
00:08:25,150 --> 00:08:33,190
Então, essencialmente, um div é um bloco que ocupa um espaço total de um lado para o outro e não de cima para baixo.

106
00:08:33,580 --> 00:08:40,780
Portanto, você não pode colocar vários divs um ao lado do outro e normalmente você pode fazer com bootstrap, mas isso é

107
00:08:40,780 --> 00:08:48,340
essencialmente o que um div é a contraparte de um div é chamado de span e span é um elemento inline e não

108
00:08:48,370 --> 00:08:49,660
um elemento block.

109
00:08:49,690 --> 00:08:52,340
Então você pode colocar vários tramos ao lado do outro.

110
00:08:52,480 --> 00:08:57,930
Normalmente Então, se a classe for formada por um grupo, entraremos

111
00:09:02,530 --> 00:09:11,160
em contato e colocaremos após o tipo de entrada e, em seguida, faremos isso novamente pelo outro tempo

112
00:09:11,220 --> 00:09:11,630
parcial

113
00:09:21,330 --> 00:09:22,050
OK.

114
00:09:22,480 --> 00:09:24,810
E se voltarmos ao nosso site, provavelmente não será diferente.

115
00:09:24,820 --> 00:09:29,690
Agora eu tenho algum espaçamento entre os campos, mas é isso.

116
00:09:29,710 --> 00:09:31,090
E finalmente podemos adicionar um rótulo.

117
00:09:31,090 --> 00:09:36,760
Então, vamos voltar aqui e ver como eles fizeram isso é

118
00:09:36,900 --> 00:09:47,000
como eles simplesmente têm um rótulo e, em seguida, o ID do campo e é assim que você faz um

119
00:09:47,000 --> 00:09:56,720
rótulo de etiqueta para e-mail e, em seguida, aqui nós gostaríamos ser dizer e-mail e depois outro para a senha.

120
00:09:56,800 --> 00:10:00,090
Desculpe eu não posso soletrar.

121
00:10:00,330 --> 00:10:07,080
E então nós diríamos que a senha OK voltaria ao nosso site e outros começariam a parecer um pouco melhores.

122
00:10:07,080 --> 00:10:12,190
No entanto, é muito amplo e isso não é uma coisa particularmente útil.

123
00:10:12,330 --> 00:10:18,330
Então, o que fazer agora é agrupar esse conteúdo em outro

124
00:10:23,210 --> 00:10:27,790
Dave Dave para garantir que nosso conteúdo não

125
00:10:31,000 --> 00:10:39,000
ocupe 100% da largura da tela, mas que esteja ocupando apenas uma quantidade específica.

126
00:10:39,860 --> 00:10:42,260
E então nós não faríamos isso, na verdade, nós vemos.

127
00:10:42,720 --> 00:10:49,560
Então, contêiner que já faz com que seja um pouco melhor que haja uma classe de bootstrap.

128
00:10:49,700 --> 00:10:56,210
Se dermos o bootstrap da classe, isso é um pouco melhor, mas não é particularmente ideal, porque

129
00:10:56,210 --> 00:10:59,890
ainda é muito grande, assim como o container, podemos dar

130
00:11:03,120 --> 00:11:10,050
outra classe que pode ser, por exemplo, olhar em forma de página e entrar em nosso CSSA e

131
00:11:10,050 --> 00:11:13,790
fazer algo com este log no formulário da página.

132
00:11:13,840 --> 00:11:22,300
Observe como você tem um ponto final antes do atributo para significar que esta é uma classe

133
00:11:22,300 --> 00:11:26,530
se tiver o símbolo hash porque é um ID.

134
00:11:26,730 --> 00:11:31,770
E então, onde vamos dizer que a largura máxima será de 480 pixels.

135
00:11:31,920 --> 00:11:37,060
Então, se isso é melhor agora, é substancialmente menor e parece um pouco melhor também.

136
00:11:37,090 --> 00:11:44,140
OK, agora temos um formulário de login aqui que parece substancialmente melhor do que o que fizemos antes de implementarmos o bootstrap

137
00:11:44,160 --> 00:11:49,380
e ainda estamos perdendo muitas coisas em nossa página. Estamos perdendo coisas como ter uma barra

138
00:11:49,380 --> 00:11:55,430
de navegação no topo de um rodapé na parte inferior e possivelmente tendo algum tipo de segundo plano para

139
00:11:55,430 --> 00:11:56,050
este formulário.

140
00:11:56,060 --> 00:12:02,240
Mas isso é algo que eventualmente chegaremos em seções futuras, não vamos nos preocupar muito

141
00:12:02,810 --> 00:12:04,200
com isso agora.

142
00:12:04,670 --> 00:12:04,910
ESTÁ BEM.

143
00:12:04,910 --> 00:12:11,780
Então, é assim que faríamos isso, por enquanto, podemos fazer exatamente o mesmo para o formulário de registro.

144
00:12:11,950 --> 00:12:17,600
Então, vou copiar e colar da votação para mudar.

145
00:12:17,610 --> 00:12:19,080
Estou procurando o registro.

146
00:12:20,430 --> 00:12:22,620
E isso é realmente tudo o que temos que mudar.

147
00:12:22,620 --> 00:12:28,340
Observe, entretanto, que o formulário de registro de página kloshe ainda está aqui, embora esta seja a página registrada.

148
00:12:28,490 --> 00:12:35,610
Portanto, provavelmente devemos alterá-lo para o formulário de página, desde o formulário de página zapped e alterar o seu sucesso para o

149
00:12:35,610 --> 00:12:36,760
formulário de página também.

150
00:12:38,370 --> 00:12:43,550
E agora temos o registro parecido com o registro parecendo exatamente o mesmo.

151
00:12:43,590 --> 00:12:45,430
Então isso não é muito ideal.

152
00:12:45,690 --> 00:12:52,130
E eu não acho que podemos alterar o botão de envio, podemos alterar

153
00:12:52,130 --> 00:13:02,920
o login para dizer log no botão de registro para dizer se inscrever e se inscrever na página de logon vai dizer logon.

154
00:13:03,040 --> 00:13:09,310
OK, digamos que queríamos tornar o botão verde para garantir que as pessoas tenham vontade de clicar nele.

155
00:13:09,600 --> 00:13:18,830
Simplesmente vá para o bootstrap e então ache o botão verde que estará aqui nos componentes e realmente será nos

156
00:13:22,080 --> 00:13:25,950
componentes que ele estará aqui embaixo nos botões.

157
00:13:25,970 --> 00:13:26,880
Desculpa.

158
00:13:27,380 --> 00:13:30,330
E aqui estão os diferentes tipos de botão que podemos ter.

159
00:13:30,660 --> 00:13:33,580
Então, o padrão do botão é o que temos.

160
00:13:33,770 --> 00:13:42,130
Nós podemos usar o aviso de informação de sucesso primário ou perigo, então vamos usar poderia.

161
00:13:42,210 --> 00:13:44,720
Então sucesso.

162
00:13:44,880 --> 00:13:49,110
Observe como o nosso espaço entre o espaço entre o padrão dush.

163
00:13:49,110 --> 00:13:53,000
Então esta é uma classe e tem outra classe.

164
00:13:53,250 --> 00:13:56,580
Então, esse tipo de botão tem duas classes diferentes.

165
00:13:56,580 --> 00:13:59,160
Um deles é espancado o outro é beleza e Dashti.

166
00:13:59,250 --> 00:14:03,440
Nós vamos mudar o total para o sucesso da beleza e do traço.

167
00:14:04,620 --> 00:14:07,770
E nós vamos fazer isso em ambos os nossos fóruns.

168
00:14:09,280 --> 00:14:16,270
E então, quando voltamos, podemos ver que isso agora é verde e isso é muito melhor.

169
00:14:16,480 --> 00:14:21,880
Assim, podemos fazer muitas coisas para mover este botão para a direita, podemos adicionar a barra de navegação, podemos adicionar

170
00:14:21,880 --> 00:14:26,680
um valor de espaço reservado a esses campos e há muitas coisas que podemos fazer e encorajo você

171
00:14:26,680 --> 00:14:27,980
a brincar com isso.

172
00:14:28,030 --> 00:14:29,010
Tente essas coisas.

173
00:14:29,200 --> 00:14:34,800
Tente colocar um email de exemplo como uma senha de amostra, já que os espaços reservados tentam mover o botão para a direita.

174
00:14:34,940 --> 00:14:39,130
A barra de navegação realmente simples da Crytek tem o seu log nas suas páginas de registro.

175
00:14:39,550 --> 00:14:41,240
Faça essas coisas usando o bootstrap.

176
00:14:41,500 --> 00:14:46,000
E você descobrirá que vai se familiarizar rapidamente com o modo como o bootstrap funciona com o tipo de coisas

177
00:14:46,000 --> 00:14:47,420
que você pode fazer com ele.

178
00:14:47,440 --> 00:14:51,420
Então vá em frente brincar com isso e depois voltar e vamos continuar.

179
00:14:51,460 --> 00:14:52,520
Então, eu vou te ver no próximo vídeo.