බහාලුම්
බහාලුම් යනු ලබා දී ඇති උපාංගයක් හෝ දර්ශන තොටක් තුළ ඔබේ අන්තර්ගතය අඩංගු, පෑඩ් සහ පෙළගස්වන Bootstrap හි මූලික ගොඩනැඟිලි කොටසකි.
ඔවුන් වැඩ කරන ආකාරය
Bootstrap හි ඇති මූලික පිරිසැලසුම් අංගය බහාලුම් වන අතර අපගේ පෙරනිමි ජාල පද්ධතිය භාවිතා කරන විට අවශ්ය වේ . බහාලුම් භාවිතා කරනුයේ ඒවා තුළ ඇති අන්තර්ගතය අඩංගු කිරීමට, පෑඩ් කිරීමට සහ (සමහර විට) මධ්යගත කිරීමට ය. බහාලුම් කූඩු කළ හැකි අතර, බොහෝ පිරිසැලසුම් සඳහා කූඩු සහිත බහාලුමක් අවශ්ය නොවේ.
Bootstrap විවිධ බහාලුම් තුනක් සමඟ පැමිණේ:
.container
, එයmax-width
එක් එක් ප්රතිචාරාත්මක කඩඉම් ලක්ෂ්යයක සකසයි.container-fluid
, එයwidth: 100%
සියලු කඩඉම් ස්ථාන වල පවතී.container-{breakpoint}
, එයwidth: 100%
නිශ්චිත කඩඉම් ලක්ෂය දක්වා වේ
පහත වගුවේ දැක්වෙන්නේ එක් එක් බහාලුම් max-width
මුල් පිටපතට .container
සහ .container-fluid
එක් එක් කඩඉම් ලක්ෂ්යයෙන් සැසඳෙන ආකාරයයි.
ඒවා ක්රියාවෙන් බලන්න සහ අපගේ ජාල උදාහරණයෙන් ඒවා සංසන්දනය කරන්න .
අමතර කුඩා <576px |
කුඩා ≥576px |
මධ්යම ≥768px |
විශාල ≥992px |
X-විශාල ≥1200px |
XX-විශාල ≥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% |
පෙරනිමි බහාලුම්
අපගේ පෙරනිමි .container
පන්තිය ප්රතිචාර දක්වන, ස්ථාවර පළල max-width
බහාලුමකි, එනම් එක් එක් කඩඉම් ලක්ෂ්යයෙන් එහි වෙනස්වීම්.
<div class="container">
<!-- Content here -->
</div>
ප්රතිචාරාත්මක බහාලුම්
ප්රතිචාර දක්වන බහාලුම් ඔබට නියමිත කඩඉම් ලක්ෂ්යය ළඟා වන තෙක් 100% පළල පන්තියක් නියම කිරීමට ඉඩ සලසයි, ඉන් පසුව අපි max-width
එක් එක් ඉහළ කඩඉම් සඳහා s යොදන්නෙමු. උදාහරණයක් ලෙස, බිඳුම් ලක්ෂ්යය ළඟා .container-sm
වන තෙක් ආරම්භ කිරීමට 100% පළල sm
වේ, එහිදී එය md
, lg
, xl
, සහ සමඟ පරිමාණය කරනු ඇත 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>
දියර බහාලුම්
.container-fluid
දර්ශන තොටේ සම්පූර්ණ පළල පුරා විහිදෙන, සම්පූර්ණ පළල බහාලුමක් සඳහා භාවිතා කරන්න .
<div class="container-fluid">
...
</div>
සාස්
ඉහත පෙන්වා ඇති පරිදි, Bootstrap ඔබට අවශ්ය පිරිසැලසුම් ගොඩනගා ගැනීමට උපකාර කිරීම සඳහා පූර්ව නිශ්චිත බහාලුම් පන්ති මාලාවක් ජනනය කරයි. ඔබට මෙම පූර්ව නිර්වචනය කරන ලද බහාලුම් පන්ති බල ගන්වන Sass සිතියම (හි සොයාගත් _variables.scss
) වෙනස් කිරීමෙන් අභිරුචිකරණය කළ හැකිය:
$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px,
xxl: 1320px
);
Sass අභිරුචිකරණය කිරීමට අමතරව, ඔබට අපගේ 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();
}
අපගේ Sass සිතියම් සහ විචල්යයන් වෙනස් කරන්නේ කෙසේද යන්න පිළිබඳ වැඩි විස්තර සහ උදාහරණ සඳහා, කරුණාකර ජාල ලේඛනවල Sass කොටස වෙත යොමු වන්න .