Points d'arrêt de Bootstrap 3 et media queries

Dans la [documentation sur les requêtes média de Bootstrap 3][1], il est indiqué :

Nous utilisons les media queries suivantes dans nos fichiers Less pour créer les points de rupture clés de notre système de grille.

Dispositifs très petits (téléphones, moins de 768px) : Pas de media query puisque c'est la valeur par défaut dans Bootstrap.

Petits appareils (tablettes, 768px et plus) : @media (min-width : @screen-sm-min) { ... }

Appareils moyens (ordinateurs de bureau, 992px et plus) : @media (min-width : @screen-md-min) { ... }

Grands appareils (grands ordinateurs de bureau, 1200px et plus) : @media (min-width : @screen-lg-min) { ... }

Sommes-nous censés pouvoir utiliser les noms @screen-sm, @screen-md et @screen-lg dans nos requêtes média également ? Parce que cela ne fonctionne pas pour moi. Je dois utiliser des mesures en pixels telles que "@media (min-width : 768px) {...}` pour que cela fonctionne. Est-ce que je fais quelque chose de mal ?

Par ailleurs, la référence aux 480px pour les appareils de très petite taille est-elle une erreur de frappe ? Ne devrait-on pas dire jusqu'à 767px ? (supprimé depuis de la documentation)

[1] : https://getbootstrap.com/docs/3.4/css/#grid-media-queries

Dave Powers
Question modifiée 16 juillet 2019 в 9:19
Programmation
twitter-bootstrap-3 twitter-bootstrap breakpoints media-queries
25 octobre 2013 в 2:46
10 vues

Bootstrap ne documente pas très bien les requêtes média. Ces variables @screen-sm, @screen-md, @screen-lg font en fait référence à des variables LESS et non à de simples CSS.

Lorsque vous personnalisez Bootstrap, vous pouvez modifier les points d'arrêt de la requête média et, à la compilation, les variables @screen-xx sont remplacées par la largeur de pixel que vous avez définie comme screen-xx. C'est ainsi qu'un cadre tel que celui-ci peut être codé une fois, puis personnalisé par l'utilisateur final pour répondre à ses besoins.

Une question similaire a été posée ici qui pourrait apporter plus de clarté : https://stackoverflow.com/questions/18796505/bootstrap-3-0-media-queries

Dans votre CSS, vous devrez toujours utiliser les requêtes média traditionnelles pour remplacer ou compléter ce que fait Bootstrap.

En ce qui concerne votre deuxième question, il ne s'agit pas d'une faute de frappe. Dès que l'écran passe en dessous de 768px, le framework devient complètement fluide et se redimensionne à la largeur de n'importe quel appareil, ce qui supprime la nécessité de points d'arrêt. Le point d'arrêt à 480px existe parce que des modifications spécifiques sont apportées à la mise en page pour l'optimisation mobile.

Pour voir cela en action, allez sur cet exemple sur leur site (http://getbootstrap.com/examples/navbar-fixed-top/), et redimensionnez votre fenêtre pour voir comment il traite la conception après 768px.

Community
Réponse modifiée 23 mai 2017 в 10:31
Commentaires (2)

Ce problème a été discuté sur https://github.com/twbs/bootstrap/issues/10203 À l'heure actuelle, il n'est pas prévu de modifier Grid pour des raisons de compatibilité.

Vous pouvez obtenir Bootstrap à partir de ce fork, branche hs : https://github.com/antespi/bootstrap/tree/hs

Cette branche vous donne un point d'arrêt supplémentaire à 480px, donc vous devez le faire :

  1. Concevoir pour le mobile d'abord (XS, moins de 480px)
  2. Ajouter des classes HS (Horizontal Small Devices) dans votre HTML : col-hs-*, visible-hs, ... et concevoir pour les appareils mobiles horizontaux (HS, moins de 768px).
  3. Concevoir pour les tablettes (SM, moins de 992px)
  4. Conception pour les appareils de bureau (MD, moins de 1200px)
  5. Conception pour les grands appareils (LG, plus de 1200px)

Concevoir d'abord pour le mobile est la clé pour comprendre Bootstrap 3. C'est le principal changement par rapport à Bootstrap 2.x. Vous pouvez suivre le modèle suivant (en LESS) :

.template {
    /* rules for mobile vertical (< 480) */

    @media (min-width: @screen-hs-min) {
       /* rules for mobile horizontal (480 > 768)  */
    }
    @media (min-width: @screen-sm-min) {
       /* rules for tablet (768 > 992) */
    }
    @media (min-width: @screen-md-min) {
       /* rules for desktop (992 > 1200) */
    }
    @media (min-width: @screen-lg-min) {
       /* rules for large (> 1200) */
    }
}
Dave Powers
Réponse modifiée 17 juillet 2019 в 1:52
Commentaires (4)

La référence à 480px a été supprimée. À la place, il est dit :

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

Il n'y a pas de point d'arrêt en dessous de 768px dans Bootstrap 3.

Si vous voulez utiliser @screen-sm-min et d'autres mixins, vous devez compiler avec LESS, voir http://getbootstrap.com/css/#grid-less.

Voici un tutoriel sur la façon d'utiliser Bootstrap 3 et LESS : http://www.helloerik.com/bootstrap-3-less-workflow-tutorial

Commentaires (0)