Bootstrap grade Exemplo: pequenos dispositivos
Suponha que tenhamos um layout simples com duas colunas. Queremos que as colunas a ser dividida 25%/75% para pequenos dispositivos.
Dica: dispositivos pequenos são definidos como tendo uma largura de tela de 768 pixels a 991 pixels.
Para pequenos dispositivos, vamos utilizar os .col-sm-* classes.
Nós vamos adicionar as seguintes classes para as nossas duas colunas:
<div class="col-sm-3">....</div>
<div class="col-sm-9">....</div>Agora Bootstrap vai dizer "no tamanho pequeno, olhar para as classes com -sm- neles e usá-las".
O exemplo a seguir irá resultar em um 25%/75% dividida em pequenas (e médias e grandes) dispositivos. 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" style="background-color:yellow;">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-9" 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.
Para a / 66,6% Repartição 33,3%, você usaria .col-sm-4 e .col-sm-8 :
Exemplo
<div class="container-fluid">
<h1>Hello World!</h1>
<div
class="row">
<div class="col-sm-4" style="background-color:yellow;">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-8" style="background-color:pink;">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div> Tente você mesmo " O próximo capítulo mostra como adicionar um por cento de divisão diferente para dispositivos médios.