Endlelo ra gridi
Tirhisa giridi ya hina ya matimba ya mobile-first flexbox ku aka swivumbeko swa swivumbeko hinkwaswo na vukulu hi ku khensa sisiteme ya khume mbirhi wa tikholomu, ntlhanu wa swiyenge swa ku hlamula swa ntolovelo, swilo leswi cinca-cincaka swa Sass na mixins, na makume ya titlilasi leti hlamuseriweke ka ha ri emahlweni.
Ndlela leyi swi tirhaka ha yona
Sisiteme ya gridi ya Bootstrap yi tirhisa nxaxamelo wa swikhomela-ndhawu, tilayini, na tikholomu ku layout na ku ringanisa swilo leswi nga endzeni. Yi akiwile hi flexbox naswona yi hlamula hi ku helela. Laha hansi ku na xikombiso na ku languta hi vuenti eka ndlela leyi gridi yi hlanganaka ha yona.
Xana u ha ku sungula kumbe u nga yi tolovelanga flexbox? Hlaya nkongomiso lowu wa CSS Tricks flexbox ku kuma ndzhaku, theminoloji, swiletelo, na swiphemu swa khodi.
<div class="container">
<div class="row">
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
</div>
</div>
Xikombiso lexi nga laha henhla xi tumbuluxa tikholomu tinharhu ta ku anama loku ringanaka eka switirhisiwa leswitsongo, swa le xikarhi, leswikulu, na leswikulu swinene hi ku tirhisa titlilasi ta hina ta giridi leti hlamuseriweke ka ha ri emahlweni. Tikholomu teto ti le xikarhi ka tluka leri nga ni mutswari .container
.
Ku yi tshovela, hi leyi ndlela leyi yi tirhaka ha yona:
- Swikhomela-ndhawu swi nyika ndlela yo veka exikarhi ni ku rhendzeleka hi ndlela yo olova leswi nga endzeni ka sayiti ya wena. Tirhisa
.container
eka ku anama ka pixel loku hlamulaka kumbe.container-fluid
eka kuwidth: 100%
tsemakanya vukulu hinkwabyo bya viewport na xitirhisiwa. - Tilayini i swifunengeto swa tikholomu. Kholomo yin’wana na yin’wana yina horizontal
padding
(leyi vuriwaka gutter) kuva yi lawula ndzhawu leyi nga exikarhi ka yona. Leswipadding
switlhela swi lwisana eka tilayini letingana matlhelo yo biha. Hi ndlela leyi, swilo hinkwaswo leswi nga eka tikholomu ta wena swi ringanisiwa hi ndlela leyi vonakaka ehansi hi tlhelo ra ximatsi. - Eka layout ya grid, nhundzu yi fanele ku vekiwa endzeni ka tikholomu naswona i tikholomu ntsena leti nga vaka vana va xihatla va tilayini.
- Hikwalaho ka flexbox, tikholomu ta gridi leti nga riki na leswi boxiweke
width
ti ta layout hi ku tisungulela tanihi tikholomu ta ku anama loku ringanaka. Xikombiso, swikombiso swa mune swa.col-sm
xin’wana na xin’wana hi xoxe xi va 25% hi ku anama ku suka eka ndhawu leyitsongo yo tshoveka ku ya ehenhla. Vona xiyenge xa tikholomu ta auto-layout ku kuma swikombiso swin’wana. - Titlilasi ta tikholomu ti kombisa nhlayo ya tikholomu leti u lavaka ku ti tirhisa eka 12 leti nga kotekaka hi layini. Kutani, loko u lava tikholomu tinharhu ta ku anama loku ringanaka ku tsemakanya, u nga tirhisa
.col-4
. - Tikholomu
width
s ti vekiwa hi tiphesente, kutani ti tshama ti ri na mati naswona ti ri na vukulu loko ti pimanisiwa na elemente ya tona ya mutswari. - Tikholomu ti na horizontal
padding
ku tumbuluxa ti gutters exikarhi ka tikholomu ha yin’we, hambiswiritano, u nga susa kumargin
suka eka tilayini napadding
ku suka eka tikholomu hi.no-gutters
eka.row
. - Ku endla leswaku giridi yi hlamula, ku na tindhawu ta ntlhanu to tshoveka ta giridi, yin’we eka ndhawu yin’wana na yin’wana yo tshoveka leyi hlamulaka : tindhawu hinkwato to tshoveka (titsongo swinene), letitsongo, ta le xikarhi, letikulu, na letikulu swinene.
- Tindhawu to tshoveka ta gridi ti sekeriwe eka swivutiso swa midiya ya ku anama ka le hansi, leswi vulaka leswaku ti tirha eka ndhawu yoleyo yin’we yo tshoveka na hinkwaswo leswi nga ehenhla ka yona (xikombiso,
.col-sm-4
swi tirha eka switirhisiwa leswitsongo, swa le xikarhi, leswikulu, na leswikulu swinene, kambe ku nga ri kuxs
tshoveka ko sungula). - U nga tirhisa titlilasi ta gridi leti hlamuseriweke ka ha ri emahlweni (ku fana na
.col-4
) kumbe ti -mixin ta Sass ku kuma ku fungha loku engetelekeke ka semantiki.
Tiva swipimelo na swihoxo leswi rhendzeleke flexbox , ku fana na ku tsandzeka ku tirhisa swiaki swin'wana swa HTML tanihi swikhomela-ndhawu swa flex .
Swihlawulekisi swa gridi
Loko Bootstrap yi tirhisa em
s kumbe rem
s ku hlamusela vukulu byo tala, px
s yi tirhisiwa eka tindhawu to tshoveka ta gridi na ku anama ka xikhomela. Leswi swi vangiwa hikuva ku anama ka xivono ku le ka tipikseli naswona a ku cinci hi mpimo wa fonto .
Vona ndlela leyi swiphemu swa sisiteme ya giridi ya Bootstrap swi tirhaka ha yona eka switirhisiwa swo tala leswi nga ni tafula leri nga ni mavoko.
Switsongo swinene < 576px |
Switsongo ≥576px |
Xikarhi xa ≥768px |
Lexikulu ≥992px |
Ku tlula mpimo ≥1200px |
|
---|---|---|---|---|---|
Max ku anama ka xigwitsirisi | Ku hava (auto) . | 540px | 720px hi ku | 960px | 1140px hi ndlela leyi |
Xirhangi xa tlilasi | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
# ya tikholomu | 12. | ||||
Ku anama ka gutter | 30px (15px eka tlhelo rin’wana ni rin’wana ra kholomo) . | ||||
Swi nga ni swisaka | Ina | ||||
Ku oda ka tikholomu | Ina |
Tikholomu ta auto-layout
Tirhisa titlilasi ta tikholomu leti kongomeke ta breakpoint ku olovisa ku pima mpimo wa kholomo handle ka tlilasi leyi nga na tinomboro leti nga erivaleni ku fana na .col-sm-6
.
Ku anama loku ringanaka
Xikombiso, hi leswi swivumbeko swimbirhi swa giridi leswi tirhaka eka xitirhisiwa xin’wana ni xin’wana ni ndhawu yo languta, ku sukela eka xs
ku ya eka xl
. Engetela nhlayo yihi na yihi ya titlilasi leti nga riki na yuniti eka breakpoint yin’wana na yin’wana leyi u yi lavaka naswona kholomo yin’wana na yin’wana yi ta va na ku anama loku fanaka.
<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>
Layini yo tala ya ku anama loku ringanaka
Endla tikholomu ta ku anama loku ringanaka leti hlanganisaka milayeni yo tala hi ku nghenisa .w-100
laha u lavaka leswaku tikholomu ti tshoveka ku ya eka layini leyintshwa. Endla leswaku ku wisa ku hlamula hi ku hlanganisa .w-100
na switirhisiwa swin'wana swa nkombiso leswi hlamulaka .
Ku vile na xihoxo xa Safari flexbox lexi a xi sivela leswi ku tirha handle ka explicit flex-basis
kumbe border
. Ku na swintshuxo swa tivhidiyo ta khale ta swihlamusela-marito, kambe a swi fanelanga swi laveka loko swihlamusela-marito swa wena leswi u swi kongomisaka swi nga weli eka vuhundzuluxeri bya swihoxo.
<div class="container">
<div class="row">
<div class="col">col</div>
<div class="col">col</div>
<div class="w-100"></div>
<div class="col">col</div>
<div class="col">col</div>
</div>
</div>
Ku veka ku anama ka kholomo yin’we
Auto-layout ya tikholomu ta gridi ya flexbox yi tlhela yi vula leswaku u nga veka ku anama ka kholomo yin’we naswona u endla leswaku tikholomu ta vamakwavo ti cinca mpimo hi ku tisungulela ku yi rhendzela. U nga tirhisa titlilasi ta gridi leti hlamuseriweke ka ha ri emahlweni (hilaha swi kombisiweke hakona laha hansi), ti-mixin ta gridi, kumbe ku anama ka le ndzeni ka layini. Xiya leswaku tikholomu tin’wana ti ta cinca sayizi ku nga khathariseki ku anama ka kholomo ya le xikarhi.
<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>
Nhundzu ya ku anama loku cinca-cincaka
Tirhisa col-{breakpoint}-auto
titlilasi ku pima tikholomu hi ku ya hi ku anama ka ntumbuluko ka leswi nga endzeni ka tona.
<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>
Titlilasi leti hlamulaka
Gridi ya Bootstrap yi katsa swiyenge swa ntlhanu swa titlilasi leti hlamuseriweke ka ha ri emahlweni to aka swivumbeko swo hlamula leswi rharhanganeke. Endla vukulu bya tikholomu ta wena eka switirhisiwa leswitsongo swinene, leswitsongo, swa le xikarhi, leswikulu, kumbe leswikulu swinene hambi swi ri tano u vona swi fanerile.
Hinkwaswo swilo swo tshoveka
Eka tigridi leti fanaka ku suka eka switirhisiwa leswitsongo ku ya eka leswikulu, tirhisa titlilasi ta .col
na . .col-*
Boxa tlilasi leyi nga ni tinomboro loko u lava kholomo leyi nga ni mpimo wo karhi; handle ka sweswo, titwe u ntshunxekile ku namarhela .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>
Ku hlanganisiwa ku ya eka horizontal
Hi ku tirhisa sete yin’we ya .col-sm-*
titlilasi, u nga endla sisiteme ya giridi ya xisekelo leyi sungulaka yi hlanganisiwile ivi yi va leyi nga etlhelo eka ndhawu leyitsongo yo tsema ( 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>
Hlanganisa na ku hlanganisa
A wu lavi leswaku tikholomu ta wena ti hlangana ntsena eka ti-tier tin’wana ta gridi? Tirhisa nhlanganelo wa titlilasi to hambana eka xiyimo xin’wana na xin’wana tanihilaha swi lavekaka hakona. Vona xikombiso lexi nga laha hansi ku kuma mianakanyo yo antswa ya ndlela leyi hinkwaswo swi tirhaka ha yona.
<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>
Swidziva swa le matini
Ti gutters tinga lulamisiwa hiku hlamula hi breakpoint-specific padding na negative margin utility classes. Ku cinca ti gutters eka layini leyi nyikiweke, pair negative margin utility eka .row
na matching padding utilities eka .col
s. Mutswari .container
kumbe .container-fluid
u nga ha lava ku lulamisiwa na yena ku papalata ku tala loku nga laviwiki, ku tirhisa nakambe ku fambisana ka padding utility.
Hi lexi xikombiso xa ku lulamisa giridi ya Bootstrap eka ndhawu leyikulu ( lg
) yo wisa na le henhla. Hi engetele .col
padding hi .px-lg-5
, hi counteract sweswo hi .mx-lg-n5
eka mutswari .row
ivi hi lulamisa .container
wrapper hi .px-lg-5
.
<div class="container px-lg-5">
<div class="row mx-lg-n5">
<div class="col py-3 px-lg-5 border bg-light">Custom column padding</div>
<div class="col py-3 px-lg-5 border bg-light">Custom column padding</div>
</div>
</div>
Tikholomu ta layini
Tirhisa .row-cols-*
titlilasi leti hlamulaka ku hatlisa u veka nhlayo ya tikholomu leti humesaka kahle nhundzu ya wena na layout. Loko titlilasi ta ntolovelo .col-*
ti tirha eka tikholomu ha yin’we (xikombiso, .col-md-4
), titlilasi ta tikholomu ta layini ti vekiwa eka mutswari .row
tanihi ndlela yo koma.
Tirhisa titlilasi leti ta tikholomu ta tilayini ku hatlisa u tumbuluxa swivumbeko swa masungulo swa giridi kumbe ku lawula swivumbeko swa makhadi ya wena.
<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-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>
U nga ha tlhela u tirhisa mixin ya Sass leyi fambisanaka na yona, 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);
}
}
Ku ringanisa
Tirhisa switirhisiwa swa ku ringanisa swa flexbox ku ringanisa tikholomu hi ndlela yo olova na yo rhendzeleka. Internet Explorer 10-11 a yi seketeli ku ringanisiwa loku yimisiweke ka swilo leswi flex loko xigwitsirisi xa flex xi ri na min-height
tanihilaha swi kombisiweke hakona laha hansi. Vona Flexbugs #3 ku kuma vuxokoxoko byo tala.
Ku ringanisa loku yimisiweke
<div class="container">
<div class="row align-items-start">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
<div class="row align-items-center">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
<div class="row align-items-end">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col align-self-start">
One of three columns
</div>
<div class="col align-self-center">
One of three columns
</div>
<div class="col align-self-end">
One of three columns
</div>
</div>
</div>
Ku ringanisa loku nga etlhelo
<div class="container">
<div class="row justify-content-start">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-center">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-end">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-around">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-between">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
</div>
Ku hava swidziva
Ti gutters exikarhi ka tikholomu eka titlilasi ta hina ta gridi leti hlamuseriweke ka ha ri emahlweni ti nga susiwa hi .no-gutters
. Leswi swi susa margin
s ya negative eka .row
na horizontal padding
eka tikholomu hinkwato ta vana ta le kusuhi.
Hi leyi khodi ya xihlovo yo tumbuluxa switayele leswi. Xiya leswaku ku tlula ka tikholomu ku ringanisiwa ntsena eka tikholomu ta vana to sungula naswona ku kongomisiwa hi ku tirhisa xihlawulekisi xa swihlawulekisi . Loko leswi swi humesa xihlawulekisi lexi kongomeke swinene, ku pfariwa ka kholomo ka ha nga ha tlhela ku lulamisiwa hi ku tirhisa switirhisiwa swa ku hambana .
Xana u lava dizayini ya le tlhelo ku ya emakumu? Lahla mutswari .container
kumbe .container-fluid
.
.no-gutters {
margin-right: 0;
margin-left: 0;
> .col,
> [class*="col-"] {
padding-right: 0;
padding-left: 0;
}
}
Hi ku tirhisa, hi leyi ndlela leyi swi langutekaka ha yona. Xiya leswaku u nga ya emahlweni u tirhisa leswi na titlilasi tin’wana hinkwato ta gridi leti hlamuseriweke ka ha ri emahlweni (ku katsa na ku anama ka tikholomu, swiyenge leswi hlamulaka, ku oda nakambe, na swin’wana).
<div class="row no-gutters">
<div class="col-sm-6 col-md-8">.col-sm-6 .col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
Ku phutsela ka tikholomu
Loko ku vekiwa tikholomu to tlula 12 endzeni ka layini yin’we, ntlawa wun’wana ni wun’wana wa tikholomu leti engetelekeke wu ta, tanihi yuniti yin’we, wu phutsela eka layini leyintshwa.
Tanihi leswi 9 + 4 = 13 > 12, div leyi ya 4-kholomo yo anama yi phutseriwe eka layini leyintshwa tanihi yuniti yin’we leyi landzelelanaka.
Tikholomu leti landzelaka ti ya emahlweni hi layini leyintshwa.
<div class="container">
<div class="row">
<div class="col-9">.col-9</div>
<div class="col-4">.col-4<br>Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
<div class="col-6">.col-6<br>Subsequent columns continue along the new line.</div>
</div>
</div>
Ku tshoveka ka tikholomu
Ku tshovela tikholomu eka layini leyintshwa eka flexbox swi lava hack leyitsongo: engetela element na kun’wana na width: 100%
kun’wana laha u lavaka ku phutsela tikholomu ta wena eka layini leyintshwa. Hi ntolovelo leswi swi hetisisiwa hi .row
s yo tala, kambe a hi ndlela yin’wana na yin’wana yo tirhisa leyi nga hlamuselaka leswi.
<div class="container">
<div class="row">
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<!-- Force next columns to break to new line -->
<div class="w-100"></div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
</div>
</div>
U nga ha tlhela u tirhisa ku wisa loku eka tindhawu to karhi to wisa hi switirhisiwa swa hina swa nkombiso leswi hlamulaka .
<div class="container">
<div class="row">
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
<!-- Force next columns to break to new line at md breakpoint and up -->
<div class="w-100 d-none d-md-block"></div>
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
</div>
</div>
Ku oda nakambe
Oda titlilasi
Tirhisa .order-
titlilasi to lawula ku landzelelana loku vonakaka ka swilo swa wena. Titlilasi leti ta hlamula, kutani u nga veka order
hi breakpoint (xikombiso, .order-1.order-md-2
). Ku katsa nseketelo wa ku 1
hundza ku 12
tsemakanya swiyenge hinkwaswo swa ntlhanu swa giridi.
<div class="container">
<div class="row">
<div class="col">
First in DOM, no order applied
</div>
<div class="col order-12">
Second in DOM, with a larger order
</div>
<div class="col order-1">
Third in DOM, with an order of 1
</div>
</div>
</div>
Ku tlhela ku va na ti responsive .order-first
na .order-last
titlilasi leti cincaka the order
ya elemente hi ku tirhisa order: -1
na order: 13
( order: $columns + 1
), hi ku landzelelana. Titlilasi leti ti nga tlhela ti hlanganisiwa na .order-*
titlilasi leti nga na tinomboro tanihilaha swi lavekaka hakona.
<div class="container">
<div class="row">
<div class="col order-last">
First in DOM, ordered last
</div>
<div class="col">
Second in DOM, unordered
</div>
<div class="col order-first">
Third in DOM, ordered first
</div>
</div>
</div>
Ku tlherisela endzhaku tikholomu
U nga offset tikholomu ta gridi hi tindlela timbirhi: .offset-
titlilasi ta hina ta gridi leti hlamulaka na switirhisiwa swa hina swa margin . Titlilasi ta gridi ti ringanisiwa ku fambisana na tikholomu kasi margin ya pfuna swinene eka swivumbeko swa xihatla laha ku anama ka offset ku cinca-cincaka.
Titlilasi ta offset
Susa tikholomu exineneni hi ku tirhisa .offset-md-*
titlilasi. Titlilasi leti ti engetela margin ya ximatsi ya kholomo hi *
tikholomu. Hi xikombiso, .offset-md-4
yi famba .col-md-4
ehenhla ka tikholomu ta mune.
<div class="container">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
</div>
<div class="row">
<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
</div>
<div class="row">
<div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
</div>
</div>
Ku engetela eka ku basisiwa ka kholomo eka tindhawu to tshoveka leti hlamulaka, u nga ha lava ku tlhela u veka ti-offset. Vona leswi hi xiendlo eka xikombiso xa gridi .
<div class="container">
<div class="row">
<div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
<div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</div>
</div>
<div class="row">
<div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
<div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0</div>
</div>
</div>
Switirhisiwa swa margin
Hi ku rhurhela eka flexbox eka v4, u nga tirhisa switirhisiwa swa margin ku fana na .mr-auto
ku sindzisa tikholomu ta vamakwavo ku suka eka yin’wana.
<div class="container">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
</div>
<div class="row">
<div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
<div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
</div>
<div class="row">
<div class="col-auto mr-auto">.col-auto .mr-auto</div>
<div class="col-auto">.col-auto</div>
</div>
</div>
Ku endla swisaka
Ku hlanganisa nhundzu ya wena hi gridi ya ntolovelo, engetela leyintshwa .row
na sete ya .col-sm-*
tikholomu endzeni ka .col-sm-*
kholomo leyi nga kona. Tilayini leti pfaleriweke ti fanele ku katsa sete ya tikholomu leti hlanganisaka ku fika eka 12 kumbe ehansi (a swi bohi leswaku u tirhisa tikholomu hinkwato ta 12 leti kumekaka).
<div class="container">
<div class="row">
<div class="col-sm-9">
Level 1: .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>
Ti mixins ta Sass
Loko u tirhisa tifayela ta Sass ta xihlovo xa Bootstrap, u na nhlawulo wo tirhisa swilo leswi cinca-cincaka swa Sass na mixins ku tumbuluxa swivumbeko swa matluka swa ntolovelo, swa semantiki, na leswi hlamulaka. Titlilasi ta hina ta gridi leti hlamuseriweke ka ha ri emahlweni ti tirhisa swilo leswi fanaka leswi cinca-cincaka na ti-mixin ku nyika nxaxamelo hinkwawo wa titlilasi leti lunghekeleke ku tirhisiwa eka swivumbeko leswi hlamulaka hi ku hatlisa.
Swilo leswi cinca-cincaka
Swilo leswi cinca-cincaka ni mimepe swi kombisa nhlayo ya tikholomu, ku anama ka gutter ni ndhawu leyi ku vutisiwaka eka yona hi swihaxa-mahungu leyi ku nga ta sungula tikholomu leti papamalaka eka yona. Hi tirhisa leswi ku tumbuluxa titlilasi ta gridi leti hlamuseriweke ka ha ri emahlweni leti tsariweke laha henhla, xikan’we na ti mixins ta ntolovelo leti xaxametiweke laha hansi.
$grid-columns: 12;
$grid-gutter-width: 30px;
$grid-breakpoints: (
// Extra small screen / phone
xs: 0,
// Small screen / phone
sm: 576px,
// Medium screen / tablet
md: 768px,
// Large screen / desktop
lg: 992px,
// Extra large screen / wide desktop
xl: 1200px
);
$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px
);
Ti- mixins
Mixins yi tirhisiwa swin’we na swilo leswi cinca-cincaka swa gridi ku tumbuluxa CSS ya semantiki ya tikholomu ta gridi yin’wana na yin’wana.
// 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();
@include make-col($size, $columns: $grid-columns);
// Get fancy by offsetting, or changing the sort order
@include make-col-offset($size, $columns: $grid-columns);
Xikombiso xa matirhiselo
U nga cinca swilo leswi cinca-cincaka eka mimpimo ya wena ya ntolovelo, kumbe u tirhisa ntsena ti-mixin hi mimpimo ya tona ya ntolovelo. Hi lexi xikombiso xa ku tirhisa swiletelo swa ntolovelo ku endla xivumbeko xa tikholomu timbirhi lexi nga ni xivandla exikarhi.
.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>
Ku endla leswaku gridi yi va leyi u yi lavaka
Hi ku tirhisa swilo swa hina swa Sass swa gridi leswi akiweke endzeni na mimepe, swa koteka ku lulamisa hi ku helela titlilasi ta gridi leti hlamuseriweke ka ha ri emahlweni. Cinca nhlayo ya ti-tier, tidimenxini ta xivutiso xa midiya, ni ku anama ka xikhomela—kutani u tlhela u hlengeleta.
Tikholomu na swidziva
Nhlayo ya tikholomu ta gridi yi nga cinciwa hi ku tirhisa swilo leswi cinca-cincaka swa Sass. $grid-columns
yi tirhisiwa ku humesa ku anama (hi tiphesente) ta kholomo yin’wana na yin’wana loko yi ri karhi $grid-gutter-width
yi veka ku anama ka ti gutters ta kholomo.
$grid-columns: 12 !default;
$grid-gutter-width: 30px !default;
Swiyenge swa gridi
Ku hundza eka tikholomu hi toxe, u nga ha tlhela u cinca nhlayo ya swiphemu swa giridi. Loko u lava ntsena mune wa ti-grid tiers, u ta pfuxeta $grid-breakpoints
and $container-max-widths
eka nchumu wo fana na lowu:
$grid-breakpoints: (
xs: 0,
sm: 480px,
md: 768px,
lg: 1024px
);
$container-max-widths: (
sm: 420px,
md: 720px,
lg: 960px
);
Loko u endla ku cinca kwihi na kwihi eka swilo leswi cinca-cincaka swa Sass kumbe mimepe, u ta lava ku hlayisa ku cinca ka wena ni ku hlengeleta nakambe. Ku endla tano swi ta humesa sete leyintshwa ya titlilasi ta gridi leti hlamuseriweke ka ha ri emahlweni ta ku anama ka tikholomu, ti-offset, na ku oda. Switirhisiwa swa ku vonakala leswi hlamulaka na swona swi ta pfuxetiwa ku tirhisa tindhawu to wisa ta ntolovelo. Tiyisisa leswaku u veka mimpimo ya gridi eka px
(hayi rem
, em
, kumbe %
).