Faiga fa'apipi'i
Fa'aoga la matou telefoni feavea'i-muamua flexbox grid e fau ai fa'ata'ita'iga o foliga ma lapopo'a uma fa'afetai i le faiga o koluma e sefululua, ono fa'aletonu e tali atu ai, Sass fesuia'i ma fa'afefiloi, ma le tele o vasega na mua'i fa'avasegaina.
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 faʻapipiʻi faʻatasi 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 luga o 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-width
fa'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-4
e fa'atatau ilesm
,md
,lg
,xl
, ma lexxl
). 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
.container
mo le lautele pika tali,.container-fluid
mowidth: 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. Onapadding
fa'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-4
fa'alava).width
s 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-0
e 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 fa'asologa a Bootstrap i vaega uma e ono e le mafai, 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 lea e suia ai le fa'asologa i nei va'aiga:
xs <576px |
sm ≥576px |
md ≥768px |
lg ≥992px |
xl ≥1200px |
xxl ≥1400px |
|
---|---|---|---|---|---|---|
Containemax-width |
Leai (taavale) | 540px | 720px | 960px | 1140px | 1320px |
Ulua'i vasega | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
.col-xxl- |
# o koluma | 12 | |||||
Laufanua lautele | 1.5rem (.75rem i le agavale ma le taumatau) | |||||
Alavai masani | ioe | |||||
Nestable | ioe | |||||
Fa'atonu koluma | ioe |
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 xs
i le xxl
. Fa'aopoopo so'o se numera o vasega fa'aitiiti 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 suia e 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}-auto
vasega 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, lapo'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 .col
ma .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 ona e faia se faiga fa'avae 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'aaoga se tuufaatasiga 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 luga o le matua .row
o se mea e le mafai mo koluma o lo'o i ai. Faatasi ai ma .row-cols-auto
oe e mafai ona tuʻuina atu koluma lo latou lautele masani.
Fa'aoga nei vasega koluma laina e fa'atopetope ai le fa'atulagaina o fa'asologa fa'asologa po'o le fa'atonutonuina o lau fa'ata'otoga o lau kata ma fa'amalo pe a mana'omia ile tulaga koluma.
<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>
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 .row
ma 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 e fa'aoga ai suiga ma fa'afefiloi Sass e fatu ai fa'asologa o tu ma aga, fa'asinomaga, ma fa'asologa o 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 opeopea. 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 le CSS semantic 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);
// Get fancy by offsetting, or changing the sort order
@include make-col-offset($size, $columns: $grid-columns);
Fa'ata'ita'iga fa'aoga
E mafai ona e fesuia'i suiga i au lava tulaga fa'ale-aganu'u, pe na'o le fa'aogaina o mea fa'afefiloi ma 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 Sass fesuiaiga ma fa'afanua, e mafai ona fa'avasega atoatoa vasega fa'avasega. 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 o koluma fa'asologa e mafai ona suia e ala i fesuiaiga Sass. $grid-columns
e fa'aaogaina e fa'atupu ai le lautele (i le pasene) o koluma ta'itasi a'o $grid-gutter-width
fa'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-breakpoints
ma $container-max-widths
i 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 le Sass fesuia'i 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, fa'asili, 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 %
).