Latest web development tutorials

Exemplo sistema de grade Bootstrap: nível de pilha

Vejamos um exemplo simples com um layout de grade: duas colunas, cada coluna contém dois parágrafos. (Aqui, as colunas são definidas para cada estilo, você pode evitar fazê-lo.) 

<! DOCTYPE html>
<Html>
<Head>
   <Title> instância Bootstrap - empilhados horizontal </ title>
   <Link href = "/ inicialização / css / bootstrap.min.css" rel = "stylesheet">
   <Script src = "/ scripts / jquery.min.js"> </ script>
   <Script src = "/ inicialização / js / bootstrap.min.js"> </ script>
</ Head>
<Body>

<Div class = "container">
   <H1> Olá, mundo! </ H1>

   <Div class = "linha">

      <Div class = "col-md-6" style = "background-color: # dedef8; box-shadow: 
         inset 1px -1px 1px # 444, inserir -1px 1px 1px # 444; ">
         <P> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed fazer 
            eiusmod tempor ut incididunt labore et dolore magna aliqua. Ut 
            enim ad minim veniam, Quis nostrud laboris exercitation ullamco 
            nisi ut aliquip consequat ex ea commodo. 
         </ P>

         <P> Sed ut perspiciatis unde omnis iste natus erro voluptatem sit 
            accusantium doloremque laudantium, totam rem aperiam, eaque ipsa 
            quae ab illo inventore veritatis et architecto quasi Beatae vitae 
            dicta explicabo sunt. 
         </ P>
      </ Div>

      <Div class = "col-md-6" style = "background-color: # dedef8; box-shadow: 
         inset 1px -1px 1px # 444, inserir -1px 1px 1px # 444; ">
         <P> Sed ut perspiciatis unde omnis iste natus erro voluptatem sit 
            accusantium doloremque laudantium.
         </ P>

         <P> neque porro quisquam est, qui dolorem ipsum dolor sit amet quia, 
            consectetur, adipisci velit, sed quia non numquam eius modi 
            tempora incidunt ut labore et dolore Magnam aliquam quaerat 
            voluptatem. 
         </ P>
   </ Div>
</ Div>

</ Body>
</ Html>

Os resultados são os seguintes:

sistema de grade horizontal empilhado
detalhe
  • <Div class = "recipiente"> ... </ div> elemento foi adicionado para assegurar que a largura máxima e no centro.
  • Depois de adicionar o recipiente, em seguida, você precisa considerar o comportamento da unidade. Adicionar<div class = "linha"> ... </ div>, e adicionar colunas dentro da linha <div class = "col-md-6"> </ div>.
  • Cada linha da grade é composta de 12 unidades, você pode usar esses elementos para definir o tamanho das colunas. No nosso exemplo, existem duas colunas, cada coluna é constituída por seis unidades, ou 6 + 6 = 12.

Você pode experimentar muitas mais opções, como<div class = "col-md -3"> </ div> e <div class = "col-md-9"> | </ div> ou<div class = "col -md-7 "> </ div> e<div class =" col-md-5 "> </ div>.

Você pode tentar, mas certifique-se de que a soma é sempre 12.