Como posso ter um div agindo como se estivesse em um dispositivo diferente com o Bootstrap?

9

Estou tentando criar um aplicativo Twitter Bootstrap que exiba uma div que mostra um aplicativo em diferentes tamanhos de dispositivo (desktop, tablet, celular) em nosso SPA com a funcionalidade existente dentro e fora que precisa se comunicar. Ao clicar no tamanho especificado, o div deve ser redimensionado. Assim:

Os pontos de quebra de inicialização são baseados em consultas de mídia, que estão no nível da janela. Mas estou tentando fazer isso funcionar em uma div. Se especificarmos um contêiner no nível de div, as grades não serão empilhadas verticalmente como se fossem redimensionadas, elas apenas encolherão.

Problema mais difícil, então parece que a princípio. :( Alguma idéia de como contornar isso?

A resposta mais fácil é um iFrame, para que o tamanho da janela do iFrame seja redimensionado à medida que o tamanho das alterações div e a grade se acumulam corretamente, mas isso não é ideal, pois existe funcionalidade no nosso SPA de fora e dentro do div.

Gostaria de ouvir uma solução melhor para lidar com isso!

    
por tmanion 16.04.2015 в 20:26
fonte

4 respostas

1

Bem, o bootstrap tem diferentes tamanhos de coluna para divs. .col-xs- .col-sm- .col-md- .col-lg- xSmall e Small e Medium and Large. Estas são classes para sua div.

    
por Brandon Espinoza 27.04.2015 / 20:20
fonte
1

Bem, o Bootstrap é apenas CSS e um pouco de js escrito em LESS e SASS para que você possa modificar a versão LESS / SASS do arquivo Bootstrap e substituir todas as consultas de mídia por um nome de classe. O pré-processador LESS possui uma sintaxe que permite aninhar a declaração CSS, por exemplo, a seguinte declaração LESS:

.mobile {
    .foo { ... }
    .bar { ... }
}

é equivalente ao CSS:

.mobile .foo { ... }
.mobile .bar { ... }

Depois de substituir as consultas de mídia pela classe CSS, você precisará de um JavaScript que adicione as classes aos elementos cujos filhos precisam ter qualquer consulta de mídia que você queira excluir.

Para confiabilidade adicional, para que os estilos não vazem para a página ao redor, talvez você queira usar CSS com escopo definido, mas o suporte do navegador para o CSS com escopo é bastante chocante neste estágio.

    
por Lie Ryan 17.04.2015 / 13:54
fonte
0

Bem, você pode usar o JQuery para isso, ou também pode usar a biblioteca de eliminação para ligação dinâmica, que permite usar ligações personalizadas para conseguir isso. Aqui está o que eu vou fazer é usando ligações knockout

<div id="devices"> It can have bindings which can have the values desktop, tablet & mobile<div>
<div id="leftDiv">Some Code...<div>
<div id="mainDiv">View<div>
  • Eu vou ler o valor da tag div com id="devices" qualquer que seja {desktop, tablet, mobile} e acessá-lo a partir dos atributos definidos em ligações personalizadas
  • Em segundo lugar, aplique algumas condições para executar as tarefas necessárias. como

    $ ("# mainDiv"). css ( aplique seu css );

para cada condição. Aplique o que sempre css você deseja redimensionar o div com id="mainDiv" em css.

    
por ashishraaj 17.04.2015 / 13:23
fonte
0

O jQuery é a solução fácil, rápida e melhor para o seu problema. você pode usar

$("#idForSize").click(function(){
   $("#idForDiv").css({'height','20px','width','30px'});
});
    
por Sainesh Mamgain 29.04.2015 / 10:42
fonte