Através de um sistema de colunas imaginárias( Grid System ) podemos dividir a tela( ou qualquer container ) em "x" colunas, onde "x" normalmente inicia com 12.


Vejamos um exemplo com DESKTOP e MOBILE:


<div class="container">

  <div class="row">
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  </div>

</div>




No exemplo acima, em uma tela DESKTOP, teremos três blocos de 4 colunas cada( 4x3=12 ).

A classe de CSS usada é "col-md-4".



No exemplo acima, em um dispositivo MOBILE, teremos três colunas com 6 posições cada mas, o terceiro bloco ficou abaixo pois os 2 primeiros já preencheram o espaço( as 12 colunas virtuais ) da tela mobile( 6x2=12 ), pois é fisicamente menor.

A classe de CSS usada é "col-6".



Pra quem não tem domínio de html e css isso pode parecer( e de certa forma é ! ) bastante complexo pra criação de formulários.


No próximo tópico vamos ver como tudo ficará mais simples usando o RadCORE.


Created with the Personal Edition of HelpNDoc: Easily create Web Help sites