Rafitra Grid

OHATRA

Ny rafitry ny grid Bootstrap dia mampiasa andiana kaontenera, andalana ary tsanganana mba hamolavolana sy hampifanaraka ny atiny. Namboarina tamin'ny flexbox izy io ary mamaly tanteraka. Ity ambany ity ny ohatra iray sy ny fanazavana lalina momba ny fomba fiarahan'ny rafitra grid.

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

Ity ohatra etsy ambony ity dia mamorona tsanganana telo mitovy sakany manerana ny fitaovana rehetra sy ny seranan-tsambo amin'ny fampiasana ny kilasin'ny grid efa voafaritra mialoha. Ireo tsanganana ireo dia eo afovoan'ny pejy misy ny ray aman-dreny .container.

Ahoana ny fiasan'izany

Amin'ny fandravana azy dia izao no fomba ivondronan'ny rafitra grid:

• Manohana teboka fiatoana enina mandray andraikitra ny grid-nay . Mifototra amin'ny min-widthfangatahan'ny haino aman-jery ny teboka fiatoana, midika izany fa misy fiantraikany amin'io teboka tapaka io sy ireo rehetra eo amboniny (oh: .col-sm-4mihatra amin'ny sm, md, lg, xl, ary xxl). Midika izany fa azonao atao ny mifehy ny haben'ny kaontenera sy ny tsanganana ary ny fitondran-tena isaky ny tapaka.

• Afovoany ny kaontenera ary asio marindrano ny atiny. Ampiasao .containerho an'ny sakan'ny piksela mamaly, .container-fluidho an'ny width: 100%faritra rehetra mijery sy fitaovana, na fitoeran-javatra mandray andraikitra (oh, .container-md) ho an'ny fitambaran'ny sakan'ny rano sy ny piksel.

• Ny andalana dia fonosina ho an'ny tsanganana. Ny tsanganana tsirairay dia manana marindrano padding(antsoina hoe tatatra) mba hifehezana ny habaka eo anelanelan'izy ireo. Avy paddingeo dia toherina amin'ny andalana misy sisiny ratsy izany mba hiantohana fa ny atiny ao amin'ny tsangananao dia mirindra tsara amin'ny ilany havia. Ny row koa dia manohana ny kilasy modifier mba hampiharana mitovy ny haben'ny tsanganana sy ny tatatra mba hanovana ny elanelan'ny atiny.

• Ny tsanganana dia tena miovaova. Misy tsanganana môdely 12 azo alaina isaky ny andalana, ahafahanao mamorona fitambarana singa samihafa izay mirefy tsanganana maromaro. Ny kilasin'ny tsanganana dia manondro ny isan'ny tsanganana môdely ho avela (oh: col-4efatra). widths dia napetraka amin'ny isan-jato ka mitovy habe foana ianao.

• Ny tatatra ihany koa dia mandray andraikitra sy azo zahana. Ny kilasin'ny tatatra dia misy amin'ny toerana tapaka rehetra, mitovy habe amin'ny sisiny sy ny elanelan'ny padding . Ovay ny tatatra marindrano misy .gx-*kilasy, tatatra mitsangana misy .gy-*, na ny tatatra rehetra misy .g-*kilasy. .g-0misy ihany koa ny manala tatatra.

• Ny fari-piainana Sass, ny sarintany ary ny mixins dia manome hery ny grid. Raha tsy te hampiasa ny kilasin'ny grid efa voafaritra mialoha ao amin'ny Bootstrap ianao dia azonao atao ny mampiasa ny loharanon'ny grid Sass mba hamoronana anao manokana miaraka amin'ny marika semantika kokoa. Ampidirinay ihany koa ny toetra amam-panao CSS sasany hampiasaina ireo fari-pahalalana Sass ireo mba ho mora kokoa ho anao.

Tandremo ny famerana sy ny bibikely manodidina ny flexbox , toy ny tsy fahafahana mampiasa singa HTML sasany ho toy ny container flex .

Grid safidy

Ny rafitry ny grids Bootstrap dia afaka mampifanaraka amin'ireo teboka enina tapaka rehetra, sy ireo teboka tapaka rehetra namboarinao. Toy izao manaraka izao ny tiers grid enina:

• Kely fanampiny (xs)
• Kely (sm)
• antonony (md)
• Lehibe (lg)
• Lehibe fanampiny (xl)
• Extra extra large (xxl)

Araka ny nomarihina etsy ambony, samy manana ny fitoerany manokana, ny prefix kilasy tokana, ary ny modifiers ny tsirairay amin'ireo teboka tapaka ireo. Toy izao ny fiovan'ny grid amin'ireo teboka tapaka ireo:

Tsanganana fandrindrana mandeha ho azy

Mampiasà kilasy tsanganana manokana ho an'ny fametahana tsanganana mora tsy misy kilasy misy laharana mazava toy ny .col-sm-6.

Mitovy sakany

Ohatra, ireto misy rindrankajy roa mihatra amin'ny fitaovana tsirairay sy ny seranan-tsambo, manomboka xsamin'ny xxl. Ampio kilasy latsaky ny isa isaky ny teboka ilainao ary hitovy ny sakany ny tsanganana tsirairay.

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

Fametrahana sakan'ny tsanganana iray

