Frage Wie erkennt man, mit welcher Geräteansicht die Twitter Bootstrap API verwendet wird?


Ich habe gerade begonnen, mit Twitter Bootstrap API für ein Projekt zu spielen, ich komme. Das Hauptnav enthält 3 Hauptelemente:

  • Standortnavigation
  • soziale Links nav
  • Durchsuchen Sie das Site-Formular

Ich verwende das Kollaps-Plugin, um das Site-Navigations- und Suchformular beim Anzeigen der Website auf mobilen Geräten zu reduzieren. Die mobile Ansicht verfügt über 2 Schaltflächen, die beim Anklicken das Suchformular oder das Hauptnavigationsfeld ein- / ausschalten.

Aber wenn ich das Suchformular auschecke und dann die Größe meines Browsers auf die Desktopansicht ändere, ist das Suchformular immer noch in dieser Ansicht versteckt?

Ich habe gelesen, dass ich Klassen wie visible-mobile usw. benutze, aber diese scheinen mit dem Collapse-Plugin zu kollidieren. Ich weiß auch, dass ich wahrscheinlich meine eigenen CSS-Hacks schreiben könnte, um das Problem zu beheben, aber ich dachte, ich würde fragen, ob es eine einfachere Lösung gäbe.

Bootstrap hat Ereignisse zum Anzeigen, Anzeigen, Verbergen und Verbergen, so dass ich dachte, dass ich vielleicht ein benutzerdefiniertes JS schreiben könnte, das diese Elemente in jeder bestimmten Geräteansicht ein- oder ausblenden würde. Ich wusste jedoch nicht, wie ich feststellen konnte, welches Gerät ich gerade benutzte.

Gedanken?

Danke im Voraus


51
2018-01-21 15:07


Ursprung


Antworten:


Wenn Sie wissen möchten, in welcher Umgebung Sie sich befinden, versuchen Sie es mit den eigenen CSS-Klassen von Bootstrap. Erstellen Sie ein Element, fügen Sie es zur Seite hinzu, wenden Sie seine Hilfsklassen an und prüfen Sie, ob es ausgeblendet ist, um festzustellen, ob dies die aktuelle Umgebung ist. Die folgende Funktion verwendet jQuery, um das zu tun:

Bootstrap 3

function findBootstrapEnvironment() {
    var envs = ['xs', 'sm', 'md', 'lg'];

    var $el = $('<div>');
    $el.appendTo($('body'));

    for (var i = envs.length - 1; i >= 0; i--) {
        var env = envs[i];

        $el.addClass('hidden-'+env);
        if ($el.is(':hidden')) {
            $el.remove();
            return env;
        }
    }
}

Bootstrap 2

function findBootstrapEnvironment() {
    var envs = ['phone', 'tablet', 'desktop'];

    var $el = $('<div>');
    $el.appendTo($('body'));

    for (var i = envs.length - 1; i >= 0; i--) {
        var env = envs[i];

        $el.addClass('hidden-'+env);
        if ($el.is(':hidden')) {
            $el.remove();
            return env;
        }
    }
}

142
2018-03-01 04:15



Aufbauend auf den Antworten von @Raphael_ und @ user568109 ist jetzt in Bootstrap 3 Responsive integriert.

Um den Gerätetyp in Javascript zu erkennen, erstellen Sie ein Objekt, das nur auf dem von Ihnen benötigten Gerät mit den Responsive-Klassen von Bootstrap angezeigt wird. Dann überprüfe es :hidden Eigentum.

Beispiel:

  1. Ein ... kreieren <div> Panel mit keinem Inhalt, der auf etwas Größerem angezeigt würde als ein eXtra Small Gerät (Danke an @Mario Awad):

    <div id="desktopTest" class="hidden-xs"></div>
    

    oder, um bestimmte Geräte auszuschließen:

    <div id="desktopTest" class="visible-sm visible-md visible-lg"></div>
    
  2. Überprüfen Sie den Wert von #desktopTest:

    if ($('#desktopTest').is(':hidden')) {
        // device is == eXtra Small
    } else {
        // device is >= SMaller 
    }
    

41
2017-08-20 15:25



Basierend auf @Alastair McCormack Antwort, empfehle ich Ihnen, diesen Code zu verwenden

<div class="visible-xs hidden-sm hidden-md hidden-lg">xs</div>
<div class="hidden-xs visible-sm hidden-md hidden-lg">sm</div>
<div class="hidden-xs hidden-sm visible-md hidden-lg">md</div>
<div class="hidden-xs hidden-sm hidden-md visible-lg">lg</div>

Fügen Sie es einfach am Ende Ihres Container-Div auf, Sie erhalten eine einfache dynamische Information über die aktuelle Ansicht.


4
2018-06-30 11:17



Ich ursprünglich Antwort hier gepostet, die Lösung für Bootstrap v.4.x.

JS Haltepunkt Erkennung für Twitter Bootstrap 4.1.x

