अवलोकन

र्‍यापिङ कन्टेनर, एक शक्तिशाली ग्रिड प्रणाली, लचिलो मिडिया वस्तु, र उत्तरदायी उपयोगिता कक्षाहरू सहित तपाईंको बुटस्ट्र्याप परियोजना बिछ्याउनका लागि अवयवहरू र विकल्पहरू।

कन्टेनरहरू

कन्टेनरहरू बुटस्ट्र्यापमा सबैभन्दा आधारभूत लेआउट तत्व हुन् र हाम्रो पूर्वनिर्धारित ग्रिड प्रणाली प्रयोग गर्दा आवश्यक हुन्छ । कन्टेनरहरू समावेश गर्न प्रयोग गरिन्छ, प्याड, र (कहिलेकाहीँ) तिनीहरू भित्र सामग्री केन्द्रित। जबकि कन्टेनरहरू नेस्ट गर्न सकिन्छ, धेरै लेआउटहरूलाई नेस्टेड कन्टेनर आवश्यक पर्दैन।

बुटस्ट्र्याप तीन फरक कन्टेनरहरूसँग आउँछ:

• .container, जसले max-widthप्रत्येक उत्तरदायी ब्रेकपोइन्टमा सेट गर्दछ
• .container-fluid, जुन width: 100%सबै ब्रेकपोइन्टहरूमा छ
• .container-{breakpoint}, जुन width: 100%निर्दिष्ट ब्रेकपोइन्ट सम्म हुन्छ

तलको तालिकाले प्रत्येक कन्टेनरले मूल र प्रत्येक ब्रेकपोइन्टमा कसरी max-widthतुलना गर्छ भनेर देखाउँछ।.container.container-fluid

तिनीहरूलाई कार्यमा हेर्नुहोस् र तिनीहरूलाई हाम्रो ग्रिड उदाहरणमा तुलना गर्नुहोस् ।

सबै-मा-एक

हाम्रो पूर्वनिर्धारित .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सँग मापन हुनेछ ।mdlgxl

<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

फेरि, यी मिडिया प्रश्नहरू 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भाइ तत्वहरूमा तिनीहरूको सीमा देखाउन उच्च मूल्यको साथ अगाडि ल्याउँछौं।