1
00:00:03,800 --> 00:00:07,660
Continuaremos com o exercício de grade bootstrap

2
00:00:07,660 --> 00:00:11,074
que começamos no exercício anterior.

3
00:00:11,074 --> 00:00:14,535
Vamos fazer mais algumas coisas

4
00:00:14,535 --> 00:00:18,965
na nossa página index.html para melhorar seu layout.

5
00:00:18,965 --> 00:00:24,085
Vamos usar algumas classes CSS personalizadas e adicionar alguma cor

6
00:00:24,085 --> 00:00:30,535
à nossa página index.html usando classes CSS personalizadas.

7
00:00:30,535 --> 00:00:39,265
A próxima coisa que eu vou fazer é ir até o rodapé e para este UL aqui,

8
00:00:39,265 --> 00:00:42,790
você vai notar que esta lista quando você olhar para a

9
00:00:42,790 --> 00:00:49,705
nossa página web é exibida na página web usando esta lista com marcadores aqui.

10
00:00:49,705 --> 00:00:52,820
Eu não estou muito feliz com esta lista com marcadores,

11
00:00:52,820 --> 00:00:59,350
Eu quero remover esses marcadores e, em seguida, simplesmente mostrá-los como apenas os links lá.

12
00:00:59,350 --> 00:01:03,440
Então, para fazer isso, eu vou usar outro estilo de lista chamado como

13
00:01:03,440 --> 00:01:08,120
lista- unstyled e aplicar isso a essa tag UL lá.

14
00:01:08,120 --> 00:01:09,950
Voltando para nossa página web,

15
00:01:09,950 --> 00:01:12,425
para esta tag UL no rodapé,

16
00:01:12,425 --> 00:01:21,520
eu vou aplicar a classe como list-unstyled,

17
00:01:23,230 --> 00:01:32,275
e isso removeria essas balas na frente desses links lá.

18
00:01:32,275 --> 00:01:40,375
Agora, deixe-me adicionar algumas classes CSS personalizadas para a página index.html.

19
00:01:40,375 --> 00:01:49,635
Para fazer isso, vamos agora criar uma pasta aqui e nomeá-lo como a pasta CSS aqui.

20
00:01:49,635 --> 00:01:51,650
Dentro da pasta CSS,

21
00:01:51,650 --> 00:01:59,670
vou criar um novo arquivo e nomear o arquivo como styles.css.

22
00:01:59,670 --> 00:02:02,835
Agora, dentro do arquivo styles.css,

23
00:02:02,835 --> 00:02:11,685
agora posso adicionar algumas classes CSS para estilizar nossa página.

24
00:02:11,685 --> 00:02:14,600
Deixe-me adicionar algumas classes CSS aqui.

25
00:02:14,600 --> 00:02:18,765
Então, eu adicionaria minha primeira classe como cabeçalho de linha.

26
00:02:18,765 --> 00:02:21,035
Então, como o nome indica,

27
00:02:21,035 --> 00:02:23,770
esta classe eu estou aplicando ao cabeçalho.

28
00:02:23,770 --> 00:02:28,865
E então, eu aplicaria a margem como

29
00:02:28,865 --> 00:02:34,330
zero pixel auto e

30
00:02:34,330 --> 00:02:40,150
, em seguida, preenchimento como zero pixel auto.

31
00:02:40,150 --> 00:02:41,820
Então, isso é para o cabeçalho da linha.

32
00:02:41,820 --> 00:02:46,100
Então, eu vou ter margem zero e preenchimento zero para o cabeçalho da linha.

33
00:02:46,100 --> 00:02:48,840
E, em seguida, para o conteúdo da linha,

34
00:02:48,840 --> 00:02:54,005
então eu vou adicionar mais uma classe CSS chamada linha-conteúdo.

35
00:02:54,005 --> 00:03:01,470
E, em seguida, para isso, vou adicionar margem zero pixel auto,

36
00:03:01,470 --> 00:03:07,815
e, em seguida, preenchimento tê-lo em 50 pixels,

37
00:03:07,815 --> 00:03:16,170
zero pixel, 50 e zero pixel.

38
00:03:16,170 --> 00:03:21,060
Então eu vou adicionar uma borda na

39
00:03:21,060 --> 00:03:28,880
parte inferior da minha linha aqui.

40
00:03:28,880 --> 00:03:35,195
E então, a borda eu vou dar-lhe um pixel e, em seguida, chamá-lo de um cume.

41
00:03:35,195 --> 00:03:45,915
E eu vou definir a altura mínima para 400 pixels para o conteúdo aqui.

42
00:03:45,915 --> 00:03:51,910
Dessa forma, minha página da web ficará mais bonita na tela.

43
00:03:51,910 --> 00:03:55,475
Agora, isso novamente, você tem que tentar e

