Bootstrap Exemplo Grid: Dispositivos Médio
No capítulo anterior, apresentamos um exemplo de grade com aulas para pequenos dispositivos. Foram utilizados dois divs (colunas) e deu-lhes um 25%/75% dividido:
<div class="col-sm-3">....</div>
<div class="col-sm-9">....</div>Mas em dispositivos médias do projeto pode ser melhor como um 50%/50% dividido.
Dica: dispositivos médias são definidas como tendo uma largura de tela de 992 pixels para 1199 pixels.
Para dispositivos médias usaremos os .col-md-* classes.
Agora vamos adicionar as larguras das colunas para dispositivos médio:
<div class="col-sm-3 col-md-6">....</div>
<div class="col-sm-9 col-md-6">....</div>
Agora Bootstrap vai dizer "no tamanho pequeno, olhar para as classes com -sm- neles e usá-los. No tamanho médio, olhar para as classes com -md- neles e usá-las".
O exemplo a seguir irá resultar em um 25%/75% dividido em pequenos dispositivos e 50%/50% dividida em dispositivos médias (e grandes). Em dispositivos extras pequenas, ele vai empilhar automaticamente (100%):
Exemplo
<div class="container-fluid">
<h1>Hello World!</h1>
<div
class="row">
<div class="col-sm-3
col-md-6" style="background-color:yellow;">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-9 col-md-6" style="background-color:pink;">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div> Tente você mesmo " Nota: Certifique-se de que a soma sempre acrescenta-se a 12.
Usando Apenas Médio
No exemplo abaixo, nós só especificar o .col-md-6 classe (sem .col-sm-* ). Isto significa que os dispositivos de médio e grande porte irá dividir 50%/50% - porque a classe escalas para cima. No entanto, para os pequenos dispositivos, ele vai empilhar verticalmente (100% largura):
Exemplo
<div
class="row">
<div class="col-md-6" style="background-color:yellow;">
<p>Lorem ipsum...</p>
</div>
<div class="col-md-6" style="background-color:pink;">
<p>Sed ut perspiciatis...</p>
</div>
</div>
Tente você mesmo " O próximo capítulo mostra como adicionar um por cento de divisão diferente para grandes dispositivos.