Comment supprimer les fonctionnalités réactives dans Twitter Bootstrap 3?

Depuis Bootstrap 3, il n'y a plus de fichiers séparés pour les feuilles de style réactives et standard. Alors, comment puis-je supprimer facilement les fonctionnalités réactives?

Pour désactiver les styles non-desktop, il vous suffit de changer 4 lignes de code dans le fichier variables.less. Définissez les points d'arrêt de largeur d'écran dans le fichier variables.less comme ceci:

// Les médias interrogent les points d'arrêt
// ------------------------------------------------ -

// Très petit écran / téléphone
// Remarque: @ screen-xs et @ screen-phone obsolètes à partir de la v3.0.1
@ écran-xs: 1px;
@ écran-xs-min: @ écran-xs;
@ écran-téléphone: @ écran-xs-min;

// Petit écran / tablette
// Remarque: @ screen-sm et @ screen-tablet obsolètes à partir de la v3.0.1
@ écran-sm: 2px;
@ écran-sm-min: @ écran-sm;
@ tablette-écran: @ écran-sm-min;

// Écran moyen / bureau
// Remarque: @ screen-md et @ screen-desktop obsolètes à partir de la v3.0.1
@ screen-md: 3px;
@ screen-md-min: @ screen-md;
@ screen-desktop: @ screen-md-min;

// Grand écran / bureau large
// Remarque: @ screen-lg et @ screen-lg-desktop obsolètes à partir de la v3.0.1
@ écran-lg: 9999px;
@ screen-lg-min: @ screen-lg;
@ screen-lg-desktop: @ screen-lg-min;

Cela définit la largeur minimale de la requête multimédia de style bureau plus basse afin qu'elle s'applique à toutes les largeurs d'écran. Merci à 2calledchaos pour l'amélioration! Certains styles de base sont définis dans les styles mobiles, nous devons donc nous assurer de les inclure.

Edit: Chris note que vous pouvez définir ces variables dans le compilateur moins en ligne sur le site d'amorçage

Ceci est expliqué dans la documentation officielle de la version Bootstrap 3 :

Étapes pour désactiver les vues réactives

Pour désactiver les fonctionnalités réactives, procédez comme suit. Voyez-le en action dans le modèle modifié ci-dessous.

1. Supprimez (ou n'ajoutez tout simplement pas) la fenêtre <meta>mentionnée dans les documents CSS
2. Supprimez la largeur max sur le .container pour tous les niveaux de grille avec max-width: none! Important; et définissez une largeur régulière comme width: 970px ;. Assurez-vous que cela vient après le CSS Bootstrap par défaut. Vous pouvez éventuellement éviter le! Important avec les requêtes multimédias ou certains sélecteurs-fu.
3. Si vous utilisez des barres de navigation, annulez tout le comportement de réduction et d'extension de la barre de navigation (c'est trop à montrer ici, alors regardez l'exemple).
4. Pour les mises en page en grille, utilisez les classes .col-xs- * en plus ou à la place des classes moyennes / grandes. Ne vous inquiétez pas, la grille de périphériques très petite s'adapte à toutes les résolutions, vous y êtes donc installé.

Vous aurez toujours besoin de Respond.js pour IE8 (puisque nos requêtes multimédias sont toujours là et doivent être récupérées). Cela désactive simplement le "site mobile" de Bootstrap.

Voir aussi l'exemple sur GetBootstrap.com/examples/non-responsive/

Je viens de comprendre récemment à quel point il est facile de rendre votre bootstrap v3.1.1 non réactif. Cela inclut les navbars à ne pas réduire. Je ne sais pas si tout le monde le sait mais j'aimerais le partager.

Deux étapes pour un Bootsrap v3.1.1 non réactif

Tout d'abord, créez un fichier css nommez-le comme non-responsive.css. Assurez-vous de l'ajouter à vos thèmes ou à un lien juste après les fichiers css bootstrap.

Deuxièmement, collez ce code dans votre 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;
}

C'est tout et profitez-en .. ^^

Source: non-responsive.css de l' exemple sur getbootstrap.com .

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

1. Omettez la fenêtre <meta>mentionnée dans les documents CSS
2. Remplacez le widthsur le .containerpour chaque niveau de la grille avec une seule largeur, par exemple width: 970px !important;Assurez-vous que cela vient après le CSS Bootstrap par défaut. Vous pouvez éventuellement éviter les !importantrequêtes multimédias ou certains sélecteurs-fu.
3. Si vous utilisez des barres de navigation, supprimez tous les comportements de réduction et d'extension de la barre de navigation.
4. Pour les mises en page en grille, utilisez des .col-xs-*classes en plus ou à la place des classes moyennes / grandes. Ne vous inquiétez pas, la grille des appareils très petits s'adapte à toutes les résolutions.

J'avais besoin de supprimer complètement la fonction de réactivité Bootstrap, j'ai fini par remplacer le comportement avec l'extrait suivant:

.container {
    width: 960px !important;
}

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

Extrait complet: https://gist.github.com/ivanminutillo/8557293

Vous pouvez le faire en utilisant le CSS Bootstrap 3 avec des fonctionnalités non réactives

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

Si vous voulez un site Web de taille fixe, cela devrait être assez simple:

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

Sauf si vous utilisez .container-fluid, ajoutez également:

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

Regardez www.goo.gl/2SIOJj c'est un travail en cours mais cela peut vous aider.

J'utilise un cookie pour définir si je veux une version de bureau ou réactive. Dans le pied de page de la page, vous pouvez trouver deux travées et en général.js est le script pour gérer les clics.

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

J'ai fini par diviser tous mes css personnalisés en deux fichiers.Je n'utilise pas la navigation bootstrap mais la mienne, donc c'est la majorité de mes styles personnalisés, donc cela ne résoudra pas tout votre problème mais cela fonctionne pour moi

et j'ai également créé non-responsive.css qui oblige la grille à maintenir la version grand écran

au cas où vous sélectionnez le mobile, je chargerais / ferais écho

<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" />

au cas où vous sélectionnez le bureau, je chargerais / ferais écho

<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" />

le non-responsive.css est celui qui a des remplacements pour le bootstrap mon souci est la mise en page donc il n'y a pas grand chose là-dedans, étant donné que je gère la navigation à ma manière donc css pour cela et les autres bits sont dans mes autres fichiers css

veuillez noter que ma configuration se comporte comme un ordinateur de bureau même sur les navigateurs de bureau contrairement à certaines autres solutions que j'ai vues qui n'ignoreront que la fenêtre qui semble n'avoir fonctionné que sur les appareils mobiles pour moi