Sirna giiridii
Sirna tarjaa kudha lamaa, sadarkaa deebii durtii ja'a, jijjiiramoota Sass fi mixins, fi gita durtii ibsaman kudhanootaan lakkaa'amaniif galata, qindaa'inoota boca fi guddina hunda ijaaruuf tarjaa flexbox humna guddaa qabu keenya fayyadami.
Fakkeenya
Sirni tarjaa Bootstrap qabiyyee qindeessuu fi qindeessuuf tartiiba qabduu, tarreewwanii fi tarjaawwan fayyadama. Flexbox waliin kan ijaarame yoo ta'u guutummaatti deebii kan kennudha. Armaan gaditti fakkeenyaa fi ibsa gadi fageenyaa akkaataa sirni giiridii walitti dhufuuf kennameera.
<div class="container">
<div class="row">
<div class="col">
Column
</div>
<div class="col">
Column
</div>
<div class="col">
Column
</div>
</div>
</div>
Fakkeenyi armaan olii tarjaawwan bal'ina walqixaa sadii meeshaalee fi buufatawwan ilaalchaa hunda irratti gita tarjaa keenya dursee ibsaman fayyadamuun uuma. Tarjaawwan sun fuula keessatti warra waliin giddugaleessa ta'u .container
.
Akkaataa itti hojjetu
Caccabsuun, sirni giiridii akkamitti akka walitti dhufu kunooti:
-
Giriidiin keenya qabxiiwwan ciccituu deebii kennan ja'a ni deeggara . Qabxiileen cabsuu gaaffii miidiyaa irratti hundaa'u
min-width
, jechuunis qabxii cabsuu sanaa fi kanneen isa olii hunda irratti dhiibbaa geessisu (fkn, , , , , fi.col-sm-4
irratti raawwatiinsa qaba ). Kana jechuun safara qabduu fi tarjaa fi amala tokkoon tokkoo tuqaa cabbiitiin to'achuu dandeessa.sm
md
lg
xl
xxl
-
Qabduu giddugaleessaa fi qajeelaan qabiyyee kee pad. Bal'ina piikselii
.container
deebii kennuudhaaf, bal'ina.container-fluid
ilaalchaawidth: 100%
fi meeshaalee hundaaf, ykn qabduu deebii kennuuf (fkn,.container-md
) walnyaatinsa dhangala'aa fi bal'ina piikselii fayyadami. -
Tarreewwan tarjaawwaniif marfata. Tokkoon tokkoon tarjaa
padding
iddoo isaan gidduu jiru to’achuuf horizontal (gutter jedhama) qaba. Kunispadding
sana booda tarreewwan marga negaatiivii qaban irratti qabiyyeen tarjaawwan kee keessa jiru mul'ataan gama bitaa gadi akka qindaa'u mirkaneessuuf faallaa ta'a. Tarreewwan akkasumas gita fooyyessaa akka walfakkaatutti safara tarjaa hojii irra oolchuuf deeggaru fi gita gutter addaan fageenya qabiyyee kee jijjiiruuf. -
Tarreewwan haala nama ajaa'ibuun kan jijjiiramudha. Tarree tokkoof tarjaawwan unkaa 12 jiru, kunis walnyaatinsa elementoota adda addaa kanneen lakkoofsa tarjaa kamiyyuu dabarsan uumuuf si dandeessisa. Gitoota tarjaa lakkoofsa tarjaa unkaa span agarsiisu (fkn,
col-4
span afur).width
s dhibbeentaadhaan saagamu kanaaf yeroo hunda safara firaakshinii walfakkaataa qabda. -
Gutters akkasumas deebii kan kennan fi haala barbaadamuun kan jijjiiramudha. Gutter classes breakpoints hunda irratti ni argamu, hundi isaanii hamma margina fi padding spacing keenyaa wajjin wal fakkaatu . Guutaroota qajeeloo
.gx-*
gita waliin, gutter dhaabbataa.gy-*
, ykn gutter hunda gita waliin jijjiiri.g-*
..g-0
gutters balleessuufis ni argama. -
Jijjiiramoonni Sass, kaartaa, fi mixins giiridii humna. Yoo gitawwan tarjaa durtii ibsaman Bootstrap keessatti fayyadamuu hin barbaanne, madda tarjaa keenyaa Sass fayyadamuun kan kee mallattoo hiika caaluun uumuu dandeessa. Akkasumas jijjiiramoota Sass kana fayyadamuuf amaloota amala CSS tokko tokko hammachuudhaan daran siif jijjiiramaaf.
Daangaa fi dogongora naannoo flexbox jiru beekaa , akka qaamolee HTML tokko tokko akka qabduu flex fayyadamuu dadhabuu .
Filannoowwan giiridii
Sirni tarjaa Bootstrap qabxiilee cabsuu durtii ja'an hunda, fi qabxiilee cabsuu kamiyyuu ati dhuunfachiiftu irratti madaqsuu danda'a. Sadarkaaleen tarjaa durtii ja'an akka armaan gadiitti:
- Dabalata xiqqaa (xs) .
- Xiqqaa (sm) .
- Giddugaleessa (md) .
- Guddaa (lg) .
- Dabalata guddaa (xl) .
- Dabalataan guddaa (xxl) .
Akkuma armaan olitti ibsame, tokkoon tokkoon tuqaawwan cabbii kanaa qabduu mataa isaanii, durtii gita addaa, fi fooyyessitoota qabu. Akkaataa gingilchaan tuqaawwan cabbii kana qaxxaamuree jijjiiramu kunooti:
xs <576px jedhamuun beekama |
sm ≥576px ta’a |
md ≥768px ta’a |
lg ≥992px ta’a |
xl ≥1200px ta’a |
xxl ≥1400px ta’a |
|
---|---|---|---|---|---|---|
Konteenaramax-width |
Tokkollee hin jiru (auto) . | 540px ta'a | 720px ta'a | 960px ta'a | 1140px ta'a | 1320px ta'a |
Durtii gitaa | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
.col-xxl- |
# kan tarjaawwanii | 12. 12. | |||||
Bal'ina gutter | 1.5rem (.75rem bitaa fi mirgaa irratti) | |||||
Gutters aadaa | Eeyyee | |||||
Nestable kan ta'e | Eeyyee | |||||
Tartiiba tarree | Eeyyee |
Tarjaawwan ofumaan qindaa'uu
Gitaa lakkoofsa ifa ta'e malee akka .col-sm-6
.
Bal’ina walqixaa
Fakkeenyaaf, kunoo qindaa'inoota tarjaa lama kan meeshaa fi buufata ilaalchaa hunda irratti hojjetan, irraa xs
hanga xxl
. Tokkoon tokkoo tuqaa ciccitaa barbaadduuf lakkoofsa gita yuunitii hin qabne kamiyyuu dabaliiti tarjaan hundi bal'ina walfakkaataa ta'a.
<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>
Bal'ina tarjaa tokko saaguu
Ofumaan qindaa'ina tarjaawwan tarjaa flexbox akkasumas bal'ina tarjaa tokkoo saaguu fi tarjaawwan obbolaa ofumaan naannoo isaa guddina akka jijjiiran gochuu dandeessa jechuudha. Gitoota tarjaa durtii ibsaman (akkuma armaan gadii), makaa tarjaa, ykn bal'ina sarara keessaa fayyadamuu dandeessa. Hubadhu, tarjaawwan biroo bal'inni tarjaa giddugaleessaa maal iyyuu yoo ta'e hammangaa ni jijjiiru.
<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>
Qabiyyee bal'ina jijjiiramaa
col-{breakpoint}-auto
Tarjaawwan bal'ina uumamaa qabiyyee isaanii irratti hundaa'uun safaruuf gita fayyadami .
<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>
Kutaawwan deebii kennan
Giriidiin Bootstrap sadarkaa ja'a gita durtii ibsaman kanneen qindaa'inoota deebii walxaxaa ijaaruuf of keessatti qabata. Meeshaalee dabalataa xiqqaa, xiqqaa, giddu galeessaa, guddaa, ykn guddaa dabalataa irratti hammangaa tarjaawwan kee hamma barbaaddetti dhuunfachiisi.
Qabxii cabsuu hunda
Giriidota meeshaalee xiqqaa irraa hanga guddaatti walfakkaataniif, gitaalee .col
fi fayyadami. .col-*
Yeroo tarjaa hamma addaa barbaaddu gita lakkoofsa qabu ifteessi; yoo kana hin taane, .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>
Gara horizontal tti walitti tuulameera
Tuuta gitaa tokko fayyadamuun .col-sm-*
, sirna tarjaa bu'uuraa kan tuulamee jalqabee fi bakka cabbii xiqqaa ( ) irratti qajeelaa ta'u uumuu dandeessa 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>
Mix fi walsimsiisaa
Tarjaawwan kee salphaatti sadarkaa tarjaa tokko tokko keessatti akka tuulaman hin barbaadduu? Tokkoon tokkoo sadarkaaf akka barbaachisummaa isaatti walnyaatinsa gita adda addaa fayyadami. Akkaataa inni hundi itti hojjetu yaada fooyya'aa argachuuf fakkeenya armaan gadii ilaali.
<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>
Tarreewwan tarree
.row-cols-*
Lakkoofsa tarjaa qabiyyee fi qindaa'ina kee haala gaariin agarsiisan saffisaan saaguuf gita deebii kennu fayyadami . Gitoonni idilee .col-*
tarjaawwan dhuunfaa irratti hojii irra kan oolan yoo ta'u (fkn, .col-md-4
), gitoonni tarjaawwan tarree .row
akka durtii tarjaawwan qabataniif warra irratti saagamu. Si waliin .row-cols-auto
tarjaawwan bal'ina uumamaa isaanii kennuu dandeessa.
Gitoota tarjaa tarree kana fayyadamii saffisaan qindaa'inoota tarjaa bu'uuraa uumuuf ykn qindaa'inoota kaardii kee to'achuuf fi yeroo sadarkaa tarjaa irratti barbaachisu irra darbuuf.
<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>
Akkasumas Sass mixin isa waliin jiru fayyadamuu dandeessu, 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);
}
}
Koonyaa gochuu
Qabiyyee kee tarjaa durtii waliin man'ee gochuuf, tarjaa haaraa .row
fi tuuta .col-sm-*
tarjaa jiru keessaa dabali .col-sm-*
. Tarreewwan man'ee tuuta tarjaawwan hanga 12 fi isaa gadi ida'an of keessatti qabachuu qabu (tarjaawwan 12 jiran hunda fayyadamuun hin barbaachisu).
<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 jedhama
Yeroo faayilii Sass madda Bootstrap fayyadamtu, jijjiiramoota Sass fi mixins fayyadamuun qindaa'inoota fuula amala, hiika, fi deebii uumuuf filannoo qabda. Gitoota tarjaa keenya dursanii ibsaman jijjiiramootaa fi makaawwan walfakkaatan kana fayyadamuun guutummaa tuuta gitaalee fayyadamaaf qophaa'oo qindaa'inoota deebii saffisaa kennuudhaaf dhiyeessuu.
Jijjiiramoota
Jijjiiramoonni fi kaartoonni lakkoofsa tarjaa, bal'ina gutter, fi qabxii gaaffii miidiyaa tarjaawwan lola'an itti jalqabu murteessu. Kanneen gita tarjaa durtii ibsaman armaan olitti galmaa'an uumuuf, akkasumas makaa amala armaan gadii tarreeffamaniif fayyadamna.
$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 jedhaman
Miksiin jijjiiramoota tarjaa waliin ta'uun CSS hiika tarjaa tarjaa dhuunfaa uumuuf fayyadamu.
// 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);
Fakkeenya fayyadama
Jijjiiramoota gara gatiiwwan amala mataa keetii fooyyessuu dandeessa, ykn makaawwan gatiiwwan durtii isaanii waliin qofa fayyadamuu dandeessa. Fakkeenyi qindaa'inoota durtii fayyadamuun qindaa'ina tarjaa lamaa qaawwa gidduu jiru uumuuf kunooti.
.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>
Giriidii dhuunfachuu
Jijjiiramootaa fi kaartaa Sass tarjaa ijaarame keenya fayyadamuun, gita tarjaa durtii ibsaman guutummaatti dhuunfachuun ni danda'ama. Lakkoofsa sadarkaa, safara gaaffii miidiyaa, fi bal'ina qabduu jijjiiri—sana booda irra deebi'ii qindeessii.
Utubaa fi gutters
Lakkoofsi tarjaawwan tarjaa karaa jijjiiramoota Sass fooyya'uu danda'a. $grid-columns
bal'ina (dhibbeentaadhaan) tokkoon tokkoo tarjaa dhuunfaa uumuuf fayyadama yeroo $grid-gutter-width
bal'ina gutters tarjaa saaga.
$grid-columns: 12 !default;
$grid-gutter-width: 1.5rem !default;
Sadarkaa giiridii
Tarjaawwan ofii isaanii bira darbitee, lakkoofsa sadarkaawwan tarjaa dhuunfachuus dandeessa. Osoo sadarkaa giiridii afur qofa barbaadde, $grid-breakpoints
fi $container-max-widths
gara waan akka kanaatti fooyyessita:
$grid-breakpoints: (
xs: 0,
sm: 480px,
md: 768px,
lg: 1024px
);
$container-max-widths: (
sm: 420px,
md: 720px,
lg: 960px
);
Jijjiiramoota Sass ykn kaartaa irratti jijjiirama kamiyyuu yeroo gootu, jijjiiramoota kee saaguu fi irra deebi'ii qindeessuu si barbaachisa. Kana gochuun tuuta haaraa gita tarjaa durtii ibsame bal'ina tarjaa, ofseetota, fi tartiibaaf ni baasa. Faayidaaleen mul'achuu deebii kennanis qabxiiwwan cabsuu amala fayyadamuuf ni fooyya'u. px
Gatii tarjaa (hin rem
, em
, ykn ) keessatti saaguu mirkaneessi %
.