O Bootstrap fornece um sistema de grade de streaming de primeira e Mobile, primeiro móvel. À medida que a tela ou o tamanho da viewport aumenta, o sistema será dividido automaticamente em até 12 colunas.
O sistema de grade é semelhante a uma tabela com linhas e colunas. Ele deve ser colocado em um recipiente com tipo de tipo de contêiner. Pode ser uma div e o conteúdo é colocado na coluna. A grade no web design é usada para layout o conteúdo, facilitando a navegação no site. A seguir, é apresentado um exemplo de uso do layout da grade de bootstrap.
<div> <div> col2 </div> <div> col10 </div> </div>
O efeito de exibição é o seguinte:
O estilo de class = "linha" é adicionado para representar a linha e o estilo de class = "col-sm-2" é adicionado para representar a coluna. O sistema divide a tela inteira em 12 partes, Col-SM-2 significa que a coluna abrange 2 partes e a proporção col-SM-10 significa que a coluna abrange 10 partes. O efeito exibido será como mostrado na figura acima, indicando que existem duas colunas em uma linha, a primeira coluna é responsável por 2 partes e a segunda coluna é responsável por 10 partes.
O Bootstrap é uma estrutura de front-end responsiva, refletida no sistema de grade, que é um dispositivo correspondente a diferentes tamanhos de exibição e pode apresentar diferentes efeitos de exibição. Como mostrado abaixo:
<div> <div> .col-xs-12 .col-md-8 </div> <div> .col-xs-6 .col-md-e4 </div> </div>
Col-MD-8 significa que esta lista é responsável por 8 peças em telas de tamanho médio, como desktops e laptops comuns. COL-XS-12 significa que esta coluna é responsável por 12 cópias em telas pequenas, como tablets. O código acima mostra que existem duas colunas na linha e a próxima linha de desktop e laptops comuns. A primeira coluna representa 8 partes, a segunda coluna representa 4 partes e a próxima linha e a próxima coluna representam 2 colunas, a primeira coluna é responsável por 12 partes e a segunda coluna é responsável por 6 partes. Dessa forma, diferentes efeitos são alcançados em diferentes dispositivos de exibição. Você pode simular essas duas situações redimensionando o navegador.
A figura a seguir mostra como o sistema de grade do Bootstrap funciona em vários dispositivos de tela
O exposto acima é a descrição completa do terceiro básico da grade de bootstrap introduzido pelo editor. Espero que seja útil para todos. Se você tiver alguma dúvida, deixe -me uma mensagem e o editor responderá a todos a tempo. Muito obrigado pelo seu apoio ao site wulin.com!