Source

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 kontineri ishobora guterwa, imiterere myinshi ntisaba icyombo.

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

Koresha .container-fluidubugari bwuzuye kontineri, uzenguruke 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. 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

Menya ko kuva mushakisha zidashyigikiye urutonde rwibibazo , dukora hafi yimbibi za prefixes min-hamwemax- na kureba hamwe nubugari bwibice (bishobora kugaragara mubihe bimwe na bimwe kubikoresho byo hejuru-dpi, urugero) dukoresheje indangagaciro zifite ubusobanuro bunoze bwo kugereranya. .

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.