බහාලුම්

ඔවුන් වැඩ කරන ආකාරය

Bootstrap හි ඇති මූලික පිරිසැලසුම් අංගය බහාලුම් වන අතර අපගේ පෙරනිමි ජාල පද්ධතිය භාවිතා කරන විට අවශ්‍ය වේ . බහාලුම් භාවිතා කරනුයේ ඒවා තුළ ඇති අන්තර්ගතය අඩංගු කිරීමට, පෑඩ් කිරීමට සහ (සමහර විට) මධ්‍යගත කිරීමට ය. බහාලුම් කූඩු කළ හැකි අතර, බොහෝ පිරිසැලසුම් සඳහා කූඩු සහිත බහාලුමක් අවශ්ය නොවේ.

Bootstrap විවිධ බහාලුම් තුනක් සමඟ පැමිණේ:

• .container, එය max-widthඑක් එක් ප්‍රතිචාරාත්මක කඩඉම් ලක්ෂ්‍යයක සකසයි
• .container-{breakpoint}, එය width: 100%නිශ්චිත කඩඉම් ලක්ෂය දක්වා වේ
• .container-fluid, එය width: 100%සියලු කඩඉම් ස්ථාන වල පවතී

පහත වගුවේ දැක්වෙන්නේ එක් එක් බහාලුම් max-widthමුල් පිටපතට .containerසහ .container-fluidඑක් එක් කඩඉම් ලක්ෂ්‍යයෙන් සැසඳෙන ආකාරයයි.

ඒවා ක්‍රියාවෙන් බලන්න සහ අපගේ ජාල උදාහරණයෙන් ඒවා සංසන්දනය කරන්න .

පෙරනිමි බහාලුම්

අපගේ පෙරනිමි .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 කොටස වෙත යොමු වන්න .