Wie entferne ich reaktionsfähige Funktionen in Twitter Bootstrap 3?

85

Seit Bootstrap 3 gibt es keine separaten Dateien mehr für reaktionsfähige und Standard-Stylesheets. Wie kann ich die reaktionsfähigen Funktionen einfach entfernen?

twitter-bootstrap  responsive-design  media-queries  twitter-bootstrap-3 
— Kanarifugl
quelle
1
Dieser Blog-Beitrag enthält einige Informationen dazu und einen Link am Ende zu einer fertigen Version auf Github.
— Bill
1
@ STLDeveloper fragte 3. Dezember 12 um 16:11. Bootstrap 3 ist 2 Tage alt oder so.
— Kanarifugl
1
@STLDeveloper, er sagt, dass die responsiven Dateien in Bootstrap 3 nicht mehr getrennt sind . Der Blog-Beitrag und das Github-Konto von Bootstrap erläutern die Änderungen.
— Rechnung
Die Bootstrap-Dokumentation beschreibt, wie es geht: getbootstrap.com/getting-started/#disable-responsive
— Nicolas Janel
@NicolasJanel dein Link ist tot.
— Dmitry

Antworten:

104

Um die Nicht-Desktop-Stile zu inaktivieren, müssen Sie nur 4 Codezeilen in der Datei variables.less ändern. Legen Sie die Haltepunkte für die Bildschirmbreite in der Datei variables.less folgendermaßen fest:

// Haltepunkte für Medienabfragen
// ------------------------------------------------ - -

// Extra kleiner Bildschirm / Telefon
// Hinweis: Veraltete @ screen-xs und @ screen-phone ab Version 3.0.1
@ screen-xs: 1px;
@ screen-xs-min: @ screen-xs;
@ screen-phone: @ screen-xs-min;

// Kleiner Bildschirm / Tablet
// Hinweis: Veraltetes @ screen-sm und @ screen-tablet ab Version 3.0.1
@ screen-sm: 2px;
@ screen-sm-min: @ screen-sm;
@ screen-tablet: @ screen-sm-min;

// Mittlerer Bildschirm / Desktop
// Hinweis: Veraltetes @ screen-md und @ screen-desktop ab Version 3.0.1
@ screen-md: 3px;
@ screen-md-min: @ screen-md;
@ screen-desktop: @ screen-md-min;

// Großer Bildschirm / breiter Desktop
// Hinweis: Veralteter @ screen-lg und @ screen-lg-desktop ab Version 3.0.1
@ screen-lg: 9999px;
@ screen-lg-min: @ screen-lg;
@ screen-lg-desktop: @ screen-lg-min;

Dadurch wird die Mindestbreite in der Medienabfrage im Desktop-Stil niedriger, sodass sie für alle Bildschirmbreiten gilt. Vielen Dank an 2calledchaos für die Verbesserung! Einige Basisstile sind in den mobilen Stilen definiert, daher müssen wir sicherstellen, dass sie enthalten sind.

Bearbeiten: chris merkt an, dass Sie diese Variablen im Online-Less-Compiler auf der Bootstrap-Site festlegen können

— Jay Douglass
quelle
7
Sie können das Stapeln der Navigationsleiste auch stoppen, indem Sie die Variable @ grid-float-breakpoint in 1px ändern.
— Chris
8
wow, das funktioniert auch im Online-Compiler auf der benutzerdefinierten Bootstrap-Download-Site!
— chris
1
Ich bin nicht sicher, ob das oben genannte funktioniert. Wenn jemand definiert @media (min-width: @screen-sm-min)(was bedeutet, diesen Stil auf den sm-Haltepunkt und alle höheren Haltepunkte anzuwenden; dh sm, md, lg), würden die obigen Überschreibungen diese Annahme brechen, da die Definition nicht mehr auf md angewendet würde? Ich setze @ screen-xs auf 1px und @ screen-sm ebenfalls auf 1px (zusätzlich zu @ screen-md als 1px); Auf diese Weise werden alle xs-, sm- und md-Stile angewendet, wobei die Priorität der Quellreihenfolge überschrieben wird.
— Martin Suchanek
1
Es ist besser, 1px für xs, 2px für sm, 3px für md und 9999px für lg zu verwenden. Auf diese Weise haben Sie keine Navigationsleisten und Modalitäten im "mobilen Modus".
— 2called-Chaos
1
funktioniert, aber die horizontale Bildlaufleiste des Browsers fehlt noch
— Cichy
45

