Tsarin Grid

Misali

Tsarin grid na Bootstrap yana amfani da jerin kwantena, layuka, da ginshiƙai don tsarawa da daidaita abun ciki. An gina shi da flexbox kuma yana da cikakkiyar amsa. Da ke ƙasa akwai misali da bayani mai zurfi game da yadda tsarin grid ya zo tare.

<div class="container">
  <div class="row">
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
  </div>
</div>

Misalin da ke sama yana ƙirƙira ginshiƙai daidai-da-ƙasa guda uku a duk na'urori da wuraren kallo ta amfani da ƙayyadaddun azuzuwan grid ɗin mu. Waɗannan ginshiƙan suna tsakiya ne a cikin shafi tare da iyaye .container.

Yadda yake aiki

Tsayar da shi, ga yadda tsarin grid ya zo tare:

• Grid ɗin mu yana goyan bayan maki shida masu amsawa . Breakpoints sun dogara ne akan min-widthtambayoyin kafofin watsa labarai, ma'ana suna shafar wancan wurin karya da duk waɗanda ke sama (misali, .col-sm-4ya shafi sm, md, lg, xl, da xxl). Wannan yana nufin zaku iya sarrafa ganga da girman ginshiƙi da ɗabi'a ta kowane wurin karya.

• Akwatunan tsakiya kuma a kwance abubuwan da kuke ciki. Yi amfani .containerdon faɗin pixel mai amsawa, .container-fluiddon width: 100%duk wuraren kallo da na'urori, ko akwati mai amsawa (misali, .container-md) don haɗin ruwa da faɗin pixel.

• Layuka sune nade-nade don ginshiƙai. Kowane ginshiƙi yana da a kwance padding(wanda ake kira gutter) don sarrafa sarari tsakanin su. Ana paddingfuskantar wannan a kan layuka tare da ragi mara kyau don tabbatar da abubuwan da ke cikin ginshiƙan ku sun daidaita a gani na gefen hagu. Layuka kuma suna goyan bayan azuzuwan masu gyara don yin amfani da azuzuwan girman shafi iri-iri da azuzuwan gutter don canza tazarar abun cikin ku.

• ginshiƙai suna da sauƙin sassauƙa. Akwai ginshiƙan samfuri guda 12 da ake samu a kowane jere, yana ba ku damar ƙirƙirar haɗin abubuwa daban-daban waɗanda ke kan kowane adadin ginshiƙai. Azuzuwan ginshiƙi suna nuna adadin ginshiƙan samfuri zuwa faɗin (misali, col-4takaitattun wurare huɗu). widths an saita su cikin kashi dari don haka koyaushe kuna da girman dangi iri ɗaya.

• Gutters kuma suna da amsa kuma ana iya daidaita su. Ana samun azuzuwan gutter a duk faɗin wuraren karya, tare da duk girmansu iri ɗaya da tazarar tamu . Canja magudanar ruwa a kwance tare da .gx-*azuzuwan, magudanan ruwa na tsaye tare da .gy-*, ko duk magudanan ruwa masu .g-*azuzuwa. .g-0Hakanan yana samuwa don cire magudanar ruwa.

• Sass masu canji, taswirori, da masu haɗawa suna ba da grid. Idan ba kwa son amfani da azuzuwan grid da aka riga aka ayyana a cikin Bootstrap, zaku iya amfani da tushen grid ɗin mu Sass don ƙirƙirar naku tare da ƙarin alamar tamani. Mun kuma haɗa da wasu kaddarorin al'ada na CSS don cinye waɗannan masu canji na Sass don ma mafi girman sassauci a gare ku.

Yi hankali da iyakoki da kwari a kusa da flexbox , kamar rashin iya amfani da wasu abubuwan HTML azaman kwantena masu sassauƙa .

Zaɓuɓɓukan Grid

Tsarin grid na Bootstrap na iya daidaitawa a cikin duk tsoffin wuraren hutu guda shida, da kowane wuraren hutu da kuka keɓancewa. Matsalolin grid na tsoho guda shida sune kamar haka:

• Karami (xs)
• Karami (sm)
• Matsakaici (md)
• Babba (lg)
• Babban (xl)
• Karin girma (xxl)

Kamar yadda aka ambata a sama, kowane ɗayan waɗannan wuraren karya suna da nasu akwati, prefix na musamman, da masu gyarawa. Anan ga yadda grid ɗin ke canzawa a cikin waɗannan wuraren hutu:

ginshiƙan shimfidawa ta atomatik

Yi amfani da takamaiman azuzuwan ginshiƙa don sauƙin girman shafi ba tare da fayyace aji mai ƙididdiga kamar .col-sm-6.

Daidai-nisa

Misali, anan akwai shimfidar grid guda biyu waɗanda suka shafi kowace na'ura da tashar kallo, daga xszuwa xxl. Ƙara kowane adadin azuzuwan marasa raka'a ga kowane wurin hutu da kuke buƙata kuma kowane shafi zai zama faɗi ɗaya.

<div class="container">
  <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>

Saita faɗin shafi ɗaya

Tsaya ta atomatik don ginshiƙan grid na flexbox shima yana nufin zaku iya saita faɗin shafi ɗaya kuma ku sa ginshiƙan ƴan uwan ​​su yi girma ta atomatik kewaye da shi. Kuna iya amfani da azuzuwan grid da aka riga aka ƙayyade (kamar yadda aka nuna a ƙasa), grid mixins, ko faɗin layi. Lura cewa sauran ginshiƙan za su sake girma komai faɗin ginshiƙin tsakiya.

<div class="container">
  <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>

