Sirna giiridii

Sirna tarjaa kudha lamaa, sadarkaa deebii durtii ja'a, jijjiiramoota Sass fi mixins, fi gita durtii ibsaman kudhanootaan lakkaa'amaniif galata, qindaa'inoota boca fi guddina hunda ijaaruuf tarjaa flexbox humna guddaa qabu keenya fayyadami.

Fuula kana irratti

Fakkeenya

Sirni tarjaa Bootstrap qabiyyee qindeessuu fi qindeessuuf tartiiba qabduu, tarreewwanii fi tarjaawwan fayyadama. Flexbox waliin kan ijaarame yoo ta'u guutummaatti deebii kan kennudha. Armaan gaditti fakkeenyaa fi ibsa gadi fageenyaa akkaataa sirni giiridii walitti dhufuuf kennameera.

Flexbox irratti haaraa ykn hin beekne? Qajeelfama flexbox CSS Tricks kana duubbee, jechoota, qajeelfama, fi ciccitaa koodii dubbisi.

Toora asii gadii

html

<div class="container text-center">
  <div class="row">
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
  </div>
</div>

Fakkeenyi armaan olii tarjaawwan bal'ina walqixaa sadii meeshaalee fi buufatawwan ilaalchaa hunda irratti gita tarjaa keenya dursee ibsaman fayyadamuun uuma. Tarjaawwan sun fuula keessatti warra waliin giddugaleessa ta'u .container.

Akkaataa itti hojjetu

Caccabsuun, sirni giiridii akkamitti akka walitti dhufu kunooti:

Giriidiin keenya qabxiiwwan ciccituu deebii kennan ja'a ni deeggara . Qabxiileen cabsuu gaaffiiwwan miidiyaa irratti hundaa'u min-width, jechuunis qabxii cabsuu sanaa fi kanneen isa olii hunda irratti dhiibbaa geessisu (fkn, , , , , fi .col-sm-4irratti raawwata ). Kana jechuun safara qabduu fi tarjaa fi amala tokkoon tokkoo tuqaa cabbiitiin to'achuu dandeessa.smmdlgxlxxl
Qabduu giddugaleessaa fi qajeelaan qabiyyee kee pad. Bal'ina piikselii .containerdeebii kennuudhaaf, bal'ina .container-fluidilaalchaa width: 100%fi meeshaalee hundaaf, ykn qabduu deebii kennuuf (fkn, .container-md) walnyaatinsa dhangala'aa fi bal'ina piikselii fayyadami.
Tarreewwan tarjaawwaniif marfata. Tokkoon tokkoon tarjaa paddingiddoo isaan gidduu jiru to’achuuf horizontal (gutter jedhama) qaba. Kunis paddingsana booda tarreewwan marga negaatiivii qaban irratti qabiyyeen tarjaawwan kee keessa jiru mul'ataan gama bitaa gadi akka qindaa'u mirkaneessuuf faallaa ta'a. Tarreewwan akkasumas gita fooyyessaa akka walfakkaatutti safara tarjaa hojii irra oolchuuf deeggaru fi gita gutter addaan fageenya qabiyyee kee jijjiiruuf.
Tarreewwan haala nama ajaa'ibuun kan jijjiiramudha. Tarree tokkoof tarjaawwan unkaa 12 jiru, kunis walnyaatinsa elementoota adda addaa kanneen lakkoofsa tarjaa kamiyyuu dabarsan uumuuf si dandeessisa. Gitoota tarjaa lakkoofsa tarjaa unkaa span agarsiisu (fkn, col-4span afur). widths dhibbeentaadhaan saagamu kanaaf yeroo hunda safara firaakshinii walfakkaataa qabda.
Gutters akkasumas deebii kan kennan fi haala barbaadamuun kan jijjiiramudha. Gutter classes breakpoints hunda irratti ni argamu, hundi isaanii hamma margina fi padding spacing keenyaa wajjin wal fakkaatu . Guutaroota qajeeloo .gx-*gita waliin, gutter dhaabbataa .gy-*, ykn gutter hunda gita waliin jijjiiri .g-*. .g-0gutters balleessuufis ni argama.
Jijjiiramoonni Sass, kaartaa, fi mixins giiridii humna. Yoo gitawwan tarjaa durtii ibsaman Bootstrap keessatti fayyadamuu hin barbaanne, madda tarjaa keenyaa Sass fayyadamuun kan kee mallattoo hiika caaluun uumuu dandeessa. Akkasumas jijjiiramoota Sass kana fayyadamuuf amaloota amala CSS tokko tokko hammachuudhaan daran siif jijjiiramaaf.

Daangaa fi dogongora naannoo flexbox jiru beekaa , akka qaamolee HTML tokko tokko akka qabduu flex fayyadamuu dadhabuu .

