web-dev-qa-db-fra.com

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

Depuis Bootstrap 3, il n’existe plus de fichiers distincts pour les feuilles de style réactives et standard. Alors, comment puis-je facilement supprimer les fonctionnalités sensibles?

twitter-bootstrapresponsive-designmedia-queriestwitter-bootstrap-3
84
kanarifugl

Pour désactiver les styles autres que ceux du bureau, il vous suffit de modifier 4 lignes de code dans le fichier variables.less. Définissez les points d'arrêt de la largeur de l'écran dans le fichier variables.less comme suit:

 // Interrogations des médias sur les points d'arrêt 
 // --------------------------------- ----------------- 
 
 // Très petit écran/téléphone 
 // Remarque: Obsolète @ screen-xs et @ screen-phone à partir de v3.0.1 
 @ screen-xs: 1px; 
 @ screen-xs-min: @ screen-xs; 
 @ screen-phone: @ screen- xs-min; 
 
 // Petit écran/tablette 
 // Remarque: Obsolète @ screen-sm et @ screen-tablet à partir de v3.0.1 
 @ écran-sm: 2px; 
 @ écran-sm-min: @ écran-sm; 
 @ écran-tablette: @ écran-sm-min; 
 
 // Ecran moyen/Bureau 
 // Remarque: Obsolète @ screen-md et @ screen-desktop à partir de 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 
 @ Screen-lg: 9999px; 
 @ Screen-lg-min: @ screen-lg; 
 @ Screen-lg-desktop: @ screen-lg-min;

Cela permet de définir une largeur minimale sur la requête multimédia de type bureau afin qu'elle s'applique à toutes les largeurs d'écran. Merci à 2calledchaos pour l'amélioration! Certains styles de base étant définis dans les styles mobiles, nous devons nous assurer de les inclure.

Edit: chris note que vous pouvez définir ces variables dans le compilateur less en ligne sur le site bootstrap

104
Jay Douglass

Ceci est expliqué dans la documentation officielle Bootstrap 3 versions :

Étapes pour désactiver les vues réactives

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

  1. Supprimer (ou simplement ne pas ajouter) la fenêtre de visualisation <meta> mentionnée dans la documentation CSS
  2. Supprimez la largeur maximale sur le conteneur pour tous les niveaux de grille ayant la largeur maximale: aucun! Important; et définir une largeur régulière comme largeur: 970px ;. Assurez-vous que cela vient après la valeur par défaut Bootstrap CSS. Vous pouvez éventuellement éviter les questions importantes avec les requêtes sur les médias ou certains sélecteurs-fu.
  3. Si vous utilisez des barres de navigation, annulez tous les comportements d’effondrement et d’extension de la barre de navigation (c’est trop à montrer ici, alors regardez l’exemple).
  4. Pour les dispositions de grille, utilisez les classes .col-xs- * en plus ou à la place des classes moyennes/grandes. Ne vous inquiétez pas, la grille des très petits appareils s'adapte à toutes les résolutions, vous êtes donc bien défini.

Vous aurez toujours besoin de Respond.js pour IE8 (car nos requêtes multimédia 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/

45
lborgav

Je viens juste de comprendre combien il est facile de rendre votre bootstrap v3.1.1 non réactif. Cela inclut les barres de navigation pour ne pas collpase. Je ne sais pas si tout le monde le sait, mais j'aimerais le partager.

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

Commencez par créer un fichier CSS nommé "non-responsive.css". Assurez-vous de l'ajouter à vos thèmes ou au lien situé juste après les fichiers bootstrap css.

Deuxièmement, collez ce code dans votre fichier 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 à partir de exemple sur getbootstrap.com .

20
JiNexus

J'avais besoin de supprimer complètement la fonctionnalité de réponse Bootstrap, et j'ai fini par remplacer le comportement par le fragment de code 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/855729

11
Ivan Minutillo

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

  1. Omettre la fenêtre <meta> mentionnée dans la documentation CSS
  2. Remplacez width sur .container pour chaque niveau de grille de largeur unique, par exemple width: 970px !important;. Assurez-vous que cela vient après le Bootstrap CSS par défaut. Vous pouvez éventuellement éviter le !important avec des requêtes de support ou un sélecteur-fu.
  3. Si vous utilisez des barres de navigation, supprimez tout comportement de réduction et d'expansion de la barre de navigation.
  4. Pour les dispositions de grille, utilisez .col-xs-* classes en plus des classes moyennes/grandes ou à la place de celles-ci. Ne vous inquiétez pas, la grille de périphérique extrêmement petite s'adapte à toutes les résolutions.
11
Sophy

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

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

5
equisde

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;
}
0
Hrvoje Golcic