44
00:03:55,475 --> 00:03:59,900
ver até que você esteja satisfeito com a forma como a página está disposta.

45
00:03:59,900 --> 00:04:03,560
Agora também, eu vou incluir

46
00:04:03,560 --> 00:04:08,320
mais uma classe chamada como rodapé que como você já deve ter adivinhado,

47
00:04:08,320 --> 00:04:13,560
eu vou aplicar ao rodapé e eu

48
00:04:13,560 --> 00:04:21,100
vou aplicar uma cor de fundo para o rodapé como D1C4E9.

49
00:04:29,140 --> 00:04:32,465
Se você me perguntar como eu selecionei a cor,

50
00:04:32,465 --> 00:04:37,630
eu apenas olhei para cima a cor e então eu estava feliz com essa cor.

51
00:04:37,630 --> 00:04:41,460
Você pode escolher qualquer cor que você quiser aplicar,

52
00:04:41,460 --> 00:04:44,460
mas essa cor parece ser boa para mim.

53
00:04:44,460 --> 00:04:46,950
Então, eu adicionei essa cor.

54
00:04:46,950 --> 00:04:50,110
E para o preenchimento, para o rodapé,

55
00:04:50,110 --> 00:04:58,890
eu adicionaria 20 pixels e zero pixels.

56
00:04:59,100 --> 00:05:06,160
Agora, uma vez que eu adicionei esses estilos ao meu arquivo CSS,

57
00:05:06,160 --> 00:05:10,610
deixe-me aplicar o arquivo CSS à página index.html.

58
00:05:10,610 --> 00:05:12,820
Vou para a página index.html.

59
00:05:12,820 --> 00:05:18,950
Obviamente, eu preciso usar esse arquivo CSS dentro da minha página index.html.

60
00:05:18,950 --> 00:05:22,160
Então, logo após o arquivo CSS bootstrap,

61
00:05:22,160 --> 00:05:32,200
eu vou fazer um link e folha de estilo,

62
00:05:32,970 --> 00:05:39,900
e este é o arquivo style.css lá.

63
00:05:39,900 --> 00:05:43,525
Então é aí que meu arquivo CSS é armazenado.

64
00:05:43,525 --> 00:05:49,760
Então, eu vou incluir isso na minha página index.html.

65
00:05:49,760 --> 00:05:56,350
Agora, vou entrar no corpo e aplicar as classes que acabei de criar.

66
00:05:56,350 --> 00:05:57,955
Então, indo para o cabeçalho,

67
00:05:57,955 --> 00:06:03,055
vou aplicar a classe de cabeçalho de linha para a div no cabeçalho.

68
00:06:03,055 --> 00:06:07,475
Em seguida, para o conteúdo,

69
00:06:07,475 --> 00:06:14,085
eu aplicaria as classes de conteúdo de linha para as linhas lá.

70
00:06:14,085 --> 00:06:21,180
Então, para as três linhas no conteúdo,

71
00:06:21,190 --> 00:06:26,690
aplico a classe de conteúdo de linha e, em seguida, descendo para o rodapé,

72
00:06:26,690 --> 00:06:28,325
para a tag de rodapé,

73
00:06:28,325 --> 00:06:32,315
aplicarei o rodapé da classe aqui

74
00:06:32,315 --> 00:06:35,240
e, em seguida, salvo as alterações.

75
00:06:35,240 --> 00:06:38,290
Vamos dar uma olhada nessa página agora.

76
00:06:38,290 --> 00:06:40,430
Indo para a sua página web,

77
00:06:40,430 --> 00:06:45,970
já estamos começando a ver algumas mudanças interessantes na página da web.

78
00:06:45,970 --> 00:06:48,960
Então, agora você pode ver que o conteúdo na

79
00:06:48,960 --> 00:06:52,445
página da web foi colocado para fora um pouco mais limpo.

80
00:06:52,445 --> 00:06:58,290
Essa é a borda inferior que adicionamos ao conteúdo da linha,

81
00:06:58,290 --> 00:07:03,200
então você pode ver que há separação suficiente entre as linhas, embora

82
00:07:03,200 --> 00:07:08,530
o conteúdo das linhas ainda esteja posicionado em direção ao topo das linhas,

83
00:07:08,530 --> 00:07:11,900
então você tem essas três linhas e, em seguida, olhar para o rodapé,

84
00:07:11,900 --> 00:07:17,740
o rodapé agora tem adquiriu a cor de fundo que eu apliquei,

85
00:07:17,740 --> 00:07:26,717
e observe como os links são estilizados com a lista sem estilo no lado esquerdo aqui.

86
00:07:26,717 --> 00:07:33,495
Ainda não terminamos, temos que fazer mais algumas mudanças na página index.html,

