Nidaamka grid

Tusaale

Nidaamka xariiqda Bootstrap wuxuu adeegsadaa weel taxane ah, saf, iyo tiirar si loo habeeyo oo loo waafajiyo waxa ku jira. Waxa lagu dhisay flexbox oo si buuxda uga jawaaba. Hoos waxaa ku yaal tusaale iyo sharraxaad qotodheer oo ku saabsan sida nidaamka gridku isu keeno.

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

Tusaalaha kore wuxuu abuuraa saddex tiir oo ballac siman dhammaan aaladaha iyo meelaha daawashada iyadoo la isticmaalayo fasaladayada safafka hore loo sii qeexay. Tiirarkaas waxay xuddun u yihiin bogga waalidka .container.

Sida ay u shaqeyso

Burburinta, waa kan sida nidaamka gridku isugu yimaado:

• Shabakaddayadu waxay taageertaa lix dhibcood oo jawaab celin ah . Dhibcuhu waxay ku saleysan yihiin min-widthweydiimaha warbaahinta, taasoo la micno ah inay saameeyaan barta goynta iyo dhammaan kuwa ka sarreeya (tusaale, .col-sm-4waxay khuseeyaan sm, md, lg, xliyo xxl). Tani waxay ka dhigan tahay inaad xakamayn karto weelka iyo cabbirka tiirka iyo habdhaqanka meel kasta oo jaban.

• Konteenarada ayaa udub dhexaad u ah oo si toosan u daboola macluumaadkaaga. U isticmaal .containerballac pixel jawaab celin ah, .container-fluiddhammaan width: 100%goobaha daawashada iyo aaladaha, ama weel jawaab celin ah (tusaale, .container-md) isku darka dareeraha iyo ballaca pixels.

• Safku waa duubo tiirar. Tiir kastaa waxa uu leeyahay jiif padding(oo loo yaqaan godad) si loo xakameeyo meesha bannaan ee u dhaxaysa. Tan paddingwaxa markaas lagaga hortagayaa safafka leh xad-dhaaf xun si loo hubiyo in waxa ku jira tiirarkaagu ay muuqaal ahaan la siman yihiin dhinaca bidix. Safafka sidoo kale waxay taageeraan fasalada wax ka beddelka si ay si isku mid ah u dabaqaan cabbirka tiirka iyo fasallada qulqulka si loo beddelo kala dheeraynta macluumaadkaaga.

• Tiirarka ayaa si cajiib ah u dabacsan. Waxaa jira 12 tiirar template ah oo la heli karo safkiiba, taas oo kuu oggolaanaysa inaad abuurto isku-dhafan kala duwan oo walxood oo ku dhereran tiro kasta oo tiirar ah. Fasallada tiirarka waxay muujinayaan tirada tiirarka qaab-dhismeedka si ay u fidiyaan (tusaale, col-4dhererka afar). widths waxaa loo dejiyey boqolleyda si aad had iyo jeer lahaato qiyaas qaraabo isku mid ah.

• Gutters sidoo kale waa wax jawaaba oo la beddeli karo. Fasalada jeexjeexa ayaa laga heli karaa dhammaan meelaha jaban, oo leh dhammaan cabbirro isku mid ah sida kala dheereynta dhexdayada iyo suufka . Ku beddel maroojka toosan oo leh .gx-*fasallo, maroojisyo toosan leh .gy-*, ama dhammaan majaraha .g-*fasallada leh. .g-0sidoo kale waa la heli karaa si looga saaro majaraha.

• Doorsoomayaasha Sass, khariidado, iyo isku dhafka ayaa xoojiya shabkada. Haddii aadan rabin inaad isticmaasho fasalada grid-ka hore ee Bootstrap, waxaad isticmaali kartaa isha shabakada ee Sass si aad u abuurto mid adiga kuu gaar ah oo leh calaamado semantic ah. Waxa kale oo aanu ku darnaa qaar ka mid ah guryaha CSS si aan u isticmaalno doorsoomayaasha Sass si ay xataa kuugu dabacsanaato.

Ka digtoonow xaddidaadyada iyo dhiqlaha agagaarka flexbox , sida awood la'aanta in loo isticmaalo qaybo HTML ah weel dabacsan .

