Endlelo ra gridi

Xikombiso

Sisiteme ya gridi ya Bootstrap yi tirhisa nxaxamelo wa swikhomela-ndhawu, tilayini, na tikholomu ku layout na ku ringanisa swilo leswi nga endzeni. Yi akiwile hi flexbox naswona yi hlamula hi ku helela. Laha hansi ku na xikombiso na nhlamuselo yo enta ya ndlela leyi sisiteme ya gridi yi hlanganaka ha yona.

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

Xikombiso lexi nga laha henhla xi tumbuluxa tikholomu tinharhu ta ku anama loku ringanaka eka switirhisiwa hinkwaswo na swivono hi ku tirhisa titlilasi ta hina ta giridi leti hlamuseriweke ka ha ri emahlweni. Tikholomu teto ti le xikarhi ka tluka leri nga ni mutswari .container.

Ndlela leyi swi tirhaka ha yona

Loko hi yi tshovela, hi leyi ndlela leyi sisiteme ya gridi yi hlanganaka ha yona:

• Gridi ya hina yi seketela tindhawu ta tsevu to tshoveka leti hlamulaka . Ti breakpoints ti sekeriwe eka min-widthswivutiso swa vuhangalasi bya mahungu, leswi vulaka leswaku ti khumba breakpoint yoleyo na hinkwaswo leswi nga ehenhla ka yona (xikombiso, .col-sm-4swi tirha eka sm, md, lg, xl, na xxl). Leswi swivula leswaku unga lawula vukulu bya xikhomela na kholomo na mahanyelo hi breakpoint yin’wana na yin’wana.

• Swikhomela-ndhawu swi le xikarhi ni hi ndlela yo rhendzeleka swi pad leswi nga endzeni ka wena. Tirhisa .containereka ku anama ka pixel leyi hlamulaka, .container-fluideka ku width: 100%tsemakanya swivono hinkwaswo na switirhisiwa, kumbe xigwitsirisi lexi hlamulaka (xikombiso, .container-md) eka nhlanganelo wa ku anama ka xihalaki na tipikseli.

• Tilayini i swifunengeto swa tikholomu. Kholomo yin’wana na yin’wana yina horizontal padding(leyi vuriwaka gutter) kuva yi lawula ndzhawu leyi nga exikarhi ka yona. Leswi paddingswi tlhela swi kanetiwa eka tilayini leti nga na margin yo biha ku tiyisisa leswaku leswi nga eka tikholomu ta wena swi ringanisiwa hi ndlela leyi vonakaka ehansi hi tlhelo ra ximatsi. Tilayini ti tlhela ti seketela titlilasi ta vacinci ku tirhisa hi ndlela leyi fanaka ku pima ka kholomo na titlilasi ta gutter ku cinca ku hambana ka nhundzu ya wena.

• Tikholomu ti cinca-cinca hi ndlela leyi hlamarisaka. Ku na 12 wa tikholomu ta xifaniso leti kumekaka hi layini, leswi ku pfumelelaka ku tumbuluxa ku hlanganisiwa ko hambana ka swiaki leswi hlanganisaka nhlayo yihi na yihi ya tikholomu. Titlilasi ta tikholomu ti kombisa nhlayo ya tikholomu ta xifaniso leti faneleke ku span (xikombiso, col-4ti span ta mune). widths yi vekiwile hi tiphesente leswaku u tshama u ri na relative sizing leyi fanaka.

• Ti gutters na tona ta hlamula naswona ti nga cinciwa hi ku landza swilaveko swa wena. Titlilasi ta gutter ti kumeka eka tindhawu hinkwato to wisela eka tona, leti nga ni vukulu hinkwabyo lebyi fanaka ni bya margin ya hina ni ku hambana ka ti- padding . Cinca ti- gutter leti nga etlhelo leti nga ni .gx-*titlilasi, ti- gutter leti yimisiweke hi .gy-*, kumbe ti- gutter hinkwato leti nga ni .g-*titlilasi. .g-0yitlhela yi kumeka ku susa ti gutters.

• Swilo leswi cinca-cincaka swa Sass, mimepe, na mixins swi nyika matimba eka giridi. Loko u nga lavi ku tirhisa titlilasi ta gridi leti hlamuseriweke ka ha ri emahlweni eka Bootstrap, u nga tirhisa xihlovo xa gridi ya hina Sass ku tumbuluxa ya wena hi ku fungha ka semantiki swinene. Hi tlhela hi katsa swin’wana swa swihlawulekisi swa ntolovelo swa CSS ku dya swilo leswi swa Sass leswi cinca-cincaka ku kuma ku cinca-cinca lokukulu swinene eka wena.

Tiva swipimelo na swihoxo leswi rhendzeleke flexbox , ku fana na ku tsandzeka ku tirhisa swiaki swin'wana swa HTML tanihi swikhomela-ndhawu swa flex .

Swihlawulekisi swa gridi

