කඩඉම් ලකුණු
බිඳුම් ලක්ෂ්ය යනු ඔබගේ ප්රතිචාරාත්මක පිරිසැලසුම Bootstrap හි උපාංගය හෝ දර්ශන ප්රමාණයන් හරහා හැසිරෙන ආකාරය තීරණය කරන අභිරුචිකරණය කළ හැකි පළල වේ.
මූලික සංකල්ප
-
බිඳුම් ලක්ෂ්ය යනු ප්රතිචාරාත්මක නිර්මාණයේ ගොඩනැඟිලි කොටස් වේ. ඔබේ පිරිසැලසුම විශේෂිත දර්ශන තලයකට හෝ උපාංග ප්රමාණයකට අනුවර්තනය කළ හැක්කේ කවදාද යන්න පාලනය කිරීමට ඒවා භාවිත කරන්න.
-
බ්රේක්පොයින්ට් මගින් ඔබේ CSS නිර්මාණය කිරීමට මාධ්ය විමසුම් භාවිතා කරන්න. මාධ්ය විමසුම් යනු CSS හි විශේෂාංගයක් වන අතර එය බ්රවුසර සහ මෙහෙයුම් පද්ධති පරාමිති කට්ටලයක් මත පදනම්ව කොන්දේසි සහිතව මෝස්තර යෙදීමට ඉඩ සලසයි.
min-width
අපගේ මාධ්ය විමසුම්වලදී අපි බහුලව භාවිතා කරමු . -
පළමුව ජංගම, ප්රතිචාරාත්මක නිර්මාණය ඉලක්කයයි. Bootstrap හි CSS හි අරමුණ වන්නේ කුඩාම කඩඉමේදී පිරිසැලසුමක් ක්රියාත්මක කිරීම සඳහා අවම මෝස්තර යෙදීම සහ විශාල උපාංග සඳහා එම සැලසුම සකස් කිරීම සඳහා මෝස්තර මත ස්ථර යෙදීමයි. මෙය ඔබේ CSS ප්රශස්ත කරයි, විදැහුම් කාලය වැඩි දියුණු කරයි, සහ ඔබේ අමුත්තන්ට විශිෂ්ට අත්දැකීමක් සපයයි.
පවතින කඩඉම් ලකුණු
Bootstrap ප්රතිචාරාත්මකව ගොඩනැගීම සඳහා , සමහර විට ජාල ස්ථර ලෙසින් හැඳින්වෙන පෙරනිමි බිඳුම් ලක්ෂ්ය හයක් ඇතුළත් වේ. ඔබ අපගේ මූලාශ්ර Sass ගොනු භාවිතා කරන්නේ නම් මෙම කඩඉම් ලකුණු අභිරුචිකරණය කළ හැක.
බිඳුම් ලක්ෂ්යය | පන්ති ඇතුළත් කිරීම | මාන |
---|---|---|
X-කුඩා | කිසිවක් නැත | <576px |
කුඩා | sm |
≥576px |
මධ්යම | md |
≥768px |
මහා | lg |
≥992px |
අති විශාලයි | xl |
≥1200px |
අමතර අමතර විශාල | xxl |
≥1400px |
සෑම බ්රේක්පොයින්ට් එකක්ම තෝරාගෙන ඇත්තේ පළල 12 ගුණාකාර වන බහාලුම් පහසුවෙන් රඳවා ගැනීමටය. බ්රේක්පොයින්ට් පොදු උපාංග ප්රමාණයේ සහ දර්ශන තලයේ මානයන්හි උප කුලකයක් ද නියෝජනය කරයි—ඒවා සෑම භාවිත අවස්ථාවක් හෝ උපාංගයක්ම විශේෂයෙන් ඉලක්ක කරන්නේ නැත. ඒ වෙනුවට, පරාසයන් ඕනෑම උපාංගයක් සඳහා ගොඩ නැගීමට ශක්තිමත් සහ ස්ථාවර පදනමක් සපයයි.
මෙම කඩඉම් ලකුණු Sass හරහා අභිරුචිකරණය කළ හැකිය—ඔබට ඒවා අපගේ මෝස්තර පත්රිකාවේ Sass සිතියමක් තුළ සොයා ගත _variables.scss
හැක.
$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px,
xxl: 1400px
);
අපගේ Sass සිතියම් සහ විචල්යයන් වෙනස් කරන්නේ කෙසේද යන්න පිළිබඳ වැඩි විස්තර සහ උදාහරණ සඳහා, කරුණාකර Grid documentation හි Sass කොටස වෙත යොමු වන්න .
මාධ්ය විමසුම්
Bootstrap මුලින්ම ජංගම ලෙස සංවර්ධනය කර ඇති බැවින්, අපගේ පිරිසැලසුම් සහ අතුරුමුහුණත් සඳහා සංවේදී කඩඉම් තැනීමට අපි මාධ්ය විමසුම් අතලොස්සක් භාවිතා කරමු . මෙම බිඳුම් ලක්ෂ්ය බොහෝ දුරට අවම දර්ශන තොටේ පළල මත පදනම් වන අතර දර්ශන තොට වෙනස් වන විට මූලද්රව්ය විශාල කිරීමට අපට ඉඩ සලසයි.
අවම-පළල
Bootstrap මූලික වශයෙන් අපගේ පිරිසැලසුම, ජාල පද්ධතිය සහ සංරචක සඳහා අපගේ මූලාශ්ර Sass ගොනු තුළ පහත මාධ්ය විමසුම් පරාසයන් හෝ බිඳුම් ලක්ෂ්ය භාවිතා කරයි.
// Source 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) { ... }
@include media-breakpoint-up(xxl) { ... }
// Usage
// 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;
}
}
මෙම Sass mixins අපගේ Sass විචල්යවල ප්රකාශ කර ඇති අගයන් භාවිතයෙන් අපගේ සම්පාදනය කරන ලද CSS තුළ පරිවර්තනය කරයි. උදාහරණ වශයෙන්:
// X-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) { ... }
// X-Large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }
// XX-Large devices (larger desktops, 1400px and up)
@media (min-width: 1400px) { ... }
උපරිම පළල
අපි ඉඳහිට අනෙක් දිශාවට යන මාධ්ය විමසුම් භාවිතා කරමු (දී ඇති තිර ප්රමාණය හෝ කුඩා ):
// No media query necessary for xs breakpoint as it's effectively `@media (max-width: 0) { ... }`
@include media-breakpoint-down(sm) { ... }
@include media-breakpoint-down(md) { ... }
@include media-breakpoint-down(lg) { ... }
@include media-breakpoint-down(xl) { ... }
@include media-breakpoint-down(xxl) { ... }
// Example: Style from medium breakpoint and down
@include media-breakpoint-down(md) {
.custom-class {
display: block;
}
}
මෙම මිශ්රණයන් එම ප්රකාශිත බිඳුම් ලක්ෂ්ය ගෙන ඒවායින් අඩු .02px
කර ඒවා අපගේ max-width
අගයන් ලෙස භාවිතා කරයි. උදාහරණ වශයෙන්:
// X-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) { ... }
// X-Large devices (large desktops, less than 1400px)
@media (max-width: 1399.98px) { ... }
// XX-Large devices (larger desktops)
// No media query since the xxl breakpoint has no upper bound on its width
min-
සහmax-
දර්ශන තොටේ සීමාවන් වටා වැඩ කරන්නෙමු
.තනි කඩඉමක්
අවම සහ උපරිම කඩඉම් පළල භාවිතා කරමින් තිර ප්රමාණයේ තනි කොටසක් ඉලක්ක කර ගැනීම සඳහා මාධ්ය විමසුම් සහ මික්සින් ද ඇත.
@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) { ... }
@include media-breakpoint-only(xxl) { ... }
උදාහරණයක් ලෙස, @include media-breakpoint-only(md) { ... }
ප්රතිඵලය වනු ඇත:
@media (min-width: 768px) and (max-width: 991.98px) { ... }
කඩඉම් ලකුණු අතර
ඒ හා සමානව, මාධ්ය විමසුම් බහු බිඳුම් ලක්ෂ්ය පළල දක්වා විහිදේ:
@include media-breakpoint-between(md, xl) { ... }
එහි ප්රතිඵලය වන්නේ:
// Example
// Apply styles starting from medium devices and up to extra large devices
@media (min-width: 768px) and (max-width: 1199.98px) { ... }