Dies wird in den offiziellen Bootstrap 3-Release-Dokumenten erklärt :

Schritte zum Deaktivieren von Responsive Views

Führen Sie die folgenden Schritte aus, um die Reaktionsfunktionen zu deaktivieren. Sehen Sie es in Aktion in der geänderten Vorlage unten.

  1. Entfernen Sie das Ansichtsfenster (oder fügen Sie es einfach nicht hinzu) <meta> in den CSS-Dokumenten erwähnte
  2. Entfernen Sie die maximale Breite auf dem .container für alle Rasterebenen mit maximaler Breite: keine! Wichtig; und stellen Sie eine reguläre Breite wie width ein: 970px;. Stellen Sie sicher, dass dies nach dem Standard-Bootstrap-CSS erfolgt. Sie können optional das! Wichtige bei Medienabfragen oder einem Selektor-Fu vermeiden.
  3. Wenn Sie Navigationsleisten verwenden, machen Sie das gesamte Verhalten beim Reduzieren und Erweitern der Navigationsleiste rückgängig (dies ist zu viel, um es hier anzuzeigen, sehen Sie sich das Beispiel an).
  4. Verwenden Sie für Rasterlayouts zusätzlich zu oder anstelle der mittleren / großen Klassen .col-xs- * -Klassen. Keine Sorge, das extra kleine Geräteraster lässt sich auf alle Auflösungen skalieren, sodass Sie dort eingestellt sind.

Sie benötigen weiterhin Respond.js für IE8 (da unsere Medienabfragen noch vorhanden sind und abgeholt werden müssen). Dies deaktiviert nur die "mobile Site" von Bootstrap.

Siehe auch das Beispiel auf GetBootstrap.com/examples/non-responsive/

— lborgav
quelle
5
Das hat bei mir nicht funktioniert. Einige Elemente reagieren auf die Breite des Ansichtsfensters.
— Ziyan Junaideen
@ZiyanJunaideen du hast wahrscheinlich etwas verpasst. Können Sie eine jsfiddle zur Verfügung stellen?
— Adrien Be
1
Das hat bei mir funktioniert. Ich denke, es sollte als die richtige Antwort markiert werden.
— Dave Stewart
20

Ich habe in letzter Zeit herausgefunden, wie einfach es ist, Ihren Bootstrap v3.1.1 nicht mehr ansprechbar zu machen. Dies schließt Navigationsleisten ein, um nicht zu kollpasen. Ich weiß nicht, ob das jeder weiß, aber ich möchte es teilen.

Zwei Schritte zu einem nicht reagierenden Bootsrap v3.1.1

Erstellen Sie zunächst eine CSS-Datei mit dem Namen non-responsive.css. Stellen Sie sicher, dass Sie es direkt nach den Bootstrap-CSS-Dateien an Ihre Themen oder Links anhängen.

Zweitens fügen Sie diesen Code in Ihre nicht reagierende CSS ein:

