Grid system

Chitsanzo

Dongosolo la grid ya Bootstrap limagwiritsa ntchito zotengera zingapo, mizere, ndi mizati kuti isanjidwe ndikugwirizanitsa zomwe zili. Zimapangidwa ndi flexbox ndipo imayankha kwathunthu. Pansipa pali chitsanzo komanso kufotokozera mozama momwe gululi limayendera limodzi.

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

Chitsanzo chapamwambachi chimapanga mizati itatu yofanana m'lifupi pazida zonse ndi malo owonera pogwiritsa ntchito makalasi athu omwe tawafotokozeratu. Mizati imeneyo ili pakati pa tsamba ndi kholo .container.

Momwe zimagwirira ntchito

Kuthetsa, nayi momwe dongosolo la gridi limagwirira ntchito:

• Gridi yathu imathandizira magawo asanu ndi limodzi omvera . Ma breakpoints amatengera min-widthmafunso azama TV, kutanthauza kuti amakhudza kusweka kwawo ndi onse omwe ali pamwamba pake (mwachitsanzo, .col-sm-4akukhudza sm, md, lg, xl, ndi xxl). Izi zikutanthauza kuti mutha kuwongolera chidebe ndi kukula kwa magawo ndi machitidwe podutsa gawo lililonse.

• Containers pakati ndikuwongolera zomwe zili mkati mwanu. Gwiritsani .containerntchito makulidwe a pixel omvera, pamawonekedwe ndi .container-fluidzida width: 100%zonse, kapena chidebe chomvera (mwachitsanzo, .container-md) kuphatikiza kuchuluka kwa madzi ndi pixel.

• Mizere ndi zokutira pamizere. Chigawo chilichonse chili ndi chopingasa padding(chotchedwa gutter) chowongolera danga pakati pawo. Izi paddingzimatsukidwa m'mizere yokhala ndi m'mphepete molakwika kuwonetsetsa kuti zomwe zili m'magawo anu zikugwirizana kumanzere. Mizere imathandizanso makalasi osinthira kuti agwiritse ntchito mofananamo masanjidwe a magawo ndi makalasi a gutter kuti musinthe masinthidwe azomwe muli.

• Mizati ndi yosinthika modabwitsa. Pali mizati 12 ya ma template yomwe ilipo pamzere uliwonse, kukulolani kuti mupange mitundu yosiyanasiyana ya zinthu zomwe zimakhala ndi mizere ingapo iliyonse. Makalasi amizere amawonetsa kuchuluka kwa magawo azithunzi kuti atalike (mwachitsanzo, col-4magawo anayi). widths amayikidwa mu magawo kotero kuti nthawi zonse mumakhala ndi kukula kofanana.

• Ma gutters nawonso amayankha komanso makonda. Makalasi a Gutter amapezeka podutsa malo onse opumira, ndi makulidwe onse ofanana ndi maginito athu ndi masitayilo a padding . Sinthani mitsuko yopingasa ndi .gx-*makalasi, mitsuko yoyima yokhala ndi .gy-*, kapena magutter onse okhala ndi .g-*makalasi. .g-0liliponso kuti muchotse ngalande.

• Zosintha za Sass, mamapu, ndi zosakaniza zimalimbitsa gululi. Ngati simukufuna kugwiritsa ntchito makalasi omwe afotokozedwa kale mu Bootstrap, mutha kugwiritsa ntchito gwero la gridi yathu Sass kuti mupange zanu zokhala ndi mawu ochulukirapo. Timaphatikizanso zinthu zina za CSS kuti tigwiritse ntchito mitundu ya Sass iyi kuti muzitha kusinthasintha kwambiri.

Dziwani zoperewera ndi nsikidzi kuzungulira flexbox , monga kulephera kugwiritsa ntchito zinthu zina za HTML ngati zotengera zosinthika. .

Zosankha zamagulu

Makina a gridi ya Bootstrap amatha kusintha magawo onse asanu ndi limodzi osakhazikika, ndi zopumira zilizonse zomwe mumakonda. Magawo asanu ndi limodzi osakhazikika a gridi ndi awa:

• Zochepa kwambiri (xs)
• Wamng'ono (sm)
• Wapakati (md)
• Chachikulu (lg)
• Chachikulu kwambiri (xl)
• Zowonjezera zazikulu (xxl)

Monga tafotokozera pamwambapa, chilichonse mwamagawowa chimakhala ndi chidebe chake, choyambirira chamagulu apadera, ndi zosintha. Umu ndi momwe ma gridi amasinthira pama breakpoint awa:

Zopanga zokha mizati

Gwiritsani ntchito makalasi a magawo enieni a magawo kuti musinthe magawo mosavuta popanda kalasi yodziwika bwino ngati .col-sm-6.

Kufanana m'lifupi

Mwachitsanzo, apa pali mitundu iwiri ya gridi yomwe imagwira ntchito pa chipangizo chilichonse ndi malo owonera, kuyambira xsmpaka xxl. Onjezani kuchuluka kwa makalasi opanda ma unit pagawo lililonse lomwe mungafune ndipo gawo lililonse likhala lofanana m'lifupi.

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

Kukhazikitsa m'lifupi ndime imodzi

Kukonzekera kwa Auto kwa mizati ya grid flexbox kumatanthauzanso kuti mutha kuyika m'lifupi mwagawo limodzi ndikukhala ndi magawo am'bale mozungulira mozungulira. Mutha kugwiritsa ntchito makalasi ofotokozedweratu (monga momwe tawonetsera pansipa), zosakaniza za gridi, kapena makulidwe amzere. Dziwani kuti mizati ina idzakula mosasamala kanthu za kukula kwa ndime yapakati.

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

