Come rimuovere le funzionalità reattive in Twitter Bootstrap 3?

Dal Bootstrap 3 non ci sono più file separati per fogli di stile reattivi e standard. Quindi, come posso rimuovere facilmente le funzionalità di risposta?

Per distriggersre gli stili non desktop è sufficiente modificare 4 righe di codice nel file variables.less. Imposta i punti di interruzione della larghezza dello schermo nel file variables.less come questo:

 // Media query breakpoints // ------------------------------------------- ------- // Extra small screen / phone // Nota: deprecato @ screen-xs e @ screen-phone dalla v3.0.1 @ screen-xs: 1px;  @ screen-xs-min: @ screen-xs;  @ screen-phone: @ screen-xs-min;  // Small screen / tablet // Nota: deprecato @ screen-sm e @ screen-tablet dalla v3.0.1 @ screen-sm: 2px;  @ screen-sm-min: @ screen-sm;  @ screen-tablet: @ screen-sm-min;  // Schermo medio / desktop // Nota: deprecato @ screen-md e @ screen-desktop dalla v3.0.1 @ screen-md: 3px;  @ screen-md-min: @ screen-md;  @ screen-desktop: @ screen-md-min;  // Schermo grande / desktop largo // Nota: deprecato @ screen-lg e @ screen-lg-desktop dalla v3.0.1 @ screen-lg: 9999px;  @ screen-lg-min: @ screen-lg;  @ screen-lg-desktop: @ screen-lg-min; 

Questo imposta la larghezza minima sulla media query dello stile desktop in modo che si applichi a tutte le larghezze dello schermo. Grazie a 2calledchaos per il miglioramento! Alcuni stili di base sono definiti negli stili mobili, quindi dobbiamo essere sicuri di includerli.

Modifica: note di chris che puoi impostare queste variabili nel compilatore online meno sul sito di bootstrap

Questo è spiegato nei documenti di rilascio ufficiali di Bootstrap 3 :

Passi per disabilitare le visualizzazioni reattive

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

  1. Rimuovi (o semplicemente non aggiungere) il viewport menzionato nei documenti CSS
  2. Rimuovi la larghezza massima su .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.
  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).
  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ì.

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.

Vedi anche l’esempio su GetBootstrap.com/examples/non-responsive/

Ho appena capito ultimamente su quanto sia facile rendere il tuo bootstrap v3.1.1 non reattivo. Ciò include le barre di navigazione da non mettere in collasso. Non so se tutti lo sanno, ma mi piacerebbe condividerlo.

Due passaggi per un Bootsrap non reattivo v3.1.1

Innanzitutto, crea un nome file css come non-responsive.css. Assicurati di aggiungerlo ai tuoi temi o link subito dopo i file cst bootstrap.