/* 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;
}

Das ist alles und viel Spaß .. ^^

Quelle: non-responsive.css aus dem Beispiel auf getbootstrap.com .

— JiNexus
quelle
2
Woow sehr schön! Danke :)
— Ronald Araújo
2
Bitte verlinken Sie auf die Quelle Ihres Codes, wenn Sie ihn hier kopieren / einfügen.
— ba0708
11

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

  1. Lassen Sie das <meta>in den CSS-Dokumenten erwähnte Ansichtsfenster weg
  2. Überschreiben Sie die widthauf dem .containerfür jedes Gitter Tier mit einer einzigen Breite, zum Beispiel width: 970px !important;sicher sein , dass diese nach dem Standard Bootstrap CSS kommen. Sie können optional das !importantmit Medienabfragen oder einem Selektor-Fu vermeiden .
  3. Wenn Sie Navigationsleisten verwenden, entfernen Sie alle ausgeblendeten und erweiterten Navigationsleisten.
  4. Verwenden Sie für Rasterlayouts .col-xs-*Klassen zusätzlich zu oder anstelle der mittleren / großen Klassen. Keine Sorge, das extra kleine Geräteraster lässt sich auf alle Auflösungen skalieren.
— Sophy
quelle
11

Ich musste die auf Bootstrap reagierende Funktion vollständig entfernen und habe das Verhalten mit dem folgenden Snippet überschrieben:

.container {
    width: 960px !important;
}

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

Vollständiger Ausschnitt: https://gist.github.com/ivanminutillo/8557293

— Ivan Minutillo
quelle
5

Sie können dies tun, indem Sie das Bootstrap 3-CSS mit nicht reagierenden Funktionen verwenden

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

— ɐsɹǝʌ ǝɔıʌ
quelle
1
Schön, aber schade, es ist ein vollständiger Satz von Bootstrap-CSS. Es wäre schön, das CSS nur zu haben, um die Reaktionsfunktionen zu deaktivieren. Nehmen wir an, wir nennen es "nonresponsive.css". Auf diese Weise wird die reaktionsfähige Reaktion deaktiviert, wenn wir nonresponsive.css einschließen. Wenn Sie dieses CSS entfernen, wird die Antwort wiederhergestellt.
— user1995781
1
Sie können das tun, was Sie vorgeschlagen haben, indem Sie in den Headern die ursprüngliche bootstrap.css und die nicht reagierende bootstrap.css hinzufügen, die über den obigen Link veröffentlicht wurden. Natürlich können Sie es nach Belieben umbenennen. Kommentieren Sie die Zeile aus und dann funktioniert es wie gewünscht.
— 22sɹǝʌ ǝɔıʌ
1
Ja, aber das überschreibt alle meine benutzerdefinierten Bootstrap-Themen. Wenn ich beispielsweise ein Thema von bootswatch.com verwende , wird es von diesem CSS überschrieben.
— user1995781
1
Natürlich. Wenn Sie ein benutzerdefiniertes Design über Bootstrap verwenden, verlieren Sie alle Anpassungen, jedoch nicht, wenn Sie das ursprüngliche Bootstrap-CSS verwenden
— ʌsɹǝʌ ǝɔıʌ
0

Wenn Sie eine Website mit fester Größe wünschen, sollte dies ziemlich einfach sein:

// 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;
Erweitern Sie das Snippet

Wenn Sie keine .container-Flüssigkeit verwenden, fügen Sie außerdem Folgendes hinzu:

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

Schauen Sie sich www.goo.gl/2SIOJj an es ist in Arbeit, aber es kann Ihnen helfen.

Ich verwende Cookies, um zu definieren, ob ich eine Desktop- oder Responsive-Version möchte. In der Fußzeile der Seite finden Sie zwei Bereiche und im Allgemeinen ist js das Skript, mit dem die Klicks verarbeitet werden.

        <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`

Am Ende habe ich mein gesamtes benutzerdefiniertes CSS in zwei Dateien aufgeteilt. Ich verwende keine Bootstrap-Navigation, sondern meine eigene, so dass dies die Mehrheit meiner benutzerdefinierten Stile darstellt. Es wird also nicht Ihr gesamtes Problem lösen, aber es funktioniert für mich

und ich habe auch non-responsive.css erstellt, das das Raster zwingt, die Großbildversion beizubehalten

Wenn Sie Mobile auswählen, würde ich laden / 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" />

Wenn Sie Desktop auswählen, würde ich laden / 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" />

Die nicht reagierende CSS ist diejenige, die Überschreibungen für Bootstrap hat. Mein Anliegen ist das Layout, daher ist nicht viel drin, da ich die Navigation auf meine eigene Weise handhabe, also CSS dafür und die anderen Bits in meinen anderen CSS-Dateien

Bitte beachten Sie, dass sich mein Setup auch in Desktop-Browsern wie Desktop verhält, im Gegensatz zu einigen anderen Lösungen, die ich gesehen habe und die nur das Ansichtsfenster ignorieren, das für mich nur auf Mobilgeräten funktioniert zu haben scheint

— Tomhre
quelle
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.