Ny fandrindrana mandeha ho azy ho an'ny tsanganana flexbox grid dia midika ihany koa fa azonao atao ny mametraka ny sakan'ny tsanganana iray ary manana ny tsanganana mpiray tam-po aminy hanova azy ho azy. Azonao atao ny mampiasa ny kilasin'ny grid efa voafaritra mialoha (araka ny aseho eto ambany), ny fifangaroan'ny grid, na ny sakany an-tsipika. Mariho fa ny tsanganana hafa dia hanova ny habeny na inona na inona sakan'ny tsanganana afovoany.

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

Votoaty sakany miovaova

Mampiasà col-{breakpoint}-autokilasy hamehezana tsanganana mifototra amin'ny sakany voajanahary amin'ny atiny.

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

Kilasy mandray andraikitra

Ny grid's Bootstrap dia ahitana ambaratonga enina amin'ny kilasy efa voafaritra mialoha ho an'ny fananganana lamina mamaly sarotra. Amboary ny haben'ny tsangananao amin'ny fitaovana kely, kely, antonony, lehibe, na lehibe kokoa araka izay hitanao fa mety.

Tapatapaka rehetra

Ho an'ny grids mitovy amin'ny fitaovana kely indrindra ka hatramin'ny lehibe indrindra, ampiasao ny .coland .col-*classes. Manondro kilasy misy laharana rehefa mila tsanganana manokana ianao; raha tsy izany, aza misalasala mifikitra amin'ny .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>

Mivondrona mankany amin'ny horizontaly

Amin'ny fampiasana .col-sm-*kilasy tokana iray dia azonao atao ny mamorona rafitra grid fototra izay manomboka mivondrona ary lasa mitsivalana eo amin'ny teboka tapaka kely ( 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>

Afangaro ary ampifanaraho

Tsy tianao ve ny tsanganana mba hiangona fotsiny amin'ny ambaratonga sasany? Mampiasà fitambarana kilasy samihafa ho an'ny ambaratonga tsirairay araka izay ilaina. Jereo ny ohatra etsy ambany raha te hahalala tsara kokoa ny fomba fiasan'izy rehetra.

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

Andry andalana

Ampiasao ireo .row-cols-*kilasy mamaly mba hametrahana haingana ny isan'ny tsanganana izay manome tsara indrindra ny atiny sy ny drafitrao. Raha ny .col-*kilasy mahazatra dia mihatra amin'ny tsanganana tsirairay (oh, .col-md-4), ny kilasin'ny tsanganana andalana dia napetraka amin'ny ray aman-dreny .rowho default ho an'ny tsanganana misy. Azonao .row-cols-autoatao ny manome ny andry ny sakany voajanahary.

Ampiasao ireto kilasin'ny tsanganana andalana ireto mba hamoronana lamina fototra fototra na hifehezana ny fandrafetana karatrao ary hanilika rehefa ilaina eo amin'ny haavon'ny tsanganana.

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

Azonao atao koa ny mampiasa ny mixin Sass miaraka aminy 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);
  }
}

akany

Mba hanakanana ny atiny amin'ny rindran-damina mahazatra, ampio tsanganana vaovao .rowsy andiana .col-sm-*tsanganana iray ao anatin'ny .col-sm-*tsanganana efa misy. Ny andalana voatokana dia tokony ahitana andiana tsanganana miampy 12 na latsaka (tsy voatery hampiasa ny tsanganana 12 rehetra misy ianao).

<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

Rehefa mampiasa fisie Sass loharanon'ny Bootstrap ianao dia manana safidy amin'ny fampiasana ny fari-pahaizan'ny Sass sy ny mixins mba hamoronana fandrafetana pejy mahazatra, semantika ary mandray andraikitra. Ny kilasin'ny grid efa nofaritanay dia mampiasa ireo fari-pahalalana sy mixins ireo ihany mba hanomezana andiana kilasy vonona hampiasaina ho an'ny fandrindrana mandray andraikitra haingana.

hiovaova

Ny fiovaovana sy ny sarintany no mamaritra ny isan'ny tsanganana, ny sakan'ny tatatra, ary ny toerana fangataham-baovao hanombohana tsanganana mitsingevana. Ampiasainay ireo mba hamoronana ny kilasin'ny grid efa voafaritra mialoha voarakitra etsy ambony, ary koa ho an'ny mixins mahazatra voatanisa etsy ambany.

$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

Ny mixins dia ampiasaina miaraka amin'ny fari-piainan'ny grid mba hamoronana CSS semantika ho an'ny tsanganana tsirairay.

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

Fampiasana ohatra

Azonao atao ny manova ny fari-piainana amin'ny soatoavinao manokana, na mampiasa fotsiny ny mixins miaraka amin'ny sanda mahazatra azy. Ity misy ohatra iray amin'ny fampiasana ny firafitry ny default mba hamoronana lamina misy tsanganana roa misy elanelana eo anelanelany.

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

Fanamboarana ny grid

Using our built-in grid Sass variables and maps, it’s possible to completely customize the predefined grid classes. Change the number of tiers, the media query dimensions, and the container widths—then recompile.

Columns and gutters

The number of grid columns can be modified via Sass variables. $grid-columns is used to generate the widths (in percent) of each individual column while $grid-gutter-width sets the width for the column gutters.

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

Grid tiers

Moving beyond the columns themselves, you may also customize the number of grid tiers. If you wanted just four grid tiers, you’d update the $grid-breakpoints and $container-max-widths to something like this:

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

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

When making any changes to the Sass variables or maps, you’ll need to save your changes and recompile. Doing so will output a brand new set of predefined grid classes for column widths, offsets, and ordering. Responsive visibility utilities will also be updated to use the custom breakpoints. Make sure to set grid values in px (not rem, em, or %).