87
00:07:33,495 --> 00:07:39,320
e depois voltar e dar uma olhada no resultado final deste exercício.

88
00:07:39,320 --> 00:07:41,485
Voltando ao seu Editor,

89
00:07:41,485 --> 00:07:46,955
eu vou adicionar mais algumas classes CSS na minha estrutura de estilo,

90
00:07:46,955 --> 00:07:53,290
é um arquivo, então eu vou entrar lá e, em seguida, adicionar uma classe chamada Jumbotron.

91
00:07:53,290 --> 00:07:59,265
Então, você verá que já aplicamos o Jumbotron ao nosso cabeçalho lá.

92
00:07:59,265 --> 00:08:03,145
Agora, se eu adicionar mais propriedades a esta classe Jumbotron aqui,

93
00:08:03,145 --> 00:08:05,875
isso será aplicado ao Jumbotron,

94
00:08:05,875 --> 00:08:11,535
além do padrão padrão Jumbotron que bootstrap já inclui.

95
00:08:11,535 --> 00:08:13,835
Eu vou adicionar mais algumas coisas,

96
00:08:13,835 --> 00:08:17,355
eu vou adicionar em um preenchimento de

97
00:08:17,735 --> 00:08:28,765
70 e 30 pixels em seus arredores,

98
00:08:29,095 --> 00:08:38,515
e então uma margem de zero pixel ao redor,

99
00:08:38,515 --> 00:08:51,685
e eu vou definir o fundo deste para 9575CD.

100
00:08:51,685 --> 00:09:01,065
Este é um pouco de uma cor roxa mais escura que parece ir muito bem no Jumbotron.

101
00:09:01,065 --> 00:09:03,430
Novamente, por tentativa e erro,

102
00:09:03,430 --> 00:09:04,975
selecionei essa cor,

103
00:09:04,975 --> 00:09:11,735
e também a cor do texto como branco floral.

104
00:09:13,205 --> 00:09:15,305
Então, para o Jumbotron,

105
00:09:15,305 --> 00:09:18,615
nós vamos aplicar essas classes, e também,

106
00:09:18,615 --> 00:09:24,765
eu vou aplicar mais uma classe para a classe de endereço.

107
00:09:24,765 --> 00:09:26,520
Nós temos um endereço no rodapé,

108
00:09:26,520 --> 00:09:34,685
então eu vou mudar o tamanho da fonte para 80 por cento,

109
00:09:34,685 --> 00:09:38,935
uma fonte ligeiramente menor que a fonte normal,

110
00:09:38,955 --> 00:09:43,455
e a margem, eu vou dar-lhe um pixel zero,

111
00:09:43,455 --> 00:09:50,285
e a cor, eu vou usar zero F, zero F,

112
00:09:50,285 --> 00:09:52,350
zero F, zero F,

113
00:09:52,350 --> 00:09:54,730
e então salvar as alterações.

114
00:09:54,730 --> 00:09:58,730
Então, mais algumas classes CSS adicionadas,

115
00:09:58,730 --> 00:10:01,530
alternando de volta para index.html.

116
00:10:01,530 --> 00:10:03,475
O que eu vou fazer agora,

117
00:10:03,475 --> 00:10:07,775
é ir para as linhas de conteúdo e então

118
00:10:07,775 --> 00:10:11,990
eu vou tentar posicionar este conteúdo no meio,

119
00:10:11,990 --> 00:10:14,605
verticalmente nessa linha.

120
00:10:14,605 --> 00:10:17,930
Este é o lugar onde eu vou pegar a ajuda

121
00:10:17,930 --> 00:10:23,050
do alinhamento vertical que grade bootstrap suporta através do suporte Flexbox.

122
00:10:23,050 --> 00:10:31,395
Para fazer isso, eu diria alinhar-items-center,

123
00:10:31,495 --> 00:10:38,620
então esta é a outra classe que eu preciso adicionar, align-items-center.

124
00:10:38,620 --> 00:10:45,475
E eu vou adicionar isso para as duas linhas restantes também,

125
00:10:45,475 --> 00:10:51,735
alinhar-items-centro para a segunda e a terceira linha,

126
00:10:53,185 --> 00:11:01,965
e isso deve fazer uma justificação vertical do conteúdo das linhas.

127
00:11:01,965 --> 00:11:03,880
Veremos o resultado em um minuto.

128
00:11:03,880 --> 00:11:06,230
Indo para o rodapé.

129
00:11:06,230 --> 00:11:09,835
No rodapé, você vê que usamos

130
00:11:09,835 --> 00:11:13,825
a coluna auto para este conteúdo de direitos autorais lá.

131
00:11:13,825 --> 00:11:18,265
Agora, eu vou posicionar isso bem no meio horizontalmente

