web-dev-qa-db-fra.com

Comment utiliser Twitter Bootstrap 3 pour un site non réactif?

Comme vous pouvez le lire sur leur page, le nouveau Bootstrap est "mobile first":

Avec Bootstrap 2, nous avons ajouté des styles adaptés aux mobiles en option pour les aspects clés du cadre. Avec Bootstrap 3, nous ' Nous avons réécrit le projet pour qu'il soit adapté aux mobiles dès le début . Au lieu d'ajouter des styles mobiles optionnels, , ils sont intégrés directement dans le noyau En fait, Bootstrap est d'abord mobile. Les premiers styles mobiles peuvent être trouvés dans toute la bibliothèque plutôt que dans des fichiers séparés.

Comment désactiver la réactivité? Je veux que mon site ne se réorganise pas pour tablette ou mobile.

twitter-bootstrapresponsive-designtwitter-bootstrap-3
29
Fred K

Pour une procédure plus expliquée, voir Comment utiliser Twitter Bootstrap 3 pour un site non réactif

De documentation Bootstrap (plus quelques explications):

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

1) Supprimer (ou tout simplement ne pas ajouter) la fenêtre <meta> mentionné dans les documents CSS

explicite

2) Supprimez la largeur maximale sur le .container pour tous les niveaux de grille avec max-width: aucun! important; et définissez une largeur régulière comme largeur: 970px ;. Assurez-vous que cela vient après le CSS par défaut Bootstrap. Vous pouvez éventuellement éviter le! Important avec les requêtes de médias ou certains sélecteur-fu.

Ajoutez ce style:

.container{
  max-width: none !important;
  width: 970px;
}

3) Si vous utilisez navbars , annulez tout le comportement de repli et d'expansion de la navbar (c'est trop pour montrer ici, alors regardez l'exemple).

Ouvrir variables.less et définissez les variables:

@grid-float-breakpoint à 0

@screen-xs-max à 0 (ce sera corrigé; lire ici )

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 de l'appareil extra-petite s'adapte à toutes les résolutions, donc vous y êtes.

explicite

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

44
Fred K

Sans mods majeurs à la source, cela ne semble tout simplement pas possible.

Le lien suivant détaille les modifications nécessaires: http://bassjobsen.weblogs.fm/compile-twitters-bootstrap-3-without-responsive-features/

5
Chris

Les Bootstrap 3 documents contiennent en fait un paragraphe pour ce problème: http://getbootstrap.com/getting-started/#disable-responsive

4
Ozmodiar

Eh bien, je cherchais la même chose. Je ne l'ai pas encore vérifié, donc je ne peux pas attester de sa fonctionnalité, mais voici une version avec responsive retiré:

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

3
BMCwebdev

Découvrez ici la réponse de Jay Douglass qui détaille la substitution des variables de point d'arrêt de requête multimédia pour désactiver les fonctionnalités réactives. C'est une solution simple qui nécessite un minimum de changements.

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

0
Chris

Avec un petit effort, vous pouvez y parvenir.

1) Supprimer la fenêtre

2) Ajoutez .container{ max-width: none !important; width: 970px; } à votre fichier css

3) Si vous utilisez des barres de navigation, annulez tous les comportements de réduction et d'expansion de la barre de navigation

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 de l'appareil extra-petite s'adapte à toutes les résolutions, donc vous y êtes.

Vous pouvez suivre le lien ci-dessous:

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

0
Caner Şahin