Bootstrap - Visão geral do CSS

Este capítulo fornece uma visão geral das peças-chave da infraestrutura do Bootstrap, incluindo a abordagem do Bootstrap para um desenvolvimento web melhor, mais rápido e forte.

Doctype HTML5

O Bootstrap usa certos elementos HTML e propriedades CSS que requerem o uso do doctype HTML5. Portanto, inclua o trecho de código abaixo para doctype HTML5 no início de todos os seus projetos usando o Bootstrap.

<!DOCTYPE html>
<html>
   ....
</html>

Mobile First

Desde que o Bootstrap 3 foi lançado, o Bootstrap tornou-se primeiro móvel. Isso significa que os estilos 'móveis primeiro' podem ser encontrados em toda a biblioteca, em vez de em arquivos separados. Você precisa adicionar oviewport meta tag ao <head> elemento, para garantir a renderização adequada e zoom de toque em dispositivos móveis.

<meta name = "viewport" content = "width = device-width, initial-scale = 1.0">

A propriedade width controla a largura do dispositivo. Configurá-lo para a largura do dispositivo garantirá que ele seja renderizado em vários dispositivos (celulares, desktops, tablets ...) corretamente.
escala inicial = 1,0 garante que, quando carregada, sua página da web será renderizada em uma escala de 1: 1, e nenhum zoom será aplicado fora da caixa.

Adicionar user-scalable = no ao contentatributo para desativar os recursos de zoom em dispositivos móveis, conforme mostrado abaixo. Os usuários só podem rolar e não aplicar zoom com essa mudança, e faz com que seu site pareça um pouco mais com um aplicativo nativo.

<meta name = "viewport" content = "width = device-width, initial-scale = 1.0, maximum-scale = 1.0, user-scalable = no">

Normalmente, a escala máxima = 1,0 é usada junto com escalável pelo usuário = não . Como acima mencionadouser-scalable = no pode dar aos usuários uma experiência mais parecida com um aplicativo nativo, portanto, o Bootstrap não recomenda o uso desse atributo.

Imagens responsivas

O Bootstrap 3 permite que você torne as imagens responsivas adicionando uma classe .img-responsive ao <img>tag. Esta classe se aplicamax-width: 100%; e height: auto; à imagem para que ela seja bem dimensionada para o elemento pai.

<img src = "..." class = "img-responsive" alt = "Responsive image">

Tipografia e links

Bootstrap define uma exibição global básica (plano de fundo), tipografia e estilos de link -

Basic Global display- Define a cor de fundo: #fff; no elemento <body> .
Typography- Usa os atributos @ font-family-base , @ font-size-base e @ line-height-base como a base tipográfica.
Link styles- Define a cor global do link por meio do attribute @ link-color e aplica os sublinhados do link apenas em : hover .

Se você pretende usar o código LESS, pode encontrar todos eles em scaffolding.less .

Normalizar

Bootstrap usa Normalizar para estabelecer consistência entre navegadores.

Normalize.css é uma alternativa moderna e pronta para HTML5 para redefinições de CSS. É um pequeno arquivo CSS que fornece melhor consistência entre navegadores no estilo padrão dos elementos HTML.

Recipientes

Usar aula .container para envolver o conteúdo de uma página e centralizar facilmente o conteúdo, conforme mostrado abaixo.

<div class = "container">
   ...
</div>

Dê uma olhada no .containerclasse no arquivo bootstrap.css -

.container {
   padding-right: 15px;
   padding-left: 15px;
   margin-right: auto;
   margin-left: auto;
}

Observe que, devido ao preenchimento e às larguras fixas, os contêineres não podem ser aninhados por padrão.

Dê uma olhada no arquivo bootstrap.css -

@media (min-width: 768px) {
   .container {
      width: 750px;
   }
}

Aqui você pode ver que o CSS tem consultas de mídia para contêineres com width. Isso ajuda a aplicar a capacidade de resposta e, dentro delas, a classe do contêiner é modificada de acordo para renderizar o sistema de grade adequadamente.