अवलोकन

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

कन्टेनरहरू

कन्टेनरहरू बुटस्ट्र्यापमा सबैभन्दा आधारभूत लेआउट तत्व हुन् र हाम्रो पूर्वनिर्धारित ग्रिड प्रणाली प्रयोग गर्दा आवश्यक हुन्छ । उत्तरदायी, निश्चित-चौडाइको कन्टेनर ( max-widthप्रत्येक ब्रेकपोइन्टमा यसको परिवर्तनको अर्थ) वा तरल-चौडाइ (जसको अर्थ यो सधैं 100%फराकिलो हुन्छ) बाट छनौट गर्नुहोस्।

जबकि कन्टेनरहरू नेस्ट गर्न सकिन्छ, धेरै लेआउटहरूलाई नेस्टेड कन्टेनर आवश्यक पर्दैन।

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

.container-fluidभ्यूपोर्टको सम्पूर्ण चौडाइमा फैलिएको पूर्ण चौडाइको कन्टेनरको लागि प्रयोग गर्नुहोस्।

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

उत्तरदायी ब्रेकपोइन्टहरू

बुटस्ट्र्याप पहिले मोबाइल हुनको लागि विकसित भएको हुनाले, हामी हाम्रो लेआउट र इन्टरफेसहरूको लागि समझदार ब्रेकपोइन्टहरू सिर्जना गर्न केही मिडिया प्रश्नहरू प्रयोग गर्छौं। यी ब्रेकपोइन्टहरू प्रायः न्यूनतम भ्यूपोर्ट चौडाइहरूमा आधारित हुन्छन् र हामीलाई भ्यूपोर्ट परिवर्तन हुँदा तत्वहरूलाई मापन गर्न अनुमति दिन्छ।

बुटस्ट्र्यापले मुख्य रूपमा हाम्रो लेआउट, ग्रिड प्रणाली, र कम्पोनेन्टहरूका लागि हाम्रो स्रोत सास फाइलहरूमा निम्न मिडिया क्वेरी दायराहरू वा ब्रेकपोइन्टहरू प्रयोग गर्दछ।

// Extra small devices (portrait phones, less than 576px)
// No media query 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 मार्फत उपलब्ध छन्:

@include media-breakpoint-up(xs) { ... }
@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { ... }

// Example usage:
@include media-breakpoint-up(sm) {
  .some-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) { ... }

न्यूनतम र अधिकतम ब्रेकपोइन्ट चौडाइहरू प्रयोग गरेर स्क्रिन आकारहरूको एकल खण्डलाई लक्षित गर्न मिडिया प्रश्नहरू र मिक्सिनहरू पनि छन्।

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