Continuaremos com o exercício de grade bootstrap
que começamos no exercício anterior.
Vamos fazer mais algumas coisas
na nossa página index.html para melhorar seu layout.
Vamos usar algumas classes CSS personalizadas e adicionar alguma cor
à nossa página index.html usando classes CSS personalizadas.
A próxima coisa que eu vou fazer é ir até o rodapé e para este UL aqui,
você vai notar que esta lista quando você olhar para a
nossa página web é exibida na página web usando esta lista com marcadores aqui.
Eu não estou muito feliz com esta lista com marcadores,
Eu quero remover esses marcadores e, em seguida, simplesmente mostrá-los como apenas os links lá.
Então, para fazer isso, eu vou usar outro estilo de lista chamado como
lista- unstyled e aplicar isso a essa tag UL lá.
Voltando para nossa página web,
para esta tag UL no rodapé,
eu vou aplicar a classe como list-unstyled,
e isso removeria essas balas na frente desses links lá.
Agora, deixe-me adicionar algumas classes CSS personalizadas para a página index.html.
Para fazer isso, vamos agora criar uma pasta aqui e nomeá-lo como a pasta CSS aqui.
Dentro da pasta CSS,
vou criar um novo arquivo e nomear o arquivo como styles.css.
Agora, dentro do arquivo styles.css,
agora posso adicionar algumas classes CSS para estilizar nossa página.
Deixe-me adicionar algumas classes CSS aqui.
Então, eu adicionaria minha primeira classe como cabeçalho de linha.
Então, como o nome indica,
esta classe eu estou aplicando ao cabeçalho.
E então, eu aplicaria a margem como
zero pixel auto e
, em seguida, preenchimento como zero pixel auto.
Então, isso é para o cabeçalho da linha.
Então, eu vou ter margem zero e preenchimento zero para o cabeçalho da linha.
E, em seguida, para o conteúdo da linha,
então eu vou adicionar mais uma classe CSS chamada linha-conteúdo.
E, em seguida, para isso, vou adicionar margem zero pixel auto,
e, em seguida, preenchimento tê-lo em 50 pixels,
zero pixel, 50 e zero pixel.
Então eu vou adicionar uma borda na
parte inferior da minha linha aqui.
E então, a borda eu vou dar-lhe um pixel e, em seguida, chamá-lo de um cume.
E eu vou definir a altura mínima para 400 pixels para o conteúdo aqui.
Dessa forma, minha página da web ficará mais bonita na tela.
Agora, isso novamente, você tem que tentar e
ver até que você esteja satisfeito com a forma como a página está disposta.
Agora também, eu vou incluir
mais uma classe chamada como rodapé que como você já deve ter adivinhado,
eu vou aplicar ao rodapé e eu
vou aplicar uma cor de fundo para o rodapé como D1C4E9.
Se você me perguntar como eu selecionei a cor,
eu apenas olhei para cima a cor e então eu estava feliz com essa cor.
Você pode escolher qualquer cor que você quiser aplicar,
mas essa cor parece ser boa para mim.
Então, eu adicionei essa cor.
E para o preenchimento, para o rodapé,
eu adicionaria 20 pixels e zero pixels.
Agora, uma vez que eu adicionei esses estilos ao meu arquivo CSS,
deixe-me aplicar o arquivo CSS à página index.html.
Vou para a página index.html.
Obviamente, eu preciso usar esse arquivo CSS dentro da minha página index.html.
Então, logo após o arquivo CSS bootstrap,
eu vou fazer um link e folha de estilo,
e este é o arquivo style.css lá.
Então é aí que meu arquivo CSS é armazenado.
Então, eu vou incluir isso na minha página index.html.
Agora, vou entrar no corpo e aplicar as classes que acabei de criar.
Então, indo para o cabeçalho,
vou aplicar a classe de cabeçalho de linha para a div no cabeçalho.
Em seguida, para o conteúdo,
eu aplicaria as classes de conteúdo de linha para as linhas lá.
Então, para as três linhas no conteúdo,
aplico a classe de conteúdo de linha e, em seguida, descendo para o rodapé,
para a tag de rodapé,
aplicarei o rodapé da classe aqui
e, em seguida, salvo as alterações.
Vamos dar uma olhada nessa página agora.
Indo para a sua página web,
já estamos começando a ver algumas mudanças interessantes na página da web.
Então, agora você pode ver que o conteúdo na
página da web foi colocado para fora um pouco mais limpo.
Essa é a borda inferior que adicionamos ao conteúdo da linha,
então você pode ver que há separação suficiente entre as linhas, embora
o conteúdo das linhas ainda esteja posicionado em direção ao topo das linhas,
então você tem essas três linhas e, em seguida, olhar para o rodapé,
o rodapé agora tem adquiriu a cor de fundo que eu apliquei,
e observe como os links são estilizados com a lista sem estilo no lado esquerdo aqui.
Ainda não terminamos, temos que fazer mais algumas mudanças na página index.html,
e depois voltar e dar uma olhada no resultado final deste exercício.
Voltando ao seu Editor,
eu vou adicionar mais algumas classes CSS na minha estrutura de estilo,
é um arquivo, então eu vou entrar lá e, em seguida, adicionar uma classe chamada Jumbotron.
Então, você verá que já aplicamos o Jumbotron ao nosso cabeçalho lá.
Agora, se eu adicionar mais propriedades a esta classe Jumbotron aqui,
isso será aplicado ao Jumbotron,
além do padrão padrão Jumbotron que bootstrap já inclui.
Eu vou adicionar mais algumas coisas,
eu vou adicionar em um preenchimento de
70 e 30 pixels em seus arredores,
e então uma margem de zero pixel ao redor,
e eu vou definir o fundo deste para 9575CD.
Este é um pouco de uma cor roxa mais escura que parece ir muito bem no Jumbotron.
Novamente, por tentativa e erro,
selecionei essa cor,
e também a cor do texto como branco floral.
Então, para o Jumbotron,
nós vamos aplicar essas classes, e também,
eu vou aplicar mais uma classe para a classe de endereço.
Nós temos um endereço no rodapé,
então eu vou mudar o tamanho da fonte para 80 por cento,
uma fonte ligeiramente menor que a fonte normal,
e a margem, eu vou dar-lhe um pixel zero,
e a cor, eu vou usar zero F, zero F,
zero F, zero F,
e então salvar as alterações.
Então, mais algumas classes CSS adicionadas,
alternando de volta para index.html.
O que eu vou fazer agora,
é ir para as linhas de conteúdo e então
eu vou tentar posicionar este conteúdo no meio,
verticalmente nessa linha.
Este é o lugar onde eu vou pegar a ajuda
do alinhamento vertical que grade bootstrap suporta através do suporte Flexbox.
Para fazer isso, eu diria alinhar-items-center,
então esta é a outra classe que eu preciso adicionar, align-items-center.
E eu vou adicionar isso para as duas linhas restantes também,
alinhar-items-centro para a segunda e a terceira linha,
e isso deve fazer uma justificação vertical do conteúdo das linhas.
Veremos o resultado em um minuto.
Indo para o rodapé.
No rodapé, você vê que usamos
a coluna auto para este conteúdo de direitos autorais lá.
Agora, eu vou posicionar isso bem no meio horizontalmente
usando essa classe justify-content-center,
então há um conteúdo justify e algumas outras classes lá.
Vou usar para justificar a aula de centro de conteúdo para isso.
Isso irá essencialmente posicionar essa coluna no centro da linha lá.
Isso se aplica a isso, e então,
uma pequena mudança que eu vou fazer,
é para essa div interna lá,
eu vou aplicar uma classe como centro de texto para isso, de
modo que esses links sejam centrados na tela.
Com essas mudanças, vamos dar uma olhada na página web,
no final deste exercício.
Indo para nossa página web,
nossa página web já está começando a parecer ainda melhor agora,
então você pode agora ver que o Jumbotron está agora estilizado com uma nova cor de fundo,
que é um pouco roxo escuro lá,
e as letras estão agora em cor branca floral,
um pouco recuada lá,
então agora você pode ver que o conteúdo nas linhas de conteúdo agora está centralizado verticalmente,
para as três linhas de conteúdo.
Este é o uso do centro de itens de alinhamento que aplicamos às linhas lá.
Em seguida, indo para o rodapé,
agora você pode ver que este copyright agora é justificado para o centro da tela.
Veja como os links aqui foram centrados.
Eu percebi que eu também quero posicionar essa centralização vertical para essa linha particular,
então vamos aplicar mais uma classe para mover isso para
o centro dessa linha específica verticalmente.
Então, para fazer isso, voltando para o índice.
html, no rodapé para essa coluna particular que contém aqueles,
eu aplicarei a classe como alinhamento auto-centro.
Isto deve ser aplicado à div que usa a classe de coluna.
Com isso, esse conteúdo específico será alinhado ao centro da linha.
O conteúdo restante ainda permanecerá na parte superior.
Vamos dar uma última olhada no rodapé.
Indo para o rodapé em nossa página web,
agora você pode ver como isso foi posicionado verticalmente no centro.
Estes dois pedaços de conteúdo ainda estão alinhados para o topo da linha,
isso é bom porque isso parece bem lá dentro,
mas este eu tenho arrastado para baixo verticalmente para o centro desta linha particular.
Com isso, completamos este exercício.
Neste exercício, vimos o uso de classes CSS personalizadas,
e também usamos algumas das classes para
justificar o conteúdo horizontal e verticalmente em nossas linhas.
Este é um bom momento para você fazer um bom comentário com a mensagem,
grade Bootstrap, parte dois.