Panangkita iti pakabuklan
Dagiti paset ken dagiti pagpilian para iti panangiplastar ti proyektom ti Bootstrap, a mairaman dagiti pagkargaan ti panagbalkot, ti nabileg a sistema ti grid, ti nalaka a maibagay a banag ti media, ken dagiti makasungbat a klase ti utilidad.
Dagiti Pagkargaan
Dagiti pagkargaan ket isu dagiti kangrunaan nga elemento ti layout iti Bootstrap ken kasapulan no agus-usar ti default a sistematayo ti grid . Dagiti pagkargaan ket mausar a manglaon, mangpadpad, ken (no dadduma) mangisentro ti linaon iti uneg dagitoy. Bayat a dagiti pagkargaan ket mabalin a mai-nest, kaaduan kadagiti layout ket saan a kasapulan ti naisanglad a pagkargaan.
Ti Bootstrap ket addaan iti tallo a nagduduma a container:
.container
, a mangikeddeng ti amax-width
iti tunggal sumungbat a breakpoint.container-fluid
, nga addawidth: 100%
iti amin a breakpoint.container-{breakpoint}
, ngawidth: 100%
agingga iti naikeddeng a breakpoint
Ti lamisaan iti baba ket mangiladawan no kasano a tunggal container's max-width
ket maidilig iti orihinal .container
ken .container-fluid
iti ballasiw ti tunggal breakpoint.
Kitaen dagitoy nga agtigtignay ken idilig dagitoy iti pagarigantayo iti Grid .
Ekstra nga bassit <576px |
Bassit nga ≥576px |
Kalalainganna nga ≥768px |
Dakkel nga ≥992px |
Ekstra nga dakkel ≥1200px |
|
---|---|---|---|---|---|
.container |
100% nga . | 540px nga | 720px nga | 960px nga | 1140px nga |
.container-sm |
100% nga . | 540px nga | 720px nga | 960px nga | 1140px nga |
.container-md |
100% nga . | 100% nga . | 720px nga | 960px nga | 1140px nga |
.container-lg |
100% nga . | 100% nga . | 100% nga . | 960px nga | 1140px nga |
.container-xl |
100% nga . | 100% nga . | 100% nga . | 100% nga . | 1140px nga |
.container-fluid |
100% nga . | 100% nga . | 100% nga . | 100% nga . | 100% nga . |
Amin-iti-maysa
Ti default .container
a klasemi ket maysa a makasungbat, naikeddeng-kalawa a pagkargaan, kayatna a sawen dagiti max-width
panagbalbaliwna iti tunggal maysa a breakpoint.
<div class="container">
<!-- Content here -->
</div>
Likido
Usaren .container-fluid
para iti naan-anay a kalawa a pagkargaan, a mangsaklaw ti sibubukel a kalawa ti viewport.
<div class="container-fluid">
...
</div>
Nasungbatan
Dagiti makasungbat a pagkargaan ket baro iti Bootstrap v4.4. Dagitoy ket mangipalubos kenka a mangibaga ti maysa a klase a 100% a kalawa aginggana ti naikeddeng a puntos ti panagburak ket madanon, kalpasanna ket iyaplikarmi max-width
ti s para iti tunggal maysa kadagiti nangatngato a puntos ti panagburak. Kas pagarigan, .container-sm
ket 100% ti kalawana tapno mangrugi aginggana ti sm
breakpoint ket madanon, a sadiay ket ag-scale up babaen ti md
, lg
, ken xl
.
<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>
Dagiti makasungbat a breakpoint
Gapu ta ti Bootstrap ket naaramid tapno umuna a mobile, agus-usarkami iti sumagmamano a panagsaludsod ti media tapno mangpartuat kadagiti nainsiriban a breakpoint para kadagiti layout ken interfacemi. Dagitoy a breakpoint ket kaaduan a naibatay kadagiti kabassitan a kalawa ti viewport ken mangipalubos kadakami a mang-scale kadagiti elemento bayat nga agbaliw ti viewport.
Ti Bootstrap ket nangruna nga agus-usar kadagiti sumaganad a sakop ti panagsaludsod ti media—wenno dagiti breakpoint—kadagiti taudan a Sass a papelestayo para iti layouttayo, sistema ti grid, ken dagiti paset.
// Extra small devices (portrait phones, less than 576px)
// No media query for `xs` since this is the default in Bootstrap
// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }
// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }
// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }
// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }
Gapu ta isuratmi ti taudan a CSSmi iti Sass, amin a saludsodmi iti media ket magun-od babaen ti Sass mixins:
// No media query necessary for xs breakpoint as it's effectively `@media (min-width: 0) { ... }`
@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { ... }
// Example: Hide starting at `min-width: 0`, and then show at the `sm` breakpoint
.custom-class {
display: none;
}
@include media-breakpoint-up(sm) {
.custom-class {
display: block;
}
}
Sagpaminsan nga agusarkami kadagiti saludsod ti media a mapan iti sabali a direksion (ti naited a kadakkel ti iskrin wenno basbassit ):
// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }
// Small devices (landscape phones, less than 768px)
@media (max-width: 767.98px) { ... }
// Medium devices (tablets, less than 992px)
@media (max-width: 991.98px) { ... }
// Large devices (desktops, less than 1200px)
@media (max-width: 1199.98px) { ... }
// Extra large devices (large desktops)
// No media query since the extra-large breakpoint has no upper bound on its width
min-
ken dagiti max-
pangrugian ken dagiti viewport nga addaan kadagiti fraksional a kalawa (a mabalin a mapasamak iti sidong dagiti sumagmamano a kasasaad kadagiti nangato-dpi nga alikamen, kas pagarigan) babaen ti panagusar kadagiti pateg nga addaan iti nangatngato a kinaeksakto para kadagitoy a panagidilig .
Maminsan manen, dagitoy a saludsod ti media ket magun-od pay babaen dagiti Sass mixins:
@include media-breakpoint-down(xs) { ... }
@include media-breakpoint-down(sm) { ... }
@include media-breakpoint-down(md) { ... }
@include media-breakpoint-down(lg) { ... }
// No media query necessary for xl breakpoint as it has no upper bound on its width
// Example: Style from medium breakpoint and down
@include media-breakpoint-down(md) {
.custom-class {
display: block;
}
}
Adda pay dagiti panagsaludsod ti media ken dagiti mixin para iti panangpuntiria ti maymaysa a paset dagiti kadakkel ti iskrin babaen ti panagusar kadagiti kabassitan ken kangatuan a kalawa ti breakpoint.
// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }
// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) and (max-width: 767.98px) { ... }
// Medium devices (tablets, 768px and up)
@media (min-width: 768px) and (max-width: 991.98px) { ... }
// Large devices (desktops, 992px and up)
@media (min-width: 992px) and (max-width: 1199.98px) { ... }
// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }
Dagitoy a saludsod ti media ket magun-od pay babaen dagiti Sass mixins:
@include media-breakpoint-only(xs) { ... }
@include media-breakpoint-only(sm) { ... }
@include media-breakpoint-only(md) { ... }
@include media-breakpoint-only(lg) { ... }
@include media-breakpoint-only(xl) { ... }
Kasta met, dagiti panagsaludsod ti media ket mabalin a mangsaklaw kadagiti adu a kalawa ti breakpoint:
// Example
// Apply styles starting from medium devices and up to extra large devices
@media (min-width: 768px) and (max-width: 1199.98px) { ... }
Ti Sass mixin para iti panangpuntiria iti isu met laeng a sakop ti kadakkel ti iskrin ket isu koma:
@include media-breakpoint-between(md, xl) { ... }
Z-indeks
Sumagmamano a paset ti Bootstrap ket agus-usar z-index
ti , ti tagikua ti CSS a tumultulong a mangtengngel ti layout babaen ti panangipaay ti maikatlo nga ehe tapno mangurnos ti linaon. Usarenmi ti default a z-index a sukog iti Bootstrap a nadisenio tapno umno ti panag-layer ti nabigasion, toltips ken popovers, modals, ken dadduma pay.
Dagitoy a nangatngato a pateg ket mangrugi iti arbitrario a bilang, nangato ken espesipiko nga umdas tapno nasayaat a maliklikan dagiti panagsusuppiat. Kasapulantayo ti maysa a pagalagadan a grupo dagitoy iti ballasiw dagiti naisaad a pasettayo—tooltips, popovers, navbars, dropdowns, modals—tapno mabalintayo ti agbalin a nainkalintegan a maitunos kadagiti kababalin. Awan ti rason a dimi koma nausar ti 100
+ wenno 500
+.
Saanmi nga iparegta ti panangpasayaat kadagitoy nga indibidual a pateg; no baliwam ti maysa, masapul la ketdi a baliwam amin dagitoy.
$zindex-dropdown: 1000 !default;
$zindex-sticky: 1020 !default;
$zindex-fixed: 1030 !default;
$zindex-modal-backdrop: 1040 !default;
$zindex-modal: 1050 !default;
$zindex-popover: 1060 !default;
$zindex-tooltip: 1070 !default;
Tapno mangasikaso kadagiti agtuon a beddeng iti uneg dagiti paset (kas pagarigan, dagiti buton ken dagiti input kadagiti grupo ti input), agus-usarkami kadagiti nababa a maymaysa a digit a z-index
pateg ti 1
, 2
, ken 3
para kadagiti default, hover, ken aktibo nga estado. Iti hover/focus/active, iyegmi ti partikular nga elemento iti sango nga addaan iti nangatngato a z-index
pateg tapno maipakita ti beddengda kadagiti agkakabsat nga elemento.