Bootstrap CSS Overview
Neste capítulo, vamos explicar a estrutura subjacente de um elemento-chave da Bootstrap, incluindo os nossos desenvolvedores web fazer melhor, mais rápido as melhores práticas mais fortes.
HTML 5 doctype (Doctype)
Bootstrap utiliza alguns elementos HTML5 e propriedades CSS. Para que eles funcionem, você precisa usar o tipo de documento HTML5 (Doctype). Assim, no início do projecto Bootstrap uso contém o seguinte segmento de código.
<!DOCTYPE html> <html> .... </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
dispositivos móveis prioritárias é a mudança mais significativa no Bootstrap 3.
Nas versões anteriores do Bootstrap (até 2.x), você precisa citar manualmente outra CSS, para fazer todo o projeto um suporte amigável para dispositivos móveis.
Não mais, Bootstrap 3 si CSS padrão é apoio amigável para dispositivos móveis.
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 diferentes dispositivos de resolução de tela para navegar, em seguida, configurá-lo para o dispositivo de largura para garantir que ele 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, dependerá de suas próprias circunstâncias!
<meta name="viewport" content="width=device-width,
initial-scale=1.0,
maximum-scale=1.0,
user-scalable=no">
imagem Responsive
<img src="..." class="img-responsive" alt="响应式图像">
Ao adicionar classe img-responsive Bootstrap 3 permite que a imagem para apoiar o layout responsivo que é mais amigável.
Vamos olhar para o que esta classe contém a propriedade css.
No código abaixo, você pode ver a imagem img class-responsive dá max-width: 100%; e altura: auto; propriedade pode ser escalado para que a 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
exibição mundial Básico
Bootstrap 3 usando body {margin: 0;} para remover o corpo de margens.
Considere as seguintes configurações para o corpo:
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.
composição
Use @ font-family-base, @ font-size-base e propriedade @ line-height-base como tipografia.
ligação Estilo
Defina a cor através da propriedade de ligação @ link-cor global.
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 usar Normalize para construir consistência cross-browser.
Normalize.css é um arquivo CSS pequena que proporciona uma melhor consistência cross-browser nos elementos HTML de estilo padrão.
Container (recipiente)
<div class="container"> ... </div>
classe de contêiner Bootstrap 3 para conteúdo na página pacote. Vamos dar uma olhada nesta classe bootstrap.css .container arquivo.
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
Através do código acima, as margens esquerda e direita do contêiner (margin-right, a margem esquerda) decidida pelo browser.
Por favor, note que, devido à cobertura (estofamento) são de largura fixa, recipientes padrão não podem ser aninhados.
.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.
@media (min-width: 768px) {
.container {
width: 750px;
}
Navegador Bootstrap / Device Support
Bootstrap pode funcionar bem na última desktop e navegador do terminal móvel.
navegadores mais antigos podem não ser bem suportado.
A tabela a seguir Bootstrap suportar as mais recentes versões de navegadores e plataformas:
| cromo | Firefox | IE | ópera | safári | |
|---|---|---|---|---|---|
| andróide | SIM | SIM | não aplicável | NO | não aplicável |
| iOS | SIM | não aplicável | não aplicável | NO | SIM |
| Mac OS X | SIM | SIM | não aplicável | SIM | SIM |
| Windows | SIM | SIM | SIM * | SIM | NO |
* Apoio Bootstrap para o Internet Explorer 8 e versões posteriores do IE.