Come rimuovere le funzionalità reattive in Twitter Bootstrap 3?

85

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

twitter-bootstrap  responsive-design  media-queries  twitter-bootstrap-3 
— kanarifugl
fonte
1
Questo post del blog contiene alcune informazioni su come farlo e un collegamento alla fine a una versione completa su GitHub.
— bbill
1
@STLDeveloper ha chiesto il 3 dicembre 12 alle 16:11. Bootstrap 3 ha 2 giorni o qualcosa del genere.
— kanarifugl
1
@STLDeveloper, sta dicendo che i file reattivi non sono più separati in Bootstrap 3 . Il post del blog e l'account Github di Bootstrap spiegano le modifiche.
— bbill
La documentazione del bootstrap descrive come farlo: getbootstrap.com/getting-started/#disable-responsive
— Nicolas Janel
@NicolasJanel il tuo link è morto.
— Dmitry

Risposte:

104

Per disattivare 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 in questo modo:

// Media interroga i punti di interruzione
// ------------------------------------------------ -

// Schermo / telefono extra piccolo
// Nota: @ screen-xs e @ screen-phone obsoleti a partire dalla v3.0.1
@ screen-xs: 1px;
@ screen-xs-min: @ screen-xs;
@ screen-phone: @ screen-xs-min;

// Piccolo schermo / tablet
// Nota: @ screen-sm e @ screen-tablet obsoleti a partire dalla v3.0.1
@ screen-sm: 2px;
@ screen-sm-min: @ screen-sm;
@ screen-tablet: @ screen-sm-min;

// Schermo medio / desktop
// Nota: @ screen-md e @ screen-desktop obsoleti a partire dalla v3.0.1
@ screen-md: 3px;
@ screen-md-min: @ screen-md;
@ screen-desktop: @ screen-md-min;

// Schermo grande / desktop ampio
// Nota: @ screen-lg e @ screen-lg-desktop obsoleti a partire 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 in stile desktop su un valore inferiore in modo che venga applicata 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: chris nota che è possibile impostare queste variabili nel compilatore less online sul sito bootstrap

— Jay Douglass
fonte
7
Puoi anche interrompere lo stacking della barra di navigazione modificando la variabile @ grid-float-breakpoint su 1px.
— Chris
8
wow, funziona anche nel compilatore online sul sito di download personalizzato bootstrap!
— chris,
1
Non sono sicuro che quanto sopra funzioni. Se qualcuno definisce @media (min-width: @screen-sm-min)(il che significa applicare questo stile a sm breakpoint e tutti i breakpoint superiori; cioè, sm, md, lg), le sovrascritture di cui sopra infrangerebbero quell'ipotesi, poiché la definizione non sarebbe più applicata a md? Ho impostato @ screen-xs su 1px e @ screen-sm su 1px (oltre a @ screen-md su 1px); in questo modo, vengono applicati tutti gli stili xs, sm e md, sovrascrivendo se stessi con la precedenza dell'ordine di origine.
— Martin Suchanek
1
È meglio usare 1px per xs, 2px per sm, 3px per md e 9999px per lg. In questo modo non hai barre di navigazione e modali in "modalità mobile".
— 2chiamato caos
1
funziona, ma manca ancora la barra di scorrimento orizzontale del browser
— Cichy
45

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

Passaggi per disabilitare le visualizzazioni reattive

Per disabilitare le funzioni reattive, segui questi passaggi. Guardalo in azione nel modello modificato di seguito.

  1. Rimuovi (o semplicemente non aggiungere) il riquadro di visualizzazione <meta>menzionato nei documenti CSS
  2. Rimuovi la larghezza massima dal .container per tutti i livelli della griglia con larghezza massima: nessuna! Importante; e imposta una larghezza regolare come width: 970px ;. Assicurati che questo venga dopo il Bootstrap CSS predefinito. Facoltativamente, puoi evitare! Important con le media query o alcuni selector-fu.
  3. Se usi le navbar, annulla tutto il comportamento di compressione ed espansione della barra di navigazione (questo è troppo da mostrare qui, quindi guarda l'esempio).
  4. Per i layout a griglia, usa le classi .col-xs- * in aggiunta o al posto di quelle medio / grandi. Non preoccuparti, la griglia del dispositivo extra-piccola si adatta a tutte le risoluzioni, quindi sei lì.

Avrai ancora bisogno di Respond.js per IE8 (poiché le nostre query multimediali sono ancora presenti e devono essere raccolte). Questo disabilita solo il "sito mobile" di Bootstrap.

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

— lborgav
fonte
5
Questo non ha funzionato per me. Alcuni elementi rispondono alla larghezza della porta di visualizzazione.
— Ziyan Junaideen
@ZiyanJunaideen probabilmente ti sei perso qualcosa. Puoi fornire un jsfiddle?
— Adrien Be
1
Questo ha funzionato per me. Penso che dovrebbe essere contrassegnato come la risposta corretta.
— Dave Stewart
20

Ultimamente ho capito quanto sia facile rendere il tuo bootstrap v3.1.1 non reattivo. Ciò include le barre di navigazione per non collpase. Non so se tutti lo sanno ma mi piacerebbe condividerlo.

Due passaggi per un Bootsrap non reattivo v3.1.1

Innanzitutto, crea un file css denominalo come non-responsive.css. Assicurati di aggiungerlo ai temi o al collegamento subito dopo i file css di bootstrap.

In secondo luogo, incolla questo codice nel 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 dal esempio a getbootstrap.com .

— JiNexus
fonte
2
Woow molto carino! Grazie :)
— Ronald Araújo
2
Collega il codice sorgente del tuo codice quando lo copi / incolli qui.
— ba0708
11

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

  1. Ometti il ​​viewport <meta>menzionato nei documenti CSS
  2. Eseguire l'override del widthsul .containerper ogni livello di griglia con una singola larghezza, ad esempio width: 970px !important;Assicurarsi che questo viene dopo il CSS di default Bootstrap. Opzionalmente puoi evitare le !importantquery con media o alcuni selector-fu.
  3. Se utilizzi le barre di navigazione, rimuovi tutto il comportamento di compressione ed espansione della barra di navigazione.
  4. Per i layout a griglia, utilizzare .col-xs-*classi in aggiunta o al posto di quelle medio / grandi. Non preoccuparti, la griglia del dispositivo extra-piccola si adatta a tutte le risoluzioni.
