Devido às necessidades do projeto, pretendo aprender bem a estrutura do Bootstrap. Eu aprendi um pouco antes. A estrutura não é difícil no geral, mas ainda há muitas coisas envolvidas. Se você deseja dominá -lo com proficiência, ainda precisa praticar mais.
1. O que é Bootstrap?
O que é BS? Ou seja, a ferramenta de estrutura padronizada criada pela página front-end foi gravada no estilo CSS.JS e só precisa ser usada.
Como usar o BS? O efeito é aumentado principalmente usando diferentes classes e cada classe possui diferentes funções correspondentes.
Benefícios da BS: aumenta a eficiência do desenvolvimento, torna o design da página mais bonito e apóia o desenvolvimento responsivo. Endereço para download: https://github.com/foreverjiangting/bootstrap
Documentação de aprendizado: http://v3.bootcss.com/getting-started/
2. Design de estilo CSS
1. Com base na documentação HTML
Bootstrap refere -se a alguns elementos HTML, portanto o cabeçalho precisa ser escrito como a coluna de amostra mostrada abaixo.
<! Doctype html> --- Contém a declaração de documentos HTML5, todos os navegadores ativam o modo padrão <html> <head> <meta charset = "utf-8"> <meta http-equiv = "x-ua-compatible" content = "ie = bate"> <tena name = "viewport" 3 meta tags * devem * ser colocadas primeiro, e qualquer outro conteúdo * deve * segui -las! Verifique se os layouts responsivos são suportados-> <title> bootstrap </title> [/code] [Code] <!-novo arquivo CSS do Bootstrap Core-> <link rel = "Stylesheet" href = "// cdn.bootcss.com/bootstrap/3.5/css/bootsstrap.minmin.cssnhas -> <link rel = "Stylesheet" href = "// cdn.bootcss.com/bootstrap/3.5.5/css/bootstrap-theMe.min.css">< !-- JQuery File. Certifique-se de introduzir-> <script src = "// cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>< !-- o último arquivo javascript de bootstrap-> <script <script src = "// cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script></head> <body><h1>hello, mundo!
2. Layout do sistema de grade
Conteúdo do layout definindo linhas e colunas. Bootstrap define a página para 12 colunas. Layout alterando o número de colunas, como definir três colunas de largura igual:
<! Doctype html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <meta http-equiv = "x-ua-compatible" content = "ie = edge"> <meta name "" viewport "=" width = device-width,, inicialmente scale "> <meta =" viewport "=" width = device-width,, sply-scale "> <meta =" viewport "=" width = device-width, " E qualquer outro conteúdo * deve * segui -los! -> <title> </title> <link href = "css/bootstrap.css" rel = "stylesheet"> <link href = "css/bootstrap.min.css" rel = "stylesheet"> <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script><script src="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script><body><!-- Setting fence layout-> <div> <!-ou contêiner-fluid-> <div>-col-xs-4: refere-se a um pequeno dispositivo menor que 768px <div> 11 </div>-col-sm-4: refere-se a um dispositivo de um dispositivo = 768px <div> 22 </div>-col-md-4: refere-se a um dispositivo = 992px <22 </div>-col-md-4: refere-se a um dispositivo <768px <22 </div. less than 1200px</div> <div>11</div> <div>22</div> <div>33</div> </div> <div>33</div> </div> <div> <div>11</div> <div>22</div> <div>33</div> </div> <div>33</div> </div> <div> <div>11</div> <div>22</div> <div> 33 </div> </div> <div> <div> 11 </div> <div> 22 </div> <div> 33 </div> </div> </div> </body> </html>
Existem quatro maneiras de escrever o formato da rede CSS, que são usados principalmente na resolução de diferentes dispositivos.
2: Traduza a coluna
Use deslocamento para pan. Isto é, o número de colunas traduzidas
<div> <!-ou contêiner-fluid-> <div> <div> 11 </div> <div> 22 </div> <div> 33 </div> --- refere-se ao direito de 33 </div> <div> 11 </div> <22> 22 </miv> </div> 33 </miv> --- Refres <div> 33 </div> </div> <div> 11 </div> <div> 22 </div> <div> 33 </div> </div> </div> <!-Traduzir coluna->
Os efeitos são os seguintes:
33 Como as duas colunas foram traduzidas, elas não podiam atender à exigência de ocupar 4 colunas, por isso foi espremido na próxima fila e começou a ocupar 4 colunas. Simplificando, é equivalente a mover todo o bloco div.
3: colunas aninhadas
Isto é, colunas de ninho na coluna da grade. Vamos comparar.
<div> <!-ou contêiner-fluid-> <div> <div> <div> 11 </div> <div> 22 </div> <div> 33 </div> </div> </div> <div> <div> 11 </</> </miv> </miv> </miv> <//div> </div> <///</> </322222222/ =
Os efeitos são os seguintes:
Você encontrou algum problema? Por que não há distribuição igual de 8 acima?
Motivo: vamos dar uma olhada no console de depuração
.col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 { min-height: 1px; preenchimento-esquerda: 15px; Right-right: 15px; Posição: relativa;}Verificou-se que o preenchimento-esquerda e a direita do preenchimento são de 15 px. Isso ocorre porque o preenchimento entre as colunas é digno de influência, então por que a segunda div não tem influência? Vamos explorar o princípio da grade da cerca.
1. "Linha" deve ser incluído em .container (largura fixa) ou .container-fluid (100% de largura) para fornecer o alinhamento e o preenchimento apropriados.
2. Crie uma calha entre as colunas definindo a propriedade padding para "coluna". Ao definir uma margin negativa para o elemento .row , compensar padding para o elemento .container
Indiretamente, a "coluna" contida em "linhas" com padding .
NOTA : Neste momento, a linha compensou o preenchimento da coluna, para que não haja valor de preenchimento.
4: Classificação de colunas
Principalmente usando col-xs-push-* col-xs-pull-* (* representa um número de 0-11) Como entender essas duas classes? push significa push, puxar significa puxar.
<div> <div> 21 </div> <div> 24 </div> </div> <div> <div> 21 </div> <div> 24 </div> </div>
As renderizações são as seguintes:
<div> 21 </div> --- gravado como div1 <div> 24 </div>-gravado como div2
Pode -se entender que é trocar as posições de ambos. Você precisa empurrar o Div1 para as 8 colunas à direita e precisa puxar 4 colunas para a esquerda.
3. Layout da grade de streaming
1. Largura da coluna usa porcentagens, não pixels
2. Altere a classe de linha para fluido de linha
3. Outras funções básicas são as mesmas do layout fixo acima e apoiam a capacidade de resposta.
4. Ao dividir uma certa coluna em um bissetor, como o layout de streaming usa porcentagens, ela deve ser calculada de acordo com 6.
// Observe a seguinte situação. Ao dividir 8 colunas bilateralmente, ela não é definida como dois 4s, mas dois 6s, porque existem 12 colunas de distribuição de varredura no bootstrap. <div> <div> <div> 2 </div> <div> 2 </div> </div> </div> </div> </div>
Vamos dar uma olhada na aplicação de layouts de streaming e compará -los com layouts fixos.
<!-Layout de streaming-> <div> <div> 333 </div> <div> 444 </div> </div> <div> --- Declare a classe Fluid de contêiner, indicando que o conteúdo é um layout de streaming, função: como um bloco contente, para conter o conteúdo de streaming <div> <div> 333 </</> </-> Classes de contêineres e fluidos de contêineres, e essa é a largura da tela <div> 333 </div> <div> 444 </div> </div>
Quando a tela é inferior a 768px, o efeito é o seguinte:
Quando a tela é maior que 992px, o efeito é o seguinte: neste momento, uma linha é exclusiva
A classe Row-Fluid (muito importante) determina se é um layout de fluxo. Em seguida, o código do bloco de conteúdo é gravado da mesma maneira que o sistema de grade e ainda começa do COL-MD-1 a COL-MD-12, que corresponde a porcentagens diferentes, respectivamente.
4. Design responsivo
Simplificando, ele suporta as resoluções (960px, 1366px, 978px, etc.) de diferentes dispositivos (telefones celulares, PCs) para resposta adaptativa.
<div> <div> 21 </div> <div> 24 </div> </div>
Quando o dispositivo é inferior a 768px, o efeito é o seguinte:
Quando dispositivo> = 992px. Os efeitos são os seguintes:
As resoluções das duas categorias acima são diferentes. COL-MD-12 significa que cada coluna possui uma linha, ou seja, 12 colunas.
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.