Sistema a griglia fluida o fissa, in design reattivo, basato su Twitter Bootstrap

Mi sto confondendo sulle varie opzioni nella griglia del bootstrap di Twitter e su come vanno insieme.

Per cominciare, puoi avere un normale fisso containero a container-fluid.

Allora o si può comprendere sia un ordinario row, o di una riga fluido, row-fluid. Cioè, puoi avere un contenitore fisso con una fila di fluidi o un contenitore-fluido ... con una fila fissa?

Inoltre, puoi includere o meno le query multimediali "reattive".

Mi sto confondendo su come queste cose interagiscono. Ma cominciamo con un esempio ovvio.

Nella stessa pagina degli esempi , c'è quello che viene presentato come esempio sia di una griglia fissa che di una griglia fluida

Tuttavia, nel mio browser, nella stessa pagina di esempio, entrambe le griglie si comportano in modo identico. Forse perché la pagina di esempio utilizza le query su supporti reattivi opzionali? In entrambi gli esempi di griglia, se inizio a restringere gradualmente la finestra del mio browser, gli elementi della griglia non si restringono gradualmente - una volta raggiunta una certa larghezza del limite (reattiva), si agganciano a una dimensione più piccola, e di nuovo ad ulteriori larghezze del confine. Ma sia l'esempio ordinario 'fisso' che l'esempio 'fluido' si comportano esattamente allo stesso modo qui - quindi che diamine è la differenza?

Quando decidi tra larghezza fissa e larghezza del fluido devi pensare in termini di INTERA pagina. Generalmente, vuoi scegliere l'uno o l'altro, ma non entrambi. Gli esempi che hai elencato nella tua domanda si trovano, infatti, nella stessa pagina a larghezza fissa. In altre parole, la pagina Ponteggi utilizza un layout a larghezza fissa. La griglia fissa e la griglia fluida nella pagina Ponteggi non sono pensate come esempi, ma piuttosto la documentazione per l'implementazione di layout a larghezza fissa e fluida.

L'esempio di larghezza fissa corretta è qui . L'esempio di larghezza del fluido corretto è qui .

Quando si osserva l'esempio di larghezza fissa, non si dovrebbe vedere il contenuto cambiare dimensioni quando il browser è maggiore di 960 px. Questa è la larghezza massima (fissa) della pagina. Le query multimediali in un design a larghezza fissa designeranno le larghezze minime per stili particolari. Lo vedrai in azione quando riduci la finestra del tuo browser e vedrai lo snap del layout ad una dimensione diversa.

Al contrario, il layout della larghezza del fluido si estenderà sempre per adattarsi alla finestra del browser, indipendentemente dalla larghezza. Le query multimediali indicano quando gli stili cambiano, ma la larghezza dei contenitori è sempre una percentuale della finestra del browser (anziché un numero fisso di pixel).

Le query multimediali "reattive" sono tutte pronte per essere eseguite. Devi solo decidere se vuoi utilizzare un layout a larghezza fissa o larghezza fluida per la tua pagina.

In precedenza, in bootstrap 2, dovevi usare row-fluidall'interno di un contenitore fluido e rowall'interno di un contenitore fisso. Con l'introduzione di bootstrap 3, è row-fluidstato rimosso, non utilizzarlo più .

EDIT : Secondo i commenti, alcuni jsFiddles per:

• layout fluido e non reattivo ,
• layout reattivo fluido ,
• layout fisso non reattivo ,
• layout reattivo fisso .

Questi violini sono completamente privi di Bootstrap, basati su pure query multimediali CSS, il che li rende un buon punto di partenza, per chiunque sia disposto a creare una soluzione simile senza utilizzare Twitter Bootstrap.

Discussione interessante Mi stavo ponendo anche questa domanda. La differenza principale tra fluido e fisso è semplicemente che il layout fisso ha una larghezza fissa in termini di tutto il layout del sito Web (viewport). Se hai una finestra di larghezza 960 px ogni colonna ha una larghezza fissa che non cambierà mai.

La disposizione fluida si comporta in modo diverso. Immagina di aver impostato la larghezza del layout principale su 100% di larghezza. Ora ogni colonna verrà calcolata solo per la sua dimensione relativa (cioè il 25%) e le dimensioni poiché il browser verrà ridimensionato. Pertanto, in base allo scopo del layout, è possibile selezionare il comportamento del layout.

Ecco un buon articolo su fluid vs. flex .

Fonte: http://coding.smashingmagazine.com/2009/06/02/fixed-vs-fluid-vs-elastic-layout-whats-the-right-one-for-you/

Professionisti

• I layout a larghezza fissa sono molto più facili da usare e più facili da personalizzare in termini di design.
• Le larghezze sono le stesse per ogni browser, quindi c'è meno seccatura con immagini, moduli, video e altri contenuti a larghezza fissa.
• Non è necessaria la larghezza minima o massima, che non è comunque supportata da tutti i browser.
• Anche se un sito Web è progettato per essere compatibile con la risoluzione dello schermo più piccola, 800 × 600, il contenuto sarà comunque sufficientemente ampio con una risoluzione maggiore per essere facilmente leggibile.

Contro

• Un layout a larghezza fissa può creare uno spazio bianco eccessivo per gli utenti con risoluzioni dello schermo più grandi, sconvolgendo così la "proporzione divina", la "Regola dei terzi", l'equilibrio generale e altri principi di progettazione.
• Risoluzioni dello schermo più piccole potrebbero richiedere una barra di scorrimento orizzontale, a seconda della larghezza del layout fisso.
• Sono necessarie trame senza soluzione di continuità, motivi e continuazione dell'immagine per soddisfare quelli con risoluzioni maggiori.
• I layout a larghezza fissa hanno generalmente un punteggio complessivo inferiore quando si tratta di usabilità.

Layout fluido in Bootstrap 3.

A differenza di Boostrap 2, Bootstrap 3 non ha un mixin fluido-contenitore per creare un contenitore fluido. .Container è un layout a griglia reattiva a larghezza fissa. In un grande schermo, ci sono spazi bianchi eccessivi in ​​entrambi i lati del contenuto della propria pagina Web.

container-fluid viene aggiunto nuovamente in Bootstrap 3.1

Un layout a griglia fluida utilizza tutta la larghezza dello schermo e funziona meglio su schermi di grandi dimensioni. Si scopre che è facile creare un layout a griglia fluida utilizzando Bootstrap 3 mixins. La seguente riga rende un layout di griglia reattivo fluido:

.container fisso;

Il mixin .container-fixed imposta il contenuto al centro dello schermo e aggiunge imbottiture. Non specifica una larghezza di pagina fissa.

Un altro approccio è quello di utilizzare lo stile CSS di Eric Flowers

.my-fluid-container {
    padding-left: 15px;
    padding-right: 15px;
    margin-left: auto;
    margin-right: auto;
}

puoi usare questo - https://github.com/chanakyachatterjee/JSLightGrid ..JSLightGrid. dai un'occhiata .. ho trovato questo davvero molto utile. Buone prestazioni, peso molto leggero, tutti importanti browser friendly e fluidi in sé, quindi non hai davvero bisogno di bootstrap per la griglia.