Zosintha m'lifupi mwake

Gwiritsani ntchito col-{breakpoint}-automakalasi kuti agwirizane ndi kukula kwake kwazomwe zili.

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

Makalasi omvera

Gululi la Bootstrap limaphatikizapo magawo asanu ndi limodzi a makalasi ofotokozedweratu kuti apange masanjidwe ovuta kuyankha. Sinthani kukula kwa mizati yanu pazida zing'onozing'ono, zazing'ono, zapakatikati, zazikulu, kapena zazikulu monga momwe mungafunire.

Ma breakpoints onse

Kwa ma gridi omwe ali ofanana kuyambira pazida zazing'ono kwambiri mpaka zazikulu, gwiritsani ntchito .colndi .col-*makalasi. Tchulani kalasi yowerengeka pamene mukufuna gawo lalikulu; apo ayi, khalani omasuka kumamatira .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>

Zaunikidwa mpaka yopingasa

Pogwiritsa ntchito gulu limodzi la .col-sm-*makalasi, mutha kupanga makina oyambira a gridi omwe amayambira atakusanjidwa ndikukhala opingasa pagawo laling'ono ( 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>

Sakanizani ndikugwirizanitsa

Kodi simukufuna kuti zipilala zanu zizingounjika m'magulu ena a gridi? Gwiritsani ntchito makalasi osiyanasiyana pagawo lililonse ngati pakufunika. Onani chitsanzo pansipa kuti mudziwe bwino momwe zonsezi zimagwirira ntchito.

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

Mizere mizere

Gwiritsani ntchito .row-cols-*makalasi omvera kuti mukhazikitse mwachangu kuchuluka kwa magawo omwe amakupangitsani bwino zomwe zili ndi masanjidwe anu. Pamene .col-*makalasi anthawi zonse amagwira ntchito pamigawo iliyonse (mwachitsanzo, .col-md-4), makalasi amizere amayikidwa pa kholo .rowngati kusakhazikika pamagawo omwe ali. Ndi .row-cols-autoinu mukhoza kupereka mizati m'lifupi mwachibadwa.

Gwiritsani ntchito makalasi amizeremizerewa kuti mupange mwachangu masanjidwe amtundu wa gridi kapena kuwongolera masanjidwe a makadi anu ndikuwongolera pakafunika pagawo.

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

Mukhozanso kugwiritsa ntchito 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);
  }
}

Nesting

Kuti mutsegule zomwe zili ndi gridi yokhazikika, onjezani magawo atsopano .rowndi magulu omwe ali .col-sm-*mgulu lomwe lilipo .col-sm-*. Mizere yokhazikitsidwa iyenera kukhala ndi magawo 12 kapena kucheperapo (sikufunika kuti mugwiritse ntchito magawo 12 onse omwe alipo).

<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

Mukamagwiritsa ntchito mafayilo a Sass a Bootstrap, muli ndi mwayi wogwiritsa ntchito zosinthika za Sass ndi zosakaniza kuti mupange masanjidwe amasamba, a semantic, ndi omvera. Makalasi athu omwe tawafotokozeratu amagwiritsa ntchito zosinthika zomwezi ndi zosakaniza kuti apereke gulu lonse la makalasi okonzeka kugwiritsa ntchito masanjidwe omvera mwachangu.

Zosintha

Zosintha ndi mamapu zimatsimikizira kuchuluka kwa mizati, m'lifupi mwa ngalande, ndi malo ochezera a pawailesi pomwe amayambira mizati yoyandama. Timagwiritsa ntchito izi kupanga makalasi a gridi omwe afotokozedwa pamwambapa, komanso zosakaniza zomwe zalembedwa pansipa.

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

Zosakaniza

Ma Mixin amagwiritsidwa ntchito molumikizana ndi ma gridi osiyanasiyana kuti apange CSS ya semantic pamizere ya gridi iliyonse.

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

Kugwiritsa ntchito chitsanzo

Mutha kusintha zosinthika kukhala zomwe mumakonda, kapena ingogwiritsani ntchito zosakaniza zomwe zili ndi zikhalidwe zawo. Nachi chitsanzo chogwiritsa ntchito zosintha zosasinthika kuti mupange masanjidwe a magawo awiri okhala ndi kusiyana 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>

Kusintha gridi mwamakonda anu

Pogwiritsa ntchito zosinthika zathu za grid Sass ndi mamapu, ndizotheka kusinthiratu magulu omwe tawafotokozeratu. Sinthani kuchuluka kwa magawo, miyeso yafunso la media, ndi makulidwe a chidebe - kenaka phatikizaninso.

Mizere ndi ngalande

Chiwerengero cha ma grid columns chikhoza kusinthidwa kudzera mumitundu ya Sass. $grid-columnsamagwiritsidwa ntchito kupanga m'lifupi (mu peresenti) ya ndime iliyonse payekha $grid-gutter-widthndikuyika m'lifupi mwa magutters amzati.

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

Mitundu ya gridi

Kupitilira mizati yokha, mutha kusinthanso kuchuluka kwa ma grid tiers. Ngati mumangofuna magawo anayi a gridi, mutha kusintha $grid-breakpointsndi $container-max-widthszina monga izi:

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

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

Mukapanga zosintha zilizonse pamapu a Sass kapena mamapu, muyenera kusunga zosintha zanu ndikubwezeretsanso. Kuchita izi kutulutsa gulu latsopano lamagulu ofotokozedweratu amtundu wa magawo, ma offset, ndi kuyitanitsa. Zida zowonekera zidzasinthidwanso kuti zigwiritse ntchito ma breakpoints. Onetsetsani kuti mwakhazikitsa ma grid mu px(osati rem, em, kapena %).