— Sophy
fonte
11

Avevo bisogno di rimuovere completamente la funzione reattiva di Bootstrap, ho finito per 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

— Ivan Minutillo
fonte
5

Puoi farlo utilizzando Bootstrap 3 CSS con funzionalità non reattive

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

— ɐsɹǝʌ ǝɔıʌ
fonte
1
Bello, ma peccato che sia un set completo completo di css bootstrap. Sarebbe bello avere il css solo per disabilitare le funzionalità reattive. Supponiamo di chiamarlo "nonresponsive.css". In questo modo, se includiamo nonresponsive.css, la reattività reattiva viene disabilitata. Se rimuovi quel css, il responsive viene ripristinato.
— user1995781
1
Puoi fare ciò che hai suggerito semplicemente aggiungendo alle intestazioni il bootstrap.css originale e il bootstrap.css non reattivo pubblicato sul link sopra. Ovviamente puoi rinominarlo come vuoi. Commenta la linea e poi funzionerà come desiderato.
— ɐsɹǝʌ ǝɔıʌ
1
Sì, ma questo sovrascriverà tutto il mio tema di bootstrap personalizzato. Ad esempio, se utilizzo il tema da bootswatch.com , verrà sovrascritto da quel css.
— user1995781
1
Ovviamente. Se stai utilizzando un tema personalizzato su bootstrap perderai tutte le tue personalizzazioni, ma non nel caso in cui utilizzi il bootstrap CSS originale
— ɐsɹǝʌ ǝɔıʌ
0

Se vuoi un sito web di dimensioni fisse, 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: 9999px;
Espandi lo snippet

A meno che tu non stia usando .container-fluid, aggiungi anche:

.container-fluid {
    width: 700px;
}
body {
    width: 700px + @general-min-width;
}
— Hrvoje Golcic
fonte
-2

Guarda www.goo.gl/2SIOJj , è un lavoro in corso ma potrebbe aiutarti.

Utilizzo i cookie per definire se desidero la versione desktop o reattiva. Nel piè di pagina della pagina puoi trovare due intervalli e in generale.js è lo script per gestire i clic.

        <div class="col-xs-6" style="text-align:center;"><span class="make_desktop">Desktop</span></div>
        <div class="col-xs-6" style="text-align:center;"><span class="make_responsive">Mobile</span></div>

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 tutto il mio css personalizzato in due file non uso la navigazione bootstrap ma la mia quindi questa è la maggior parte dei miei stili personalizzati, quindi non risolverà l'intero problema ma funziona per me

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

nel caso in cui si selezioni mobile, caricherò / echo 

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">  
<!-- Bootstrap core CSS and JS -->
        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
        <link href="/themes/responsive_lime/bootstrap-3_1_1/css/bootstrap.css" rel="stylesheet">
        <script src="/themes/responsive_lime/bootstrap-3_1_1/js/bootstrap.min.js"></script>

and load these stylesheets
<link rel="stylesheet" type="text/css" media="screen,print" href="/themes/responsive_lime/css/style.css?modified=14-06-2014-12-27-40" />
<link rel="stylesheet" type="text/css" media="screen,print" href="/themes/responsive_lime/css/style-responsive.css?modified=1402758346" />

nel caso in cui selezioni desktop, caricherò / echo

<meta name="viewport" content="width=1024">    


        <!-- Bootstrap core CSS and JS -->
        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
        <link href="/themes/responsive_lime/bootstrap-3_1_1/css/bootstrap.css" rel="stylesheet">
        <script src="/themes/responsive_lime/bootstrap-3_1_1/js/bootstrap.min.js"></script>

        <!-- Main CSS -->
        <link rel="stylesheet" type="text/css" media="screen,print" href="/themes/responsive_lime/css/style.css?modified=14-06-2014-12-27-40" />
<link rel="stylesheet" type="text/css" media="screen,print" href="/themes/responsive_lime/css/non-responsive.css?modified=1402758635" />

il non-responsive.css è quello che ha override per bootstrap la mia preoccupazione è il layout quindi non c'è molto lì, dato che gestisco la navigazione a modo mio quindi 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 alcune altre soluzioni che ho visto che ignorerà solo il viewport che sembra aver funzionato solo sui dispositivi mobili per me

— tomhre
fonte
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.