Esse projeto foi criado no intuito de complementar o treinamento de Bootstrap, criei um css com algumas classes úteis, afim de manter vocês mais focados possível na aplicação prática do Bootstrap.
Colocando em prática as funcionalidades da grid, responsividade e qualquer outra coisa que julgarem interessante utilizar.
Abaixo segue a lista de classes que criei para ajudá-los:
.bg-azul /* background azul da pagina sobre */
.bg-cinza /* background cinza do topo e rodape */
.bg-amarelo /* background amarelo da pagina sobre */
.txt-azul /* texto azul dos titulos */
.txt-branco /* texto branco */Algumas coisas já foram padronizadas como a cor de background da página, cor do texto, tamanho e familia de fonte.
Para utilizar os ícones basta colocar a seguinte tag:
<i class=""></i>E acrescentar a classe do ícone que desejar:
.icon-circle /* bolinhas de navegacao da galeria */
.icon-apple /* ícone apple store */
.icon-google-play /* icone google play */
.icon-envelope /* icone envelope do menu */
.icon-mobile /* icone games do menu */
.icon-info /* icone interrogacao do menu */
.icon-facebook /* icone facebook */
.icon-twitter /* icone twitter */
.icon-linkedin /* icone linkedin */Com essas classes e elementos acima, você conseguirá fazer bastante coisa sem quase nenhuma intervenção em arquivos css.
Para ajudar ainda mais, abaixo uma lista com algumas classes do Bootstrap que serão também úteis.
.container /* container fixo */
.row /* definir linhas, usado para correção de flutuacoes */
/* largura das colunas */
.col-xs-x
.col-sm-x
.col-md-x
.col-lg-x
/* deslocamento das colunas */
.col-xs-offset-x
.col-sm-offset-x
.col-md-offset-x
.col-lg-offset-x
/* flutuacao do objeto */
.pull-left
.pull-right
/* alinhamento de texto */
.text-left
.text-center
.text-right
.text-lowercase /* transformando otexto em caixa baixa */
.text-uppercase /* transformando o texto em caixa alta */
.list-inline /* alterando a exibição da lista para em linha */
.img-responsive /* aplicando responsividade a imagem */
.img-circle /* transformando imagem em circulo */Você pode verificar a aplicação de algumas dessas classes no modelo de arquivo que montei https://github.com/brunoramalho/treinamento-bootstrap/blob/master/modelo.html.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent