Grid system

Muenzaniso

Bootstrap's grid system inoshandisa nhevedzano yemidziyo, mitsetse, uye makoramu kurongedza uye kurongedza zvirimo. Yakavakwa neflexbox uye inopindura zvizere. Pazasi pane muenzaniso uye yakadzama tsananguro yekuti iyo grid system inosangana sei.

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

Muenzaniso uri pamusoro unogadzira makoramu matatu akaenzana-akaenzana pane ese maturusi uye ekuona zviteshi uchishandisa yedu yakafanotsanangurwa grid makirasi. Makoramu iwayo ari pakati pepeji nemubereki .container.

Zvinoshanda sei

Kuchityora, heino nzira iyo grid system inouya pamwe chete:

• Gridi yedu inotsigira matanhatu anopindura breakpoints . Breakpoints yakavakirwa pamibvunzo min-widthmidhiya, zvichireva kuti inobata iyo breakpoint uye zvese zviri pamusoro payo (semuenzaniso, .col-sm-4zvinoshanda kuna sm, md, lg, xl, uye xxl). Izvi zvinoreva kuti iwe unogona kudzora mudziyo uye column saizi uye maitiro nechero breakpoint.

• Containers pakati uye yakatwasuka padhiza zvirimo. Shandisa .containerhupamhi hwepixel inopindura, .container-fluidkune width: 100%ese maratidziro nemidziyo, kana mudziyo unopindura (semuenzaniso, .container-md) wemusanganiswa wemvura uye pixel upamhi.

• Mitsara inoputira pamakoramu. Koramu yega yega ine gorizontal padding(inonzi gutter) yekudzora nzvimbo iri pakati pawo. Izvi paddingzvinobva zvapikiswa pamitsara ine miganho isina kunaka kuti ive nechokwadi chekuti zviri mumakoramu ako zvinooneka zvakadzika nekuruboshwe. Mitsara inotsigirawo makirasi ekugadzirisa kuti ashandise zvakafanana column sizeng uye gutter makirasi kuti uchinje nzvimbo yezvako.

• Makoramu anochinjika zvinoshamisa. Kune gumi nemaviri template makoramu anowanikwa pamutsara, achikubvumidza iwe kugadzira akasiyana masanganiswa ezvinhu zvinotenderera chero nhamba yemakoramu. Column makirasi anoratidza huwandu hwematemplate makoramu kusvika kureba (semuenzaniso, col-4anotenderera mana). widths akaiswa muzvikamu saka unogara uine saizi yakafanana.

• Gutters zvakare inopindura uye inogoneka. Gutter makirasi anowanikwa pane ese mabreakpoints, aine ese saizi akafanana neyedu margin uye padding spacing . Chinja marata akachinjika ane .gx-*makirasi, magita akatwasuka ane .gy-*, kana ese magita ane .g-*makirasi. .g-0inowanikwawo kubvisa magata.

• Sass zvinosiyana, mepu, uye musanganiswa simba iyo grid. Kana iwe usingade kushandisa akatemerwa gidhi makirasi muBootstrap, unogona kushandisa yedu grid sosi Sass kugadzira yako neyakawanda semantic markup. Isu tinosanganisirawo zvimwe zveCSS tsika zvivakwa kuti utore aya maSass akasiyana kuti atonyanya kuchinjika kwauri.

Ziva zvipimo uye tsikidzi dzakatenderedza flexbox , sekutadza kushandisa zvimwe zvinhu zveHTML semidziyo inochinjika .

Grid options

Bootstrap's grid system inogona kuchinjika pane ese matanhatu default breakpoints, uye chero mabreakpoints aunogadzirisa. Iwo matanhatu default grid tiers ndeaya anotevera:

• Yakawedzera diki (xs)
• Diki (sm)
• Pakati (md)
• Huru (lg)
• Yakawedzera hombe (xl)
• Yakawedzera kukura (xxl)

Sezvataurwa pamusoro apa, imwe neimwe yeaya mabreakpoint ine mudziyo wayo, yakasarudzika kirasi prefix, uye modifiers. Heano machinjiro egridi pane aya mabreakpoints:

Auto-layout columns

Shandisa breakpoint-specific column makirasi kuitira nyore kuyera makoramu pasina kirasi ine nhamba dzakajeka senge .col-sm-6.

Kuenzana-upamhi

Semuenzaniso, heano maviri magidhi marongero anoshanda kune yega yega mudziyo uye yekutarisa, kubva xskusvika xxl. Wedzera chero nhamba yeyuniti-shoma makirasi ega ega breakpoint yaunoda uye yega column ichave yakafanana hupamhi.

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

Kuisa upamhi hwembiru imwe

Auto-layout yeflexbox grid columns zvakare zvinoreva kuti iwe unogona kuseta hupamhi hwekoramu imwe uye kuita kuti makoramu ehama adzore otomatiki akaitenderedza. Unogona kushandisa makirasi egidhi akatsanangurwa (sezvinoratidzwa pazasi), musanganiswa wegidhi, kana inline upamhi. Ziva kuti mamwe makoramu achaita saizi zvisinei nehupamhi hwepakati column.

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

Variable wide content

Shandisa col-{breakpoint}-automakirasi kuhukuru makoramu zvichienderana nehupamhi hwechisikigo chezviri mukati.

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

Makirasi anopindura

