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 deebii kennu, bal'ina dhaabbataa (jechuunis max-widthjijjiirama isaa bakka cabbii tokkoon tokkootti) ykn bal'ina dhangala'aa ( 100%yeroo hunda bal'aa jechuudha) keessaa filadhu.

Qabduulee man'ee ta'uu kan danda'an yoo ta'u, qindaa'inoota baay'een qabduu man'ee hin barbaadan .

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

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

<div class="container-fluid">
  ...
</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 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:

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

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

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 hedduu span ta'uu 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 siiqqe 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 akka hin uumamneef. 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.