Incamake

Ibigize hamwe nuburyo bwo gushiraho umushinga wawe wa Bootstrap, harimo gupfunyika ibikoresho, sisitemu ikomeye ya gride, ikintu cyitangazamakuru cyoroshye, hamwe nibyiciro byingirakamaro.

Ibikoresho

Ibirimwo nibintu byibanze byimiterere muri Bootstrap kandi birasabwa mugihe ukoresheje sisitemu ya gride idasanzwe . Hitamo muri kontineri yitabiriwe, yagutse-yubugari (bivuze max-widthimpinduka zayo kuri buri cyerekezo) cyangwa ubugari bwamazi (bivuze ko ari 100%ubugari igihe cyose).

Mugihe ibyombo bishobora guterwa, imiterere myinshi ntisaba icyombo.

<div class="container">
  <!-- Content here -->
</div>

Koresha .container-fluidubugari bwuzuye kontineri, uzengurutse ubugari bwose bwo kureba.

<div class="container-fluid">
  ...
</div>

Inzira zishubije

Kubera ko Bootstrap yatejwe imbere kugirango igendanwa mbere, dukoresha urutonde rwibibazo byinshi byitangazamakuru kugirango dushyireho ibintu byumvikana kumiterere yacu. Ibi bice ahanini bishingiye kubugari buke bwo kureba no kutwemerera gupima ibintu uko ibintu bihinduka.

Bootstrap ikoresha cyane cyane itangazamakuru ryibibazo bikurikira - cyangwa aho bihurira - mumasoko yacu ya Sass dosiye kumiterere yacu, sisitemu ya gride, nibigize.

// Extra small devices (portrait phones, less than 576px)
// No media query 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) { ... }

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

Kuva twandika isoko yacu CSS muri Sass, ibibazo byitangazamakuru byacu byose biraboneka binyuze muri Sass ivanze:

@include media-breakpoint-up(xs) { ... }
@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { ... }

// Example usage:
@include media-breakpoint-up(sm) {
  .some-class {
    display: block;
  }
}

Rimwe na rimwe dukoresha ibibazo by'itangazamakuru bijya mu kindi cyerekezo (ingano ya ecran yatanzwe cyangwa ntoya ):

// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }

// Small devices (landscape phones, less than 768px)
@media (max-width: 767.98px) { ... }

// Medium devices (tablets, less than 992px)
@media (max-width: 991.98px) { ... }

// Large devices (desktops, less than 1200px)
@media (max-width: 1199.98px) { ... }

// Extra large devices (large desktops)
// No media query since the extra-large breakpoint has no upper bound on its width

Na none kandi, ibyo bibazo byitangazamakuru nabyo biraboneka binyuze muri Sass ivanze:

@include media-breakpoint-down(xs) { ... }
@include media-breakpoint-down(sm) { ... }
@include media-breakpoint-down(md) { ... }
@include media-breakpoint-down(lg) { ... }

Hariho kandi ibibazo byitangazamakuru hamwe nuruvange rwo kwerekana igice kimwe cyubunini bwa ecran ukoresheje ubugari ntarengwa kandi ntarengwa.

// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) and (max-width: 767.98px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) and (max-width: 991.98px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) and (max-width: 1199.98px) { ... }

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

Ibi bibazo byitangazamakuru biraboneka kandi binyuze muri Sass ivanze:

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

Mu buryo nk'ubwo, ibibazo by'itangazamakuru bishobora kumara ubugari butandukanye:

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

Sass ivanga kugirango igere ku ntera ingana ya ecran yaba:

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

Z-indangagaciro

Ibice byinshi bya Bootstrap ikoresha z-index, umutungo wa CSS ufasha kugenzura imiterere utanga umurongo wa gatatu kugirango utegure ibirimo. Twifashishije igipimo gisanzwe cya z-indangagaciro muri Bootstrap yagenewe gukora neza kugendagenda neza, ibikoresho hamwe na popovers, modal, nibindi byinshi.

Indangagaciro zo hejuru zitangirira kumubare utabishaka, muremure kandi wihariye bihagije kugirango wirinde amakimbirane. Dukeneye urutonde rusanzwe rwibi bice byacu - ibikoresho, popovers, navbars, ibitonyanga, modal - kuburyo dushobora guhuza ibitekerezo muburyo bwiza. Ntampamvu tutashoboraga gukoresha 100+ cyangwa 500+.

Ntabwo dushishikarizwa kwihitiramo indangagaciro; ugomba guhindura imwe, birashoboka ko ugomba guhindura byose.

$zindex-dropdown:          1000 !default;
$zindex-sticky:            1020 !default;
$zindex-fixed:             1030 !default;
$zindex-modal-backdrop:    1040 !default;
$zindex-modal:             1050 !default;
$zindex-popover:           1060 !default;
$zindex-tooltip:           1070 !default;

Kugirango ukemure imipaka irenze ibice (urugero, buto ninjiza mumatsinda yinjiza), dukoresha imibare mike yimibare z-indexya 1,, 2na 3kubisanzwe, kuzenguruka, na leta zikora. Kuri hover / kwibanda / gukora, tuzana ikintu runaka kumwanya wambere hamwe z-indexnagaciro keza kugirango twerekane imipaka yabo kubintu bavukana.