Faiga fa'apipi'i

Faataitaiga

E fa'aogaina e le Bootstrap's grid system se fa'asologa o koneteina, laina, ma koluma e fa'atulaga ma fa'aoga mea. E fausia i le flexbox ma e tali atoatoa. O loʻo i lalo se faʻataʻitaʻiga ma se faʻamatalaga loloto mo le auala e tuʻufaʻatasia ai le faʻaogaina o le grid system.

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

O le fa'ata'ita'iga o lo'o i luga e fa'atupuina ai ni koluma tutusa-lautele se tolu i masini uma ma va'aiga va'aiga e fa'aaoga ai a tatou vasega fa'avasega. O na koluma e totonugalemu i le itulau ma le matua .container.

E faapefea ona galue

O le malepe i lalo, o le auala lea e faʻapipiʻi faʻatasi ai le faiga faʻasologa:

• O la matou fa'asologa e lagolagoina ono tali fa'amuta . O va'aiga e fa'avae i luga o min-widthfa'asalalauga fa'asalalauga, o lona uiga e a'afia ai lena va'aiga ma mea uma o lo'o i luga atu (fa'ata'ita'iga, .col-sm-4e fa'atatau ile sm, md, lg, xl, ma le xxl). O lona uiga e mafai ona e pulea le fa'avasegaina o koneteina ma le koluma ma amioga i vaega ta'itasi.

• Container fa'atotonugalemu ma fa'alava faalava au mea. Fa'aoga .containermo le lautele pika tali, .container-fluidmo width: 100%va'aiga uma ma masini, po'o se atigipusa tali (fa'ata'ita'iga, .container-md) mo le tu'ufa'atasiga o le vai ma le pika lautele.

• O laina o afifi mo koluma. O koluma ta'itasi e fa'ata'atia padding(ta'ua o le alavai) mo le fa'atonutonuina o le va i le va. Ona paddingfa'afeagai lea i luga o laina i laina le lelei e fa'amautinoa ai o mea o lo'o i totonu o au koluma o lo'o fa'aoga tonu ile itu agavale. E lagolagoina fo'i e laina vasega fetu'una'iga e fa'aoga tutusa le fa'avasegaina o koluma ma vasega alavai e sui ai le va o au mea.

• Koluma e matua fetuutuunai. E 12 fa'ata'ita'iga koluma o lo'o avanoa ile laina, e mafai ai ona e faia ni tu'ufa'atasiga 'ese'ese o elemene e va'aia so'o se numera o koluma. O vasega koluma o lo'o fa'ailoa mai ai le aofa'i o koluma fa'ata'ita'i e fa'alava (fa'ata'ita'iga, col-4fa'alava). widths o lo'o fa'atulaga i pasene ina ia tutusa lava lou fa'atusatusaga.

• E talileleia fo'i alavai ma mafai ona fa'avasega. E avanoa vasega alavai i vaega uma e momotu ai, e tutusa uma lapo'a ma o tatou pito ma le va o padding . Suia alavai faalava i .gx-*vasega, alavai sa'o ile .gy-*, po o alavai uma e iai .g-*vasega. .g-0e avanoa foi e aveese ai alavai.

• Sass fesuia'i, fa'afanua, ma fefiloi fa'amalo le fa'asologa. Afai e te le manaʻo e faʻaaoga vasega faʻavasega muamua i Bootstrap, e mafai ona e faʻaogaina le matou faʻasologa o Sass e fai ai sau lava faʻailoga faʻailoga. Matou te fa'aaofia fo'i nisi o mea totino a le CSS e fa'aaoga ai nei suiga Sass mo le sili atu ona fetu'una'i mo oe.

Ia nofouta i tapula'a ma pusi i luga o le flexbox , pei o le le mafai ona fa'aogaina nisi o elemene HTML e fai ma koneteina fe'avea'i .

Grid filifiliga

E mafai ona fetuutuuna'i le faiga o fa'asologa o Bootstrap i nofoaga fa'aletonu uma e ono, ma so'o se va'aiga e te fa'avasegaina. O fa'asologa fa'asologa e ono e fa'apea:

• Laiti fa'aopoopo (xs)
• Laiti (sm)
• Medium (md)
• Tele (lg)
• Tele tele (xl)
• Lapopo'a fa'aopoopo (xxl)

E pei ona ta'ua i luga, o nei vaega ta'itasi e iai a latou koneteina, fa'ailoga tulaga ese o le vasega, ma suiga. O le auala lenei e suia ai le fa'asologa i nei va'aiga:

Otometi fa'atulagaina koluma

Fa'aoga vasega koluma fa'apitoa mo le fa'avasegaina o koluma e aunoa ma se vasega fa'anumera manino e pei o .col-sm-6.

Tutusa-lautele

Mo se faʻataʻitaʻiga, e lua faʻasologa faʻasologa e faʻaoga i masini uma ma vaʻaiga, mai xsi le xxl. Fa'aopoopo so'o se numera o vasega e itiiti iunite mo va'aiga ta'itasi e te mana'omia ma o le a tutusa le lautele o koluma uma.

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

Fa'atulaga tasi koluma lautele

Fa'atonu-aunoa mo koluma flexbox grid o lona uiga e mafai fo'i ona e setiina le lautele o le koluma e tasi ma fa'asolo otometi le fa'avasegaina o koluma fa'atasi. E mafai ona e fa'aogaina vasega fa'avasega (e pei ona fa'aalia i lalo), fa'afefiloi fa'asologa, po'o le lautele o laina. Manatua o isi koluma o le a toe faʻafouina tusa lava po o le a le lautele o le koluma ogatotonu.

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

Su'esu'ega lautele lautele