Ikhtiyaarada grid

Nidaamka grid ee Bootstrap wuxuu la qabsan karaa dhammaan lixda dhibcood ee jabinta, iyo dhibco kasta oo aad habayso. Lixda heerar grid default waa sida soo socota:

• Aad u yar (xs)
• Yar (sm)
• Dhexdhexaad (md)
• Weyn (lg)
• Aad u weyn (xl)
• Aad u weyn (xxl)

Sida kor ku xusan, mid kasta oo ka mid ah meelahan jaban waxay leeyihiin weel u gaar ah, horgalayaasha fasalka u gaar ah, iyo wax ka beddelayaasha. Waa kuwan sida shabkadadu isku beddesho meelahan goynta ah:

Tiirarka qaabaynta tooska ah

Ka faa'iidayso fasallada tiirarka gaarka ah ee jabsiga si aad u fududayso cabbirka tiirka iyada oo aan la haysan fasal cad oo lambaraysan sida .col-sm-6.

Balac siman

Tusaale ahaan, halkan waxaa ah laba qaabayn oo xajmiyeed ah oo khuseeya qalab kasta iyo daawashada, laga bilaabo xsilaa xxl. Ku dar tiro kasta oo fasallo ka yar halbeeg kasta oo aad u baahan tahay oo tiir kastaa wuxuu noqon doonaa ballac isku mid ah.

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

Dejinta hal balac oo tiir

Si toos ah u qaabaynta tiirarka flexbox waxay sidoo kale ka dhigan tahay inaad dejin karto ballaca hal tiir oo aad tiirarka walaalaha si toos ah u cabbiraan hareeraha. Waxaa laga yaabaa inaad isticmaasho fasallada jaranjarada ee horay loo sifeeyay (sida hoos ku cad), isku darka khadka, ama ballaadhka khadka. Ogsoonow in tiirarka kale ay cabbiri doonaan iyadoon loo eegin ballaca tiirka dhexe.

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

Waxyaalaha balac ee kala duwan

Isticmaal col-{breakpoint}-autofasalada si aad u cabbirto tiirarka ku salaysan ballaca dabiiciga ah ee ka kooban.

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

Fasallada jawaab celinta

Bootstrap's grid waxaa ku jira lix heerar oo fasallo horay loo sii qeexay si loo dhiso qaab-dhismeedyo adag oo ka jawaabaya. Ku beddel cabbirka tiirarkaaga aaladaha yaryar, yaryar, dhexdhexaadka ah, waaweyn ama dheeraadka ah si kasta oo aad u aragto inay ku habboon yihiin.

Dhammaan meelaha jaban

Shabaqyada isku midka ah ee qalabka ugu yar ilaa kan ugu weyn, isticmaal fasalada .coliyo .col-*fasalada. Sheeg fasal nambaraysan marka aad u baahan tahay tiir cabbir gaar ah; haddii kale, xor u noqo inaad ku dhegto .col.

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

Isku dulsaaran si siman

Adiga oo isticmaalaya hal .col-sm-*fasal oo keliya, waxa aad samayn kartaa hab-socod aasaasi ah oo ka bilaabma is dulfuulan oo noqda mid siman meesha yar ee jaban ( sm).

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

Isku qas oo dhig

Ma doonaysaa in tiirarkaagu ay si fudud isugu xidhaan qaar ka mid ah heerarka kala-xadhkaha? Isticmaal isku darka fasallo kala duwan heer kasta sida loogu baahdo. Fiiri tusaalaha hoose si aad fikrad wanaagsan u hesho sida ay dhammaan u shaqeeyaan.

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

Tiirar saf ah

Isticmaal .row-cols-*fasalada jawaab celinta leh si aad si dhakhso leh u dejiso tirada tiirarka sida ugu fiican u keena macluumaadkaaga iyo qaabkaaga. Halka .col-*fasallada caadiga ah lagu dabaqo tiirarka gaarka ah (tusaale, .col-md-4), fasallada safafka waxaa loo dejiyay waalidka .rowsi gaaban. Adigoo .row-cols-autoku siin kara tiirarka ballacooda dabiiciga ah.

