Mfumo wa gridi ya taifa
Tumia gridi yetu ya nguvu ya kwanza ya kisanduku cha rununu kuunda miundo ya maumbo na saizi zote kwa shukrani kwa mfumo wa safu wima kumi na mbili, viwango sita vya kuitikia chaguomsingi, viambajengo vya Sass na vichanganyiko, na makundi kadhaa yaliyobainishwa awali.
Mfano
Mfumo wa gridi ya Bootstrap hutumia mfululizo wa kontena, safu mlalo na safu wima ili kupanga na kupanga maudhui. Imejengwa kwa flexbox na inajibu kikamilifu. Ifuatayo ni mfano na maelezo ya kina ya jinsi mfumo wa gridi unavyokusanyika.
<div class="container">
<div class="row">
<div class="col">
Column
</div>
<div class="col">
Column
</div>
<div class="col">
Column
</div>
</div>
</div>
Mfano ulio hapo juu huunda safu wima tatu za upana sawa kwenye vifaa vyote na vituo vya kutazama kwa kutumia aina zetu za gridi zilizobainishwa awali. Safu wima hizo zimewekwa katikati ya ukurasa na mzazi .container
.
Inavyofanya kazi
Kuivunja, hivi ndivyo mfumo wa gridi unavyokusanyika:
-
Gridi yetu inasaidia vituo sita vya kuitikia . Vizuizi vinatokana na
min-width
maswali ya media, kumaanisha kuwa vinaathiri sehemu hiyo ya kukiuka na wale wote walio juu yake (km,.col-sm-4
inatumika kwasm
,md
,lg
,xl
, naxxl
). Hii inamaanisha kuwa unaweza kudhibiti ukubwa wa kontena na safu wima na tabia kwa kila sehemu ya kukagua. -
Vyombo katikati na pedi mlalo maudhui yako. Tumia
.container
kwa upana wa pikseli unaojibu,.container-fluid
kwawidth: 100%
vituo na vifaa vyote vya kutazama, au chombo kinachojibu (km,.container-md
) kwa mchanganyiko wa upana wa kiowevu na pikseli. -
Safu ni vifungashio vya safu wima. Kila safu ina mlalo
padding
(inayoitwa gutter) kwa kudhibiti nafasi kati yao. Kisha hiipadding
inapingwa kwenye safu mlalo zilizo na pambizo hasi ili kuhakikisha kuwa maudhui katika safu wima yako yamepangiliwa kwa mwonekano chini upande wa kushoto. Safu mlalo pia zinaauni madarasa ya kurekebisha ili kutumia kwa usawa madarasa ya ukubwa wa safu na mifereji ya maji ili kubadilisha nafasi ya maudhui yako. -
Safu ni rahisi kunyumbulika sana. Kuna safu wima 12 za violezo zinazopatikana kwa kila safu, zinazokuruhusu kuunda michanganyiko tofauti ya vipengee vinavyochukua safu wima yoyote. Madarasa ya safu wima yanaonyesha idadi ya safu wima za violezo vya kudumu (kwa mfano,
col-4
vipindi vinne).width
s zimewekwa kwa asilimia kwa hivyo kila wakati unakuwa na saizi sawa. -
Gutters pia ni msikivu na inaweza kubinafsishwa. Madarasa ya gutter yanapatikana katika sehemu zote za kukatiza, kwa ukubwa sawa na nafasi zetu za ukingo na padding . Badilisha mifereji ya maji ya mlalo yenye
.gx-*
madarasa, mifereji ya maji ya wima yenye.gy-*
, au mifereji yote yenye.g-*
madarasa..g-0
inapatikana pia ili kuondoa mifereji ya maji. -
Vigeu vya Sass, ramani na michanganyiko huimarisha gridi ya taifa. Iwapo hutaki kutumia madarasa ya gridi yaliyofafanuliwa awali katika Bootstrap, unaweza kutumia chanzo cha gridi yetu ya Sass kuunda yako mwenyewe ukitumia alama za kisemantiki zaidi. Pia tunajumuisha baadhi ya vipengele maalum vya CSS ili kutumia vigeu hivi vya Sass kwa urahisi zaidi kwako.
Fahamu vikwazo na hitilafu zinazozunguka flexbox , kama vile kutokuwa na uwezo wa kutumia baadhi ya vipengele vya HTML kama vyombo vinavyobadilikabadilika .
Chaguzi za gridi ya taifa
Mfumo wa gridi ya Bootstrap unaweza kubadilika katika sehemu zote sita za utatuzi chaguo-msingi, na sehemu zozote za kuvunja unazoweka mapendeleo. Viwango sita vya msingi vya gridi ni kama ifuatavyo:
- Ndogo zaidi (xs)
- Ndogo (sm)
- Wastani (md)
- Kubwa (lg)
- Kubwa zaidi (xl)
- Kubwa zaidi ya ziada (xxl)
Kama ilivyoonyeshwa hapo juu, kila moja ya sehemu hizi za kuvunja ina kontena lao, kiambishi awali cha darasa la kipekee, na virekebishaji. Hivi ndivyo gridi ya taifa inavyobadilika katika sehemu zote hizi za uvunjaji:
xs <576px |
sm ≥576px |
md ≥768px |
lg ≥992px |
xl ≥1200px |
xxl ≥1400px |
|
---|---|---|---|---|---|---|
Chombomax-width |
Hakuna (otomatiki) | 540px | 720px | 960px | 1140px | 1320px |
Kiambishi awali cha darasa | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
.col-xxl- |
# ya safu wima | 12 | |||||
Upana wa gutter | 1.5rem (.75rem kushoto na kulia) | |||||
Mifereji maalum | Ndiyo | |||||
Nestable | Ndiyo | |||||
Kuagiza safu | Ndiyo |
Safu wima za mpangilio otomatiki
Tumia madarasa ya safu wima mahususi kwa uwekaji ukubwa wa safu wima kwa urahisi bila darasa lililo na nambari dhahiri kama .col-sm-6
.
Sawa-upana
Kwa mfano, hapa kuna mipangilio miwili ya gridi inayotumika kwa kila kifaa na kituo cha kutazama, kutoka xs
hadi xxl
. Ongeza idadi yoyote ya madarasa yasiyo na kitengo kwa kila sehemu ya kukatika unayohitaji na kila safu itakuwa na upana sawa.
<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>
Kuweka upana wa safu moja
Mpangilio otomatiki wa safu wima za gridi ya flexbox pia inamaanisha unaweza kuweka upana wa safu wima moja na kuwa na safu wima ndugu kubadilisha ukubwa kiotomatiki kuizunguka. Unaweza kutumia madarasa ya gridi yaliyofafanuliwa awali (kama inavyoonyeshwa hapa chini), mchanganyiko wa gridi, au upana wa ndani. Kumbuka kuwa safu wima zingine zitabadilisha ukubwa bila kujali upana wa safu ya katikati.
<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>
Maudhui ya upana unaobadilika
Tumia col-{breakpoint}-auto
madarasa kwa ukubwa wa safuwima kulingana na upana asili wa yaliyomo.
<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>
Madarasa ya mwitikio
Gridi ya Bootstrap inajumuisha viwango sita vya madarasa yaliyofafanuliwa awali kwa ajili ya kujenga mipangilio changamano inayoitikia. Geuza ukubwa wa safuwima zako upendavyo kwenye vifaa vidogo zaidi, vidogo, vya kati, vikubwa au vikubwa zaidi unavyoona inafaa.
Vizuizi vyote
Kwa gridi ambazo ni sawa kutoka kwa vifaa vidogo hadi vikubwa zaidi, tumia .col
na .col-*
madarasa. Taja darasa la nambari wakati unahitaji safu ya ukubwa maalum; vinginevyo, jisikie huru kushikamana na .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>
Imepangwa kwa mlalo
Kwa kutumia seti moja ya .col-sm-*
madarasa, unaweza kuunda mfumo wa msingi wa gridi ya taifa ambao huanza kupangwa na kuwa mlalo kwenye sehemu ndogo ya kukatika ( 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>
Changanya na ufanane
Je! hutaki safu wima zako zirundikane tu katika viwango vingine vya gridi ya taifa? Tumia mchanganyiko wa madarasa tofauti kwa kila daraja inapohitajika. Tazama mfano hapa chini kwa wazo bora la jinsi yote inavyofanya kazi.
<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>
Safu wima
Tumia .row-cols-*
madarasa ya kuitikia ili kuweka kwa haraka idadi ya safu wima zinazotoa maudhui na mpangilio wako vyema. Ingawa .col-*
madarasa ya kawaida hutumika kwa safu wima mahususi (kwa mfano, .col-md-4
), madarasa ya safu mlalo yamewekwa kwa mzazi .row
kama chaguomsingi kwa safu wima zilizomo. Pamoja na .row-cols-auto
wewe unaweza kutoa nguzo upana wao wa asili.
Tumia madarasa haya ya safu mlalo ili kuunda kwa haraka miundo msingi ya gridi au kudhibiti mipangilio ya kadi yako na ubatilishe inapohitajika katika kiwango cha safu wima.
<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>
Unaweza pia kutumia mchanganyiko unaoandamana wa Sass, 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);
}
}
Nesting
Ili kuweka maudhui yako kwa gridi chaguo-msingi, ongeza safu mpya .row
na seti ya .col-sm-*
safu wima iliyopo .col-sm-*
. Safu mlalo zilizowekwa lazima zijumuishe seti ya safu wima zinazoongeza hadi 12 au chache (si lazima utumie safu wima zote 12 zilizopo).
<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
Unapotumia faili za chanzo za Sass za Bootstrap, una chaguo la kutumia viambajengo vya Sass na vichanganyiko ili kuunda mipangilio ya ukurasa maalum, ya kimantiki na inayoitikia. Madarasa yetu ya gridi yaliyofafanuliwa awali hutumia vigeu hivi sawa na vichanganyiko ili kutoa safu nzima ya madarasa yaliyo tayari kutumia kwa miundo inayoitikia kwa haraka.
Vigezo
Vigezo na ramani huamua idadi ya safu wima, upana wa mfereji wa maji, na sehemu ya hoja ya midia ambapo safu wima zinazoelea zinaweza kuanza. Tunatumia hizi ili kutengeneza madarasa ya gridi yaliyofafanuliwa awali yaliyoandikwa hapo juu, na vile vile kwa michanganyiko maalum iliyoorodheshwa hapa chini.
$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
);
Mchanganyiko
Michanganyiko hutumiwa pamoja na vigeu vya gridi ya taifa ili kutoa CSS ya kisemantiki kwa safu wima za gridi mahususi.
// 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);
Mfano wa matumizi
Unaweza kurekebisha anuwai kwa maadili yako mwenyewe, au tumia tu mchanganyiko na maadili yao ya msingi. Huu hapa ni mfano wa kutumia mipangilio chaguo-msingi ili kuunda muundo wa safu wima mbili na pengo kati.
.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>
Kubinafsisha gridi ya taifa
Kwa kutumia vigeu vyetu vilivyojengewa ndani vya gridi ya Sass na ramani, inawezekana kubinafsisha kabisa aina za gridi zilizoainishwa awali. Badilisha idadi ya viwango, vipimo vya hoja ya media, na upana wa kontena-kisha ujumuishe.
Nguzo na mifereji ya maji
Idadi ya safu wima za gridi inaweza kubadilishwa kupitia vigeu vya Sass. $grid-columns
hutumika kutoa upana (katika asilimia) ya kila safu mahususi huku $grid-gutter-width
ikiweka upana wa mifereji ya safu wima.
$grid-columns: 12 !default;
$grid-gutter-width: 1.5rem !default;
Viwango vya gridi
Ukisonga zaidi ya safu wima zenyewe, unaweza pia kubinafsisha idadi ya viwango vya gridi ya taifa. Ikiwa ungetaka safu nne tu za gridi, ungesasisha $grid-breakpoints
na $container-max-widths
kwa kitu kama hiki:
$grid-breakpoints: (
xs: 0,
sm: 480px,
md: 768px,
lg: 1024px
);
$container-max-widths: (
sm: 420px,
md: 720px,
lg: 960px
);
Unapofanya mabadiliko yoyote kwa vigeu vya Sass au ramani, utahitaji kuhifadhi mabadiliko yako na kukusanya tena. Kufanya hivyo kutatoa seti mpya kabisa ya madarasa ya gridi yaliyofafanuliwa awali kwa upana wa safu, marekebisho, na kuagiza. Huduma za mwonekano wa kuitikia pia zitasasishwa ili kutumia vizuizi maalum. Hakikisha umeweka thamani za gridi ndani px
(si rem
, em
, au %
).