В документацията Bootstrap 3 media queries се казва:
Използваме следните медийни заявки в нашите файлове Less, за да създадем ключовите точки на прекъсване в нашата решетъчна система.
Изключително малки устройства (телефони, по-малко от 768px): Няма медийна заявка, тъй като това е по подразбиране в Bootstrap
Малки устройства (таблети, 768px и повече):
@media (min-width: @screen-sm-min) { ... }
Средни устройства (настолни компютри, 992px и нагоре):
@media (min-width: @screen-md-min) { ... }
Големи устройства (големи настолни компютри, 1200px и нагоре):
@media (min-width: @screen-lg-min) { ... }
Предполага ли се, че ще можем да използваме имената @screen-sm
, @screen-md
и @screen-lg
и в медийните си заявки? Защото при мен това не работи. Трябва да използвам пикселни размери, като например @media (min-width: 768px) {...}
, преди да заработи. Дали правя нещо погрешно?
Също така, дали споменаването на 480px за изключително малки устройства е печатна грешка? Не трябва ли да се каже до 767px? (отдавна премахнато от документацията)
Bootstrap не документира много добре медийните заявки. Тези променливи @screen-sm
, @screen-md
, @screen-lg
всъщност се отнасят до променливи на LESS, а не до обикновени CSS.
Когато персонализирате Bootstrap, можете да промените точките на прекъсване на медийната заявка и когато тя се компилира, променливите @screen-xx се променят на ширината на пиксела, която сте определили като screen-xx. Така подобна рамка може да се кодира веднъж и след това да се персонализира от крайния потребител, за да отговаря на неговите нужди.
Подобен въпрос тук, който може да даде повече яснота: https://stackoverflow.com/questions/18796505/bootstrap-3-0-media-queries
В CSS все пак ще трябва да използвате традиционните медийни заявки, за да замените или добавите това, което Bootstrap прави.
Що се отнася до втория ви въпрос, това не е печатна грешка. След като екранът падне под 768px, рамката става напълно флуидна и променя размера си при всякаква ширина на устройството, като премахва необходимостта от точки на прекъсване. Точката на прекъсване при 480px съществува, защото има специфични промени, които се извършват в оформлението за оптимизация за мобилни устройства.
За да видите това в действие, отидете на този пример на техния сайт (http://getbootstrap.com/examples/navbar-fixed-top/) и променете размера на прозореца си, за да видите как се третира дизайнът след 768px.
Този въпрос е разгледан в https://github.com/twbs/bootstrap/issues/10203 Към момента не се планира промяна на Grid поради съображения за съвместимост.
Можете да получите Bootstrap от това разклонение, клон hs
: https://github.com/antespi/bootstrap/tree/hs
Този клон ви дава допълнителна точка на прекъсване при 480px, така че трябва да:
Дизайнът първо за мобилни устройства е ключът към разбирането на Bootstrap 3. Това е основната промяна в сравнение с BootStrap 2.x. Като шаблон за правило можете да следвате това (в 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) */
}
}
Препратката към 480px е премахната. Вместо това се казва:
/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */
В Bootstrap 3 няма точка на прекъсване под 768px.
Ако искате да използвате @screen-sm-min
и други миксини, тогава трябва да компилирате с LESS, вижте http://getbootstrap.com/css/#grid-less
Ето един урок за това как да използвате Bootstrap 3 и LESS: http://www.helloerik.com/bootstrap-3-less-workflow-tutorial