Como usar o CSS básico no Bootstrap

Uma das coisas mais complexas quando se trata de trabalhar com web design é superar as diferenças sutis entre os navegadores, embora, em teoria, cada navegador deva cumprir os padrões e, na maioria dos casos, existem pequenas diferenças muito sutis que podem fazer nosso projeto é difícil de implementar.

Antes da existência de Bootstrap um arquivo chamado reset.cssNisso, o que foi feito foi que todos os valores dos elementos básicos e chave, como preenchimentos, margens, a fonte padrão, etc. fossem definidos explicitamente. Com isso, evitamos que o navegador fizesse o que queria ao definir os elementos que não havíamos modificado em nossos estilos personalizados.

Na atualidade Bootstrap cuida desses detalhes para nós, isso é feito com um arquivo chamado bootstrap.css que é popularmente conhecido como arquivo base.

RequisitosPara poder executar os exemplos e exercícios deste tutorial, devemos ter um projeto com o Bootstrap já baixou, ou na falta disso, uma conexão com a Internet para poder usar as bibliotecas diretamente de seu CDN. Precisamos de um navegador moderno como cromada ou Raposa de fogo em suas versões mais recentes e, finalmente, precisamos de um editor de texto como Texto Sublime ou NotePad ++ para criar o conteúdo HTML de uma forma mais amigável, embora se desejarmos gedit ou notepad sirva para nossos propósitos.

Cabeçalhos
Uma das coisas que mais chamam a atenção em um site são os títulos e subtítulos dos conteúdos, claro que essa é a função desses elementos, o CSS base do Bootstrap tem uma maneira interessante de lidar com isso, primeiro de tudo ele tem alguns tamanhos e uma fonte definida para o elemento h em qualquer uma de suas numerações variando de 1 a 6, mas também possui classes que correspondem a cada elemento, para que possamos aplicar esses mesmos estilos a um div ou ainda período.

Outra coisa interessante é que podemos usar o elemento pequeno diminuir o tamanho de uma seção do título, mas mantendo a proporção em relação ao elemento ou ao elemento que utiliza a classe correspondente.

Com isso, simplesmente, quando temos vários navegadores, a homogeneidade do nosso design é mantida, para que os títulos não precisem ser diferentes, por exemplo, em Safári para Raposa de fogo, quando sabemos que ambos os navegadores funcionam com fontes diferentes por padrão.

Colocando em prática o que você aprendeu
Vamos criar uma pequena página onde vamos fazer uma lista de títulos, vamos colocar as duas vertentes uma sobre a outra para que possamos ver como as diferenças já não existem graças ao arquivo base de Bootstrap. Vamos examinar o código primeiro e, em seguida, ver como ele se parece em nosso navegador.

 Usando o arquivo Bootstrap básicoEste é um div com classe H1, a fonte pequena
Este é um título H4 em fonte pequena
Este é um div com classe H4, a fonte pequena

Aqui vemos como fizemos dentro do corpo os diferentes elementos que vamos usar como títulos, além disso mostramos como funciona o elemento para que possamos combiná-lo com os títulos para obter efeitos muito interessantes. Também incluímos um estilo adicional para adicionar alguns recheios adicional para que possamos ter um resultado como o que veremos na imagem a seguir:

PROLONGAR

Parágrafos
Depois de captar a atenção de um leitor ou usuário com os títulos de nosso aplicativo, geralmente precisamos de algum conteúdo que possa ser consumido, normalmente é um texto que colocamos em um parágrafo embora também possa ser uma imagem, áudio ou vídeo.

Voltando ao parágrafo, já o elemento

traz um estilo pré-definido pelo CSS base, porém esta base também nos oferece um tipo especial de parágrafo que se chama liderar, ao adicionar esta classe a um parágrafo iremos imediatamente destacá-la das demais semelhantes, pois seu tamanho é aumentado e algumas propriedades das fontes são modificadas.

Vamos ver no código a seguir como isso funciona que acabamos de explicar, neste exemplo vamos criar dois parágrafos onde o primeiro terá a classe liderar, desta forma veremos como vai se destacar, é claro que tudo isso funciona se tivermos Bootstrap em nosso projeto, vamos ver nosso código:

 Usando o arquivo Bootstrap básico
Bacon ipsum pain amet em laboris magna ullamco, em coxa de dor boudin eiusmod andouille leberkas exercício ventre de porco ex. Costelas de boi magna corned beef incididunt id. Kevin alcança o traseiro no rabo. Filé mignon de peru quis, filé de veado ullamco jerky lombo de porco não voluptuoso.

Bacon ipsum pain amet em laboris magna ullamco, em coxa de dor boudin eiusmod andouille leberkas exercício ventre de porco ex. Costelas de carne de boi magna corned beef incididunt id. Kevin alcança o traseiro no rabo. Filé mignon de peru quis, filé de veado ullamco jerky lombo de porco não voluptuoso.

Vamos executar nosso exemplo e ver como fica em nosso navegador:

PROLONGAR

Alinha o texto
Uma das coisas que também é muito importante é o alinhamento do texto, já que às vezes precisamos que nosso texto seja justificado, alinhado à direita, ao centro, ou forçosamente à esquerda, embora existam equivalentes em CSS tendo uma aula para isso nos poupa muito trabalho e também nos ajuda a dar consistência ao código.

No exemplo a seguir, veremos como aplicamos cada uma dessas classes a diferentes elementos e, para que nosso código tenha uma melhor legibilidade, faremos todos os elementos em parágrafos. Vamos ver o código:

 Usando o arquivo Bootstrap básico
Bacon ipsum dolor amet em laboris magna ullamco, em baqueta dolor boudin eiusmod andouille
leberkas exercício barriga de porco ex. Costelas de carne de boi magna corned beef incididunt id.
leberkas exercício barriga de porco ex. Costelas de carne de boi magna corned beef incididunt id. leberkas exercício barriga de porco ex. Costelas de carne de boi magna corned beef incididunt id. Kevin alcatra

no biltong da cauda. Filé mignon de peru quis, filé de veado ullamco jerky lombo de porco não voluptuoso.

Agora vamos ver como cada classe se comporta em nosso navegador, há um caso particular com o justificar, que é muito sutil, então seu efeito pode não ser muito visto.

PROLONGAR

Listas
Muitas vezes, as listas são necessárias e não exclusivamente para listar coisas; muitas vezes, elas são partes vitais do design. Bootstrap trata-os de uma forma transparente como os elementos anteriores que vimos, as listas vêm com um estilo predefinido pelo CSS base, no entanto, temos algumas variantes, por exemplo, listar sem estilos para evitar marcadores e listar com na linha, o último torna a lista horizontal.

Vejamos então no código a seguir um exemplo de cada uma dessas listas para que possamos usá-las em nosso código:

 Usando o arquivo Bootstrap básico
Lista Inline

Primeiro elemento
Segundo elemento
Terceiro Elemento
Quarto Elemento
Quinto Elemento

Lista sem estilos

Primeiro elemento
Segundo elemento
Terceiro Elemento
Quarto Elemento
Quinto Elemento

Lista padrão

Primeiro elemento
Segundo elemento
Terceiro Elemento
Quarto Elemento
Quinto Elemento

Agora vamos ver como fica em nosso navegador, onde podemos ver que as diferenças são imediatamente perceptíveis:

Com isso terminamos este tutorial, vimos que o CSS base do Bootstrap Isso nos dá uma base padrão para garantir que os elementos que não definimos ou personalizamos apareçam de uma maneira particular diretamente no navegador, dando-nos assim controle total sobre nosso aplicativo, independentemente do navegador.