iônica Grid (grade)

iônica Grid (grade) ea maioria das outras estruturas são diferentes, ele usa um modelo de caixa elástica (Box modelo flexível). E no terminal móvel, basicamente, os telefones são suportados. estilo de linha linha especificada, estilo col coluna especificada.

grade de mesmo tamanho

Na linha com os elementos de estilo no estilo se você incluir o col, col será definido para o mesmo tamanho.

O seguinte estilo de linha exemplos contém 5 estilo col, cada largura col de 20%.

<div class="row">
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
</div>

tente »

Especifica a largura de uma coluna

Pode definir os tamanhos de amostra para cada coluna em uma fileira. Por padrão, a coluna será dividido em tamanho igual. Mas você também pode ser definido como uma porcentagem da largura da coluna (a malha de comportamento 12).

<div class="row">
  <div class="col col-50">.col.col-50</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
</div>

<div class="row">
  <div class="col col-75">.col.col-75</div>
  <div class="col">.col</div>
</div>

<div class="row">
  <div class="col">.col</div>
  <div class="col col-75">.col.col-75</div>
</div>

<div class="row">
  <div class="col">.col</div>
  <div class="col">.col</div>
</div>

tente »

Nota: Os exemplos de cada estilo será automaticamente adicionado ao col borda e um fundo cinzento.

Listados abaixo são alguns dos nomes de largura percentual estilo de coluna especificado:

Há deslocamento da grade

Você pode definir a coluna da esquerda compensada exemplos são os seguintes:

<div class="row">
  <div class="col col-33 col-offset-33">.col</div>
  <div class="col">.col</div>
</div>

<div class="row">
  <div class="col col-33">.col</div>
  <div class="col col-33 col-offset-33">.col</div>
</div>

<div class="row">
  <div class="col col-33 col-offset-67">.col</div>
</div>

tente »

Aqui estão algumas porcentagem compensada nome do estilo:

Retrato Snap to Grid

modelo de caixa flexível pode facilmente definir a coluna alinhada longitudinalmente. Compreende topo alinhado longitudinalmente, parte do meio do fundo, que podem ser aplicados a cada linha da coluna, ou uma coluna especificada.

Exemplo, o último configurar o conteúdo demo para melhor grade de alinhamento longitudinal.

<div class="row">
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">1<br>2<br>3<br>4</div>
</div>

<div class="row">
  <div class="col col-top">.col</div>
  <div class="col col-center">.col</div>
  <div class="col col-bottom">.col</div>
  <div class="col">1<br>2<br>3<br>4</div>
</div>

<div class="row row-top">
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">1<br>2<br>3<br>4</div>
</div>

<div class="row row-center">
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">1<br>2<br>3<br>4</div>
</div>

<div class="row row-bottom">
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">1<br>2<br>3<br>4</div>
</div>

tente »

Grade Responsive

tela portátil quando muda, por exemplo, a tela horizontal, vertical da tela e assim por diante. Temos de definir a grade para cada linha pode ser implementado de acordo com a largura do tamanho adaptativa.

Diferentes dispositivos estilo ágil da classe da seguinte forma:

<div class="row responsive-sm">
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
</div>

tente »