Comment supprimer les fonctionnalités sensibles de Twitter Bootstrap 3?

Question

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 facilement supprimer les fonctionnalités sensibles?

Answer 1

Pour inactiver le non-desktop styles vous avez juste à changer les 4 lignes de code dans les variables.moins fichier. Définir la largeur de l'écran des points d'arrêt dans les variables.moins fichier comme ceci:

// Media queries points d'arrêt
// --------------------------------------------------

// Le plus petit écran de téléphone mobile / 
// Note: Obsolète @screen-xs et @d'écran de téléphone comme de la v3.0.1
@screen-xs: 1px;
@screen-xs-min: @screen-xs;
@écran-téléphone: @screen-xs-min;

// Taille de l'écran / tablette
// Note: Obsolète @screen-sm et @l'écran de la tablette comme de la v3.0.1
@screen-sm: 2px;
@screen-sm-min: @screen-sm;
@l'écran de la tablette: @screen-sm-min;

// Support écran / bureau
// Note: Obsolète @screen-md et @d'écran de bureau comme de la v3.0.1
@screen-md: 3px;
@screen-md-min: @screen-md;
@écran de bureau: @screen-md-min;

// Grand écran / l'ensemble du bureau
// Note: Obsolète @écran-lg et @écran-lg-bureau de la v3.0.1
@écran-lg: 9999px;
@écran-lg-min: @écran-lg;
@écran-lg-desktop: @écran-lg-min;

Cela définit le min-width sur le bureau de style media query inférieurs de sorte qu'il s'applique à toutes les largeurs d'écran. Grâce à 2calledchaos pour l'amélioration de la! Certains styles de base sont définis dans le mobile, de styles, de sorte que nous devons être sûr de les inclure.

Edit: chris notes que vous pouvez définir ces variables dans la ligne moins compilateur sur le site de bootstrap

Answer 2

De Bootstrap 3 de la version docs (1):

Les étapes pour désactiver sensible vues

Pour désactiver sensible, suivez ces étapes. Le voir en action dans le modèle modifié ci-dessous.

1. Supprimer (ou tout simplement ne pas ajouter) de la fenêtre d'affichage mentionné dans le CSS docs
2. Retirer le max-width sur le .conteneur pour tous les grille de niveaux avec max-width: aucun !important; et définir une largeur standard comme largeur: 970px;. Assurez-vous que cela vient après que le défaut de Bootstrap CSS. Vous pouvez éventuellement éviter les !important avec les requêtes des médias ou certains sélecteur-fu.
3. Si vous utilisez navbars, annuler toutes les navbar réduction et le développement de comportement (c'en est trop pour montrer ici, de sorte peep exemple).
4. Pour la grille en page, de faire usage de .col-xs-* les classes en plus ou à la place de la moyenne/grande. Ne vous inquiétez pas, l'extra-petit appareil de la grille s'adapte à toutes les résolutions, de sorte que vous êtes là.

Vous aurez toujours besoin Respond.js pour IE8 (puisque nos médias, les requêtes sont toujours là et ont besoin d'être pris en compte). Cette juste désactive le "site mobile" de Bootstrap.

(source: la Désactivation de la réactivité)

Answer 3

Je viens de comprendre ces derniers temps sur la façon dont il est facile de faire votre bootstrap v3.1.1 étant non-réactif. Cela comprend navbars à ne pas collpase. Je ne sais pas si tout le monde sait cela, mais je voudrais le partager.

Deux Étapes pour un Non réactif Bootsrap v3.1.1

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

Deuxièmement, collez ce code à votre non-réactif.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 Profiter..^^

Answer 4

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

1. Omettre la fenêtre d'affichage <meta> mentionné dans le CSS docs
2. Remplacer l' width sur le .container pour chaque niveau de la grille avec une seule largeur, par exemple width: 970px !important; Être sûr que cela vient après que le défaut de Bootstrap CSS. Vous pouvez éventuellement éviter l' !important avec les requêtes des médias ou certains sélecteur-fu.
3. Si vous utilisez navbars, supprimer tous les navbar réduction et le développement de comportement.
4. Pour la grille de mises en page, utilisez .col-xs-* des classes en plus ou à la place de, les moyens/grands. Ne vous inquiétez pas, l'extra-petit appareil de la grille des échelles pour toutes les résolutions.

Answer 5

J’ai besoin de supprimer complètement la fonction Bootstrap sensible, j’ai fini par substitution du comportement par l’extrait suivant :

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