Преломне тачке
Преломне тачке су прилагодљиве ширине које одређују како се ваш изглед који одговара понаша на различитим уређајима или величинама поља приказа у Боотстрап-у.
Основни концепти
-
Преломне тачке су градивни блокови респонзивног дизајна. Користите их да бисте контролисали када се ваш изглед може прилагодити одређеном пољу приказа или величини уређаја.
-
Користите медијске упите да бисте дизајнирали свој ЦСС помоћу тачке прекида. Медијски упити су карактеристика ЦСС-а која вам омогућава да условно примените стилове на основу скупа параметара претраживача и оперативног система. Најчешће користимо
min-width
у нашим медијским упитима. -
Пре свега мобилни, респонзивни дизајн је циљ. Боотстрап-ов ЦСС има за циљ да примени минималан број стилова како би распоред радио на најмањој тачки прекида, а затим слојеве на стилове да би прилагодио тај дизајн за веће уређаје. Ово оптимизује ваш ЦСС, побољшава време рендеровања и пружа одлично искуство за ваше посетиоце.
Доступне тачке прекида
Боотстрап укључује шест подразумеваних тачака прекида, које се понекад називају и слојеви мреже , за прављење одговора. Ове тачке прекида се могу прилагодити ако користите наше изворне Сасс датотеке.
Тачка прекида | Инфикс класе | Димензије |
---|---|---|
Кс-Смалл | Ниједан | <576пк |
Мала | sm |
≥576пк |
Средње | md |
≥768пк |
Велики | lg |
≥992пк |
Екстра велики | xl |
≥1200пк |
Екстра велики | xxl |
≥1400пк |
Свака тачка прекида је изабрана да удобно држи контејнере чије су ширине вишеструке од 12. Преломне тачке су такође репрезентативне за подскуп уобичајених величина уређаја и димензија прозора – оне не циљају посебно сваки случај употребе или уређај. Уместо тога, опсези пружају снажну и конзистентну основу за надоградњу за скоро сваки уређај.
Ове тачке прекида се могу прилагодити преко Сасс-а—наћи ћете их у Сасс мапи у нашој _variables.scss
табели стилова.
$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px,
xxl: 1400px
);
За више информација и примера о томе како да измените наше Сасс мапе и варијабле, погледајте одељак Сасс у Грид документацији .
Медијски упити
Пошто је Боотстрап развијен да буде први мобилни, користимо прегршт медијских упита да креирамо разумне тачке прекида за наше изгледе и интерфејсе. Ове тачке прелома су углавном засноване на минималним ширинама оквира за приказ и омогућавају нам да увећамо елементе како се прозорчић мења.
Мин-видтх
Боотстрап првенствено користи следеће опсеге медијских упита — или тачке прекида — у нашим изворним Сасс датотекама за наш распоред, систем мреже и компоненте.
// Source mixins
// No media query necessary for xs breakpoint as it's effectively `@media (min-width: 0) { ... }`
@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { ... }
@include media-breakpoint-up(xxl) { ... }
// Usage
// Example: Hide starting at `min-width: 0`, and then show at the `sm` breakpoint
.custom-class {
display: none;
}
@include media-breakpoint-up(sm) {
.custom-class {
display: block;
}
}
Ови Сасс миксини се преводе у наш преведени ЦСС користећи вредности декларисане у нашим Сасс варијаблама. На пример:
// X-Small devices (portrait phones, less than 576px)
// No media query for `xs` since this is the default in Bootstrap
// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }
// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }
// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }
// X-Large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }
// XX-Large devices (larger desktops, 1400px and up)
@media (min-width: 1400px) { ... }
Максимална ширина
Повремено користимо медијске упите који иду у другом правцу (дата величина екрана или мања ):
// No media query necessary for xs breakpoint as it's effectively `@media (max-width: 0) { ... }`
@include media-breakpoint-down(sm) { ... }
@include media-breakpoint-down(md) { ... }
@include media-breakpoint-down(lg) { ... }
@include media-breakpoint-down(xl) { ... }
@include media-breakpoint-down(xxl) { ... }
// Example: Style from medium breakpoint and down
@include media-breakpoint-down(md) {
.custom-class {
display: block;
}
}
Ови миксини узимају те декларисане тачке прекида, одузимају .02px
од њих и користе их као наше max-width
вредности. На пример:
// `xs` returns only a ruleset and no media query
// ... { ... }
// `sm` applies to x-small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }
// `md` applies to small devices (landscape phones, less than 768px)
@media (max-width: 767.98px) { ... }
// `lg` applies to medium devices (tablets, less than 992px)
@media (max-width: 991.98px) { ... }
// `xl` applies to large devices (desktops, less than 1200px)
@media (max-width: 1199.98px) { ... }
// `xxl` applies to x-large devices (large desktops, less than 1400px)
@media (max-width: 1399.98px) { ... }
min-
и max-
префиксе и оквире за приказ са делимичним ширинама (што се може појавити под одређеним условима на уређајима са високим дпи, на пример) коришћењем вредности са већом прецизношћу.
Једна тачка прекида
Постоје и медијски упити и миксини за циљање једног сегмента величине екрана користећи минималну и максималну ширину тачке прекида.
@include media-breakpoint-only(xs) { ... }
@include media-breakpoint-only(sm) { ... }
@include media-breakpoint-only(md) { ... }
@include media-breakpoint-only(lg) { ... }
@include media-breakpoint-only(xl) { ... }
@include media-breakpoint-only(xxl) { ... }
На пример @include media-breakpoint-only(md) { ... }
, резултат ће бити:
@media (min-width: 768px) and (max-width: 991.98px) { ... }
Између тачака прекида
Слично, медијски упити могу да обухватају више ширина тачака прекида:
@include media-breakpoint-between(md, xl) { ... }
што резултира:
// Example
// Apply styles starting from medium devices and up to extra large devices
@media (min-width: 768px) and (max-width: 1199.98px) { ... }