Canjin abun ciki mai faɗi

Yi amfani col-{breakpoint}-autoda azuzuwan don girman ginshiƙai dangane da faɗin yanayin abun ciki.

<div class="container">
  <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>

Azuzuwan amsa

Grid na Bootstrap ya ƙunshi matakai shida na azuzuwan ƙayyadaddun ƙayyadaddun ƙayyadaddun abubuwa don gina hadaddun shimfidu masu amsawa. Keɓance girman ginshiƙan ku akan ƙarin ƙanana, ƙanana, matsakaici, manya, ko ƙarin manyan na'urori duk da haka kun ga sun dace.

Duk wuraren karyawa

Don grids iri ɗaya daga ƙananan na'urori zuwa manya, yi amfani .colda .col-*darussa. Ƙayyade aji mai ƙididdiga lokacin da kuke buƙatar ginshiƙi mai girma na musamman; in ba haka ba, jin kyauta don tsayawa .col.

<div class="container">
  <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>

Tari zuwa kwance

Yin amfani da saitin .col-sm-*azuzuwan guda ɗaya, zaku iya ƙirƙirar tsarin grid na asali wanda ke farawa a tsaye kuma ya zama a kwance a ƙaramin madaidaicin wurin ( sm).

<div class="container">
  <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 da daidaita

Ba sa son ginshiƙan ku su taru cikin wasu matakan grid? Yi amfani da haɗin azuzuwan daban-daban don kowane matakin kamar yadda ake buƙata. Dubi misalin da ke ƙasa don kyakkyawan ra'ayi na yadda duk yake aiki.

<div class="container">
  <!-- 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>

ginshiƙan layi

Yi amfani da .row-cols-*azuzuwan amsa don saita adadin ginshiƙan da suka fi dacewa da abun ciki da shimfidar wuri. Ganin cewa .col-*azuzuwan al'ada sun shafi ginshiƙai ɗaya (misali, .col-md-4), ana saita azuzuwan ginshiƙan layi akan iyaye .rowazaman gajeriyar hanya. Tare da .row-cols-autoza ku iya ba da ginshiƙan faɗin yanayin su.

Yi amfani da waɗannan azuzuwan ginshiƙai don ƙirƙirar shimfidu na grid da sauri ko don sarrafa shimfiɗan katin ku.

<div class="container">
  <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">
  <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">
  <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">
  <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">
  <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">
  <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>

Hakanan zaka iya amfani da rakiyar Sass mixin, 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);
  }
}

Gurasa

Don shigar da abun cikin ku tare da tsoho grid, ƙara sabon .rowda saitin .col-sm-*ginshiƙai a cikin .col-sm-*ginshiƙi da ke akwai. Layukan da aka kafa yakamata su haɗa da saitin ginshiƙai waɗanda suka haɗa har zuwa 12 ko ƙasa da haka (ba a buƙatar ku yi amfani da duk ginshiƙai 12 da ake da su ba).

<div class="container">
  <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

Lokacin amfani da fayilolin Sass tushen Bootstrap, kuna da zaɓi na amfani da masu canji na Sass da haɗe-haɗe don ƙirƙirar shimfidar shafi na al'ada, ma'ana, da amsawa. Ƙididdigar azuzuwan grid ɗinmu na amfani da waɗannan masu canji iri ɗaya da masu gauraya don samar da gabaɗayan azuzuwan shirye-shiryen amfani don shimfidu masu saurin amsawa.

Masu canji

Maɓalli da taswirori suna ƙayyade adadin ginshiƙai, faɗin gutter, da wurin tambayar kafofin watsa labarai inda za a fara ginshiƙai masu iyo. Muna amfani da waɗannan don samar da azuzuwan grid da aka riga aka rubuta a sama, da kuma ga mahaɗin al'ada da aka jera a ƙasa.

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

$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

Ana amfani da Mixins tare da masu canjin grid don samar da CSS na ma'ana don ginshiƙan grid ɗaya ɗaya.

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

Misali amfani

Kuna iya canza masu canji zuwa dabi'un al'ada na ku, ko kawai amfani da mixins tare da tsoffin ƙimar su. Anan ga misalin amfani da saitunan tsoho don ƙirƙirar shimfidar ginshiƙi biyu tare da tazara tsakanin.

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

Keɓance grid

Amfani da ginanniyar grid ɗin mu na Sass masu canji da taswira, yana yiwuwa a keɓance azuzuwan grid gaba ɗaya. Canja adadin tiers, girman tambayar kafofin watsa labarai, da faɗin akwati-sannan a sake tarawa.

ginshiƙai da gutters

Ana iya canza adadin ginshiƙan grid ta hanyar masu canjin Sass. $grid-columnsana amfani da shi don samar da nisa (a cikin kashi) na kowane ginshiƙi yayin da yake $grid-gutter-widthsaita faɗin magudanar ruwa.

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

Grid matakin

Matsar da ginshiƙan da kansu, kuna iya tsara adadin matakan grid. Idan kuna son matakan grid guda huɗu kawai, zaku sabunta $grid-breakpointskuma $container-max-widthszuwa wani abu kamar haka:

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

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

Lokacin yin kowane canje-canje ga masu canjin Sass ko taswira, kuna buƙatar adana canje-canjenku kuma ku sake tarawa. Yin hakan zai fitar da sabon saiti na azuzuwan grid da aka riga aka ƙayyade don faɗin shafi, daidaitawa, da oda. Hakanan za'a sabunta kayan aikin gani mai amsawa don amfani da wuraren karya na al'ada. Tabbatar da saita ƙimar grid a px(ba rem, em, ko %).