O Bootstrap 3 é o Mobile-First, nesse sentido, o código de bootstrap começa com dispositivos de tela pequena (como dispositivos móveis, tablets) e depois se expande para componentes e grades em dispositivos de tela grande (como laptops, desktops).
1. Estratégia de prioridade do dispositivo móvel
1. Conteúdo: decidindo o que é a coisa mais importante.
2. Layout
Projeto preferencial de larguras menores.
O CSS básico é preferido para dispositivos móveis, e as consultas de mídia são direcionadas a tablets e computadores de mesa.
3. Gradualmente aprimorado
Adicione elementos à medida que o tamanho da tela aumenta.
À medida que a tela ou o tamanho da viewport aumenta, o sistema será dividido automaticamente em até 12 colunas. Como mostrado na figura abaixo:
2. Princípio de trabalho do sistema de grade de bootstrap (sistema de grade)
O sistema de grade cria layouts de página através de uma série de linhas e colunas contendo conteúdo. Aqui está uma lista de como o sistema de malha de bootstrap funciona:
1. As linhas devem ser colocadas na classe .Container para obter o alinhamento e o preenchimento apropriados.
2. Use linhas para criar grupos horizontais de colunas.
3. O conteúdo deve ser colocado na coluna e apenas a coluna pode ser um elemento filho direto da linha.
4. Classes de grade predefinidas, como .row e .col-xs-4, podem ser usadas para criar rapidamente layouts de grade. Classes menos híbridas podem ser usadas para mais layouts semânticos.
5. As colunas criam lacunas entre o conteúdo da coluna através do preenchimento. Essa margem interna é negativa pela margem.
7. O sistema de grade é criado especificando as doze colunas disponíveis que você deseja abranger. Por exemplo, para criar três colunas iguais, use três .col-xs-4.
3. Inquérito de mídia
As consultas de mídia são "regras condicionais de CSS" muito chiques. Aplica -se apenas a alguns CSs com base em determinadas condições prescritas. Se essas condições forem atendidas, o estilo correspondente será aplicado.
As consultas de mídia no bootstrap permitem mover, exibir e ocultar conteúdo com base no tamanho da viewport. A consulta de mídia a seguir é usada no arquivo menos para criar limites críticos de ponto de interrupção no sistema de grade de bootstrap.
/* Dispositivo Ultra-Small (telefone celular, menos de 768px)* //* Nenhuma consulta de mídia por padrão no bootstrap*//* dispositivo pequeno (tablet, começando de 768px)*/ @mídia (min-width: @screen-sm-min) {...}/* MinIm Min (desktop, iniciando de 992px)**/... Dispositivo grande (desktop grande, a partir de 1200px) */ @mídia (largura min: @screen-lg-min) {...}Às vezes, incluímos a largura máxima em nosso código de consulta de mídia, limitando o impacto do CSS a uma variedade menor de tamanhos de tela.
@media (max-width: @screen-xs-max) {...} @media (largura min: @screen-sm-min) e (max-width: @screen-sm-max) {...} @media (min-width: @screen-min) e (max-width: @screen-md-max) {...Existem duas partes para a consulta de mídia, primeiro uma especificação de dispositivo e, em seguida, uma regra de tamanho. No caso acima, as seguintes regras estão definidas:
Vejamos a seguinte linha de código:
@Media (Min-Width: @screen-sm-min) e (max-width: @screen-sm-max) {...}
Para todos os dispositivos com largura min: @screen-sm-min, algum processamento será feito se a largura da tela for menor que @screen-sm-max.
4. Opções de grade
A tabela a seguir resume como o sistema de malha de bootstrap funciona em vários dispositivos:
5. Estrutura básica da grade
Aqui está a estrutura básica da grade de bootstrap:
<div> <div> <div> </div> <div> </div> </div> <div> ... </div> </div> <div> ....
Aqui está um exemplo de código específico:
<div> <h1> Olá, mundo! style = "Background: #4CFF00"> 5 </div> <div style = "Background: #0ff"> 6 </div> <div style = "Antecedentes: #0094ff"> 7 </div> <div estilo = "Background: #0094ff"> 7 </Div> <style = "Background: # #B200FF"> 8 </Style style = "Background: #ff006e"> 10 </div> <div style = "Antecedentes: #AC5050"> 11 </div> <div style = "Antecedentes: #54bd4f"> 12 </div> </div> <div> <!-Tablet de dispositivo pequeno (≥768px)-> <Div Style = "Background: #B2B0B" #ffd800 "> 1 </div> <div style =" Background: #AC5050 "> 1 </div> </div> <div> <!-computador de mesa de tamanho médio (≥992px)-> <div estilo =" Antecedentes: #AC5050 "> 1 </</<Div Style =" Anterior: #54bp (≥1200px) -> <div style = "Antecedentes: #AC5050"> 1 </div> <div style = "Background: #54bd4f"> 1 </div> </div> </div> </div>
6. Coluna de deslocamento
O deslocamento é um recurso útil para mais layouts profissionais. Eles podem ser usados para abrir mais espaço para a coluna. Por exemplo, as classes .col-xs =* não suportam compensações, mas podem simplesmente conseguir isso usando uma célula vazia.
Para usar compensações em monitores de tela grande, use a classe .col-md-offset-*. Essas classes aumentarão a margem esquerda de uma coluna por * coluna, onde * o intervalo é de 1 a 11.
No exemplo abaixo, temos <div> .. </div> e usaremos a classe .col-md-offset-3 para centralizar esta div.
<div> <div> <div style = "coluna de fundo: #dedef8;"> <p> coluna de deslocamento de teste --- 3 As colunas são deslocadas para a direita aqui </p> </div> </div> <div> <div style = "Background: #f00"> 1 </</<style = ": #B2B0B0B0B: style = "Background: #ffd800"> 4 </div> <div style = "Antecedentes: #4CFF00"> 5 </div> <div style = "Background: #0ff"> 6 </div style = "Antecedentes: #ff006e"> 10 </div> <div style = "Background: #AC5050"> 11 </div>
Efeito de exibição:
7. colunas aninhadas
Para aninhar a grade padrão no conteúdo, adicione um novo .row e adicione um conjunto de colunas .col-md-* dentro de uma coluna .col-md-*. As linhas aninhadas devem conter um conjunto de colunas e o número de colunas nesse conjunto de colunas não pode exceder 12 (na verdade, não há necessidade de que você ocupe 12 colunas).
No exemplo seguinte, o layout possui duas colunas e a segunda coluna é dividida em duas linhas e quatro caixas.
<div> <div> <div style = "Background: #B2B0B0"> Primeira coluna </div> <div style = "Background: #dedef8"> A segunda coluna-há quatro divs aninhadas nele <div> <div estilo = "Antecedentes: #0094ff"> estou contente <r /> </div> <div> <div style = "Background: #ff00dc"> estou contente três <r/> <r/> <r/> </div> <div style = "Background: #ff006e"> estou contente quatro </div> </div> </div> </div> </div>
Efeito de exibição:
8. Classificação da coluna
Outra característica perfeita do sistema de malha de bootstrap é que você pode escrever facilmente colunas em um pedido e depois exibi -las em outro.
Você pode alterar facilmente a ordem das colunas de grade embutidas com as classes .col-md-push-* e .col-md-pull-*, onde* varia de 1 a 11.
No exemplo abaixo, temos dois layouts de coluna, a coluna esquerda é estreita, como a barra lateral. Usaremos as classes .col-md-push-* e .col-md-pull-* para trocar a ordem das duas colunas.
<div> <div> <div style = "Background: #ff00dc"> esquerda </div>
Efeito de exibição:
Se você ainda deseja estudar em profundidade, pode clicar aqui para estudar e anexar 3 tópicos interessantes a você:
Tutorial de aprendizado de bootstrap
Tutorial prático de bootstrap
Tutorial de uso de plug-in bootstrap
O exposto acima é todo o conteúdo deste artigo. Espero que seja útil para o aprendizado de todos e espero que todos apoiem mais o wulin.com.