sîstema Grid
Bi saya pergalek diwanzdeh stûnan, pênc rêzikên xwerû yên bersivdar, guhêrbar û mixînên Sass, û bi dehan çînên pêşwextkirî, tora flexbox-a meya yekem-mobîl a hêzdar bikar bînin da ku sêwiranên ji her şekl û mezinahiyê ava bikin.
Pergala torê ya Bootstrap rêzek konteyneran, rêzik û stûnan bikar tîne da ku naverok saz û rêz bike. Ew bi flexbox ve hatî çêkirin û bi tevahî bersivdar e. Li jêr mînakek û nihêrînek kûr heye ku meriv çawa tevna hev dike.
Nû bi flexbox re an nizanin? Vê rêberê flexbox-ê ya CSS Tricks ji bo paşnav, termînolojî, rêbername, û perçeyên kodê bixwînin.
<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>
Mînaka li jor sê stûnên bi firehiya wekhev li ser cîhazên piçûk, navîn, mezin û zêde mezin bi karanîna çînên tora meya pêşwextkirî diafirîne. Ew stûn di nav rûpelê de bi dêûbav re têne navend kirin .container
.
Bi şikandina wê, li vir çawa dixebite:
- Konteyner amûrek peyda dike ku naverok û horizontî naverokên malpera we dakêşin. Ji
.container
bo firehiyek pixelek bersivdar an.container-fluid
ji bowidth: 100%
hemî pîvanên dîmenderê û cîhazê bikar bînin. - Rêz ji bo stûnan pêçan in.
padding
Ji bo kontrolkirina cîhê di navbera wan de her stûnek horizontî heye (ku jê re goşt tê gotin). Dûv re evpadding
yek li ser rêzên bi margîneyên neyînî tê berevajîkirin. Bi vî rengî, hemî naveroka di stûnên we de bi dîtbarî li milê çepê têne rêz kirin. - Di sêwirana torê de, naverok divê di nav stûnan de were danîn û tenê stûn dikarin yekser zarokên rêzikan bin.
- Bi saya flexbox, stûnên torê yên bêyî diyarkirî
width
dê bixweber wekî stûnên firehiya yeksan werin sêwirandin. Mînakî, çar nimûneyên.col-sm
dê her yek bixweber ji xala veqetînê ya piçûk û jor 25% fireh bin. Ji bo nimûneyên bêtir li beşa stûnên xweser- sazkirinê binêrin. - Dersên stûnê hejmara stûnên ku hûn dixwazin ji 12-yên gengaz ên di rêzê de bikar bînin destnîşan dikin. Ji ber vê yekê, heke hûn sê stûnên bi firehiya wekhev dixwazin, hûn dikarin bikar bînin
.col-4
. - Stûnên
width
s bi sedî têne danîn, ji ber vê yekê ew her gav li gorî hêmana dêûbavê xwe şil û mezin in. - Stûnên horizontî hene
padding
da ku di navbera stûnên takekesî de gemaran biafirînin, lêbelê, hûn dikarinmargin
ji rêzan ûpadding
ji stûnên bi.no-gutters
ser.row
. - Ji bo ku torê bibe bersiv, pênc xalên şikestinê hene, yek ji bo her xala veqetandinê ya bersivdar : Hemî xalên veqetandinê (piçûk zêde), piçûk, navîn, mezin û zêde mezin.
- Xalên veqetandinê yên torê li ser bingeha pirsên medyaya herî kêm fireh in, tê vê wateyê ku ew li ser wê xala veqetînê û hemî yên li jor wê bicîh dibin (mînak,
.col-sm-4
ji bo cîhazên piçûk, navîn, mezin û zêde mezin derbas dibe, lê ne xalaxs
veqetînê ya yekem). - Hûn dikarin ji bo nîşankirina bêtir semantîk dersên torê yên pêşwextkirî (wek
.col-4
) an Sass mîksên bikar bînin.
Hay ji sînorkirin û xeletiyên li dora flexbox-ê hebin , mîna nebûna karanîna hin hêmanên HTML-ê wekî konteynerên nerm .
Dema ku Bootstrap em
s an rem
s-yê ji bo danasîna pir pîvanan bikar tîne, px
s ji bo xalên veqetandinê û firehiyên konteynerê têne bikar anîn. Ji ber ku firehiya porta dîtinê bi pixel e û bi mezinahiya tîpan nayê guhertin .
Binêrin ka aliyên pergala tora Bootstrap-ê li ser gelek cîhazên bi tabloyek bikêr çawa dixebitin.
Zêde piçûk <576px |
Piçûk ≥576px |
Navîn ≥768px |
Mezin ≥992px |
Zêde mezin ≥1200px |
|
---|---|---|---|---|---|
Firehiya konteynerê herî zêde | Tune (otomatîk) | 540px | 720px | 960px | 1140px |
Pêşgira dersê | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
# stûnan | 12 | ||||
Firehiya gulikê | 30px (15px li her aliyê stûnekê) | ||||
Nestable | Erê | ||||
Siparîşa stûnê | Erê |
Ji bo mezinbûna stûnê ya hêsan bêyî çînek jimarekirî ya eşkere mîna .col-sm-6
.
Mînakî, li vir du sêwiranên torê hene ku li ser her amûr û dîmenderê, ji xs
heya xl
. Ji bo her xala veqetandinê ya ku hûn hewce ne, hejmarek dersên yekîneyek kêm zêde bikin û her stûn dê heman firehiyê be.
<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>
Stûnên bi firehiya wekhev dikarin di çend rêzan de werin şikandin, lê xeletiyek Safari flexbox hebû ku rê li ber vê yekê girt ku bêyî eşkere flex-basis
an border
. Ji bo guhertoyên gerokên kevntir rêgir hene, lê heke hûn nûve bin divê ew ne hewce bin.
<div class="container">
<div class="row">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="w-100"></div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
Vesazkirina otomatîkî ya ji bo stûnên tora flexbox di heman demê de tê vê wateyê ku hûn dikarin firehiya yek stûnê destnîşan bikin û stûnên xwişk û bira bixweber li dora wê mezin bibin. Hûn dikarin çînên torê yên pêşwextkirî (wek ku li jêr tê xuyang kirin), mîksên torê, an firehiyên hundurîn bikar bînin. Bala xwe bidinê ku stûnên din dê mezinahiya stûna navendê nebe.
<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>
Dersan bikar bînin col-{breakpoint}-auto
ku stûnan li gorî firehiya xwezayî ya naveroka wan mezin bikin.
<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>
.w-100
Bi danîna cîhê ku hûn dixwazin stûn di xêzek nû de biherikin stûnên wekhev-fireh ên ku gelek rêzan vedigirin biafirînin. Bi tevlîhevkirina .w-100
hin amûrên dîmendera bersivdar veqetiyan bikin.
<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>
Tora Bootstrap ji bo avakirina sêwiranên bersivdar ên tevlihev pênc rêzikên dersên diyarkirî vedihewîne. Mezinahiya stûnên xwe li ser cîhazên piçûk, piçûk, navîn, mezin, an zêde mezin lê hûn guncaw dibînin, xweş bikin.
Ji bo torên ku ji cîhazên herî piçûk heya herî mezin yek in, çînên .col
û bikar bînin. .col-*
Dema ku hûn hewceyê stûnek bi taybetî bi mezinahî hewce bikin, çînek hejmarkirî diyar bikin; wekî din, xwe azad hîs bikin ku pê ve girêdayî bin .col
.
<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>
Bi karanîna yek komek .col-sm-*
çînan, hûn dikarin pergalek torê ya bingehîn biafirînin ku berî ku bibe horizontî bi xala veqetandinê ya piçûk ( sm
) dest pê dike.
<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>
Ma hûn naxwazin stûnên we bi tenê di hin rêzikên torê de werin berhev kirin? Li gorî hewcedariyê ji bo her rêzek hevbendiyek çînên cûda bikar bînin. Ji bo ramanek çêtir ka ew hemî çawa dixebite, mînaka jêrîn bibînin.
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
<div class="col-12 col-md-8">.col-12 .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>
Karûbarên lihevkirina flexbox bikar bînin da ku stûnên vertîkal û horizontî li hev bikin.
<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>
<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>
Kevirên di navbera stûnan de di çînên meya tora meya pêşwext de dikarin bi .no-gutters
. margin
Ev s -yên neyînî .row
û horizontî padding
ji hemî stûnên zarokan ên yekser radike.
Li vir koda çavkaniyê ji bo afirandina van şêwazan e. Bala xwe bidinê ku guheztinên stûnê tenê li stûnên zarokan ên yekem têne veguheztin û bi rêya hilbijêra taybetmendiyê têne armanc kirin . Digel ku ev hilbijarkek taybetîtir çêdike, lêdana stûnê hîn jî dikare bi karûbarên valahiyê re bêtir were xweş kirin .
Pêdivî ye ku sêwiranek qev-bi-qewim? Dêûbav .container
an bavêjin .container-fluid
.
Di pratîkê de, li vir çawa xuya dike. Têbînî ku hûn dikarin vê yekê bi hemî dersên torê yên pêşwextkirî yên din re bikar bînin (tevî firehiyên stûnê, rêzikên bersivdar, ji nû ve rêzkirin, û hêj bêtir).
<div class="row no-gutters">
<div class="col-12 col-sm-6 col-md-8">.col-12 .col-sm-6 .col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
Ger ji 12 stûnan zêdetir di nav rêzek yekane de werin danîn, her komek stûnên zêde dê, wekî yekînek, li ser rêzek nû biqelişe.
Ji ber ku 9 + 4 = 13 > 12, ev div-berfirehiya 4 stûnan li ser xeteke nû wekî yekînek hevgirtî tê pêçandin.
paşîn li ser xeta nû berdewam dikin.
<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>
Şikandina stûnan ji rêzek nû ya di flexbox de hackek piçûk hewce dike: li ku width: 100%
derê hûn dixwazin stûnên xwe li xêzek nû biqewirînin hêmanek zêde bikin. Bi gelemperî ev bi gelek .row
s pêk tê, lê her rêbazek pêkanînê nikare vê yekê hesab bike.
<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>
Her weha hûn dikarin vê veqetandinê li ser xalên veqetandinê yên taybetî bi karûbarên meya nîşana bersivdar bicîh bikin .
<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>
Ji .order-
bo kontrolkirina rêzika dîtbarî ya naveroka xwe ders bikar bînin. Van ders bersivdar in, ji ber vê yekê hûn dikarin xala veqetandinê destnîşan bikin order
(mînak, .order-1.order-md-2
). Piştgiriya ji bo 1
her 12
pênc rêzikên torê vedihewîne.
<div class="container">
<div class="row">
<div class="col">
First, but unordered
</div>
<div class="col order-12">
Second, but last
</div>
<div class="col order-1">
Third, but first
</div>
</div>
</div>
Di heman demê de bersivdar .order-first
û .order-last
çînên ku bi rêzdarî order
bi sepandin order: -1
û order: 13
( order: $columns + 1
), hêmanekê diguherînin hene. .order-*
Li gorî hewcedariyê, ev çîn dikarin bi çînên hejmarkirî re jî werin tevlihev kirin .
<div class="container">
<div class="row">
<div class="col order-last">
First, but last
</div>
<div class="col">
Second, but unordered
</div>
<div class="col order-first">
Third, but first
</div>
</div>
</div>
Hûn dikarin stûnên torê bi du awayan veqetînin: .offset-
dersên torê yên bersivdar û karûbarên me yên marjînal . Çînên torê têne mezin kirin ku stûnan li hev bikin dema ku marjînal ji bo sêwiranên bilez ên ku firehiya veqetandinê guhêrbar e bikêrtir in.
Bi karanîna dersan stûnan ber bi rastê ve .offset-md-*
bigerînin. Van dersan marjîna çepê ya stûnê bi *
stûnan zêde dikin. Mînakî, .offset-md-4
li .col-md-4
ser çar stûnan digere.
<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>
Ji bilî paqijkirina stûnê li nuqteyên veqetandî yên bersivdar, dibe ku hûn hewce ne ku guheztinan ji nû ve bikin. Vê di çalakiyê de di mînaka torê de bibînin .
<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>
Bi çûyîna flexbox-ê di v4 de, hûn dikarin karûbarên marjînal bikar bînin mîna .mr-auto
ku stûnên xwişk û birayên xwe ji hev dûr bikin.
<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>
Ji bo ku hûn naveroka xwe bi tora xwerû re nehêlin, di nav stûnek heyî de stûnek nû .row
û komeke zêde bikin . Rêzên hêlînkirî divê komek stûnên ku ji 12 an kêmtir zêde dibin tê de bin (ne hewce ye ku hûn hemî 12 stûnên berdest bikar bînin)..col-sm-*
.col-sm-*
<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>
Dema ku pelên Sass-a çavkaniya Bootstrap-ê bikar tînin, vebijarka we heye ku hûn guhêrbar û mixînên Sass bikar bînin da ku nexşeyên rûpelê yên xwerû, semantîk û bersivdar biafirînin. Dersên meyên torê yên pêşwextkirî van heman guhêrbar û mixîn bikar tînin da ku ji bo sêwiranên bilez bersivdar komek dersên amade-bikarhêner peyda bikin.
Guherîn û nexşe hejmara stûnan, firehiya gemarê, û xala pirsiyariya medyayê ya ku tê de dest bi stûnên herikîn dikin diyar dikin. Em vana bikar tînin da ku çînên tora pêşwext ên ku li jor hatine belge kirin, û her weha ji bo mîksên xwerû yên ku li jêr hatine destnîşan kirin çêbikin.
Miksîn bi guhêrbarên torê re têne bikar anîn da ku CSS-ya semantîk ji bo stûnên torê yên kesane çêbikin.
Hûn dikarin guherbaran li gorî nirxên xweya xwerû biguhezînin, an jî tenê mîksan bi nirxên xweyên xwerû bikar bînin. Li vir mînakek karanîna mîhengên xwerû heye ku hûn nexşeyek du-stûnî bi navberek veqetandî çêbikin.
<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>
Bi karanîna guhêrbar û nexşeyên tora Sass-a me ya çêkirî, gengaz e ku meriv bi tevahî dersên torê yên pêşwextkirî xweş bike. Hejmara rêzan, pîvanên pirsa medyayê, û firehiyên konteynerê biguhezînin - dûv re ji nû ve berhev bikin.
Hejmara stûnên torê dikare bi guhêrbarên Sass ve were guheztin. $grid-columns
ji bo hilberandina firehiyên (ji sedî) her stûnek kesane tê bikar anîn, di heman demê de destûr dide ku firehiyên xala veqetandinê yên ku li ser hev û ji bo gûzên stûnê bi rengek $grid-gutter-width
wekhev têne dabeş kirin .padding-left
padding-right
Ji stûnan bi xwe re derbas bibin, hûn dikarin hejmara rêzikên torê jî xweş bikin. Ger we tenê çar qatên torê dixwest, hûn ê nûve bikin $grid-breakpoints
û bi vî rengî nûve bikin $container-max-widths
:
Dema ku hûn guhartinan li guhêrbar an nexşeyên Sass-ê bikin, hûn hewce ne ku guheztinên xwe hilînin û ji nû ve berhev bikin. Bi kirina vê yekê dê komek nû ya çînên torê yên pêşwextkirî ji bo firehiyên stûn, veqetandin, û rêzkirinê derxe. Karûbarên xuyangiya bersivdar jî dê werin nûve kirin da ku xalên veqetandinê yên xwerû bikar bînin. Bawer bikin ku nirxên torê di nav px
(ne rem
, em
, an %
) de bicîh bikin.