Sisiteme ya gridi ya Bootstrap yi nga pfumelelana na swiyimo hinkwaswo swa tsevu swa ntolovelo, na tindhawu tihi na tihi to wisa leti u ti endlaka hi ku landza swilaveko swa wena. Swiyenge swa tsevu swa gridi swa ntolovelo hi leswi landzelaka:

• Switsongo swinene (xs) .
• Switsongo (sm) .
• Xikarhi (md) .
• Lexikulu (lg) .
• Swikulu leswi engetelekeke (xl) .
• Ku engetela lokukulu loku engetelekeke (xxl) .

Hilaha swi kombisiweke hakona laha henhla, yin’wana ni yin’wana ya tindhawu leti to tshoveka yi ni xikhomela-ndhawu xa yona, xirhangi xa tlilasi yo hlawuleka ni swihundzuluxi. Hi leyi ndlela leyi gridi yi cincaka ha yona ku tsemakanya tindhawu leti to tshoveka:

Tikholomu ta auto-layout

Tirhisa titlilasi ta tikholomu leti kongomeke ta breakpoint ku olovisa ku pima mpimo wa kholomo handle ka tlilasi leyi nga na tinomboro leti nga erivaleni ku fana na .col-sm-6.

Ku anama loku ringanaka

Xikombiso, hi leswi swivumbeko swimbirhi swa giridi leswi tirhaka eka xitirhisiwa xin’wana ni xin’wana ni ndhawu yo languta, ku sukela eka xsku ya eka xxl. Engetela nhlayo yihi na yihi ya titlilasi leti nga riki na yuniti eka breakpoint yin’wana na yin’wana leyi u yi lavaka naswona kholomo yin’wana na yin’wana yi ta va na ku anama loku fanaka.

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

Ku veka ku anama ka kholomo yin’we

Auto-layout ya tikholomu ta gridi ya flexbox yi tlhela yi vula leswaku u nga veka ku anama ka kholomo yin’we naswona u endla leswaku tikholomu ta vamakwavo ti cinca mpimo hi ku tisungulela ku yi rhendzela. U nga tirhisa titlilasi ta gridi leti hlamuseriweke ka ha ri emahlweni (hilaha swi kombisiweke hakona laha hansi), ti-mixin ta gridi, kumbe ku anama ka le ndzeni ka layini. Xiya leswaku tikholomu tin’wana ti ta cinca sayizi ku nga khathariseki ku anama ka kholomo ya le xikarhi.

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

Nhundzu ya ku anama loku cinca-cincaka

Tirhisa col-{breakpoint}-autotitlilasi ku pima tikholomu hi ku ya hi ku anama ka ntumbuluko ka leswi nga endzeni ka tona.

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

Titlilasi leti hlamulaka

Gridi ya Bootstrap yi katsa swiyenge swa tsevu swa titlilasi leti hlamuseriweke ka ha ri emahlweni to aka swivumbeko leswi rharhanganeke leswi hlamulaka. Endla vukulu bya tikholomu ta wena eka switirhisiwa leswitsongo swinene, leswitsongo, swa le xikarhi, leswikulu, kumbe leswikulu swinene hambi swi ri tano u vona swi fanerile.

Hinkwaswo swilo swo tshoveka

Eka tigridi leti fanaka ku suka eka switirhisiwa leswitsongo ku ya eka leswikulu, tirhisa titlilasi ta .colna . .col-*Boxa tlilasi leyi nga ni tinomboro loko u lava kholomo leyi nga ni mpimo wo karhi; handle ka sweswo, titwe u ntshunxekile ku namarhela .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>

Ku hlanganisiwa ku ya eka horizontal

Hi ku tirhisa sete yin’we ya .col-sm-*titlilasi, u nga endla sisiteme ya giridi ya xisekelo leyi sungulaka yi hlanganisiwile ivi yi va leyi nga etlhelo eka ndhawu leyitsongo yo tsema ( 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>

Hlanganisa na ku hlanganisa

A wu lavi leswaku tikholomu ta wena ti hlangana ntsena eka ti-tier tin’wana ta gridi? Tirhisa nhlanganelo wa titlilasi to hambana eka xiyimo xin’wana na xin’wana tanihilaha swi lavekaka hakona. Vona xikombiso lexi nga laha hansi ku kuma mianakanyo yo antswa ya ndlela leyi hinkwaswo swi tirhaka ha yona.

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

Tikholomu ta layini

Tirhisa .row-cols-*titlilasi leti hlamulaka ku hatlisa u veka nhlayo ya tikholomu leti humesaka kahle nhundzu ya wena na layout. Loko titlilasi ta ntolovelo .col-*ti tirha eka tikholomu ha yin’we (xikombiso, .col-md-4), titlilasi ta tikholomu ta tilayini ti vekiwa eka mutswari .rowtanihi xihlawulekisi xa tikholomu leti nga na swona. Hi .row-cols-autowena u nga nyika tikholomu ku anama ka tona ka ntumbuluko.

Tirhisa titlilasi leti ta tikholomu ta tilayini ku hatlisa u tumbuluxa swivumbeko swa masungulo swa giridi kumbe ku lawula swivumbeko swa khadi ra wena na ku tlula loko swi laveka eka xiyimo xa tikholomu.

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

<div class="container">
  <div class="row row-cols-2 row-cols-lg-3">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col-4 col-lg-2">Column</div>
    <div class="col-4 col-lg-2">Column</div>
    <div class="col-4 col-lg-2">Column</div>
    <div class="col-4 col-lg-2">Column</div>
    <div class="col-4 col-lg-2">Column</div>
    <div class="col-4 col-lg-2">Column</div>
  </div>
</div>

U nga ha tlhela u tirhisa mixin ya Sass leyi fambisanaka na yona, 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);
  }
}

