ब्रेकपोइन्टहरू
ब्रेकपोइन्टहरू अनुकूलन योग्य चौडाइहरू हुन् जसले बुटस्ट्र्यापमा यन्त्र वा भ्यूपोर्ट आकारहरूमा तपाईंको प्रतिक्रियाशील लेआउटले कसरी व्यवहार गर्छ भनेर निर्धारण गर्दछ।
मूल अवधारणाहरू
-
ब्रेकपोइन्टहरू उत्तरदायी डिजाइनको निर्माण ब्लकहरू हुन्। तपाइँको लेआउट एक विशेष भ्यूपोर्ट वा उपकरण आकार मा अनुकूलित गर्न सकिन्छ जब नियन्त्रण गर्न तिनीहरूलाई प्रयोग गर्नुहोस्।
-
ब्रेकपोइन्ट द्वारा आफ्नो CSS आर्किटेक्ट गर्न मिडिया प्रश्नहरू प्रयोग गर्नुहोस्। मिडिया क्वेरीहरू CSS को एक विशेषता हो जसले तपाईंलाई ब्राउजर र अपरेटिङ सिस्टम प्यारामिटरहरूको सेटमा आधारित शैलीहरू लागू गर्न अनुमति दिन्छ। हामी प्राय:
min-width
हाम्रो मिडिया प्रश्नहरूमा प्रयोग गर्छौं। -
मोबाइल पहिले, उत्तरदायी डिजाइन लक्ष्य हो। बुटस्ट्र्यापको CSS ले सबैभन्दा सानो ब्रेकपोइन्टमा लेआउट कार्य गर्नका लागि न्यूनतम शैलीहरू लागू गर्ने लक्ष्य राख्छ, र त्यसपछि ठूला यन्त्रहरूको लागि त्यो डिजाइन समायोजन गर्न शैलीहरूमा तहहरू बनाउँछ। यसले तपाइँको CSS लाई अप्टिमाइज गर्दछ, रेन्डरिङ समय सुधार गर्दछ, र तपाइँका आगन्तुकहरूलाई उत्कृष्ट अनुभव प्रदान गर्दछ।
उपलब्ध ब्रेकपोइन्टहरू
बुटस्ट्र्यापले छ पूर्वनिर्धारित ब्रेकपोइन्टहरू समावेश गर्दछ, कहिलेकाहीँ ग्रिड टियरहरू भनिन्छ , उत्तरदायी रूपमा निर्माणको लागि। यदि तपाइँ हाम्रो स्रोत Sass फाइलहरू प्रयोग गर्दै हुनुहुन्छ भने यी ब्रेकपोइन्टहरू अनुकूलित गर्न सकिन्छ।
ब्रेकपोइन्ट | क्लास इन्फिक्स | आयामहरू |
---|---|---|
X-सानो | कुनै पनि छैन | <५७६ पिक्सेल |
सानो | sm |
≥576px |
मध्यम | md |
≥768px |
ठूलो | lg |
≥992px |
धेरै ठूलाे | xl |
≥1200px |
अतिरिक्त अतिरिक्त ठूलो | xxl |
≥1400px |
प्रत्येक ब्रेकपोइन्टलाई कन्टेनरहरू आरामसँग राख्नको लागि छनोट गरिएको थियो जसको चौडाइ १२ को गुणन हुन्छ। ब्रेकपोइन्टहरू सामान्य यन्त्र आकारहरू र भ्यूपोर्ट आयामहरूको उपसमूहका प्रतिनिधि पनि हुन् — तिनीहरूले प्रत्येक प्रयोग केस वा उपकरणलाई विशेष रूपमा लक्षित गर्दैनन्। यसको सट्टा, दायराहरूले लगभग कुनै पनि उपकरणको लागि निर्माण गर्न बलियो र निरन्तर आधार प्रदान गर्दछ।
_variables.scss
यी ब्रेकपोइन्टहरू Sass मार्फत अनुकूलन योग्य छन् — तपाईंले तिनीहरूलाई हाम्रो स्टाइलसिटको Sass नक्सामा फेला पार्नुहुनेछ ।
$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px,
xxl: 1400px
);
हाम्रो Sass नक्सा र चरहरू कसरी परिमार्जन गर्ने भन्ने बारे थप जानकारी र उदाहरणहरूको लागि, कृपया ग्रिड कागजातको 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 मिक्सिनहरू हाम्रो 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
मानहरूको रूपमा प्रयोग गर्छन्। उदाहरणका लागि:
// `xs` returns only a ruleset and no media query
// ... { ... }
// `sm` applies to x-small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }
// `md` applies to small devices (landscape phones, less than 768px)
@media (max-width: 767.98px) { ... }
// `lg` applies to medium devices (tablets, less than 992px)
@media (max-width: 991.98px) { ... }
// `xl` applies to large devices (desktops, less than 1200px)
@media (max-width: 1199.98px) { ... }
// `xxl` applies to x-large devices (large desktops, less than 1400px)
@media (max-width: 1399.98px) { ... }
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) { ... }