Coimeádáin
Is bunbhloic thógála de Bootstrap iad coimeádáin a chuimsíonn d’inneachar, a stuáil agus a ailíníonn laistigh d’fhearas nó radharc ar leith.
Conas a oibríonn siad
Is iad na coimeádáin an leagan amach is bunúsaí i Bootstrap agus bíonn siad ag teastáil agus ár gcóras greille réamhshocraithe á úsáid againn . Úsáidtear coimeádáin chun an t-ábhar laistigh díobh a choinneáil, a stuáil, agus (uaireanta) a lárú. Cé gur féidir coimeádáin a neadú, ní bhíonn coimeádán neadaithe de dhíth ar fhormhór na leagan amach.
Tagann bootstrap le trí choimeádán éagsúla:
.container
, a leagann síosmax-width
ag gach brisphointe sofhreagrach.container-fluid
, atáwidth: 100%
ar gach brisphointe.container-{breakpoint}
, is é sinwidth: 100%
go dtí an brisphointe sonraithe
Léiríonn an tábla thíos conas a chuirtear gach coimeádán i max-width
gcomparáid leis an mbunphointe .container
agus .container-fluid
trasna gach brisphointe.
Féach orthu i mbun gnímh agus cuir i gcomparáid iad inár sampla Eangaí .
Beag breise <576px |
Beag ≥576px |
Meánach ≥768px |
Mór ≥992px |
X-Mór ≥1200px |
XX- Mór ≥1400px |
|
---|---|---|---|---|---|---|
.container |
100% | 540px | 720px | 960px | 1140px | 1320px |
.container-sm |
100% | 540px | 720px | 960px | 1140px | 1320px |
.container-md |
100% | 100% | 720px | 960px | 1140px | 1320px |
.container-lg |
100% | 100% | 100% | 960px | 1140px | 1320px |
.container-xl |
100% | 100% | 100% | 100% | 1140px | 1320px |
.container-xxl |
100% | 100% | 100% | 100% | 100% | 1320px |
.container-fluid |
100% | 100% | 100% | 100% | 100% | 100% |
Coimeádán réamhshocraithe
.container
Is coimeádán sofhreagrach, leithead seasta é ár rang réamhshocraithe , rud a chiallaíonn a chuid max-width
athruithe ag gach brisphointe.
<div class="container">
<!-- Content here -->
</div>
Coimeádáin sofhreagracha
Ligeann coimeádáin fhreagracha duit aicme a shonrú atá 100% ar leithead go dtí go sroichfear an brisphointe sonraithe, agus ina dhiaidh sin cuirimid max-width
s i bhfeidhm ar gach ceann de na brisphointí is airde. Mar shampla, .container-sm
tá sé 100% ar leithead le tosú go dtí go sroichfear an sm
brisphointe, áit a méadóidh sé le md
, lg
, xl
, agus xxl
.
<div class="container-sm">100% wide until small breakpoint</div>
<div class="container-md">100% wide until medium breakpoint</div>
<div class="container-lg">100% wide until large breakpoint</div>
<div class="container-xl">100% wide until extra large breakpoint</div>
<div class="container-xxl">100% wide until extra extra large breakpoint</div>
Coimeádáin sreabhach
Bain úsáid as .container-fluid
le haghaidh coimeádán leithead iomlán, a chuimsíonn leithead iomlán an amhairc.
<div class="container-fluid">
...
</div>
Sass
Mar a léirítear thuas, gineann Bootstrap sraith ranganna coimeádáin réamhshainithe chun cabhrú leat na leagan amach atá uait a chruthú. Is féidir leat na haicmí coimeádáin réamhshainithe seo a shaincheapadh tríd an léarscáil Sass (le fáil in _variables.scss
) a mhodhnú a thugann cumhacht dóibh:
$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px,
xxl: 1320px
);
Chomh maith leis an Sass a shaincheapadh, is féidir leat do choimeádáin féin a chruthú lenár Sass mixin.
// Source mixin
@mixin make-container($padding-x: $container-padding-x) {
width: 100%;
padding-right: $padding-x;
padding-left: $padding-x;
margin-right: auto;
margin-left: auto;
}
// Usage
.custom-container {
@include make-container();
}
Le haghaidh tuilleadh faisnéise agus samplaí ar conas ár mapaí agus ár n-athróga SAS a mhionathrú, féach le do thoil don rannán Sass de dhoiciméadú na hEangaí .