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 . Ibikoresho bikoreshwa mukubamo, padi, na (rimwe na rimwe) hagati yibirimo. Mugihe kontineri ishobora guterwa, imiterere myinshi ntisaba icyombo.

Bootstrap izanye ibintu bitatu bitandukanye:

• .container, ishyiraho a max-widthkuri buri cyerekezo gisubiza
• .container-fluid, ni width: 100%Kuri Byose
• .container-{breakpoint}, ni width: 100%kugeza igihe cyerekanwe

Imbonerahamwe ikurikira irerekana uburyo buri kontineri max-widthigereranya numwimerere .containerndetse .container-fluidno kuri buri gice.

Reba mubikorwa kandi ubigereranye murugero rwacu .

Byose hamwe

Icyiciro cyacu cyambere .containerni igisubizo, cyagutse-cyagutse, bivuze max-widthimpinduka zacyo kuri buri gice.

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

Amazi

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

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

Igisubizo

Ibikoresho byabashubije ni bishya muri Bootstrap v4.4. Bakwemerera kwerekana icyiciro gifite ubugari 100% kugeza igihe cyerekanwe kigeze, nyuma yo gusaba max-widths kuri buri cyiciro cyo hejuru. Kurugero, .container-smni 100% ubugari kugirango utangire kugeza aho ibice smbigeze, aho bizapima hamwe md, lgna xl.

<div class="container-sm">100% wide until small breakpoint</div>
<div class="container-md">100% wide until medium breakpoint</div>
<div class="container-lg">100% wide until large breakpoint</div>
<div class="container-xl">100% wide until extra large breakpoint</div>

Inzira zishubije

Kubera ko Bootstrap yatejwe imbere kugirango igendanwa mbere, dukoresha urutonde rwibibazo byinshi byitangazamakuru kugirango dushyireho ibintu byumvikana kumiterere yacu. Ibice byacitse ahanini bishingiye kubugari buke bwo kureba no kutwemerera gupima ibintu nkuko bigaragara 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 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) { ... }

// 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:

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

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

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) { ... }
// No media query necessary for xl breakpoint as it has no upper bound on its width

// Example: Style from medium breakpoint and down
@include media-breakpoint-down(md) {
  .custom-class {
    display: block;
  }
}

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 ku mubare 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 z'umuntu ku giti cye; 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.