Isticmaal fasalada safafkan si aad si dhakhso leh ugu abuurto jaantusyada shabaqyada aasaasiga ah ama si aad u maamusho khariidadaha kaadhkaaga.

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

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

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

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

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

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

Waxa kale oo aad isticmaali kartaa isku darka Sass ee la socda 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);
  }
}

Buul

Si aad macluumaadkaaga ugu dhejiso shabagga caadiga ah, ku dar tiirar cusub .rowiyo set oo ah .col-sm-*tiir jira .col-sm-*. Safka buulka leh waa in ay ku jiraan tiro tiirar ah oo isku geynaya 12 ama ka yar (looma baahna in aad isticmaasho dhammaan 12 tiir ee la heli karo).

<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

Markaad isticmaalayso Bootstrap's isha faylasha Sass, waxaad haysataa ikhtiyaarka isticmaalka doorsoomayaasha Sass iyo isku darka si aad u abuurto habayn, semantic, iyo bogag jawaab celin leh. Fasaladayada safafka hore loo sifay waxay isticmaalaan doorsoomayaashan isku midka ah iyo isku darka si ay u bixiyaan fasalo dhan oo diyaar u ah in la isticmaalo ee qaabaynta degdega ah.

Kala duwanaansho

Kala duwanaanshiyaha iyo khariidadaha ayaa go'aamiya tirada tiirarka, ballaca godka, iyo barta weydiimaha warbaahinta ee laga bilaabayo tiirarka sabbaynaya. Waxaan u isticmaalnaa kuwan si aan u soo saarno fasallada jaranjarada horay loo sii qeexay ee kor ku xusan, iyo sidoo kale isku darka caadiga ah ee hoos ku taxan.

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

Isku qas

Isku-darka waxa loo istcimaalaa iyada oo lala kaashanayo doorsoomayaasha xadhkaha goosha si loo soo saaro semantic CSS ee tiirarka shabaqyada gaarka ah.

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

Tusaale ahaan isticmaalka

Waxaad u beddeli kartaa doorsoomayaasha qiyamkaaga gaarka ah, ama waxaad isticmaali kartaa isku darka qiimahooda caadiga ah. Halkan waxaa ah tusaale isticmaalka goobaha caadiga ah si aad u abuurto qaabaynta laba-geesood oo farqiga u dhexeeya.

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

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

Habaynta shabkada

Adigoo adeegsanayna doorsoomayaashayada Sass ee ku dhex dhisan iyo khariidado, waxa suurtogal ah in si buuxda loo habeeyo fasalada jaangooyooyinka hore loo sii qeexay. Beddel tirada heerarka, cabbirrada weydiinta warbaahinta, iyo ballaca weelka-kadibna dib u soo uruuri.

Tiirarka iyo godadka

Tirada tiirarka xadhkaha waxaa lagu beddeli karaa doorsoomayaasha Sass. $grid-columnswaxaa loo isticmaalaa in lagu dhaliyo ballaadhka (boqolkiiba) ee tiir kasta iyadoo $grid-gutter-widthla dejinayo ballaca majaraha tiirarka. $grid-row-columnswaxaa loo isticmaalaa in lagu dejiyo tirada ugu badan ee tiirarka .row-cols-*, nambar kasta oo ka sarreeya xadkan waa la iska indhatiray.

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

Heerarka grid

Markaad ka gudubto tiirarka laftooda, waxaad sidoo kale habayn kartaa tirada heerarka kala-soocidda. Haddii aad rabto kaliya afar heerar koronto, waxaad cusboonaysiin lahayd $grid-breakpointsiyo $container-max-widthswax sidan oo kale ah:

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

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

Markaad wax isbeddel ah ku samaynayso doorsoomayaasha Sass ama maabka, waxaad u baahan doontaa inaad kaydiso isbeddelladaada oo aad dib u ururiso. Haddii sidaas la sameeyo waxay soo saari doontaa koox-cusub oo ah fasallo horudhac ah oo la sii qeexay oo loogu talagalay ballaadhka tiirka, ka-baxyada, iyo dalbashada. Utility muuqalka ka jawaabaya sidoo kale waa la cusboonaysiin doonaa si loo isticmaalo meelaha goynta caadada ah. Hubi inaad dejiso qiyamka khadka px(ma rem, em, ama %).