1. Introdução
O Bootstrap possui um sistema de grade de streaming responsivo e primeiro móvel. À medida que o dispositivo de tela ou o tamanho da viewport aumenta, o sistema será dividido automaticamente em até 12 colunas . Inclui classes predefinidas fáceis de usar e mixins poderosos para gerar mais layouts semânticos.
2. Opções de raspas
O Bootstrap3.x usa quatro opções de grade para formar um sistema de grade. A introdução dessas quatro opções no site oficial é a seguinte. Muitas pessoas não entendem. Aqui vou explicar as diferenças entre as quatro opções de grade em detalhes. De fato, apenas uma das diferenças é que elas são adequadas para dispositivos de tela de diferentes tamanhos . Vejamos o item de prefixo da classe. Vamos nomear essas quatro opções de grade para o prefixo. Eles são col-xs, col-sm, col-md e collg. Aqueles que entendem o inglês saberão que a LG é a abreviação de grande, MD é a abreviação de Mid, SM é a abreviação de Small e XS é a abreviação de ***. Essa nomeação reflete as diferentes larguras da tela às quais essas classes se adaptam. Abaixo, apresentamos as características dessas classes.
A tabela a seguir permite que você veja em detalhes como o sistema raster da Bootstrap funciona em vários dispositivos de tela.
3. Offset da coluna
Use .col-md-offset-* para compensar a coluna para a direita. Essas classes adicionam todas as colunas à margem esquerda da coluna usando o seletor *. Por exemplo, .col-md-offset-4 mudou .col-md-4 para a direita por 4 colunas de largura.
4. Colunas aninhadas
Para nidificar o conteúdo usando rasters embutidas, isso pode ser feito adicionando um novo .row e uma série de colunas .col-md-* nas colunas .col-md-* já existentes. As colunas contidas em linhas aninhadas devem somar até 12 .
5. Classificação da coluna
A ordem das colunas pode ser facilmente alterada usando .col-md-push-* e .col-md-pull-*.
Caso
<%@ Page Language = "Java" PageEncoding = "Utf-8"%> <%String Path = request.getContextPath ();%> <! http-equiv = "content-type" content = "text /html; charset = utf-8" /> <meta http-equiv = "content-language" content = "zh-cn" /> <meta name = "autor" content = "[email protected]" /> <mETAnge = "Autor" Ltd. " /> <meta http-equiv = "PRAGMA" content = "no-cache"> <meta http-equiv = "cache-controle" content = "no-cache"> <meta-keyphord-me-meta-ke-ke-Equiv = "Content =" 0 "> <meta-meta-meta-key2," keyword "," keyphord /"keyword" keyword "keyword =" keyword "," keyword> keyword = "keyword", "keyword> keyword" key2word "," keyword> keyword "key2word", "keyword> key2word", "keyword> keyword =" Keyword> Keyhord "," http-equiv = "description" content = "Esta é minha página"> <jsp: incluir página = "/Demo/base/js_bootstrap.jsp"/> <style type = "text/css">. Show-grid [classe ^= "col-"] {padding-top: 10px; padding-bottM: 10px; rgba (86, 61, 124, .15); borda: 1px RGBA sólido (86, 61, 124, .2);} </style> <script type = "text/javascript"> $ (function) {}); </script> </head> <body> <b> col-lg-*ussage </b> <div> <div> .col-lg-8 </div> <div> .col-lg-4 </div> </div> <br/> <b> col-md-*uso </b> <div> <div> .col-md-1 </div> <div> .col-md-1 </div> <div> .col-md-1 </div> <div> .col-md-1 </div> <div> .col-1-1 1 </div> <div> .col-md-1 </div> <div> .col-md-1 </div> <div> .col-md-1 </div> <div> .col-md-1 </div> <div> .col-md-1 </div> <div> .col-1-1 </div> </div> <br/> <b> col-md-8 </div> <div> .col-md-4 </div> </div> <br/> <b> col-sm-*uso </b> <div> <div> .col-sm-8 </div> <div> .col-sm-4 </div> <br> <br/br/ <b> col-xs-*uso </b> <div> <div> .col-xs-8 </div> <div> .col-xs-4 </div> </div> <br/> <b> deslocamento da coluna: Col-md-offset-*</b> <div> <div> .col-md-4 </div> <div> .col-md-4 </div> <div> .col-md-4 </div> <div> .col-md-4 </div> <di v> .col-md-4 </div> <div> .col-md-4 </div> <div> .col-md-4 </div> <div> .col-md-4 </div> <div> .col-md-4 </div> <div> .col-m d-4 </div> <div> .col-md-4 </div> <div> .col-md-4 </div> <div> .col-md-4 </div> <div> .col-md-4 </div> <div> .col-md-4 </di v> <div> .col-md-4 </div> <div> .col-md-4 </div> <div> .col-md-4 </div> <div> .col-md-4 </div> <div> .col-md-4 </div> </div> <br/> <b> Offset da coluna: col-md-offset-*</b> <div> <div> .col-md-4 </div> <div> .col-md-4 </div> <div> .col-md .col-md-offset-4 </div> <div> <div> <div> .col-md-md-offset-4 </div> <div> <div> <div> .col-md-offt. .col-md-offset-3 </div> </div> <div> <div> .col-md-6 .col-md-offset-3 </div> </div> <br/> <b> colunas aninhadas: as colunas contidas em uma linha aninhada devem ser iguais a 12 </b> <div> <div> nível 1:. .col-md-6 </div> <div> Nível 2: .col-md-6 </div> </div> </div> <br/> <b> Classificação da coluna: .col-md-push-* e .col-md-PULL-* </b> <div> <div> .col-md-9 .col-md-push-3 </b> </div>. .col-md-pull-9 </div> </div> </body> </html>
Efeito de demonstração
O exposto acima é o conhecimento relevante sobre o sistema de grade de bootstrap introduzido pelo editor. Espero que seja útil para você!