Das Bootstrap v.4.0.0 (und die neueste Version Bootstrap 4.1.x) führte das aktualisierte ein Rasteroptionen, so dass das alte Konzept zur Erkennung möglicherweise nicht direkt angewendet wird (vgl die Migrationsanweisungen):

  • Neues hinzugefügt sm Rasterebene unten 768px für mehr granulare Kontrolle. Wir haben nun xs, sm, md, lg, und xl;
  • xs Grid-Klassen wurden so geändert, dass das Infix nicht mehr benötigt wird.

Ich habe die kleine Utility-Funktion geschrieben, die die aktualisierten Grid-Klassennamen und eine neue Grid-Ebene berücksichtigt:

/**
 * Detect the current active responsive breakpoint in Bootstrap
 * @returns {string}
 * @author farside {@link https://stackoverflow.com/users/4354249/farside}
 */
function getResponsiveBreakpoint() {
    var envs = {xs:"d-none", sm:"d-sm-none", md:"d-md-none", lg:"d-lg-none", xl:"d-xl-none"};
    var env = "";

    var $el = $("<div>");
    $el.appendTo($("body"));

    for (var i = Object.keys(envs).length - 1; i >= 0; i--) {
        env = Object.keys(envs)[i];
        $el.addClass(envs[env]);
        if ($el.is(":hidden")) {
            break; // env detected
        }
    }
    $el.remove();
    return env;
};

JS Haltepunkt Erkennung für Bootstrap v4-beta

Das Neueste Bootstrap v4-alpha und Bootstrap v4-beta hatte einen anderen Ansatz für Rasterpunkte, so ist hier der alte Weg, das gleiche zu erreichen:

/**
 * Detect and return the current active responsive breakpoint in Bootstrap
 * @returns {string}
 * @author farside {@link https://stackoverflow.com/users/4354249/farside}
 */
function getResponsiveBreakpoint() {
    var envs = ["xs", "sm", "md", "lg"];
    var env = "";

    var $el = $("<div>");
    $el.appendTo($("body"));

    for (var i = envs.length - 1; i >= 0; i--) {
        env = envs[i];
        $el.addClass("d-" + env + "-none");;
        if ($el.is(":hidden")) {
            break; // env detected
        }
    }
    $el.remove();
    return env;
}

Ich denke, es wäre nützlich, da es leicht in jedes Projekt zu integrieren ist. Es verwendet nativ Responsive Display-Klassen des Bootstraps selbst.


4
2018-05-10 14:19



Meine Antwort ist die Verwendung eines ähnlichen Mechanismus wie der von @Raphael_, aber Sie können ein bisschen mehr damit machen. Bitte beziehen Sie sich auf diese Antwort für Details und Projekte Github-Repository für die neueste Version.

Beispiel für die Erkennung von Haltepunkten:

if ( viewport.is('xs') ) {
  // do stuff in the lowest resolution
}

Ausführen von Code bei Fenstergrößenänderung (ohne dass es innerhalb von Millisekunden mehrere Male passiert):

$(window).bind('resize', function() {
    viewport.changed(function() {

      // do some other stuff!

    })
});

3
2018-06-06 16:21



Bootstrap 4

(derzeit für Beta und hoffentlich auch für Release-Version in Zukunft)

Dies ist eine modifizierte Version basierend auf Rmobis (Bootstrap 2/3) und Farside (Bootstrap 4) Lösungen

/*
 * Detect and return the current active responsive breakpoint in Bootstrap 4
 *
 * @returns {string}
 * xs: Extra small (< 576px)
 * sm: Small (576px ≥ X < 768px)
 * md: Medium (768px ≥ X < 992px)
 * lg: Large (992px ≥ X < 1200px)
 * xl: Extra large (≥ 1200 px)
 */
function getResponsiveBreakpoint() {
    var envs = ["sm", "md", "lg", "xl"];
    var env = "";

    var $el = $("<div>");
    $el.appendTo($("body"));
    $el.addClass("d-block");
    for (var i = envs.length - 1; i >= 0; i--) {
        env = envs[i];
        $el.addClass("d-" + env + "-none");
        if ($el.is(":hidden")) {
            $el.remove();
            return env;
        }
    }
    $el.remove();
    return "xs";    //extra small
}

0
2017-09-11 09:32



Niche Fall, aber Sie können @ Kar.ma's auf ein Mediawiki mit Chameleon (bootstrap Haut) installiert installieren. Übergeben Sie die "Ergebnisse" des DIV als ein Vorlagenargument und testen Sie es dann innerhalb der Vorlage.


0
2017-12-05 19:57



Kombiniert man die Antworten von oben, funktioniert das für mich:

function findBootstrapDeviceSize() {
  var dsize = ['lg', 'md', 'sm', 'xs'];
  for (var i = dsize.length - 1; i >= 0; i--) {

    // Need to add &nbsp; for Chrome. Works fine in Firefox/Safari/Opera without it.
    // Chrome seem to have an issue with empty div's
    $el = $('<div id="sizeTest" class="hidden-'+dsize[i]+'">&nbsp;</div>');
    $el.appendTo($('body'));

    if ($el.is(':hidden')) {
      $el.remove();
      return dsize[i];
    }
  }

  return 'unknown';
}

-1
2017-11-07 20:10