English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Nesta seção, vamos explicar as partes-chave da estrutura subjacente do Bootstrap, incluindo as melhores práticas que tornam o desenvolvimento web melhor, mais rápido e mais robusto.
Bootstrap usa alguns HTML5 Elementos e atributos CSS. Para que eles funcionem corretamente, você precisa usar HTML5 Tipo de documento (Doctype). Portanto, inclua o seguinte trecho de código no início do projeto Bootstrap.
<!DOCTYPE html> <html> .... </html>
Se você não usar HTML no início da página criada com Bootstrap5 o tipo de documento (Doctype), você pode encontrar alguns problemas de exibição inconsistentes em navegadores, até mesmo em algumas situações específicas, o que pode levar a código que não passa pela W3padrão de validação CSS.
O prioridade para dispositivos móveis é Bootstrap 3 a mais significativa mudança.
nas versões anteriores do Bootstrap (até 2.x), você precisa referenciar manualmente outro CSS para que todo o projeto suporte dispositivos móveis de maneira amigável.
Agora é diferente, o Bootstrap 3 O CSS padrão já oferece suporte amigável aos dispositivos móveis.
Bootstrap 3 O objetivo de design é priorizar dispositivos móveis, seguido por dispositivos de桌面.
Para garantir que os sites desenvolvidos com Bootstrap sejam amigáveis aos dispositivos móveis, garantindo a desenho apropriado e o escalonamento tátil, é necessário adicionar meta viewport tag, conforme mostrado a seguir:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
width propriedade controla a largura do dispositivo. Supondo que seu site seja visualizado por dispositivos com diferentes resoluções de tela, configure-o para device-width para garantir que ele possa ser exibido corretamente em diferentes dispositivos.
initial-scale=1.0 Garanta que a página seja carregada com 1:1 em proporção, sem nenhuma escalonamento.
No navegador móvel, ao usar meta viewport adicionar ao tag user-scalable=no pode desativar sua função de zoom (zooming).
Geralmente,maximum-scale=1.0 com user-scalable=no juntas. Assim, ao desativar a função de escalonamento, o usuário só pode rolar a tela, o que faz com que seu site pareça mais como uma aplicação nativa.
Atenção, este método não é recomendado para todos os sites, ainda depende da sua própria situação!
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<img src="..." alt="imagem responsiva">
ao adicionar img-responsive a classe permite que o Bootstrap 3 a suporte de imagens para layout responsivo é mais amigável.
Vamos agora ver quais propriedades CSS esta classe contém.
No código a seguir, você pode verimg-responsive a classe atribui max-largura: 100%; e height: auto; propriedades, permitem que as imagens se ajustem proporcionalmente, sem exceder o tamanho do elemento pai.
.img-responsive {
display: block;
height: auto;
max-largura: 100%;
}Isso indica que as imagens relacionadas são apresentadas como block. Quando você define a propriedade display do elemento como block, ele será exibido como um elemento de bloco.
definir height: autoa altura dos elementos relacionados depende do navegador.
definir max-width para 100% rewriting any width specified through the width attribute. Isso torna as imagens mais amigáveis para layouts responsivos.
Se precisar de imagens com .img-as imagens com a classe responsive devem ser centralizadas horizontalmente, use .center-classe block, não usar .text-center.
Bootstrap 3 Usar body {margin: 0;} para remover o margem do body.
Veja abaixo as configurações do body:
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.428571429;
color: #333333;
background-color: #ffffff;
}A primeira regra define o estilo de fonte padrão do body como "Helvetica Neue", Helvetica, Arial, sans-serif.
A segunda regra define o tamanho da fonte padrão do texto como 14 pixels.
A terceira regra define a altura da linha padrão como 1.428571429.
A quarta regra define a cor de texto padrão como #333333.
A última regra define a cor de fundo padrão como branca.
usar @font-family-base, @font-size-base e @line-height-o atributo base como estilo de formatação.
através da propriedade @link-a cor define a cor global dos links.
Para o estilo padrão de link, configure como follows:
a:hover,
a:focus {
color: #2a6496;
text-decoration: underline;
}
a:focus {
outline: thin dotted #333;
outline: 5px auto -webkit-foco-anel-color;
outline-offset: -2px;
}Portanto, quando o mouse estiver sobre o link ou o link clicado, a cor será definida como #2a6496Além disso, uma linha sublinhada será apresentada.
Além disso, os links clicados apresentarão uma cor de código #333 conta com uma curva de linha pontilhada fina. 5 Largura de pixel, e para navegadores baseados em webkit -webkit-foco-anel-cor da extensão do navegador. O offset do contorno é definido como -2 pixels.
Todos esses estilos podem ser encontrados no scaffolding.less.
Bootstrap usa Normalize para estabelecer consistência cross-browser.
Normalize.css é um arquivo CSS muito pequeno, que fornece uma melhor consistência cross-browser nos estilos padrão de elementos HTML.
<div> ... </div>
Bootstrap 3 do container classe é usada para envolver o conteúdo da página. Vamos ver essa .container classe。
.container {
padding-direita: 15px;
padding-esquerda: 15px;
margem-direita: auto;
margem-esquerda: auto;
}Através do código acima, a margem externa esquerda e direita do container (margem-direita, margem-esquerda) é decidido pelo navegador.
Observe que, devido ao padding (espaçamento interno) ser de largura fixa, o contêiner é não aninhável por padrão.
.container:before,
.container:after {
display: table;
content: " ";
}Isso criará pseudo-elementos. Defina display para tabelairá criar uma tabela anônima-cell e um novo contexto de formatação de bloco.:before pseudo-elemento previne a colapso do margem superior,:after pseudo-elemento para limpar a flutuação.
se conteneditable A propriedade apareceu no HTML, devido a alguns bugs do Opera, criou um espaço em branco ao redor dos elementos acima. Isso pode ser corrigido usando content: " " para corrigir.
.container:after {
clear: both;
}ele cria um pseudo-elemento e garante que todos os contêineres contenham todos os elementos flutuantes.
Bootstrap 3 CSS tem uma consulta de mídia responsiva, que define max para o container em todos os intervalos de thresholds de consulta de mídia.-largura, usada para combinar o sistema de grade.
@media (min-largura: 768px) {
.container {
largura: 750px;
}Bootstrap funciona bem nos principais navegadores de desktop e móveis mais recentes.
Navegadores antigos podem não suportar bem.
A tabela a seguir lista os navegadores e plataformas mais recentes suportados pelo Bootstrap：
| Chrome | Firefox | IE | Opera | Safari | |
|---|---|---|---|---|---|
| Android | SIM | SIM | Não Aplicável | Não Aplicável | Não Aplicável |
| iOS | SIM | Não Aplicável | Não Aplicável | Não Aplicável | SIM |
| Mac OS X | SIM | SIM | Não Aplicável | SIM | SIM |
| Windows | SIM | SIM | SIM* | SIM | Não Aplicável |
* Bootstrap Suporta Internet Explorer 8 e versões mais recentes do navegador IE.