Bootstrap 3 CSS Overview
alvo
Neste tutorial, nós discutimos os Bootstrap 3 pontos CSS. Em seguida, vamos explicar Bootstrap 3 trabalhando vários factores-chave.
HTML 5 doctype (Doctype)
Bootstrap 3 utilizadas alguns elementos de HTML5 e atributos CSS. Para que eles funcionem, você precisa usar o tipo de documento HTML5 (Doctype).
<! DOCTYPE html> <Html lang = "PT"> ... </ Html>
Se o início da página em Bootstrap criado não usa o tipo de documento HTML5 (Doctype), você pode enfrentar alguns navegadores exibem problemas de inconsistência que pode até mesmo enfrentar determinadas situações incoerentes sob que não pode passar W3C padrão de validação no seu código .
prioridade do dispositivo móvel
Esta é provavelmente a mudança mais significativa no Bootstrap 3. Nas versões anteriores do Bootstrap (até 2.x), você precisa citar manualmente outra CSS, a fim de tornar o projecto em conjunto com o principal CSS-friendly dispositivo móvel. Não mais, Bootstrap 3 si CSS padrão é um dispositivo móvel amigável.
Bootstrap 3 é projetado prioridade do dispositivo móvel, seguido pelo desktop. Esta é realmente uma mudança muito oportuna, à medida que mais e mais pessoas usam dispositivos móveis.
Para fazer website Desenvolvimento Bootstrap para dispositivos móveis amigáveis para garantir a prestação adequada e zoom de tela de toque, você precisa adicionar viewport metatags na cabeça da página, como se segue:
<Meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
propriedade de largura equipamentos de controle de largura. Suponha que o seu site vai ser com dispositivos de resolução de tela diferentes para navegar, em seguida, defina-o como dispositivo de largura para se certificar de que renderiza corretamente em dispositivos diferentes.
inicial = 1,0 escala para assegurar que as cargas da página, na proporção de 1: 1 de apresentação, não haverá nenhum dimensionamento.
No navegador do dispositivo móvel, adicionando escalável-user = não para a meta tag viewport para desativar a função de escala (zoom). Normalmente, escala máxima = 1,0 e user-escalável = no conjunto. Após esta função de zoom é desativado, o usuário pode rolar a tela, você pode fazer seu site parecer mais com uma sensação aplicativo nativo. Note-se que, desta forma não é recomendável o uso de todos os sites, ou depende de suas próprias circunstâncias!
imagem Responsive
Ao adicionar classe img-responsiva permite Bootstrap 3 imagens para apoiar o layout responsivo que é mais amigável. Vamos olhar para esta classe contém o que de propriedades CSS. Sua essência é dar a imagem de um max-width: 100%; e altura: auto; propriedade permite dimensionamento de imagem, não exceda o tamanho do elemento pai.
.img-responsive {
display: inline-block;
height: auto;
max-width: 100%;
}
Isso indica que a imagem associada processado como inline-block. Quando você define as propriedades do elemento de exibição é inline-block, elemento inline no que diz respeito ao conteúdo do formulário de apresentação ao seu redor, mas com a diferença em linha é que, neste caso, podemos definir a largura e altura.
altura Ambiente: altura auto, elementos relacionados depende do navegador.
Definir max-width é 100% substitui qualquer largura especificada pela propriedade de largura. Ele permite que imagens para apoiar o layout responsivo que é mais amigável.
Global de Display, layout e ligações
Bootstrap 3 usando body {margin: 0;} para remover o corpo de margens.
Considere o seguinte conjunto de órgão competente
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1,428571429;
color: # 333333;
background-color: #ffffff;
}
A primeira regra para definir o estilo de fonte padrão para o corpo "Helvetica Neue", Helvetica, Arial , sans-serif.
A segunda regra do texto do tamanho de fonte padrão de 14 pixels.
A terceira regra é definir a altura da linha padrão é 1,428571429.
A quarta regra define a cor do texto padrão para # 333333.
final regra define a cor de fundo padrão é branco.
O estilo padrão para um link, as seguintes definições
a: hover
um: o foco {
color: # 2a6496;
text-decoration: underline;
}
um: o foco {
delinear: thin pontilhada # 333;
esboço: 5px auto -webkit-focus-ring-color;
delinear-offset: -2px;
}
Assim, quando o mouse passa sobre o link ou links você clicou, a cor é definida para # 2a6496. Ao mesmo tempo, haverá um sublinhado.
Além disso, os links clicados, haverá um código de cor para a fina pontilhada contorno # 333. Outra regra é definir o contorno para 5 pixels de largura, e para o navegador baseado no WebKit tem um extensões de navegador de foco de anel cor--webkit. Contour deslocamento é definido como pixels -2.
Todos estes estilos podem ser encontrados na scaffolding.less.
Evitar inconsistências entre navegadores
Bootstrap 3, como sua versão anterior, utilize o Normalize, para criar consistência cross-browser.
recipiente
classe de contêiner Bootstrap 3 para conteúdo na página pacote. Vamos dar uma olhada na seguinte classe
.container {
margin-right: auto;
margin-left: auto;
}
Através do código acima, as margens esquerda e direita do recipiente pelo navegador decidir.
.container: antes,
.container: after {
display: table;
conteúdo: "";
}
Isto gera pseudo-elementos. Ajuste da tabela do visor, ele irá criar um table-cell anónimo e um novo bloco de contexto. : Antes de pseudo-elemento para evitar o colapso margem ,: depois de pseudo-elementos para limpar float.
Se o atributo conteneditable aparece em HTML, uma vez que alguns dos bug Opera, criar um espaço em torno desses elementos. Isto pode ser feito usando o conteúdo: "" para reparar.
.container: after {
clear: both;
}
Ela cria uma pseudo-elemento, e garante que todo o vaso flutuante, que contém todos os elementos.
Bootstrap 3 CSS tem uma aplicação em resposta a consultas de mídia, consultas de mídia em diferentes limiares são definidos max-width para o recipiente, a fim de coincidir com o sistema de rede.