Come posso avere un div dividere come se fosse su un dispositivo diverso con Bootstrap?

Question

Sto tentando di creare un'applicazione Twitter Bootstrap che visualizza un div che mostra un'applicazione con diverse dimensioni del dispositivo (desktop, tablet, mobile) nella nostra SPA con funzionalità esistenti all'interno e all'esterno che devono essere comunicate. Facendo clic sulla dimensione specificata, il div dovrebbe ridimensionare. Come questo:

I punti di rottura di bootstrap sono basate media query, che sono a livello di finestra. Ma sto cercando di farlo funzionare su un div. Se specifichiamo un contenitore a livello div, le griglie non si sovrappongono verticalmente come farebbero se ridimensionassimo la finestra, semplicemente si restringono.

Problema più difficile quindi sembra all'inizio. :(Qualche idea su come aggirare questo?

La risposta più semplice è un iFrame, in modo che le dimensioni della finestra di iFrame vengano ridimensionate quando il div cambia dimensione e la griglia viene impilata correttamente, ma non è l'ideale poiché la funzionalità esiste nel nostro SPA dall'esterno e all'interno del div.

mi piacerebbe sentire una soluzione migliore per la gestione di questo!

Answer 1

ben si può utilizzare JQuery per questo, o si può anche usare biblioteca knockout per binding dinamico, che consente di utilizzare legami personalizzati per raggiungere questo. Ecco cosa farò utilizzando le associazioni di 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> 

• leggerò il valore dal tag div con id = "dispositivi" qualunque cosa sia {desktop, tablet, cellulare} e può accedervi dagli attributi definiti in associazioni personalizzate

• applicare secondo alcuni se condizioni per eseguire le attività richieste. come

  $ ("# mainDiv"). css ( applica il tuo css );

per ciascuna condizione. Applicare ciò che mai css si desidera ridimensionare il div con id = "mainDiv" in css.

Answer 2

Bene, Bootstrap è solo CSS e un po 'di js scritto in LESS e SASS in modo da poter modificare la versione LESS/SASS del file Bootstrap e sostituire tutte le query multimediali con un nome classe. Il preprocessore LESS ha una sintassi che consente di dichiarazione nido CSS, ad esempio, la seguente dichiarazione LESS:

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

è equivalente a CSS:

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

Dopo aver sostituito le query media con Classi CSS, avresti bisogno di un po 'di JavaScript che aggiunge le classi agli elementi di cui i bambini hanno bisogno per avere qualsiasi media query che vuoi eliminare.

Per un'affidabilità aggiuntiva, in modo che gli stili non trapelino alla pagina circostante, è possibile utilizzare CSS con ambito, ma in questo stadio lo browser support for scoped CSS è piuttosto spaventoso.

Answer 3

Il bootstrap ha diverse dimensioni di colonna per div. .col-xs- .col-sm- .col-md-.col-lg- xSmall e Small and Medium e Large. Queste sono le classi per il tuo div.

Answer 4

jQuery è la soluzione facile, veloce e migliore per il tuo problema. è possibile utilizzare

$("#idForSize").click(function(){ 
    $("#idForDiv").css({'height','20px','width','30px'}); 
});