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

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?

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

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/

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 .

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.

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

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

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

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;

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

.container-fluid {
    width: 700px;
}
body {
    width: 700px + @general-min-width;
}

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