Vizuizi

Dhana za msingi

• Vizuizi ni vizuizi vya ujenzi wa muundo sikivu. Zitumie kudhibiti wakati mpangilio wako unaweza kubadilishwa katika poti mahususi ya kutazama au saizi ya kifaa.

• Tumia hoja za midia ili kuunda CSS yako kwa njia ya kuvunja. Hoji za media ni kipengele cha CSS ambacho hukuruhusu kutumia mitindo kwa masharti kulingana na seti ya vigezo vya kivinjari na mfumo wa uendeshaji. Mara nyingi sisi hutumia min-widthkatika maswali yetu ya media.

• Simu ya kwanza, muundo msikivu ndio lengo. CSS ya Bootstrap inalenga kutumia kiwango cha chini kabisa cha mitindo ili kufanya mpangilio ufanye kazi katika sehemu ndogo zaidi ya kukatika, na kisha kuweka tabaka kwenye mitindo kurekebisha muundo huo kwa vifaa vikubwa zaidi. Hii huboresha CSS yako, huboresha muda wa uwasilishaji, na hutoa matumizi bora kwa wageni wako.

Vizuizi vinavyopatikana

Bootstrap inajumuisha vianzio sita chaguo-msingi, wakati mwingine hujulikana kama tija za gridi ya taifa , kwa ajili ya kujenga kwa kuwajibika. Vipindi hivi vinaweza kubinafsishwa ikiwa unatumia faili zetu asili za Sass.

Kila sehemu ya kukatiza ilichaguliwa ili kushikilia kwa urahisi kontena ambazo upana wake ni vizidishio vya 12. Breakpoints pia huwakilisha kikundi kidogo cha ukubwa wa kawaida wa kifaa na vipimo vya mahali pa kutazama—havilengi mahususi kila kesi ya matumizi au kifaa. Badala yake, safu hutoa msingi thabiti na thabiti wa kujenga kwa karibu kifaa chochote.

Vipindi hivi vinaweza kubinafsishwa kupitia Sass—utavipata kwenye ramani ya Sass katika laha yetu ya _variables.scssmitindo.

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
);

Kwa maelezo zaidi na mifano kuhusu jinsi ya kurekebisha ramani na vigeu vyetu vya Sass, tafadhali rejelea sehemu ya Sass ya hati za Gridi .

Maswali ya media

Kwa kuwa Bootstrap imeundwa kuwa ya simu ya kwanza, tunatumia maswali machache ya midia ili kuunda viingilio vya busara vya mipangilio na violesura vyetu. Viingilio hivi zaidi hutegemea upana wa chini zaidi wa kituo cha kutazama na huturuhusu kuongeza vipengee kadiri nafasi ya kutazama inavyobadilika.

Min-upana

Bootstrap kimsingi hutumia safu za hoja za media zifuatazo-au sehemu za utatuzi-katika chanzo chetu cha faili za Sass kwa mpangilio wetu, mfumo wa gridi ya taifa na vipengee.

// 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;
  }
}

Michanganyiko hii ya Sass hutafsiriwa katika CSS yetu iliyokusanywa kwa kutumia thamani zilizotangazwa katika vigeu vyetu vya Sass. Kwa mfano:

// 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) { ... }

Upana wa juu

Mara kwa mara sisi hutumia maswali ya midia ambayo huenda upande mwingine (ukubwa wa skrini uliotolewa au ndogo zaidi ):

// 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;
  }
}

Michanganyiko hii huchukua sehemu hizo za kuvunja zilizotangazwa, kutoa .02pxkutoka kwao, na kuzitumia kama max-widthmaadili yetu. Kwa mfano:

// `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) { ... }

Sehemu moja ya kuvunja

Pia kuna maswali ya midia na michanganyiko ya kulenga sehemu moja ya ukubwa wa skrini kwa kutumia upeo wa chini na upeo wa upana wa sehemu ya kukatika.

@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) { ... }

Kwa mfano @include media-breakpoint-only(md) { ... }itasababisha:

@media (min-width: 768px) and (max-width: 991.98px) { ... }

Kati ya vituo vya kuvunja

Vile vile, hoja za midia huenda zikachukua upana wa sehemu nyingi za utatuzi:

@include media-breakpoint-between(md, xl) { ... }

Ambayo husababisha:

// Example
// Apply styles starting from medium devices and up to extra large devices
@media (min-width: 768px) and (max-width: 1199.98px) { ... }