No artigo de hoje, vamos continuar o desenvolvimento de nosso portfólio Web. No último artigo, criamos o Layout da aplicação React. Criando o Layout de uma aplicação Web React. Agora vamos aplicar o design em nossa página utilizando o CSS. Vamos ver como utilizar as classes CSS que o Bootstrap disponibiliza para criar nossa aplicação Web.
Classes Bootstrap
O Bootstrap é um framework bem completo. Ele disponibiliza diversas classes, para implementarmos quase todos os tipos de componentes necessários, na criação de uma UI (User interface). No site do Bootstrap temos a documentação completa das classes e componentes disponíveis.
Como estamos utilizando o React-Bootstrap, que são os componentes Bootstrap escritos em React, podemos consultar a documentação no site do projeto https://react-bootstrap.github.io/. No site da documentação, são apresentados exemplos de uso dos componentes e classes disponíveis.
Agora vou apresentar todas as classes CSS e componentes do Bootstrap que utilizei no projeto, e vou resumir o que cada uma faz. Diferente dos artigos anteriores, neste não vou adicionar pedaços do código, pois o artigo ficaria extenso e um pouco confuso. O código completo da aplicação desenvolvida até agora está disponível no meu GitHub: https://github.com/andersonirias/portifolio.
Sistema de Grid Bootstrap
O sistema de Grid do Bootstrap, é a base para organizarmos o Layout da nossa aplicação Web. Este sistema divide a UI em linhas e colunas. Na raiz temos uma área básica que é um container. Dentro deste container podemos criar linhas e dentro das linhas colunas, para assim organizarmos a posição dos elementos na tela.
A imagem acima demonstra a utilização de grid, onde temos 7 linhas e em cada linha temos diferentes números de colunas. Assim podemos utilizar o grid da maneira que desejarmos, para organizar nossa aplicação.
Container – Este componente aplica os estilos referentes a classe CSS do Bootstrap container. Ele é um componente fundamental na criação de um layout. O container é a base para utilizarmos o sistema de grid do Bootstrap, que nos permite posicionar os elementos da interface.
Row – O componente Row adiciona os estilos da classe row do CSS Bootstrap. Ele nos permite criar linhas para organizarmos a interface com o sistema de grid.
Col – Este componente é referente a classe col do Bootstrap. Com ele criamos as colunas do layout.
Componentes Bootstrap
Além dos componentes do grid, que utilizamos na criação do layout da aplicação Web, também utilizamos outros 4 componentes do React-Bootstrap.
Card – O card é um container de conteúdo flexível. Ele é uma área onde podemos adicionar e organizar conteúdo. Eu utilizo este componente para exibir os textos e imagens na UI.
Button – Este componente é bem básico, ele é um botão mas diferente da tag button do HTML padrão, este já vem com diversas estilizações do Bootstrap.
ListGroup – Com o ListGroup é possível criar uma lista de conteúdo flexível e organizada facilmente.
Image – O componente Image têm a mesma funcionalidade do img padrão do HTML. Mas assim como o button ele já traz diversas estilizações do Bootstrap, uma delas que utilizamos é deixar a imagem já responsiva, ao redimensionamento da tela.
Além de utilizar as classes do React-Bootstrap, como poderão ver no código da aplicação, utilizamos diversas classes adicionais passadas para os componentes com o className. Algumas dessas classes CSS foram criadas por mim, para adicionar algum design único. Mas a maioria delas são classes do próprio Bootstrap.
Conclusão
O Bootstrap é um framework muito útil no desenvolvimento frontend, vale a pena realizar seu estudo para o utilizar bem o que ele tem de melhor. Recomendo a leitura da documentação do Bootstrap, e para quem está iniciando no CSS o site: W3Schools onde é possível estudar CSS do iniciante ao avançado.
Nossa aplicação está ficando com a seguinte aparência.
Resolvi alterar o tema para um jogo de guerra espacial, pois combinou melhor com o avatar que criei.
Os ícones que utilizei, consegui no site: https://www.flaticon.com/. Já o avatar eu criei com o aplicativo: https://play.google.com/store/apps/details?id=com.bitstrips.imoji.
No próximo artigo, vamos continuar a criação do nosso portfólio que já está na reta final. O projeto está disponível em meu GitHub: https://github.com/andersonirias/portifolio