Como um plug-in frontal que suporta layout responsivo, o Bootstrap desempenha um papel importante. Se você navega na web no seu telefone, tablet ou PC, poderá obter bons resultados. Tudo isso é trazido para nós pelo Bootstrap!
Hoje vou falar principalmente sobre o layout da página. Esta é a coisa mais básica. Quando projetamos um site, devemos projetar uma página padrão global e unificada para ele. Chamamos esse tipo de páginas de layout de página e o que se reflete na página são os elementos do layout, o que é obviamente indispensável no bootstrap.
O layout da Bootstrap é um sistema raster, ou seja, consiste em linhas e colunas. Quando usado, ele precisa envolver um contêiner .Container para o conteúdo da página e o sistema raster.
A classe A.Container é usada para recipientes que são de largura fixa e suportam layouts responsivos.
<div> ... </div> A classe .Container-Fluid é usada para contêineres com 100% de largura, ocupando todas as viewports. <div> ... </div>
No bootstrap, linhas e colunas são representadas por linha e col. E existem até 12 unidades de coluna em uma linha. Col-MD-1 representa a largura de uma unidade e o COL-MD-7 representa a largura de sete unidades. Eles são adicionados para ter até 12 unidades.
<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 </di v> <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-md-1 </div> < div> .col-md-1 </div> <div> .col-md-1 </div> <div> .col-md-1 </div> </div> <div> <div> .col-md-8 </div> <div> .col-md-4 </div > </div> <div> <div> .col-md-4 </div> </div> <div> <div> .col-md-4 </div> <div> .col-md-4 </div> <div> .col-md-4 </div> </div>
A segunda e a terceira linhas mostram efeitos semelhantes
Três colunas aninhadas, também pode haver colunas na coluna . Precisamos mudar o MD para SM neste ninho
<div> <div> Nível 1: .col-sm-9 <div> <div> Nível 2: .col-xs-8 .col-sm-6 </div> <div> Nível 2: .col-xs-4 .col-sm-6 </div> </div> </div>
O efeito é semelhante a este
O acima exposto é o conhecimento básico do layout da página de bootstrap introduzido pelo editor. Espero que seja útil para você. Se você tiver alguma dúvida, deixe -me uma mensagem e o editor responderá a você a tempo. Muito obrigado pelo seu apoio ao site wulin.com!