Bootstrap 3 points de rupture et requêtes médias

Question

Sur la documentation des requêtes média de Bootstrap 3, il est dit :

Nous utilisons les requêtes média suivantes dans nos fichiers Less pour créer les points de rupture clés de notre système de grille.

Petits appareils (téléphones, moins de 768px) : Aucune requête média puisque c'est la valeur par défaut dans Bootstrap

Appareils de taille moyenne (tablettes, 768px et plus) : @media (min-width: @screen-sm-min) { ... }

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

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

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

De plus, la référence à 480px pour les petits appareils est-elle une coquille ? Ne devrait-on pas dire jusqu'à 767px ? (depuis retiré de la documentation)

Answer 1

Vous devriez pouvoir utiliser ces points de rupture si vous utilisez http://lesscss.org/ pour construire votre CSS.

/* Petits appareils (téléphones, moins de 768px) */
/* Aucune requête media car c'est la valeur par défaut dans Bootstrap */

/* Appareils moyens (tablettes, 768px et plus) */
@media (min-width: @screen-sm-min) { }

/* Grands appareils (ordinateurs de bureau, 992px et plus) */
@media (min-width: @screen-md-min) { }

/* Très grands appareils (grands ordinateurs de bureau, 1200px et plus) */
@media (min-width: @screen-lg-min) { }

De https://getbootstrap.com/docs/3.4/css/#grid-media-queries

En fait, @screen-sm-min est une variable remplacée par la valeur spécifiée dans _variable lors de la construction avec Less. Si vous n'utilisez pas Less, vous pouvez remplacer cette variable par la valeur :

/* Petits appareils (téléphones, moins de 768px) */
/* Aucune requête media car c'est la valeur par défaut dans Bootstrap */

/* Appareils moyens (tablettes, 768px et plus) */
@media (min-width: 768px) { }

/* Grands appareils (ordinateurs de bureau, 992px et plus) */
@media (min-width: 992px) { }

/* Très grands appareils (grands ordinateurs de bureau, 1200px et plus) */
@media (min-width: 1200px) { }

Bootstrap 3 prend officiellement en charge Sass: https://github.com/twbs/bootstrap-sass. Si vous utilisez Sass (et vous devriez), la syntaxe est un peu différente.

/* Petits appareils (téléphones, moins de 768px) */
/* Aucune requête media car c'est la valeur par défaut dans Bootstrap */

/* Appareils moyens (tablettes, 768px et plus) */
@media (min-width: $screen-sm-min) { }

/* Grands appareils (ordinateurs de bureau, 992px et plus) */
@media (min-width: $screen-md-min) { }

/* Très grands appareils (grands ordinateurs de bureau, 1200px et plus) */
@media (min-width: $screen-lg-min) { }

Answer 2

Voici les sélecteurs utilisés dans Bootstrap 4. Il n'y a pas de paramètre "le plus bas" dans BS4 car "extra small" est la valeur par défaut. C'est-à-dire que vous coderez d'abord la taille XS, puis vous aurez ces remplacements media par la suite.

@media(min-width:576px){}
@media(min-width:768px){}
@media(min-width:992px){}
@media(min-width:1200px){}

Answer 3

Pour bootstrap 3 j'ai le code suivant dans mon composant navbar

/**
 * Style de navbar.
 */
@mobile:          ~"screen and (max-width: @{screen-xs-max})";
@tablet:          ~"screen and (min-width: @{screen-sm-min})";
@normal:          ~"screen and (min-width: @{screen-md-min})";
@wide:            ~"screen and (min-width: @{screen-lg-min})";
@grid-breakpoint: ~"screen and (min-width: @{grid-float-breakpoint})";

ensuite vous pouvez utiliser quelque chose comme

@media wide { sélecteur: style }

Cela utilise n'importe quelle valeur définie pour les variables.

L'échappement vous permet d'utiliser n'importe quelle chaîne arbitraire comme propriété ou valeur de variable. Tout ce qui se trouve à l'intérieur de ~"anything" ou ~'anything' est utilisé tel quel sans aucun changement, sauf interpolation.

http://lesscss.org

Answer 4

Pour travailler avec les mixins de Bootstrap 4 en parallèle dans un projet qui repose sur une version plus ancienne de Bootstrap, vous pouvez essayer d'installer les deux avec un alias via npm:

npm i bootstrap-3@npm:bootstrap-sass@\^3 bootstrap-4@npm:bootstrap@\^4 bootstrap-5@npm:bootstrap@\^5 bootstrap

Attention : Cette commande installe les versions 3, 4, 5 et également la dernière. Adaptez-la si seules les versions 3 et 4 sont nécessaires ! Pour des raisons d'espace, j'utilise le dossier node_modules via symlink et j'en ai besoin dans tous mes projets :-)

Et puis obtenez la partie dont vous avez besoin:

// Bootstrap 3
@import '../../../node_modules/bootstrap-3/assets/stylesheets/_bootstrap.scss';

// Étendre : Media Queries Bootstrap 4
@import "../../../node_modules/bootstrap-4/scss/_functions.scss";
@import "../../../node_modules/bootstrap-4/scss/_variables.scss";
@import '../../../node_modules/bootstrap-4/scss/mixins/_breakpoints.scss';

Adaptez bien sûr le chemin !

Et si tout fonctionne, vous pouvez maintenant utiliser :

@include media-breakpoint-up(sm) {}

dans Bootstrap 3.

Sinon, remplacez les mixins par une recherche / remplacement avec les pixels.

Answer 5

Média requête Bootstrap 4 attachée avec exemple

@media (min-width: 576px) { 
.responsive{
color:red
}
}

// Appareils moyens (tablettes, 768px et plus)
@media (min-width: 768px) {
.responsive{
color:orange
}
}

// Grands appareils (ordinateurs de bureau, 992px et plus)
@media (min-width: 992px) { 
.responsive{
color:blue
}
}

// Appareils très grands (grands ordinateurs de bureau, 1200px et plus)
@media (min-width: 1200px) { 
.responsive{
color:green
}
}

Bootstrao 4 
voir la couleur ici