Eto akoj
Lo ẹrọ flexbox alagbeka ti o lagbara-akọkọ lati kọ awọn ipilẹ ti gbogbo awọn nitobi ati awọn iwọn ọpẹ si eto ọwọn mejila, awọn ipele idahun aiyipada marun, awọn oniyipada Sass ati awọn apopọ, ati awọn dosinni ti awọn kilasi asọtẹlẹ.
Bawo ni o ṣe n ṣiṣẹ
Eto akoj Bootstrap nlo oniruuru awọn apoti, awọn ori ila, ati awọn ọwọn lati ṣeto ati mö akoonu. O ti kọ pẹlu flexbox ati pe o jẹ idahun ni kikun. Ni isalẹ jẹ apẹẹrẹ ati iwo jinlẹ ni bii akoj wa papọ.
Titun si tabi aimọ pẹlu flexbox? Ka itọsọna CSS Tricks flexbox yii fun abẹlẹ, ọrọ-ọrọ, awọn itọnisọna, ati awọn snippets koodu.
<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>
Apẹẹrẹ ti o wa loke ṣẹda awọn ọwọn iwọn dogba mẹta lori kekere, alabọde, nla, ati awọn ẹrọ nla ni lilo awọn kilasi akoj ti a ti yan tẹlẹ. Awọn ọwọn yẹn wa ni aarin si oju-iwe pẹlu obi .container
.
Bibalẹ, eyi ni bii o ṣe n ṣiṣẹ:
- Awọn apoti pese ọna lati aarin ati petele paadi awọn akoonu ti aaye rẹ. Lo
.container
fun iwọn piksẹli ti o ṣe idahun tabi.container-fluid
funwidth: 100%
kọja gbogbo wiwo ati awọn iwọn ẹrọ. - Awọn ori ila ni o wa wrappers fun awọn ọwọn. Ọwọn kọọkan ni petele
padding
(ti a npe ni gutter) fun iṣakoso aaye laarin wọn. Eyipadding
jẹ ki o tako lori awọn ori ila pẹlu awọn ala odi. Ni ọna yii, gbogbo akoonu ti o wa ninu awọn ọwọn rẹ ti wa ni oju ti o wa ni isalẹ apa osi. - Ni ipilẹ akoj, akoonu gbọdọ wa ni gbe laarin awọn ọwọn ati awọn ọwọn nikan le jẹ ọmọ awọn ori ila lẹsẹkẹsẹ.
- Ṣeun si flexbox, awọn ọwọn akoj laisi pato kan
width
yoo ṣe iṣeto ni adaṣe bi awọn ọwọn iwọn dogba. Fun apẹẹrẹ, awọn iṣẹlẹ mẹrin ti.col-sm
yoo kọọkan laifọwọyi jẹ 25% fife lati aaye fifọ kekere ati si oke. Wo apakan awọn ọwọn iṣeto-laifọwọyi fun awọn apẹẹrẹ diẹ sii. - Awọn kilasi ọwọn tọkasi nọmba awọn ọwọn ti o fẹ lati lo ninu 12 ti o ṣeeṣe fun ila kan. Nitorinaa, ti o ba fẹ awọn ọwọn iwọn dogba mẹta kọja, o le lo
.col-4
. - Awọn iwe
width
s ti ṣeto ni awọn ipin ogorun, nitorina wọn jẹ ito nigbagbogbo ati iwọn ni ibatan si eroja obi wọn. - Awọn ọwọn ni petele
padding
lati ṣẹda awọn gọta laarin awọn ọwọn kọọkan, sibẹsibẹ, o le yọ kuro lati awọnmargin
ori ila atipadding
lati awọn ọwọn pẹlu.no-gutters
lori.row
. - Lati jẹ ki awọn akoj idahun, nibẹ ni o wa marun akoj breakpoints, ọkan fun kọọkan idahun breakpoint : gbogbo breakpoints (afikun kekere), kekere, alabọde, tobi, ati afikun tobi.
- Awọn aaye fifọ Grid da lori awọn ibeere media iwọn ti o kere ju, afipamo pe wọn kan si aaye fifọ kan ati gbogbo awọn ti o wa loke rẹ (fun apẹẹrẹ,
.col-sm-4
kan si awọn ẹrọ kekere, alabọde, nla, ati awọn ẹrọ nla, ṣugbọn kii ṣe aayexs
fifọ akọkọ). - O le lo awọn kilasi akoj ti a ti sọ tẹlẹ (bii
.col-4
) tabi awọn alapọpọ Sass fun isamisi atunmọ diẹ sii.
Jẹ mọ ti awọn idiwọn ati idun ni ayika flexbox , bi awọn ailagbara lati lo diẹ ninu awọn HTML eroja bi Flex awọn apoti .
Awọn aṣayan akoj
Lakoko ti Bootstrap nlo em
s tabi rem
s fun asọye awọn titobi pupọ julọ, px
awọn s ni a lo fun awọn aaye fifọ akoj ati awọn iwọn eiyan. Eyi jẹ nitori iwọn wiwo wiwo wa ni awọn piksẹli ati pe ko yipada pẹlu iwọn fonti .
Wo bii awọn abala ti eto akoj Bootstrap ṣe n ṣiṣẹ kọja awọn ẹrọ lọpọlọpọ pẹlu tabili ọwọ.
Afikun kekere <576px |
Kekere ≥576px |
Alabọde ≥768px |
Nla ≥992px |
Afikun nla ≥1200px |
|
---|---|---|---|---|---|
Max eiyan iwọn | Ko si (laifọwọyi) | 540px | 720px | 960px | 1140px |
Ipilẹṣẹ kilasi | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
# ti awọn ọwọn | 12 | ||||
Ibú gota | 30px (15px ni ẹgbẹ kọọkan ti iwe kan) | ||||
Idurosinsin | Bẹẹni | ||||
Pipaṣẹ iwe | Bẹẹni |
Awọn ọwọn iṣeto-laifọwọyi
Lo awọn kilasi ọwọn-fifọ-pato fun iwọn awọn ọwọn ti o rọrun laisi kilasi nọmba ti o fojuhan bii .col-sm-6
.
Iwọn-dogba
Fun apẹẹrẹ, nibi ni awọn ipilẹ akoj meji ti o kan gbogbo ẹrọ ati ibudo wiwo, lati xs
si xl
. Ṣafikun nọmba eyikeyi ti awọn kilasi-kere-kere fun aaye fifọ kọọkan ti o nilo ati gbogbo iwe yoo jẹ iwọn kanna.
<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>
Dogba-iwọn olona-ila
Ṣẹda awọn ọwọn iwọn dogba ti o gun awọn laini pupọ nipa fifi sii .w-100
ibi ti o fẹ ki awọn ọwọn ya si laini titun kan. Jẹ ki awọn isinmi jẹ idahun nipa dapọ .w-100
pẹlu diẹ ninu awọn ohun elo ifihan idahun .
Kokoro flexbox Safari kan wa ti o ṣe idiwọ eyi lati ṣiṣẹ laisi fojuhan flex-basis
tabi border
. Awọn agbegbe iṣẹ wa fun awọn ẹya aṣawakiri agbalagba, ṣugbọn wọn ko yẹ ki o ṣe pataki ti awọn aṣawakiri ibi-afẹde rẹ ko ba ṣubu sinu awọn ẹya buggy.
<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>
Ṣiṣeto iwọn ọwọn kan
Ipilẹ-laifọwọyi fun awọn ọwọn akoj flexbox tun tumọ si pe o le ṣeto iwọn ti iwe kan ki o jẹ ki awọn ọwọn arakunrin ṣe atunṣe laifọwọyi ni ayika rẹ. O le lo awọn kilasi akoj ti a ti sọ tẹlẹ (gẹgẹbi o ṣe han ni isalẹ), awọn alapọpọ akoj, tabi awọn iwọn ila. Ṣe akiyesi pe awọn ọwọn miiran yoo tun iwọn laibikita iwọn ti iwe aarin.
<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>
Ayipada akoonu iwọn
Lo col-{breakpoint}-auto
awọn kilasi si iwọn awọn ọwọn ti o da lori iwọn adayeba ti akoonu wọn.
<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>
Awọn kilasi idahun
Akoj Bootstrap pẹlu awọn ipele marun ti awọn kilasi ti a ti yan tẹlẹ fun kikọ awọn ipilẹ idahun idiju. Ṣe akanṣe iwọn awọn ọwọn rẹ lori afikun kekere, kekere, alabọde, nla, tabi awọn ẹrọ nla ni afikun sibẹsibẹ o rii pe o yẹ.
Gbogbo breakpoints
Fun awọn grids ti o jẹ kanna lati awọn ẹrọ ti o kere julọ si ti o tobi julọ, lo awọn .col
ati .col-*
awọn kilasi. Pato kilasi ti o ni nọmba nigbati o nilo iwe ti o ni iwọn pataki; bibẹkọ ti, lero free lati Stick si .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>
Tolera si petele
Lilo awọn .col-sm-*
kilasi kan ṣoṣo, o le ṣẹda eto akoj ipilẹ kan ti o bẹrẹ ni akopọ ati di petele ni aaye fifọ kekere ( 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>
Illa ati baramu
Ṣe o ko fẹ ki awọn ọwọn rẹ ni akopọ ni diẹ ninu awọn ipele akoj? Lo apapo awọn kilasi oriṣiriṣi fun ipele kọọkan bi o ṣe nilo. Wo apẹẹrẹ ni isalẹ fun imọran ti o dara julọ ti bii gbogbo rẹ ṣe n ṣiṣẹ.
<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>
Awọn gutters
Awọn gutters le ṣe atunṣe ni idahun nipasẹ padding-padding-padding ati awọn kilasi IwUlO ala odi. Lati yi awọn gọọti pada ni ọna ti a fifun, so IwUlO ala odi kan pọ lori .row
ati awọn ohun elo padding ti o baamu lori .col
s. Obi .container
tabi .container-fluid
obi le nilo lati ṣatunṣe paapaa lati yago fun iṣan omi aifẹ, ni lilo ohun elo padding tun baamu.
Eyi ni apẹẹrẹ ti isọdi akoj Bootstrap ni aaye fifọ nla ( lg
) ati loke. A ti pọ si .col
padding pẹlu .px-lg-5
, koju iyẹn pẹlu .mx-lg-n5
lori obi .row
ati lẹhinna tunse .container
murasilẹ pẹlu .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>
Awọn ọwọn ila
Lo awọn kilasi idahun .row-cols-*
lati ṣeto nọmba awọn ọwọn ti o dara julọ fun akoonu ati ifilelẹ rẹ. Lakoko ti awọn kilasi deede .col-*
kan si awọn ọwọn kọọkan (fun apẹẹrẹ, .col-md-4
), awọn kilasi ori ila ti ṣeto lori obi .row
bi ọna abuja.
Lo awọn kilasi awọn ọwọn ila wọnyi lati yara ṣẹda awọn ipilẹ akoj ipilẹ tabi lati ṣakoso awọn ipalemo kaadi rẹ.
<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>
O tun le lo Sass mixin ti o tẹle, 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);
}
}
Titete
Lo awọn ohun elo titete apoti flexbox lati so awọn ọwọn ni inaro ati petele. Internet Explorer 10-11 ko ṣe atilẹyin titete inaro ti awọn ohun kan ti o rọ nigbati eiyan flex ni min-height
bi a ṣe han ni isalẹ. Wo Flexbugs #3 fun alaye diẹ sii.
Titete inaro
<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>
Petele titete
<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>
Ko si gọta
Awọn gọta laarin awọn ọwọn ninu awọn kilasi akoj ti a ti sọ tẹlẹ le yọkuro pẹlu .no-gutters
. Eleyi yọ awọn odi margin
s lati .row
ati awọn petele padding
lati gbogbo lẹsẹkẹsẹ omo ọwọn.
Eyi ni koodu orisun fun ṣiṣẹda awọn aṣa wọnyi. Ṣe akiyesi pe awọn ifasilẹ awọn ọwọn jẹ dopin si awọn ọwọn ọmọ akọkọ nikan ati pe o jẹ ìfọkànsí nipasẹ yiyan abuda . Lakoko ti eyi n ṣe agbejade yiyan pato diẹ sii, fifẹ iwe tun le jẹ adani siwaju pẹlu awọn ohun elo aye aye .
Ṣe o nilo apẹrẹ eti-si-eti? Ju obi .container
tabi .container-fluid
.
.no-gutters {
margin-right: 0;
margin-left: 0;
> .col,
> [class*="col-"] {
padding-right: 0;
padding-left: 0;
}
}
Ni iṣe, eyi ni bii o ṣe nwo. Ṣe akiyesi pe o le tẹsiwaju lati lo eyi pẹlu gbogbo awọn kilasi akoj ti a ti sọ tẹlẹ (pẹlu awọn iwọn ọwọn, awọn ipele idahun, awọn atunto, ati diẹ sii).
<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>
Fidi ọwọn
Ti o ba ju awọn ọwọn 12 ti a gbe laarin ila kan, ẹgbẹ kọọkan ti awọn ọwọn afikun yoo, bi ẹyọkan, fi ipari si laini tuntun kan.
Lati 9 + 4 = 13> 12, div-jakejado 4-column yii yoo div sori laini titun kan bi ẹyọkan ti o tẹriba.
Awọn ọwọn ti o tẹle tẹsiwaju pẹlu laini tuntun.
<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>
Awọn fifọ ọwọn
Pipa awọn ọwọn si laini tuntun ni flexbox nilo gige kekere kan: ṣafikun eroja kan pẹlu width: 100%
nibikibi ti o fẹ lati fi ipari si awọn ọwọn rẹ si laini tuntun kan. Ni deede eyi ni a ṣe pẹlu ọpọlọpọ awọn .row
s, ṣugbọn kii ṣe gbogbo ọna imuse le ṣe akọọlẹ fun eyi.
<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>
O tun le lo isinmi yii ni awọn aaye fifọ ni pato pẹlu awọn ohun elo ifihan idahun wa .
<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>
Atunse
Awọn kilasi ibere
Lo .order-
awọn kilasi fun iṣakoso aṣẹ wiwo akoonu rẹ. Awọn kilasi wọnyi jẹ idahun, nitorinaa o le ṣeto order
nipasẹ aaye fifọ (fun apẹẹrẹ, .order-1.order-md-2
). Pẹlu atilẹyin fun 1
kọja 12
gbogbo awọn ipele akoj marun.
<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>
Awọn idahun tun wa .order-first
ati .order-last
awọn kilasi ti o yi order
ohun elo pada nipa lilo order: -1
ati order: 13
( order: $columns + 1
), lẹsẹsẹ. Awọn kilasi wọnyi tun le ni idapọ pẹlu awọn .order-*
kilasi ti o ni nọmba bi o ṣe nilo.
<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>
Awọn ọwọn aiṣedeede
O le ṣe aiṣedeede awọn ọwọn akoj ni awọn ọna meji: awọn .offset-
kilasi grid idahun wa ati awọn ohun elo ala wa . Awọn kilasi akoj jẹ iwọn lati baamu awọn ọwọn lakoko ti awọn ala jẹ iwulo diẹ sii fun awọn ipalemo iyara nibiti iwọn aiṣedeede jẹ oniyipada.
Awọn kilasi aiṣedeede
Gbe awọn ọwọn si ọtun nipa lilo .offset-md-*
awọn kilasi. Awọn kilasi wọnyi ṣe alekun ala osi ti iwe kan nipasẹ *
awọn ọwọn. Fun apẹẹrẹ, .offset-md-4
gbigbe .col-md-4
lori awọn ọwọn mẹrin.
<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>
Ni afikun si imukuro ọwọn ni awọn aaye fifọ idahun, o le nilo lati tun awọn aiṣedeede. Wo eyi ni iṣe ni apẹẹrẹ akoj .
<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>
Awọn ohun elo ala
Pẹlu gbigbe si flexbox ni v4, o le lo awọn ohun elo ala bi .mr-auto
lati fi ipa mu awọn ọwọn arakunrin kuro lọdọ ara wọn.
<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>
Itẹle
Lati ṣe itẹ-ẹiyẹ akoonu rẹ pẹlu akoj aiyipada, ṣafikun tuntun .row
ati ṣeto awọn .col-sm-*
ọwọn laarin iwe to wa tẹlẹ .col-sm-*
. Awọn ori ila ti o wa ni itẹ-ẹiyẹ yẹ ki o ni akojọpọ awọn ọwọn ti o fi kun si 12 tabi diẹ (ko nilo pe ki o lo gbogbo awọn ọwọn 12 ti o wa).
<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>
Sass mixins
Nigbati o ba nlo awọn faili Sass orisun Bootstrap, o ni aṣayan ti lilo awọn oniyipada Sass ati awọn alapọpọ lati ṣẹda aṣa, atunmọ, ati awọn ipilẹ oju-iwe idahun. Awọn kilasi akoj ti a ti yan tẹlẹ lo awọn oniyipada kanna ati awọn alapọpọ lati pese odidi suite ti awọn kilasi imurasilẹ-lati-lo fun awọn ipalemo idahun ni iyara.
Awọn oniyipada
Awọn oniyipada ati awọn maapu pinnu nọmba awọn ọwọn, iwọn gọta, ati aaye ibeere media nibiti lati bẹrẹ awọn ọwọn lilefoofo. A lo iwọnyi lati ṣe ipilẹṣẹ awọn kilasi akoj ti a ti sọ tẹlẹ ti o ni akọsilẹ loke, ati fun awọn alapọpọ aṣa ti a ṣe akojọ si isalẹ.
$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
);
Mixins
Awọn Mixins ni a lo ni apapo pẹlu awọn oniyipada akoj lati ṣe ipilẹṣẹ CSS atunmọ fun awọn ọwọn akoj kọọkan.
// 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);
Lilo apẹẹrẹ
O le ṣe atunṣe awọn oniyipada si awọn iye aṣa tirẹ, tabi lo awọn alapọpọ pẹlu awọn iye aiyipada wọn. Eyi ni apẹẹrẹ ti lilo awọn eto aiyipada lati ṣẹda ifilelẹ iwe-meji pẹlu aafo laarin.
.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>
Ṣiṣe akanṣe akoj
Lilo awọn oniyipada Sass akoj ti a ṣe sinu ati awọn maapu, o ṣee ṣe lati ṣe akanṣe awọn kilasi akoj ti a ti yan tẹlẹ. Yi nọmba awọn ipele pada, awọn iwọn ibeere media, ati awọn ibú apoti—lẹhinna ṣajọpọ.
Awọn ọwọn ati awọn gutters
Nọmba awọn ọwọn akoj le ṣe atunṣe nipasẹ awọn oniyipada Sass. $grid-columns
ti wa ni lo lati se ina awọn widths (ni ogorun) ti kọọkan kọọkan iwe nigba ti $grid-gutter-width
ṣeto awọn iwọn fun awọn ọwọn gọta.
$grid-columns: 12 !default;
$grid-gutter-width: 30px !default;
Awọn ipele akoj
Lilọ kọja awọn ọwọn funrararẹ, o tun le ṣe akanṣe nọmba awọn ipele akoj. Ti o ba fẹ awọn ipele grid mẹrin nikan, iwọ yoo mu imudojuiwọn naa $grid-breakpoints
ati $container-max-widths
si nkan bii eyi:
$grid-breakpoints: (
xs: 0,
sm: 480px,
md: 768px,
lg: 1024px
);
$container-max-widths: (
sm: 420px,
md: 720px,
lg: 960px
);
Nigbati o ba n ṣe awọn ayipada eyikeyi si awọn oniyipada Sass tabi awọn maapu, iwọ yoo nilo lati ṣafipamọ awọn ayipada rẹ ki o tun ṣajọ. Ṣiṣe bẹ yoo ṣe agbejade akojọpọ iyasọtọ tuntun ti awọn kilasi akoj ti a ti sọ tẹlẹ fun awọn iwọn ọwọn, awọn aiṣedeede, ati pipaṣẹ. Awọn ohun elo hihan idahun yoo tun ṣe imudojuiwọn lati lo awọn aaye fifọ aṣa. Rii daju pe o ṣeto awọn iye akoj sinu px
(kii ṣe rem
, em
, tabi %
).