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 alapọpọ, ati awọn dosinni ti awọn kilasi ti a ti pinnu tẹlẹ.
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ẹ, awọn ọrọ-ọrọ, awọn itọnisọna, ati awọn snippets koodu.
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 .
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 |
Lo awọn kilasi ọwọn-pato-breakpoint fun iwọn awọn ọwọn ti o rọrun laisi kilasi nọmba ti o fojuhan bi .col-sm-6
.
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.
Awọn ọwọn iwọn dọgba le fọ si awọn laini pupọ, ṣugbọn aṣiṣe Safari flexbox 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 o ba ni imudojuiwọn.
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.
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.
Ṣẹda awọn ọwọn iwọn dogba ti o gun awọn ori ila lọpọlọpọ 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 didapọ .w-100
pẹlu diẹ ninu awọn ohun elo ifihan 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ẹ.
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
.
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
).
Ṣ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ṣẹ.
Lo awọn ohun elo titete apoti flexbox lati so awọn ọwọn ni inaro ati petele.
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 wa ni opin si awọn ọwọn ọmọ akọkọ nikan ati pe a fojusi 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
.
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).
Ti o ba ju awọn ọwọn 12 lọ laarin ọna 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 iwe-iwe mẹrin yii yoo ti we si laini tuntun kan gẹgẹbi ẹyọkan ti o ni itara.
Awọn ọwọn ti o tẹle tẹsiwaju pẹlu laini tuntun.
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.
O tun le lo isinmi yii ni awọn aaye fifọ ni pato pẹlu awọn ohun elo ifihan idahun wa .
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.
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.
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.
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.
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 .
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.
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).
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 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ẹ.
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.
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.
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ọ.
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.
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:
Nigbati o ba n ṣe awọn iyipada eyikeyi si awọn oniyipada Sass tabi awọn maapu, iwọ yoo nilo lati fi awọn ayipada rẹ pamọ 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 %
).