Filannoowwan giiridii

Sirni tarjaa Bootstrap qabxiilee cabsuu durtii ja'an hunda, fi qabxiilee cabsuu kamiyyuu ati dhuunfachiiftu irratti madaqsuu danda'a. Sadarkaaleen tarjaa durtii ja'an akka armaan gadiitti:

Dabalata xiqqaa (xs) .
Xiqqaa (sm) .
Giddugaleessa (md) .
Guddaa (lg) .
Dabalata guddaa (xl) .
Dabalataan guddaa (xxl) .

Akkuma armaan olitti ibsame, tokkoon tokkoon tuqaawwan cabbii kanaa qabduu mataa isaanii, durtii gita addaa, fi fooyyessitoota qabu. Akkaataa gingilchaan tuqaawwan cabbii kana qaxxaamuree jijjiiramu kunooti:

	xs <576px jedhamuun beekama	sm ≥576px ta’a	md ≥768px ta’a	lg ≥992px ta’a	xl ≥1200px ta’a	xxl ≥1400px ta’a
Konteenara`max-width`	Tokkollee hin jiru (auto) .	540px ta'a	720px ta'a	960px ta'a	1140px ta'a	1320px ta'a
Durtii gitaa	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`	`.col-xxl-`
# kan tarjaawwanii	12.
Bal'ina gutter	1.5rem (.75rem bitaa fi mirgaa irratti)
Gutters aadaa	Eeyyee
Nestable kan ta'e	Eeyyee
Tartiiba tarree	Eeyyee

Tarjaawwan ofumaan qindaa'uu

Gitaa lakkoofsa ifa ta'e malee safara tarjaa salphaa akka .col-sm-6.

Bal’ina walqixaa

Fakkeenyaaf, kunoo qindaa'inoota tarjaa lama kan meeshaa fi buufata ilaalchaa hunda irratti hojjetan, irraa xshanga xxl. Tokkoon tokkoo tuqaa ciccitaa barbaadduuf lakkoofsa gita yuunitii hin qabne kamiyyuu dabaliiti tarjaan hundi bal'ina walfakkaataa ta'a.

1 keessaa 2

2 kan 2

1 keessaa 3

2 kan 3

3 keessaa 3

html

<div class="container text-center">
  <div class="row">
    <div class="col">
      1 of 2
    </div>
    <div class="col">
      2 of 2
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col">
      2 of 3
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

Bal'ina tarjaa tokko saaguu

Ofumaan qindaa'ina tarjaawwan tarjaa flexbox akkasumas bal'ina tarjaa tokkoo saaguu fi tarjaawwan obbolaa ofumaan naannoo isaa guddina akka jijjiiran gochuu dandeessa jechuudha. Gitoota tarjaa durtii ibsaman (akkuma armaan gadii), makaa tarjaa, ykn bal'ina sarara keessaa fayyadamuu dandeessa. Hubadhu, tarjaawwan biroo bal'inni tarjaa giddugaleessaa maal iyyuu yoo ta'e hammangaa ni jijjiiru.

1 keessaa 3

2 keessaa 3 (bal’aa) .

3 keessaa 3

1 keessaa 3

2 keessaa 3 (bal’aa) .

3 keessaa 3

html

<div class="container text-center">
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-6">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-5">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

Qabiyyee bal'ina jijjiiramaa

col-{breakpoint}-autoTarjaawwan bal'ina uumamaa qabiyyee isaanii irratti hundaa'uun safaruuf gita fayyadami .

1 keessaa 3

Qabiyyee bal'ina jijjiiramaa

3 keessaa 3

1 keessaa 3

Qabiyyee bal'ina jijjiiramaa

3 keessaa 3

html

<div class="container text-center">
  <div class="row justify-content-md-center">
    <div class="col col-lg-2">
      1 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
</div>

Kutaawwan deebii kennan

Giriidiin Bootstrap sadarkaa ja'a gita durtii ibsaman kanneen qindaa'inoota deebii walxaxaa ijaaruuf of keessatti qabata. Meeshaalee dabalataa xiqqaa, xiqqaa, giddu galeessaa, guddaa, ykn guddaa dabalataa irratti hammangaa tarjaawwan kee hamma barbaaddetti dhuunfachiisi.

Qabxii cabsuu hunda

Giriidota meeshaalee xiqqaa irraa hanga guddaatti walfakkaataniif, gitaalee .colfi fayyadami. .col-*Yeroo tarjaa hamma addaa barbaaddu gita lakkoofsa qabu ifteessi; yoo kana hin taane, .col.

kol

kol-8

kol-4

html

<div class="container text-center">
  <div class="row">
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
  </div>
  <div class="row">
    <div class="col-8">col-8</div>
    <div class="col-4">col-4</div>
  </div>
</div>

Gara horizontal tti walitti tuulameera

Tuuta gitaa tokko fayyadamuun .col-sm-*, sirna tarjaa bu'uuraa kan tuulamee jalqabee fi bakka cabbii xiqqaa ( ) irratti qajeelaa ta'u uumuu dandeessa sm.

kol-sm-8

kol-sm-4

kol-sm jedhamuun beekama

html

<div class="container text-center">
  <div class="row">
    <div class="col-sm-8">col-sm-8</div>
    <div class="col-sm-4">col-sm-4</div>
  </div>
  <div class="row">
    <div class="col-sm">col-sm</div>
    <div class="col-sm">col-sm</div>
    <div class="col-sm">col-sm</div>
  </div>
</div>

Mix fi walsimsiisaa

Tarjaawwan kee salphaatti sadarkaa tarjaa tokko tokko keessatti akka tuulaman hin barbaadduu? Tokkoon tokkoo sadarkaaf akka barbaachisummaa isaatti walnyaatinsa gita adda addaa fayyadami. Akkaataa inni hundi itti hojjetu yaada fooyya'aa argachuuf fakkeenya armaan gadii ilaali.

.kol-md-8 jedhamuun beekama

.kol-6 .kol-md-4 jedhamuun beekama

.kol-6 ta’a

html

<div class="container text-center">
  <!-- Stack the columns on mobile by making one full-width and the other half-width -->
  <div class="row">
    <div class="col-md-8">.col-md-8</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  </div>

  <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
  <div class="row">
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  </div>

  <!-- Columns are always 50% wide, on mobile and desktop -->
  <div class="row">
    <div class="col-6">.col-6</div>
    <div class="col-6">.col-6</div>
  </div>
</div>

Tarreewwan tarree

.row-cols-*Lakkoofsa tarjaa qabiyyee fi qindaa'ina kee akka gaariitti agarsiisan saffisaan saaguuf gita deebii kennu fayyadami . Gitoota idilee .col-*tarjaawwan dhuunfaa irratti hojii irra kan oolan yoo ta'u (fkn, .col-md-4), gitoonni tarjaa tarree .rowakka karaa gabaabaa warra irratti qindaa'u. Si waliin .row-cols-autotarjaawwan bal'ina uumamaa isaanii kennuu dandeessa.

Gitoota tarjaa tarree kana fayyadamii saffisaan qindaa'inoota tarjaa bu'uuraa uumuuf ykn qindaa'inoota kaardii kee to'achuuf.

Toora asii gadii

html

<div class="container text-center">
  <div class="row row-cols-2">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

Toora asii gadii

html

<div class="container text-center">
  <div class="row row-cols-3">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

Toora asii gadii

html

<div class="container text-center">
  <div class="row row-cols-auto">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

Toora asii gadii

html

<div class="container text-center">
  <div class="row row-cols-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

Toora asii gadii

html

<div class="container text-center">
  <div class="row row-cols-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col-6">Column</div>
    <div class="col">Column</div>
  </div>
</div>

Toora asii gadii

html

<div class="container text-center">
  <div class="row row-cols-1 row-cols-sm-2 row-cols-md-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

Akkasumas Sass mixin isa waliin jiru fayyadamuu dandeessu, row-cols():

.element {
  // Three columns to start
  @include row-cols(3);

  // Five columns from medium breakpoint up
  @include media-breakpoint-up(md) {
    @include row-cols(5);
  }
}

Koonyaa gochuu

Qabiyyee kee tarjaa durtii waliin man'ee gochuuf, tarjaa haaraa .rowfi tuuta .col-sm-*tarjaa jiru keessaa dabali .col-sm-*. Tarreewwan man'ee tuuta tarjaawwan hanga 12 fi isaa gadi ida'an of keessatti qabachuu qabu (tarjaawwan 12 jiran hunda fayyadamuun hin barbaachisu).

Sadarkaa 1ffaa: .col-sm-3

Sadarkaa 2ffaa: .col-8 .col-sm-6

Sadarkaa 2ffaa: .col-4 .col-sm-6

html

<div class="container text-center">
  <div class="row">
    <div class="col-sm-3">
      Level 1: .col-sm-3
    </div>
    <div class="col-sm-9">
      <div class="row">
        <div class="col-8 col-sm-6">
          Level 2: .col-8 .col-sm-6
        </div>
        <div class="col-4 col-sm-6">
          Level 2: .col-4 .col-sm-6
        </div>
      </div>
    </div>
  </div>
</div>

Sass jedhama

Yeroo faayilii Sass madda Bootstrap fayyadamtu, jijjiiramoota Sass fi mixins fayyadamuun qindaa'inoota fuula amala, hiika, fi deebii uumuuf filannoo qabda. Gitoota tarjaa keenya dursanii ibsaman jijjiiramootaa fi makaawwan walfakkaatan kana fayyadamuun guutummaa tuuta gitaalee fayyadamaaf qophaa'oo qindaa'inoota deebii saffisaa kennuudhaaf dhiyeessuu.

Jijjiiramoota

Jijjiiramoonni fi kaartoonni lakkoofsa tarjaa, bal'ina gutter, fi qabxii gaaffii miidiyaa tarjaawwan lola'an itti jalqabu murteessu. Kanneen gita tarjaa durtii ibsaman armaan olitti galmaa'an uumuuf, akkasumas makaa amala armaan gadii tarreeffamaniif fayyadamna.

$grid-columns:      12;
$grid-gutter-width: 1.5rem;
$grid-row-columns:  6;

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
);

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px,
  xxl: 1320px
);

Mixins jedhaman

Miksiin jijjiiramoota tarjaa waliin ta'uun CSS hiika tarjaa tarjaa dhuunfaa uumuuf fayyadamu.

// Creates a wrapper for a series of columns
@include make-row();

// Make the element grid-ready (applying everything but the width)
@include make-col-ready();

// Without optional size values, the mixin will create equal columns (similar to using .col)
@include make-col();
@include make-col($size, $columns: $grid-columns);

// Offset with margins
@include make-col-offset($size, $columns: $grid-columns);

Fakkeenya fayyadama

Jijjiiramoota gara gatiiwwan amala mataa keetii fooyyessuu dandeessa, ykn makaawwan gatiiwwan durtii isaanii waliin qofa fayyadamuu dandeessa. Fakkeenyi qindaa'inoota durtii fayyadamuun qindaa'ina tarjaa lamaa qaawwa gidduu jiru uumuuf kunooti.

.example-container {
  @include make-container();
  // Make sure to define this width after the mixin to override
  // `width: 100%` generated by `make-container()`
  width: 800px;
}

.example-row {
  @include make-row();
}

.example-content-main {
  @include make-col-ready();

  @include media-breakpoint-up(sm) {
    @include make-col(6);
  }
  @include media-breakpoint-up(lg) {
    @include make-col(8);
  }
}

.example-content-secondary {
  @include make-col-ready();

  @include media-breakpoint-up(sm) {
    @include make-col(6);
  }
  @include media-breakpoint-up(lg) {
    @include make-col(4);
  }
}

Qabiyyee ijoo

Qabiyyee sadarkaa lammaffaa

html

<div class="example-container">
  <div class="example-row">
    <div class="example-content-main">Main content</div>
    <div class="example-content-secondary">Secondary content</div>
  </div>
</div>

Giriidii dhuunfachuu

Jijjiiramootaa fi kaartaa Sass tarjaa ijaarame keenya fayyadamuun, gita tarjaa durtii ibsaman guutummaatti dhuunfachuun ni danda'ama. Lakkoofsa sadarkaa, safara gaaffii miidiyaa, fi bal'ina qabduu jijjiiri—sana booda irra deebi'ii qindeessii.

Utubaa fi gutters

Lakkoofsi tarjaawwan tarjaa karaa jijjiiramoota Sass fooyya'uu danda'a. $grid-columnsbal'ina (dhibbeentaadhaan) tokkoon tokkoo tarjaa dhuunfaa uumuuf fayyadama yeroo $grid-gutter-widthbal'ina gutters tarjaa saaga. $grid-row-columnslakkoofsa tarjaa guddaa saaguuf fayyadama .row-cols-*, lakkoofsi kamiyyuu daangaa kana ol tuffatama.

$grid-columns: 12 !default;
$grid-gutter-width: 1.5rem !default;
$grid-row-columns: 6 !default;

Sadarkaa giiridii

Tarjaawwan ofii isaanii bira darbitee, lakkoofsa sadarkaawwan tarjaa dhuunfachuus dandeessa. Osoo sadarkaa giiridii afur qofa barbaadde, $grid-breakpointsfi $container-max-widthsgara waan akka kanaatti fooyyessita:

$grid-breakpoints: (
  xs: 0,
  sm: 480px,
  md: 768px,
  lg: 1024px
);

$container-max-widths: (
  sm: 420px,
  md: 720px,
  lg: 960px
);

Jijjiiramoota Sass ykn kaartaa irratti jijjiirama kamiyyuu yeroo gootu, jijjiiramoota kee qusachuu fi irra deebi'ii qindeessuu si barbaachisa. Kana gochuun tuuta haaraa gita tarjaa durtii ibsame bal'ina tarjaa, ofseetota, fi tartiibaaf ni baasa. Faayidaaleen mul'achuu deebii kennanis qabxiiwwan cabsuu amala fayyadamuuf ni fooyya'u. pxGatii tarjaa (hin rem, em, ykn ) keessatti saaguu mirkaneessi %.