Fa'aoga col-{breakpoint}-autovasega e fa'atele koluma e fa'atatau i le lautele fa'anatura o latou anotusi.

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

Vasega tali atu

O le fa'asologa o Bootstrap e aofia ai vaega e ono o vasega ua uma ona fa'ata'atia mo le fausiaina o fa'ata'ita'iga lavelave. Fa'apitoa le lapopoa o au koluma i luga o masini fa'aopoopo laiti, la'ititi, feololo, lapopo'a po'o masini tetele e tusa lava pe e te mana'o e fetaui.

Tulaga uma

Mo grids e tutusa mai le laʻititi o masini i le tele, faʻaaoga le .colma .col-*vasega. Fa'ailoa se vasega faanumera pe ae mana'omia se koluma fa'apitoa; a leai, lagona le saoloto e pipii i .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>

Faaputu i le faalava

I le fa'aaogaina o se seti se tasi o .col-sm-*vasega, e mafai ai ona e faia se faiga fa'avasega fa'avae e amata fa'aputu ma fa'alava i le pito la'ititi ( 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>

Faafefiloi ma fetaui

E te le mana'o e fa'aputu na'o lau koluma i ni vaega fa'asologa? Fa'aoga se tu'ufa'atasiga o vasega eseese mo vaega ta'itasi pe a mana'omia. Va'ai le fa'ata'ita'iga o lo'o i lalo mo se manatu sili atu pe fa'apefea ona fa'aoga uma.

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

Koluma laina

Fa'aoga .row-cols-*vasega tali e vave fa'atulaga le numera o koluma e sili ona tu'uina atu lau anotusi ma lau fa'atulagaina. A'o .col-*vasega masani e fa'aoga i koluma ta'itasi (fa'ata'ita'iga, .col-md-4), o vasega koluma laina o lo'o tu'u i le matua .rowe fai ma ala 'alo. Faatasi ai ma .row-cols-autooe e mafai ona tuʻuina atu koluma lo latou lautele masani.

Fa'aoga nei vasega koluma laina e fai vave ai fa'asologa fa'asologa autu po'o le fa'atonutonuina o au fa'ata'otoga kata.

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

E mafai foi ona e faʻaogaina le Sass mixin faʻatasi, 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);
  }
}

Faamoega

Ina ia fa'aputu au mea i le fa'asologa fa'aletonu, fa'aopoopo se seti fou .rowma se seti o .col-sm-*koluma i totonu ole .col-sm-*koluma o iai. O laina fa'aputu e tatau ona aofia ai se seti o koluma e fa'aopoopo i le 12 pe itiiti ifo (e le mana'omia lou fa'aogaina uma o koluma e 12 o lo'o avanoa).

<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

A fa'aogaina faila Sass fa'apogai a Bootstrap, o lo'o ia te oe le filifiliga o le fa'aogaina o suiga ma fa'afefiloi Sass e fatu ai fa'asologa o tu ma aga, semantic, ma fa'atatau itulau. O a matou vasega fa'ata'ita'i fa'avasega e fa'aogaina nei lava fesuiaiga ma fa'afefiloi e tu'uina atu ai se vaega atoa o vasega sauni e fa'aoga mo fa'atonuga vave tali mai.

Fuafuaga

Fuafuaga ma faafanua e fuafua ai le numera o koluma, le lautele o le alavai, ma le vaega o fesili a le aufaasālalau lea e amata ai koluma faaopeopea. Matou te fa'aogaina nei mea e fa'atupuina ai vasega fa'asologa o lo'o fa'amauina i luga, fa'apea fo'i ma fa'afefiloi masani o lo'o lisi atu i lalo.

$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

Fa'afefiloi e fa'aoga fa'atasi ma le fa'asologa o fesuiaiga e fa'atupu ai semantic CSS mo koluma fa'asologa ta'itasi.

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

Fa'ata'ita'iga fa'aoga

E mafai ona e fesuia'i suiga i au lava aga masani, pe na'o le fa'aogaina o mea fa'afefiloi ma a latou tau fa'aletonu. O se fa'ata'ita'iga lea o le fa'aogaina o tulaga fa'aletonu e fai ai se fa'asologa o koluma e lua ma se va i le va.

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

Fa'avasega le fa'asologa

I le fa'aogaina o la matou fa'asologa fa'apipi'i Sass fesuia'i ma fa'afanua, e mafai ona fa'avasega atoatoa vasega fa'avasega fa'asologa. Suia le numera o vaega, le tele o fesili a le aufaasālalau, ma le lautele o koneteina—ona toe tuufaatasia lea.

Koluma ma alavai

Ole numera ole koluma fa'ata'oto e mafai ona suia ile Sass fesuiaiga. $grid-columnse fa'aaogaina e fa'atupu ai le lautele (i le pasene) o koluma ta'itasi a'o $grid-gutter-widthfa'atulaga le lautele mo alavai o koluma.

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

Fa'asologa o laina

O le aga'i atu i tua atu o koluma lava latou, e mafai fo'i ona e fa'avasegaina le numera o fa'asologa fa'asologa. Afai e te mana'o na'o le fa laina fa'asologa, e te fa'afouina le $grid-breakpointsma $container-max-widthsi se mea fa'apenei:

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

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

A fai so'o se suiga i suiga o Sass po'o fa'afanua, e tatau ona e fa'asaoina au suiga ma toe fa'aopoopo. O le faia o lea mea o le a maua ai se seti fou o vasega fa'avasega fa'asologa mo le lautele o koluma, offsets, ma le fa'atonuga. O le a fa'afouina fo'i mea faigaluega fa'aalia e tali atu e fa'aoga ai fa'aputuga masani. Ia mautinoa e seti fa'asologa fa'atatau ile px(e le rem, em, po'o le %).