Haala Waliigalaa

Qaamolee fi filannoowwan pirojektii Bootstrap kee diriirsuuf, qabduu marfamuu, sirna giiridii humna guddaa qabu, wanta miidiyaa socho'aa, fi gitaalee faayidaa deebii kennan dabalatee.

Konteenaroota

Qabduulee Bootstrap keessatti qaama qindaa'ina bu'uuraa yoo ta'an yeroo sirna tarjaa durtii keenya fayyadamnu barbaachisoodha . Qabduu qabiyyee isaan keessa jiru qabachuuf, paad gochuuf, fi (yeroo tokko tokko) giddugaleessa gochuuf fayyadamu. Qabduulee man'ee ta'uu kan danda'an yoo ta'u, qindaa'inoota baay'een qabduu man'ee hin barbaadan .

Bootstrap qabduu adda addaa sadii waliin dhufa:

• .containermax-width, kan tokkoon tokkoon qabxii cabsuu deebii kennuu irratti a saagu
• .container-fluid, kunis width: 100%bakka cabbii hundatti ta’a
• .container-{breakpoint}, kunis width: 100%hanga qabxii cabbii ifteessameetti

Gabatee armaan gadii akkaataa tokkoon tokkoon qabduu's max-widthjalqabaa wajjin wal bira qabamee .containerfi .container-fluidtokkoon tokkoon qabxii cabsuu qaxxaamuree agarsiisa.

Gochaan isaan ilaalii fakkeenya Giriidii keenya keessatti wal bira qabi ilaali .

Hundaa tokko keessatti

Gitni keenya durtii .containerdeebii kan kennu, qabduu bal'ina dhaabbataa dha, jechuunis max-widthjijjiiramoota isaa tokkoon tokkoo qabxii cabbii irratti.

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

Dhangala'aa

.container-fluidQabduu bal'ina guutuuf fayyadami, bal'ina guutuu bal'ina mul'ataa facaasu .

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

Deebii kan kennu

Qabduu deebii kennu Bootstrap v4.4 keessatti haaraa dha. Isaan hanga qabxiin cabbii ifteessame ga'utti gita bal'ina 100% ifteessuu siif hayyamu, sana booda max-widthtokkoon tokkoo tuqaawwan ciccituu ol'aanaaf s hojii irra oolchina. Fakkeenyaaf, hanga tuqaa ciccituu .container-smga'utti jalqabuuf 100% bal'ina qaba sm, bakka inni md, lg, fi 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>

Qabxii cabsuu deebii kennuu

Bootstrap jalqaba mobaayila akka ta'uuf waan hojjetameef, gaaffiiwwan miidiyaa muraasa fayyadamnee haalawwanii fi walqunnamsiistota keenyaaf qabxiiwwan ciccituu hubannoo qaban uumna. Qabxiileen cabbii kun irra caalaa bal'ina agarsiisaa xiqqaa irratti kan hundaa'an yoo ta'u, akkuma mul'ataan jijjiiramutti elementoota akka guddifnu nu dandeessisu.

Bootstrap adda durummaan hangawwan gaaffii miidiyaa armaan gadii fayyadama—ykn qabxiilee cabsuu—faayiloota Sass madda keenya keessatti haalata, sirna tarjaa, fi qaamolee keenyaaf.

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

Madda CSS keenya Sass keessatti waan barreessineef, gaaffiiwwan miidiyaa keenya hundi karaa Sass mixins ni argamu:

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

Gaaffiiwwan miidiyaa kallattii biraatiin deeman darbee darbee fayyadamna (hamma iskiriinii kenname ykn isaa xiqqaa ):

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

Ammas, gaaffiiwwan miidiyaa kun karaa Sass mixins illee ni argamu:

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

Akkasumas, bal'ina qabxii cabbii xiqqaa fi guddaa fayyadamuun kutaa tokko hammangaa iskiriinii irratti xiyyeeffachuuf gaaffiiwwan miidiyaa fi makaawwan jiru.

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

Gaaffiiwwan miidiyaa kun karaa Sass mixins akkasumas ni argamu:

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

Haaluma walfakkaatuun, gaaffiiwwan miidiyaa bal'ina tuqaa cabbii dachaa dabarsuu danda'u:

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

Sass mixin kan hamma guddina iskiriinii walfakkaataa irratti xiyyeeffachuuf ta'a:

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

Z-indeeksii jedhama

Qaamonni Bootstrap hedduun fayyadamu z-index, qabeentaa CSS kan qabiyyee qindeessuuf siiqqee sadaffaa kennuudhaan qindaa'ina to'achuuf gargaaru. Bootstrap keessatti iskeelii z-index durtii kan sirriitti layer navigation, tooltips fi popovers, modals, fi kkf qophaa'e fayyadamna.

Gatiin ol'aanaa kun lakkoofsa fedhii irraa jalqabu, ol'aanaa fi adda ta'e gahaa ta'ee akka gaariitti waldhabdee irraa fagaachuuf. Tuuta istaandaardii kanneenii qaamolee keenya laayibarii qaxxaamuranii nu barbaachisa-tootipps, popovers, navbars, dropdowns, modals-kanaaf amala keessatti sababa qabeessa ta'een walsimachuu dandeenya. 100Sababni + ykn + fayyadamuu hin dandeenye hin jiru 500.

Duudhaalee dhuunfaa kana haala barbaadamuun jijjiiruu hin jajjabeessinu; tokko yoo jijjiirte hunda isaanii jijjiiruun si barbaachisuu hin oolu.

$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;

Daangaawwan wal-irra bu'an qaamolee keessaa qabachuuf (fkn, qaree fi galtee gareewwan galtee keessatti), z-indexgatiiwwan dijiitii tokkoo gadi aanaa 1, 2, fi 3haalata durtii, hover, fi sochii fayyadamna. Hover/focus/active irratti, elementii murtaa'e tokko gatii olaanaadhaan gara fuulduraatti fidnee z-indexdaangaa isaanii elementoota obbolaa irratti agarsiisuuf.