web-dev-qa-db-fra.com

Bootstrap 3.0 Requêtes multimédias

Je travaille sur un petit projet basé sur Boostrap 3 (build personnalisé html5boilerplate) et j'essaie d'utiliser les requêtes média "officielles" dans la documentation boostrap :

/* Extra small devices (phones, up to 480px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg) { ... }

Pour une raison quelconque, les requêtes multimédias ne semblent pas exister (@ screen-sm, screen-md, screen-lg), je le recherche dans les fichiers bootstrap mais ne peut pas trouver des références.

Mon exemple de code (main.css):

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm) {

    .header-btn {display: none;}

}

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md) {

    .slogan {display: none;}
}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg) {}

Fondamentalement, ce qui se passe est ... rien!

Je reçois ces erreurs dans Chrome: http://i.solidfiles.net/0d0ce2d2a7.png

Des idées?

csstwitter-bootstrapmedia-queries
19
user2646903

La documentation bootstrap n'est pas claire.

L'utilisation de ces @... les paramètres de min-width sont en fait moins la syntaxe, pas [~ # ~] css [~ # ~] .

Vous devez tiliser l'utilitaire de personnalisation dans Bootstrap (voir Points d'arrêt des requêtes multimédias ) pour configurer ce que vous voulez que ces screen-xxx paramètres à être (par exemple, définir screen-sm à 768px).

Et puis, lorsque vous cliquez sur le bouton Compiler en bas, le moins de code est compilé en CSS. cette compilation remplacera toutes les occurrences de @ screen-sm par 768px, et la même chose pour les autres paramètres.

21
mccannf

@adonbajrami: Je pense que vous devez ajouter @import "myStyle.less" en bas du bootstrap.less fichier.

Le fichier bootstrap.less importe variables.less. L'inclusion de votre fichier dans le même fichier parent donnera à votre fichier myStyle.less accès aux variables déclarées dans variables.less.

(Désolé de ne pas avoir commenté sur place, mais je ne suis pas encore en mesure de le faire.)

1
Marcus Nielsen