ಮುಖ್ಯ ವಿಷಯಕ್ಕೆ ತೆರಳಿ ಡಾಕ್ಸ್ ನ್ಯಾವಿಗೇಶನ್‌ಗೆ ತೆರಳಿ
Check
in English

ಕಂಟೈನರ್ಗಳು

ಕಂಟೈನರ್‌ಗಳು ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನ ಮೂಲಭೂತ ಬಿಲ್ಡಿಂಗ್ ಬ್ಲಾಕ್ ಆಗಿದ್ದು ಅದು ನಿರ್ದಿಷ್ಟ ಸಾಧನ ಅಥವಾ ವೀಕ್ಷಣೆ ಪೋರ್ಟ್‌ನಲ್ಲಿ ನಿಮ್ಮ ವಿಷಯವನ್ನು ಒಳಗೊಂಡಿರುತ್ತದೆ, ಪ್ಯಾಡ್ ಮಾಡಿ ಮತ್ತು ಜೋಡಿಸುತ್ತದೆ.

ಅವರು ಹೇಗೆ ಕೆಲಸ ಮಾಡುತ್ತಾರೆ

ಕಂಟೈನರ್‌ಗಳು ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನಲ್ಲಿ ಅತ್ಯಂತ ಮೂಲಭೂತ ಲೇಔಟ್ ಅಂಶವಾಗಿದೆ ಮತ್ತು ನಮ್ಮ ಡೀಫಾಲ್ಟ್ ಗ್ರಿಡ್ ಸಿಸ್ಟಮ್ ಅನ್ನು ಬಳಸುವಾಗ ಅಗತ್ಯವಿರುತ್ತದೆ . ಕಂಟೈನರ್‌ಗಳನ್ನು ಅವುಗಳೊಳಗಿನ ವಿಷಯವನ್ನು ಒಳಗೊಂಡಿರಲು, ಪ್ಯಾಡ್ ಮಾಡಲು ಮತ್ತು (ಕೆಲವೊಮ್ಮೆ) ಕೇಂದ್ರೀಕರಿಸಲು ಬಳಸಲಾಗುತ್ತದೆ. ಕಂಟೈನರ್‌ಗಳನ್ನು ನೆಸ್ಟ್ ಮಾಡಬಹುದಾದರೂ , ಹೆಚ್ಚಿನ ಲೇಔಟ್‌ಗಳಿಗೆ ನೆಸ್ಟೆಡ್ ಕಂಟೇನರ್ ಅಗತ್ಯವಿಲ್ಲ.

ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಮೂರು ವಿಭಿನ್ನ ಧಾರಕಗಳೊಂದಿಗೆ ಬರುತ್ತದೆ:

  • .containermax-width, ಇದು ಪ್ರತಿ ರೆಸ್ಪಾನ್ಸಿವ್ ಬ್ರೇಕ್‌ಪಾಯಿಂಟ್‌ನಲ್ಲಿ a ಅನ್ನು ಹೊಂದಿಸುತ್ತದೆ
  • .container-{breakpoint}, ಇದು width: 100%ನಿಗದಿತ ಬ್ರೇಕ್‌ಪಾಯಿಂಟ್‌ವರೆಗೆ ಇರುತ್ತದೆ
  • .container-fluid, ಇದು width: 100%ಎಲ್ಲಾ ಬ್ರೇಕ್‌ಪಾಯಿಂಟ್‌ಗಳಲ್ಲಿದೆ

ಕೆಳಗಿನ ಕೋಷ್ಟಕವು ಪ್ರತಿ ಕಂಟೇನರ್ ಮೂಲ ಮತ್ತು ಪ್ರತಿ ಬ್ರೇಕ್‌ಪಾಯಿಂಟ್‌ನಾದ್ಯಂತ ಹೇಗೆ max-widthಹೋಲಿಸುತ್ತದೆ ಎಂಬುದನ್ನು ವಿವರಿಸುತ್ತದೆ..container.container-fluid

ಅವುಗಳನ್ನು ಕ್ರಿಯೆಯಲ್ಲಿ ನೋಡಿ ಮತ್ತು ನಮ್ಮ ಗ್ರಿಡ್ ಉದಾಹರಣೆಯಲ್ಲಿ ಹೋಲಿಕೆ ಮಾಡಿ .

ಹೆಚ್ಚುವರಿ ಚಿಕ್ಕದು
<576px
ಚಿಕ್ಕದು
≥576px
ಮಾಧ್ಯಮ
≥768px
ದೊಡ್ಡದು
≥992px
ಎಕ್ಸ್-ದೊಡ್ಡದು
≥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>

ಸಾಸ್

ಮೇಲೆ ತೋರಿಸಿರುವಂತೆ, ನೀವು ಬಯಸುವ ಲೇಔಟ್‌ಗಳನ್ನು ನಿರ್ಮಿಸಲು ನಿಮಗೆ ಸಹಾಯ ಮಾಡಲು ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಪೂರ್ವನಿರ್ಧರಿತ ಧಾರಕ ವರ್ಗಗಳ ಸರಣಿಯನ್ನು ಉತ್ಪಾದಿಸುತ್ತದೆ. ಸಾಸ್ ನಕ್ಷೆಯನ್ನು ಮಾರ್ಪಡಿಸುವ ಮೂಲಕ ನೀವು ಈ ಪೂರ್ವನಿರ್ಧರಿತ ಕಂಟೇನರ್ ತರಗತಿಗಳನ್ನು ಕಸ್ಟಮೈಸ್ ಮಾಡಬಹುದು (ಇಲ್ಲಿ ಕಂಡುಬರುತ್ತದೆ _variables.scss) ಅದು ಅವರಿಗೆ ಶಕ್ತಿ ನೀಡುತ್ತದೆ:

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px,
  xxl: 1320px
);

ಸಾಸ್ ಅನ್ನು ಕಸ್ಟಮೈಸ್ ಮಾಡುವುದರ ಜೊತೆಗೆ, ನಮ್ಮ ಸಾಸ್ ಮಿಕ್ಸಿನ್‌ನೊಂದಿಗೆ ನಿಮ್ಮ ಸ್ವಂತ ಕಂಟೈನರ್‌ಗಳನ್ನು ಸಹ ನೀವು ರಚಿಸಬಹುದು.

// 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();
}

ನಮ್ಮ ಸಾಸ್ ನಕ್ಷೆಗಳು ಮತ್ತು ವೇರಿಯೇಬಲ್‌ಗಳನ್ನು ಹೇಗೆ ಮಾರ್ಪಡಿಸುವುದು ಎಂಬುದರ ಕುರಿತು ಹೆಚ್ಚಿನ ಮಾಹಿತಿ ಮತ್ತು ಉದಾಹರಣೆಗಳಿಗಾಗಿ, ದಯವಿಟ್ಟು ಗ್ರಿಡ್ ದಸ್ತಾವೇಜನ್ನು ಸಾಸ್ ವಿಭಾಗವನ್ನು ನೋಡಿ .