Ku endla swisaka

Ku hlanganisa nhundzu ya wena hi gridi ya ntolovelo, engetela leyintshwa .rowna sete ya .col-sm-*tikholomu endzeni ka .col-sm-*kholomo leyi nga kona. Tilayini leti pfaleriweke ti fanele ku katsa sete ya tikholomu leti hlanganisaka ku fika eka 12 kumbe ehansi (a swi bohi leswaku u tirhisa tikholomu hinkwato ta 12 leti kumekaka).

<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

Loko u tirhisa tifayela ta Sass ta xihlovo xa Bootstrap, u na nhlawulo wo tirhisa swilo leswi cinca-cincaka swa Sass na mixins ku tumbuluxa swivumbeko swa matluka swa ntolovelo, swa semantiki, na leswi hlamulaka. Titlilasi ta hina ta gridi leti hlamuseriweke ka ha ri emahlweni ti tirhisa swilo leswi fanaka leswi cinca-cincaka na ti-mixin ku nyika nxaxamelo hinkwawo wa titlilasi leti lunghekeleke ku tirhisiwa eka swivumbeko leswi hlamulaka hi ku hatlisa.

Swilo leswi cinca-cincaka

Swilo leswi cinca-cincaka ni mimepe swi kombisa nhlayo ya tikholomu, ku anama ka gutter ni ndhawu leyi ku vutisiwaka eka yona hi swihaxa-mahungu leyi ku nga ta sungula tikholomu leti papamalaka eka yona. Hi tirhisa leswi ku tumbuluxa titlilasi ta gridi leti hlamuseriweke ka ha ri emahlweni leti tsariweke laha henhla, xikan’we na ti mixins ta ntolovelo leti xaxametiweke laha hansi.

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

Ti- mixins

Mixins yi tirhisiwa swin’we na swilo leswi cinca-cincaka swa gridi ku tumbuluxa CSS ya semantiki ya tikholomu ta gridi yin’wana na yin’wana.

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

// Get fancy by offsetting, or changing the sort order
@include make-col-offset($size, $columns: $grid-columns);

Xikombiso xa matirhiselo

U nga cinca swilo leswi cinca-cincaka eka mimpimo ya wena ya ntolovelo, kumbe u tirhisa ntsena ti-mixin hi mimpimo ya tona ya ntolovelo. Hi lexi xikombiso xa ku tirhisa swiletelo swa ntolovelo ku endla xivumbeko xa tikholomu timbirhi lexi nga ni xivandla exikarhi.

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

Ku endla leswaku gridi yi va leyi u yi lavaka

Hi ku tirhisa swilo swa hina swa Sass swa gridi leswi akiweke endzeni na mimepe, swa koteka ku lulamisa hi ku helela titlilasi ta gridi leti hlamuseriweke ka ha ri emahlweni. Cinca nhlayo ya ti-tier, tidimenxini ta xivutiso xa midiya, ni ku anama ka xikhomela—kutani u tlhela u hlengeleta.

Tikholomu na swidziva

Nhlayo ya tikholomu ta gridi yi nga cinciwa hi ku tirhisa swilo leswi cinca-cincaka swa Sass. $grid-columnsyi tirhisiwa ku humesa ku anama (hi tiphesente) ta kholomo yin’wana na yin’wana loko yi ri karhi $grid-gutter-widthyi veka ku anama ka ti gutters ta kholomo.

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

Swiyenge swa gridi

Ku hundza eka tikholomu hi toxe, u nga ha tlhela u cinca nhlayo ya swiphemu swa giridi. Loko u lava ntsena mune wa ti-grid tiers, u ta pfuxeta $grid-breakpointsand $container-max-widthseka nchumu wo fana na lowu:

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

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

Loko u endla ku cinca kwihi na kwihi eka swilo leswi cinca-cincaka swa Sass kumbe mimepe, u ta lava ku hlayisa ku cinca ka wena ni ku hlengeleta nakambe. Ku endla tano swi ta humesa sete leyintshwa ya titlilasi ta gridi leti hlamuseriweke ka ha ri emahlweni ta ku anama ka tikholomu, ti-offset, na ku oda. Switirhisiwa swa ku vonakala leswi hlamulaka na swona swi ta pfuxetiwa ku tirhisa tindhawu to wisa ta ntolovelo. Tiyisisa leswaku u veka mimpimo ya gridi eka px(hayi rem, em, kumbe %).