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ẹ.
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ẹ, awọn ọrọ-ọrọ, awọn itọnisọna, ati awọn snippets koodu.
Ọkan ninu awọn ọwọn mẹta
Ọkan ninu awọn ọwọn mẹta
Ọkan ninu awọn ọwọn mẹta
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 .containerfun iwọn piksẹli ti o ṣe idahun tabi .container-fluidfun width: 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. Eyi paddingjẹ 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 widthyoo ṣ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-smyoo 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 widths 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 paddinglati ṣẹda awọn gọta laarin awọn ọwọn kọọkan, sibẹsibẹ, o le yọ kuro lati awọn marginori ila ati paddinglati awọn ọwọn pẹlu .no-gutterslori .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-4kan si awọn ẹrọ kekere, alabọde, nla, ati awọn ẹrọ nla, ṣugbọn kii ṣe aaye xsfifọ 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.
Lakoko ti Bootstrap nlo ems tabi rems fun asọye awọn titobi pupọ julọ, pxawọ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-pato-breakpoint fun iwọn awọn ọwọn ti o rọrun laisi kilasi nọmba ti o fojuhan bi .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 xssi 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.
1 ti 2
2 ti 2
1 ti 3
2 ti 3
3 ti 3
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-basistabi 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.
Àwọ̀n
Àwọ̀n
Àwọ̀n
Àwọ̀n
Ṣ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.
1 ti 3
2 ti 3 (ti o gbooro)
3 ti 3
1 ti 3
2 ti 3 (ti o gbooro)
3 ti 3
Ayipada akoonu iwọn
Lo col-{breakpoint}-autoawọn kilasi si iwọn awọn ọwọn ti o da lori iwọn adayeba ti akoonu wọn.
1 ti 3
Ayipada akoonu iwọn
3 ti 3
1 ti 3
Ayipada akoonu iwọn
3 ti 3
Dogba-iwọn olona-kana
Ṣẹda awọn ọwọn iwọn dogba ti o gun awọn ori ila lọpọlọpọ nipa fifi sii .w-100ibi ti o fẹ ki awọn ọwọn ya si laini titun kan. Jẹ ki awọn isinmi jẹ idahun nipa didapọ .w-100pẹlu diẹ ninu awọn ohun elo ifihan idahun .
col
col
col
col
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 .colati .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.
col
col
col
col
col-8
col-4
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).
col-sm-8
col-sm-4
col-sm
col-sm
col-sm
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ṣẹ.
.col-12 .col-md-8
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.kól-6
.kól-6
Titete
Lo awọn ohun elo titete apoti flexbox lati so awọn ọwọn ni inaro ati petele.
Titete inaro
Ọkan ninu awọn ọwọn mẹta
Ọkan ninu awọn ọwọn mẹta
Ọkan ninu awọn ọwọn mẹta
Ọkan ninu awọn ọwọn mẹta
Ọkan ninu awọn ọwọn mẹta
Ọkan ninu awọn ọwọn mẹta
Ọkan ninu awọn ọwọn mẹta
Ọkan ninu awọn ọwọn mẹta
Ọkan ninu awọn ọwọn mẹta
Ọkan ninu awọn ọwọn mẹta
Ọkan ninu awọn ọwọn mẹta
Ọkan ninu awọn ọwọn mẹta
Petele titete
Ọkan ninu awọn ọwọn meji
Ọkan ninu awọn ọwọn meji
Ọkan ninu awọn ọwọn meji
Ọkan ninu awọn ọwọn meji
Ọkan ninu awọn ọwọn meji
Ọkan ninu awọn ọwọn meji
Ọkan ninu awọn ọwọn meji
Ọkan ninu awọn ọwọn meji
Ọkan ninu awọn ọwọn meji
Ọkan ninu awọn ọwọn meji
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 margins lati .rowati awọn petele paddinglati 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 .containertabi .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).
.col-12 .col-sm-6 .col-md-8
.col-6 .col-md-4
Fidi ọwọn
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.
.kól-9
.col-4
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.
.col-6
Awọn ọwọn ti o tẹle tẹsiwaju pẹlu laini tuntun.
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 .rows, ṣugbọn kii ṣe gbogbo ọna imuse le ṣe akọọlẹ fun eyi.
Lo .order-awọn kilasi fun iṣakoso aṣẹ wiwo akoonu rẹ. Awọn kilasi wọnyi jẹ idahun, nitorinaa o le ṣeto ordernipasẹ aaye fifọ (fun apẹẹrẹ, .order-1.order-md-2). Pẹlu atilẹyin fun 1kọja 12gbogbo awọn ipele akoj marun.
Ni akọkọ, ṣugbọn ko ni aṣẹ
Keji, ṣugbọn kẹhin
Kẹta, ṣugbọn akọkọ
Awọn idahun tun wa .order-firstati .order-lastawọn kilasi ti o yi orderohun elo pada nipa lilo order: -1ati 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.
Ni akọkọ, ṣugbọn kẹhin
Keji, sugbon unordered
Kẹta, ṣugbọn akọkọ
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-4gbigbe .col-md-4lori awọn ọwọn mẹrin.
.kol-md-4
.col-md-4 .aiṣedeede-md-4
.col-md-3 .aiṣedeede-md-3
.col-md-3 .aiṣedeede-md-3
.col-md-6 .aiṣedeede-md-3
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-autolati fi ipa mu awọn ọwọn arakunrin kuro lọdọ ara wọn.
.kol-md-4
.col-md-4 .ml-laifọwọyi
.col-md-3 .ml-md-laifọwọyi
.col-md-3 .ml-md-laifọwọyi
.col-laifọwọyi .mr-laifọwọyi
.col-laifọwọyi
Itẹle
Lati ṣe itẹ-ẹiyẹ akoonu rẹ pẹlu akoj aiyipada, ṣafikun tuntun .rowati ṣ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).
Ipele 1: .col-sm-9
Ipele 2: .col-8 .col-sm-6
Ipele 2: .col-4 .col-sm-6
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ẹ.
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.
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.
Akọkọ akoonu
Akoonu keji
Ṣ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-columnsti 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.
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-breakpointsati $container-max-widthssi 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 %).