css - poner - Bootstrap 3.0 consultas de medios

poner logo en bootstrap

Question

Estoy trabajando en un pequeño proyecto basado en Boostrap 3 (compilación personalizada html5boilerplate) y tratando de usar las consultas de medios "oficiales" en la documentación de 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) { ... }

Por alguna razón, las consultas de los medios no parecen existir (@ screen-sm, screen-md, screen-lg), estoy buscando esto en los archivos de arranque pero no puedo encontrar ninguna referencia.

Mi código de ejemplo (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) {}

Básicamente lo que pasa es ... ¡nada!

Obtengo esos errores en Chrome: http://i.solidfiles.net/0d0ce2d2a7.png

¿Algunas ideas?

Answer 1

@adonbajrami: Creo que necesitas agregar @import "myStyle.less" en la parte inferior del archivo bootstrap.less .

El archivo bootstrap.less importa variables.less . Incluir su archivo en el mismo archivo principal le dará a su archivo myStyle.less acceso a las variables declaradas en variables.less.

(Lo siento por no comentar en el lugar, pero todavía no puedo).

Answer 2

La documentación de arranque es un poco confusa.

El uso de estos parámetros @... para min-width es de hecho menos sintaxis, no CSS .

Debería usar la utilidad de personalización en Bootstrap (consulte los puntos de interrupción de las consultas de medios ) para configurar lo que desea que sean estos parámetros de screen-xxx (por ejemplo, establecer screen-sm en 768px).

Y luego, cuando haga clic en el botón Compilar en la parte inferior, el código menos se compilará en CSS. esta compilación reemplazará todas las apariciones de @ screen-sm con 768px, y lo mismo para los otros parámetros.