දළ විශ්ලේෂණය

ඔතා බහාලුම්, බලගතු ජාල පද්ධතියක්, නම්‍යශීලී මාධ්‍ය වස්තුවක් සහ ප්‍රතිචාරාත්මක උපයෝගිතා පන්ති ඇතුළුව, ඔබේ බූට්ස්ට්‍රැප් ව්‍යාපෘතිය තැබීම සඳහා සංරචක සහ විකල්ප.

බහාලුම්

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

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

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

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

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

All-in-one

අපගේ පෙරනිමි .containerපන්තිය ප්‍රතිචාර දක්වන, ස්ථාවර පළල max-widthබහාලුමකි, එනම් එක් එක් කඩඉම් ලක්ෂ්‍යයෙන් එහි වෙනස්වීම්.

<div class="container">
  <!-- Content here -->
</div>

තරල

.container-fluidදර්ශන තොටේ සම්පූර්ණ පළල පුරා විහිදෙන, සම්පූර්ණ පළල බහාලුමක් සඳහා භාවිතා කරන්න .

<div class="container-fluid">
  ...
</div>

ප්රතිචාරාත්මක

Bootstrap v4.4 හි ප්‍රතිචාර දක්වන බහාලුම් අලුත් ය. ඔවුන් ඔබට නිශ්චිත කඩඉම් ලක්ෂ්‍යය ළඟා වන තෙක් 100% පළල පන්තියක් නියම කිරීමට ඉඩ සලසයි, ඉන්පසු අපි max-widthඑක් එක් ඉහළ කඩඉම් සඳහා s යොදන්නෙමු. උදාහරණයක් ලෙස, බිඳුම් ලක්ෂ්‍යය ළඟා .container-smවන තෙක් ආරම්භ කිරීමට 100% පළල smවේ, එහිදී එය md, lg, සහ 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>

ප්‍රතිචාරාත්මක කඩඉම් ලකුණු

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

Bootstrap මූලික වශයෙන් අපගේ පිරිසැලසුම, ජාල පද්ධතිය සහ සංරචක සඳහා අපගේ මූලාශ්‍ර Sass ගොනු තුළ පහත මාධ්‍ය විමසුම් පරාසයන් හෝ බිඳුම් ලක්ෂ්‍ය භාවිතා කරයි.

// 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) { ... }

අපි අපගේ මූලාශ්‍ර CSS Sass හි ලියන බැවින්, අපගේ සියලුම මාධ්‍ය විමසුම් 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;
  }
}

අපි ඉඳහිට අනෙක් දිශාවට යන මාධ්‍ය විමසුම් භාවිතා කරමු (දී ඇති තිර ප්‍රමාණය හෝ කුඩා ):

// 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

නැවත වරක්, මෙම මාධ්‍ය විමසුම් 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;
  }
}

අවම සහ උපරිම කඩඉම් පළල භාවිතා කරමින් තිර ප්‍රමාණයේ තනි කොටසක් ඉලක්ක කර ගැනීම සඳහා මාධ්‍ය විමසුම් සහ මික්සින් ද ඇත.

// 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) { ... }

මෙම මාධ්‍ය විමසුම් 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) { ... }

ඒ හා සමානව, මාධ්‍ය විමසුම් බහු බිඳුම් ලක්ෂ්‍ය පළල දක්වා විහිදේ:

// Example
// Apply styles starting from medium devices and up to extra large devices
@media (min-width: 768px) and (max-width: 1199.98px) { ... }

එකම තිර ප්‍රමාණයේ පරාසය ඉලක්ක කර ගැනීම සඳහා Sass mixin වනුයේ:

@include media-breakpoint-between(md, xl) { ... }

Z-දර්ශකය

z-indexඅන්තර්ගත සැකසීමට තුන්වන අක්ෂයක් ලබා දීමෙන් පිරිසැලසුම පාලනය කිරීමට උපකාර වන CSS ගුණය වන Bootstrap සංරචක කිහිපයක් භාවිතා කරයි. අපි Bootstrap හි පෙරනිමි z-දර්ශක පරිමාණයක් භාවිතා කරමු, එය නිසි ලෙස ස්ථර සංචාලනය, මෙවලම් ඉඟි සහ popovers, modals සහ තවත් දේ සඳහා නිර්මාණය කර ඇත.

මෙම ඉහළ අගයන් අත්තනෝමතික සංඛ්‍යාවකින් ආරම්භ වේ, ගැටුම් ඉතා මැනවින් වළක්වා ගැනීමට තරම් ඉහළ සහ විශේෂිත වේ. අපට අපගේ ස්ථර සංරචක හරහා මේවායේ සම්මත කට්ටලයක් අවශ්‍ය වේ—මෙවලම් ඉඟි, popovers, navbars, dropdowns, modals—එබැවින් අපට හැසිරීම් වල සාධාරණ ලෙස ස්ථාවර විය හැක. 100අපට + හෝ + භාවිත කිරීමට නොහැකි වීමට හේතුවක් නැත 500.

අපි මෙම තනි අගයන් අභිරුචිකරණය කිරීම දිරිමත් නොකරමු; ඔබ එකක් වෙනස් කළහොත්, ඔබට ඒවා සියල්ලම වෙනස් කිරීමට සිදුවේ.

$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;

සංරචක තුළ අතිච්ඡාදනය වන මායිම් හැසිරවීමට (උදා, ආදාන කණ්ඩායම්වල බොත්තම් සහ ආදාන), අපි අඩු තනි ඉලක්කම් z-indexඅගයන් 1, 2, සහ 3පෙරනිමි, හොවර් සහ සක්‍රීය තත්වයන් සඳහා භාවිතා කරමු. z-indexhover/focus/active මත, අපි සහෝදර මූලද්‍රව්‍ය මත ඔවුන්ගේ මායිම පෙන්වීමට ඉහළ අගයක් සහිත විශේෂිත මූලද්‍රව්‍යයක් ඉදිරියට ගෙන එන්නෙමු.