In secondo luogo, incolla questo codice sul tuo non-responsive.css:

 /* Template-specific stuff * * Customizations just for the template; these are not necessary for anything * with disabling the responsiveness. */ /* Account for fixed navbar */ body { min-width: 970px; padding-top: 70px; padding-bottom: 30px; } /* Finesse the page header spacing */ .page-header { margin-bottom: 30px; } .page-header .lead { margin-bottom: 10px; } /* Non-responsive overrides * * Utilitze the following CSS to disable the responsive-ness of the container, * grid system, and navbar. */ /* Reset the container */ .container { width: 970px; max-width: none !important; } /* Demonstrate the grids */ .col-xs-4 { padding-top: 15px; padding-bottom: 15px; background-color: #eee; background-color: rgba(86,61,124,.15); border: 1px solid #ddd; border: 1px solid rgba(86,61,124,.2); } .container .navbar-header, .container .navbar-collapse { margin-right: 0; margin-left: 0; } /* Always float the navbar header */ .navbar-header { float: left; } /* Undo the collapsing navbar */ .navbar-collapse { display: block !important; height: auto !important; padding-bottom: 0; overflow: visible !important; } .navbar-toggle { display: none; } .navbar-collapse { border-top: 0; } .navbar-brand { margin-left: -15px; } /* Always apply the floated nav */ .navbar-nav { float: left; margin: 0; } .navbar-nav > li { float: left; } .navbar-nav > li > a { padding: 15px; } /* Redeclare since we override the float above */ .navbar-nav.navbar-right { float: right; } /* Undo custom dropdowns */ .navbar .navbar-nav .open .dropdown-menu { position: absolute; float: left; background-color: #fff; border: 1px solid #ccc; border: 1px solid rgba(0, 0, 0, .15); border-width: 0 1px 1px; border-radius: 0 0 4px 4px; -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175); box-shadow: 0 6px 12px rgba(0, 0, 0, .175); } .navbar-default .navbar-nav .open .dropdown-menu > li > a { color: #333; } .navbar .navbar-nav .open .dropdown-menu > li > a:hover, .navbar .navbar-nav .open .dropdown-menu > li > a:focus, .navbar .navbar-nav .open .dropdown-menu > .active > a, .navbar .navbar-nav .open .dropdown-menu > .active > a:hover, .navbar .navbar-nav .open .dropdown-menu > .active > a:focus { color: #fff !important; background-color: #428bca !important; } .navbar .navbar-nav .open .dropdown-menu > .disabled > a, .navbar .navbar-nav .open .dropdown-menu > .disabled > a:hover, .navbar .navbar-nav .open .dropdown-menu > .disabled > a:focus { color: #999 !important; background-color: transparent !important; } 

Questo è tutto e divertiti .. ^^

Fonte: non-responsive.css dell’esempio su getbootstrap.com .

Ho dovuto rimuovere completamente la funzione di risposta Bootstrap, ho finito col sovrascrivere il comportamento con il seguente frammento:

 .container { width: 960px !important; } @media (min-width: 1px) { .container { max-width: 940px; } .col-lg-1, .col-lg-2, [...] 

Snippet completo: https://gist.github.com/ivanminutillo/8557293

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

  1. Ometti il ​​viewport menzionato nei documenti CSS
  2. Sovrascrivi la width del .container ogni livello di griglia con una larghezza singola, ad esempio width: 970px !important; Assicurati che questo avvenga dopo il Bootstrap CSS predefinito. Puoi opzionalmente evitare l’ !important con le query sui media o con qualche selector-fu.
  3. Se utilizzi barre di navigazione, rimuovi tutto il comportamento di compressione e espansione della barra di navigazione.
  4. Per i layout di griglia, utilizzare le .col-xs-* oltre a, o in sostituzione, di medie / grandi dimensioni. Non preoccuparti, la griglia di dispositivi extra-piccola si adatta a tutte le risoluzioni.

Puoi farlo usando il Bootstrap 3 CSS con funzionalità non responsive

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

Se vuoi un sito web di dimensioni fisse, questo dovrebbe essere abbastanza semplice:

 // Override container sizes @container-sm: 700px; @container-md: 700px; @container-lg: 700px; // Fixate media queries to tablet view only (lower viewports set to 0px, desired one to 1px, and the higher to ~9999px) @screen-xs-min: 0px; @screen-sm-min: 1px; @screen-md-min: 9999px; @screen-lg-min: 9999px; // Disable responsive features such as navbar-collapse @grid-float-breakpoint: 1; 

Guarda http://www.goo.gl/2SIOJj è un work in progress ma potrebbe aiutarti.

Uso i cookie per definire se voglio la versione desktop o retriggers. Nel footer della pagina puoi trovare due span e in general.js è lo script per gestire i clic.

  
Desktop
Mobile
function setMobDeskCookie(c_name, value, exdays) { var exdate = new Date(); exdate.setDate(exdate.getDate() + exdays); var c_value = escape(value) + ((exdays === null) ? "" : "; expires=" + exdate.toUTCString()); document.cookie = c_name + "=" + c_value + "; path=/"; window.location.reload(); } $(function() { $(".make_desktop").click(function() { setMobDeskCookie('deskmob', 1, 3650); }); $(".make_responsive").click(function() { setMobDeskCookie('deskmob', 0, 3650); }); });`enter code here`

ho finito per dividere tutti i miei css personalizzati in due file non uso la navigazione di bootstrap ma il mio, quindi questa è la maggior parte dei miei stili personalizzati, quindi non risolverà il tuo intero problema ma funziona per me

e ho anche creato non-responsive.css che costringe la rete a mantenere la versione a schermo grande

nel caso in cui selezioni mobile, vorrei caricare / echo

      and load these stylesheets   

nel caso in cui si seleziona desktop vorrei caricare / echo

         

il non-responsive.css è quello che ha l’override per il bootstrap la mia preoccupazione è il layout quindi non c’è molto in là, dato che gestisco la navigazione a modo mio in modo css per esso e gli altri bit sono nei miei altri file css

tieni presente che la mia configurazione si comporta come desktop anche sui browser desktop a differenza di altre soluzioni che ho visto che ignorano solo il viewport che sembra aver wotked solo sui dispositivi mobili per me