Giridhi yeBootstrap inosanganisira matanhatu matavi emakirasi akatemerwa ekuvaka akaomarara anopindura marongero. Gadzirisa saizi yemakoramu ako pane yakawedzera diki, diki, yepakati, hombe, kana yakawedzera hombe zvishandiso zvisinei iwe zvaunoona zvakakodzera.

All breakpoints

Kune magridi akafanana kubva kudiki yemidziyo kusvika kune yakakura, shandisa iyo .coluye .col-*makirasi. Rondedzera kirasi ine nhamba kana iwe uchida yakanyanya saizi column; kana zvisina kudaro, inzwa wakasununguka kunamatira .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>

Yakaturikidzana kune yakachinjika

Uchishandisa seti imwe .col-sm-*yemakirasi, unogona kugadzira yakakosha grid system iyo inotanga yakaturikidzana uye inova yakachinjika padiki breakpoint ( 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>

Sanganisa uye fananidza

Haudi kuti makoramu ako angomira mune mamwe grid tiers? Shandisa musanganiswa wemakirasi akasiyana kune imwe neimwe tier sezvinodiwa. Ona muenzaniso pazasi kuti uwane zano riri nani rekuti zvese zvinoshanda sei.

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

Row columns

Shandisa .row-cols-*makirasi anopindura kukurumidza kuseta huwandu hwemakoramu anonyatso kupa zvirimo zvako uye marongero. Nepo .col-*makirasi akajairwa anoshanda kumakoramu ega ega (semuenzaniso, .col-md-4), makirasi emitsara yemakoramu akaiswa pamubereki .rowsenzira yekudimbudzira. Nemi .row-cols-autoiwe unogona kupa makoramu hupamhi hwavo hwepanyama.

Shandisa aya mitsara makoramu makirasi kukurumidza kugadzira ekutanga grid marongero kana kudzora ako kadhi marongero.

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

Iwe unogona zvakare kushandisa inoperekedza Sass musanganiswa 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);
  }
}

Nesting

Kuti uise zvirimo zvako neiyo default grid, wedzera nyowani .rowuye seti .col-sm-*yemakoramu mukati meiyo iripo .col-sm-*column. Mitsara yakamira inofanira kusanganisira seti yemakoramu anowedzera kusvika gumi nemaviri kana mashoma (hazvidiwi kuti ushandise makoramu gumi nemaviri aripo).

<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

Paunenge uchishandisa Bootstrap's source Sass mafaera, iwe une sarudzo yekushandisa Sass zvinosiyana uye musanganiswa kugadzira tsika, semantic, uye inoteerera peji marongero. Yedu yakafanotsanangurwa makirasi egidhi anoshandisa aya akasiyana-siyana uye musanganiswa kuti ape yakazara sutu yeakagadzirira-kushandisa-makirasi ekukurumidza anopindura marongero.

Variables

Zvinosiyana-siyana uye mepu zvinotarisa huwandu hwemakoramu, hupamhi hweguta, uye nzvimbo yemibvunzo yenhau panotangira makoramu akayangarara. Isu tinoshandisa izvi kugadzira iyo yakafanotsanangurwa makirasi egidhi akanyorwa pamusoro, pamwe neyetsika musanganiswa akanyorwa pazasi.

$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

Mixins anoshandiswa pamwe chete negridhi zvinosiyana kugadzira semantic CSS yemakoramu ega ega.

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

Muenzaniso kushandiswa

Iwe unogona kushandura mavhezheni kune ako ega tsika tsika, kana kungo shandisa mamixins ane maitiro avo akasarudzika. Heino muenzaniso wekushandisa zvigadziriso zvekutanga kugadzira maviri-column marongero ane gap pakati.

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

Kugadzirisa grid

Uchishandisa yedu yakavakirwa-mukati gidhi Sass akasiyana uye mepu, zvinogoneka kugadzirisa zvizere makirasi egidhi akatsanangurwa. Shandura huwandu hwetiyeri, midhiya yemubvunzo zviyero, uye upamhi hwemudziyo - wobva wadzokorora.

Columns uye gutters

Huwandu hwemakoramu egridi anogona kugadziridzwa kuburikidza neSass zvinosiyana. $grid-columnsinoshandiswa kugadzira hupamhi (mumuzana) yekoramu yega yega ichiseta $grid-gutter-widthhupamhi hwemagita emakoramu. $grid-row-columnsrinoshandiswa kuseta huwandu hwemakoramu e .row-cols-*, chero nhamba inodarika iyi inogumira inofuratirwa.

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

Grid tiers

Kufamba kupfuura makoramu pachawo, iwe unogona zvakare kugadzirisa huwandu hwegridi tiers. Kana iwe waida magidhi mana chete, waizovandudza $grid-breakpointsuye $container-max-widthskune chimwe chinhu chakadai:

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

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

Paunenge uchiita chero shanduko kune maSass akasiyana kana mepu, iwe unozofanirwa kuchengetedza shanduko dzako uye kudzorera. Kuita izvi kunoburitsa mhando-nyowani seti yemakirasi akatemerwa egidhi ehupamhi hwekoramu, zvigadziriso, uye kurongeka. Inoteerera inoonekwa zvinoshandiswa zvakare ichagadziridzwa kuti ishandise tsika yekutyora. Ita shuwa yekuseta grid values ​​mukati px(kwete rem, em, kana %).