132
00:11:18,265 --> 00:11:24,160
usando essa classe justify-content-center,

133
00:11:24,160 --> 00:11:32,755
então há um conteúdo justify e algumas outras classes lá.

134
00:11:32,755 --> 00:11:35,890
Vou usar para justificar a aula de centro de conteúdo para isso.

135
00:11:35,890 --> 00:11:44,605
Isso irá essencialmente posicionar essa coluna no centro da linha lá.

136
00:11:44,725 --> 00:11:48,560
Isso se aplica a isso, e então,

137
00:11:48,560 --> 00:11:51,415
uma pequena mudança que eu vou fazer,

138
00:11:51,415 --> 00:11:53,370
é para essa div interna lá,

139
00:11:53,370 --> 00:12:01,665
eu vou aplicar uma classe como centro de texto para isso, de

140
00:12:01,665 --> 00:12:06,435
modo que esses links sejam centrados na tela.

141
00:12:06,435 --> 00:12:11,340
Com essas mudanças, vamos dar uma olhada na página web,

142
00:12:11,340 --> 00:12:14,135
no final deste exercício.

143
00:12:14,135 --> 00:12:16,120
Indo para nossa página web,

144
00:12:16,120 --> 00:12:20,020
nossa página web já está começando a parecer ainda melhor agora,

145
00:12:20,020 --> 00:12:25,885
então você pode agora ver que o Jumbotron está agora estilizado com uma nova cor de fundo,

146
00:12:25,885 --> 00:12:28,955
que é um pouco roxo escuro lá,

147
00:12:28,955 --> 00:12:34,980
e as letras estão agora em cor branca floral,

148
00:12:34,980 --> 00:12:37,190
um pouco recuada lá,

149
00:12:37,190 --> 00:12:44,345
então agora você pode ver que o conteúdo nas linhas de conteúdo agora está centralizado verticalmente,

150
00:12:44,345 --> 00:12:47,500
para as três linhas de conteúdo.

151
00:12:47,500 --> 00:12:54,645
Este é o uso do centro de itens de alinhamento que aplicamos às linhas lá.

152
00:12:54,645 --> 00:12:56,525
Em seguida, indo para o rodapé,

153
00:12:56,525 --> 00:13:03,380
agora você pode ver que este copyright agora é justificado para o centro da tela.

154
00:13:03,380 --> 00:13:08,155
Veja como os links aqui foram centrados.

155
00:13:08,155 --> 00:13:15,985
Eu percebi que eu também quero posicionar essa centralização vertical para essa linha particular,

156
00:13:15,985 --> 00:13:19,855
então vamos aplicar mais uma classe para mover isso para

157
00:13:19,855 --> 00:13:24,540
o centro dessa linha específica verticalmente.

158
00:13:24,540 --> 00:13:27,100
Então, para fazer isso, voltando para o índice.

159
00:13:27,100 --> 00:13:34,115
html, no rodapé para essa coluna particular que contém aqueles,

160
00:13:34,115 --> 00:13:41,795
eu aplicarei a classe como alinhamento auto-centro.

161
00:13:41,795 --> 00:13:48,485
Isto deve ser aplicado à div que usa a classe de coluna.

162
00:13:48,485 --> 00:13:54,185
Com isso, esse conteúdo específico será alinhado ao centro da linha.

163
00:13:54,185 --> 00:13:56,570
O conteúdo restante ainda permanecerá na parte superior.

164
00:13:56,570 --> 00:13:59,575
Vamos dar uma última olhada no rodapé.

165
00:13:59,575 --> 00:14:01,705
Indo para o rodapé em nossa página web,

166
00:14:01,705 --> 00:14:06,345
agora você pode ver como isso foi posicionado verticalmente no centro.

167
00:14:06,345 --> 00:14:10,715
Estes dois pedaços de conteúdo ainda estão alinhados para o topo da linha,

168
00:14:10,715 --> 00:14:15,215
isso é bom porque isso parece bem lá dentro,

169
00:14:15,215 --> 00:14:21,340
mas este eu tenho arrastado para baixo verticalmente para o centro desta linha particular.

170
00:14:21,340 --> 00:14:25,545
Com isso, completamos este exercício.

171
00:14:25,545 --> 00:14:30,005
Neste exercício, vimos o uso de classes CSS personalizadas,

172
00:14:30,005 --> 00:14:35,125
e também usamos algumas das classes para

173
00:14:35,125 --> 00:14:41,660
justificar o conteúdo horizontal e verticalmente em nossas linhas.

174
00:14:41,660 --> 00:14:45,695
Este é um bom momento para você fazer um bom comentário com a mensagem,

175
00:14:45,695 --> 00:14:48,735
grade Bootstrap, parte dois.