विरामबिन्दवः

मूल अवधारणाएँ

• ब्रेकपॉइण्ट् प्रतिक्रियाशीलस्य डिजाइनस्य निर्माणखण्डाः सन्ति। कदा भवतः विन्यासः कदा विशेषदृश्यस्थाने अथवा यन्त्रस्य आकारे अनुकूलितुं शक्यते इति नियन्त्रयितुं तान् उपयुज्यताम् ।

• breakpoint द्वारा स्वस्य CSS आर्किटेक्ट् कर्तुं मीडिया प्रश्नानां उपयोगं कुर्वन्तु । मीडिया प्रश्नाः CSS इत्यस्य एकं विशेषता अस्ति यत् भवन्तः ब्राउजर् तथा ऑपरेटिंग सिस्टम् पैरामीटर् इत्यस्य समुच्चयस्य आधारेण शैल्याः सशर्तरूपेण प्रयोक्तुं शक्नुवन्ति । वयं अधिकतया min-widthअस्माकं मीडियाप्रश्नेषु उपयुञ्ज्महे।

• मोबाइल प्रथमं, प्रतिक्रियाशीलं डिजाइनं लक्ष्यम् अस्ति। Bootstrap इत्यस्य CSS इत्यस्य उद्देश्यं भवति यत् लघुतमस्य breakpoint इत्यत्र विन्यासं कार्यं कर्तुं शैल्याः न्यूनतमं प्रयोक्तुं, ततः बृहत्तरयन्त्राणां कृते तत् डिजाइनं समायोजयितुं शैलीषु स्तराः भवन्ति एतेन भवतः CSS अनुकूलितं भवति, प्रतिपादनसमयः सुधरति, भवतः आगन्तुकानां कृते महान् अनुभवः च प्राप्यते ।

उपलब्ध ब्रेकपॉइंट

बूटस्ट्रैप् इत्यत्र प्रतिक्रियाशीलरूपेण निर्माणार्थं षट् पूर्वनिर्धारितविरामबिन्दवः सन्ति, ये कदाचित् grid tiers इति उच्यन्ते । यदि भवान् अस्माकं स्रोत Sass सञ्चिकाः उपयुज्यते तर्हि एते breakpoints अनुकूलितुं शक्यन्ते ।

प्रत्येकं भङ्गबिन्दुः आरामेन पात्राणि धारयितुं चयनितः आसीत् यस्य विस्तारः 12 गुणकः भवति भङ्गबिन्दवः सामान्ययन्त्राकारस्य दृश्यपोर्टआयामानां च उपसमूहस्य प्रतिनिधिः अपि भवति-ते प्रत्येकं उपयोगप्रकरणं वा यन्त्रं वा विशेषरूपेण लक्ष्यं न कुर्वन्ति। अपि तु, श्रेणयः प्रायः कस्यापि यन्त्रस्य कृते निर्माणार्थं दृढं सुसंगतं च आधारं प्रदान्ति ।

_variables.scssएते breakpoints Sass मार्गेण अनुकूलनीयाः सन्ति—अस्माकं stylesheet मध्ये Sass map मध्ये भवन्तः तान् प्राप्नुवन्ति ।

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
);

अस्माकं Sass मानचित्रं चर च कथं परिवर्तयितव्यम् इति विषये अधिकसूचनार्थं उदाहरणार्थं च कृपया Grid documentation इत्यस्य Sass विभागं पश्यन्तु ।

मीडिया प्रश्नाः

यतः Bootstrap प्रथमं चलं भवितुं विकसितम् अस्ति, अतः वयं अस्माकं लेआउट्-अन्तरफलकानां कृते बोधगम्य-ब्रेक-पॉइण्ट्-निर्माणार्थं मुष्टिभ्यां मीडिया-प्रश्नानां उपयोगं कुर्मः । एते breakpoints अधिकतया न्यूनतम viewport widths इत्यस्य आधारेण भवन्ति तथा च viewport इत्यस्य परिवर्तनेन अस्मान् elements scale up कर्तुं शक्नुवन्ति ।

मिन्-विस्तारः

Bootstrap मुख्यतया अस्माकं विन्यासस्य, जालप्रणाल्याः, घटकानां च कृते अस्माकं स्रोत Sass सञ्चिकासु निम्नलिखितमाध्यमप्रश्नपरिधिषु—अथवा breakpoints—उपयोगं करोति ।

// 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 mixins अस्माकं Sass variables मध्ये घोषितमूल्यानां उपयोगेन अस्माकं संकलिते 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) { ... }

एकल भङ्गबिन्दु

न्यूनतमं अधिकतमं च ब्रेकपॉइण्ट् विस्तारं उपयुज्य स्क्रीन-आकारस्य एकस्य खण्डस्य लक्ष्यीकरणार्थं मीडिया-प्रश्नानि, मिक्सिन्-इत्यादीनि अपि सन्ति ।

@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) { ... }will इत्यस्य परिणामः : .

@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) { ... }