Come utilizzare Twitter Bootstrap 3 per siti non responsive?

Come puoi leggere sulla loro pagina, il nuovo Bootstrap 3 è “mobile first”:

Con Bootstrap 2, abbiamo aggiunto stili facoltativi mobili per gli aspetti chiave del framework. Con Bootstrap 3, abbiamo riscritto il progetto per renderlo mobile fin dall’inizio . Invece di aggiungere gli stili mobili opzionali, sono integrati nel nucleo . In effetti, Bootstrap è mobile per primo. I primi stili mobili possono essere trovati in tutta la libreria invece che in file separati.

Come posso disabilitare la reattività? Voglio che il mio sito non si riorganizzi per tablet o mobile.

Per una procedura più spiegata, vedi Come utilizzare Twitter Bootstrap 3 per siti non responsive

Dalla documentazione Bootstrap (più alcune spiegazioni):

Per disabilitare le funzionalità reattive, segui questi passaggi. Guardalo in azione nel modello modificato qui sotto.

1) Rimuovi (o semplicemente non aggiungi) il viewport menzionato nei documenti CSS

auto-esplicativo

2) Rimuovi la larghezza massima sul .container Per tutti i livelli di griglia con larghezza massima: nessuna! Importante; e imposta una larghezza regolare come larghezza: 970 px ;. Assicurati che questo avvenga dopo il Bootstrap CSS predefinito. Puoi opzionalmente evitare l’importante con le query sui media o con qualche selector-fu.

Aggiungi questo stile:

 .container{ max-width: none !important; width: 970px; } 

3) Se usi navbar , annulla tutto il comportamento di compressione e espansione della barra di navigazione (questo è troppo da mostrare qui, quindi fai l’esempio).

Apri variables.less e imposta le variabili:

@grid-float-breakpoint a 0

@screen-xs-max a 0 (questo sarà risolto, leggi qui )

4) Per i layout a griglia, utilizzare le classi .col-xs- * in aggiunta o in sostituzione di quelle medie / grandi. Non ti preoccupare, la griglia di dispositivi extra-piccola si adatta a tutte le risoluzioni, quindi sei lì.

auto-esplicativo

Avrai comunque bisogno di Respond.js per IE8 (poiché le nostre query multimediali sono ancora disponibili e devono essere prelevate). Questo disabilita semplicemente il “sito mobile” di Bootstrap.

Senza importanti mod alla fonte, non sembra ansible.

Il seguente link descrive le modifiche necessarie: http://bassjobsen.weblogs.fm/compile-twitters-bootstrap-3-without-responsive-features/

I documenti Bootstrap 3 contengono effettivamente un paragrafo per questo problema: http://getbootstrap.com/getting-started/#disable-responsive

Beh, stavo cercando la stessa cosa. Non ho ancora verificato, quindi non posso attestare la sua funzionalità, ma qui è una versione con reattivo fuori:

https://github.com/bassjobsen/non-responsive-tb3

Controlla qui la risposta di Jay Douglass, i dettagli che sovrascrivono le variabili del punto di interruzione della query multimediale per disabilitare le funzionalità reattive. È una soluzione semplice che richiede un minimo cambiamento.

Come rimuovere le funzionalità reattive in Twitter Bootstrap 3?

Con un piccolo sforzo puoi ottenerlo.

1) Rimuovi la vista

2) Aggiungi .container{ max-width: none !important; width: 970px; } .container{ max-width: none !important; width: 970px; } .container{ max-width: none !important; width: 970px; } al tuo file css

3) Se usi navbar, annulla tutto il comportamento di compressione e espansione della barra di navigazione

4)

Per i layout di griglia, utilizzare le classi .col-xs- * in aggiunta o in sostituzione di quelle medie / grandi. Non ti preoccupare, la griglia di dispositivi extra-piccola si adatta a tutte le risoluzioni, quindi sei lì.

Puoi seguire il link qui sotto:

http://getbootstrap.com/getting-started/#disable-responsive