अवलोकन
र्यापिङ कन्टेनर, एक शक्तिशाली ग्रिड प्रणाली, लचिलो मिडिया वस्तु, र उत्तरदायी उपयोगिता कक्षाहरू सहित तपाईंको बुटस्ट्र्याप परियोजना बिछ्याउनका लागि अवयवहरू र विकल्पहरू।
कन्टेनरहरू
कन्टेनरहरू बुटस्ट्र्यापमा सबैभन्दा आधारभूत लेआउट तत्व हुन् र हाम्रो पूर्वनिर्धारित ग्रिड प्रणाली प्रयोग गर्दा आवश्यक हुन्छ । कन्टेनरहरू समावेश गर्न प्रयोग गरिन्छ, प्याड, र (कहिलेकाहीँ) तिनीहरू भित्र सामग्री केन्द्रित। जबकि कन्टेनरहरू नेस्ट गर्न सकिन्छ, धेरै लेआउटहरूलाई नेस्टेड कन्टेनर आवश्यक पर्दैन।
बुटस्ट्र्याप तीन फरक कन्टेनरहरूसँग आउँछ:
.container
, जसलेmax-width
प्रत्येक उत्तरदायी ब्रेकपोइन्टमा सेट गर्दछ.container-fluid
, जुनwidth: 100%
सबै ब्रेकपोइन्टहरूमा छ.container-{breakpoint}
, जुनwidth: 100%
निर्दिष्ट ब्रेकपोइन्ट सम्म हुन्छ
तलको तालिकाले प्रत्येक कन्टेनरले मूल र प्रत्येक ब्रेकपोइन्टमा कसरी max-width
तुलना गर्छ भनेर देखाउँछ।.container
.container-fluid
तिनीहरूलाई कार्यमा हेर्नुहोस् र तिनीहरूलाई हाम्रो ग्रिड उदाहरणमा तुलना गर्नुहोस् ।
अतिरिक्त सानो <576px |
सानो ≥576px |
मध्यम ≥768px |
ठूलो ≥992px |
अतिरिक्त ठूलो ≥1200px |
|
---|---|---|---|---|---|
.container |
100% | 540px | 720px | 960px | 1140px |
.container-sm |
100% | 540px | 720px | 960px | 1140px |
.container-md |
100% | 100% | 720px | 960px | 1140px |
.container-lg |
100% | 100% | 100% | 960px | 1140px |
.container-xl |
100% | 100% | 100% | 100% | 1140px |
.container-fluid |
100% | 100% | 100% | 100% | 100% |
सबै-मा-एक
हाम्रो पूर्वनिर्धारित .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
सुरु गर्न १००% चौडा छ , जहाँ यो , , र 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>
उत्तरदायी ब्रेकपोइन्टहरू
बुटस्ट्र्याप पहिले मोबाइल हुनको लागि विकसित भएको हुनाले, हामी हाम्रो लेआउट र इन्टरफेसहरूको लागि समझदार ब्रेकपोइन्टहरू सिर्जना गर्न केही मिडिया प्रश्नहरू प्रयोग गर्छौं। यी ब्रेकपोइन्टहरू प्रायः न्यूनतम भ्यूपोर्ट चौडाइहरूमा आधारित हुन्छन् र हामीलाई भ्यूपोर्ट परिवर्तन हुँदा तत्वहरूलाई मापन गर्न अनुमति दिन्छ।
बुटस्ट्र्यापले मुख्य रूपमा हाम्रो लेआउट, ग्रिड प्रणाली, र कम्पोनेन्टहरूका लागि हाम्रो स्रोत सास फाइलहरूमा निम्न मिडिया क्वेरी दायराहरू वा ब्रेकपोइन्टहरू प्रयोग गर्दछ।
// 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) { ... }
हामीले Sass मा हाम्रो स्रोत CSS लेख्ने भएकोले, हाम्रा सबै मिडिया प्रश्नहरू 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
min-
रmax-
भ्यूपोर्टहरूको सीमितताहरू वरिपरि काम गर्छौं।
।
फेरि, यी मिडिया प्रश्नहरू 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 मिक्सिन हुनेछ:
@include media-breakpoint-between(md, xl) { ... }
Z-सूचकांक
धेरै बुटस्ट्र्याप कम्पोनेन्टहरू प्रयोग गर्दछ z-index
, CSS गुण जसले सामग्री व्यवस्थित गर्न तेस्रो अक्ष प्रदान गरेर लेआउट नियन्त्रण गर्न मद्दत गर्दछ। हामी बुटस्ट्र्यापमा पूर्वनिर्धारित z-इन्डेक्स स्केल प्रयोग गर्छौं जुन नेभिगेसन, टुलटिप्स र पपओभरहरू, मोडलहरू, र थप कुराहरू ठीकसँग तह लगाउन डिजाइन गरिएको हो।
यी उच्च मानहरू स्वेच्छाचारी संख्यामा सुरु हुन्छन्, उच्च र विशिष्ट रूपमा द्वन्द्वहरूबाट बच्न पर्याप्त छन्। हामीलाई हाम्रा स्तरित कम्पोनेन्टहरू - टुलटिप्स, पोपोभरहरू, नेभबारहरू, ड्रपडाउनहरू, मोडलहरूमा यी को मानक सेट चाहिन्छ - त्यसैले हामी व्यवहारहरूमा उचित रूपमा एकरूप हुन सक्छौं। 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-index
भाइ तत्वहरूमा उनीहरूको सीमा देखाउन उच्च मूल्यको साथ अगाडि ल्याउँछौं।