ସମୀକ୍ଷା

ତୁମର ବୁଟଷ୍ଟ୍ରାପ୍ ପ୍ରୋଜେକ୍ଟ ରଖିବା ପାଇଁ ଉପାଦାନ ଏବଂ ବିକଳ୍ପଗୁଡ଼ିକ, ରାପିଙ୍ଗ୍ ପାତ୍ରଗୁଡିକ, ଏକ ଶକ୍ତିଶାଳୀ ଗ୍ରୀଡ୍ ସିଷ୍ଟମ୍, ଏକ ନମନୀୟ ମିଡିଆ ବସ୍ତୁ ଏବଂ ପ୍ରତିକ୍ରିୟାଶୀଳ ୟୁଟିଲିଟି କ୍ଲାସ୍ ଅନ୍ତର୍ଭୁକ୍ତ କରେ |

ପାତ୍ରଗୁଡିକ |

କଣ୍ଟେନର୍ ଗୁଡିକ ବୁଟଷ୍ଟ୍ରାପ୍ ର ସବୁଠାରୁ ମ basic ଳିକ ଲେଆଉଟ୍ ଉପାଦାନ ଏବଂ ଆମର ଡିଫଲ୍ଟ ଗ୍ରୀଡ୍ ସିଷ୍ଟମ୍ ବ୍ୟବହାର କରିବା ସମୟରେ ଆବଶ୍ୟକ | ଧାରଣକାରୀ, ପ୍ୟାଡ୍, ଏବଂ (ବେଳେବେଳେ) ସେମାନଙ୍କ ଭିତରେ ଥିବା ବିଷୟବସ୍ତୁକୁ କେନ୍ଦ୍ର କରିବା ପାଇଁ ବ୍ୟବହୃତ ହୁଏ | ଯେତେବେଳେ ପାତ୍ରଗୁଡିକ ବସା ବାନ୍ଧିହେବ, ଅଧିକାଂଶ ଲେଆଉଟ୍ ଗୁଡିକ ଏକ ନେଷ୍ଟେଡ୍ ପାତ୍ରର ଆବଶ୍ୟକ କରନ୍ତି ନାହିଁ |

ତିନୋଟି ଭିନ୍ନ ପାତ୍ର ସହିତ ବୁଟଷ୍ଟ୍ରାପ୍ ଆସେ:

• .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>

ପ୍ରତିକ୍ରିୟାଶୀଳ |

ବୁଟଷ୍ଟ୍ରାପ୍ v4.4 ରେ ପ୍ରତିକ୍ରିୟାଶୀଳ ପାତ୍ରଗୁଡିକ ନୂତନ ଅଟେ | ସେମାନେ ଆପଣଙ୍କୁ ଏକ ଶ୍ରେଣୀ ନିର୍ଦ୍ଦିଷ୍ଟ କରିବାକୁ ଅନୁମତି ଦିଅନ୍ତି ଯାହାକି ନିର୍ଦ୍ଦିଷ୍ଟ ବ୍ରେକପଏଣ୍ଟ ପହଞ୍ଚିବା ପର୍ଯ୍ୟନ୍ତ 100% ଚଉଡା, ଯାହା ପରେ ଆମେ max-widthପ୍ରତ୍ୟେକ ଉଚ୍ଚ ବ୍ରେକପଏଣ୍ଟ ପାଇଁ s ପ୍ରୟୋଗ କରୁ | ଉଦାହରଣ ସ୍ .ରୁପ, ବ୍ରେକପଏଣ୍ଟ ପହଞ୍ଚିବା .container-smପର୍ଯ୍ୟନ୍ତ ଆରମ୍ଭ କରିବା ପାଇଁ 100% ଚଉଡା 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>

ପ୍ରତିକ୍ରିୟାଶୀଳ ବ୍ରେକପଏଣ୍ଟ |

ଯେହେତୁ ପ୍ରଥମେ ମୋବାଇଲ୍ ହେବା ପାଇଁ ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ ବିକଶିତ ହୋଇଛି, ଆମେ ଆମର ଲେଆଉଟ୍ ଏବଂ ଇଣ୍ଟରଫେସ୍ ପାଇଁ ସମ୍ବେଦନଶୀଳ ବ୍ରେକପଏଣ୍ଟ ସୃଷ୍ଟି କରିବାକୁ ମୁଠାଏ ମିଡିଆ ଜିଜ୍ଞାସା ବ୍ୟବହାର କରୁ | ଏହି ବ୍ରେକପଏଣ୍ଟଗୁଡ଼ିକ ପ୍ରାୟତ minimum ସର୍ବନିମ୍ନ ଭ୍ୟୁପୋର୍ଟ ପ୍ରସ୍ଥ ଉପରେ ଆଧାରିତ ଏବଂ ଭ୍ୟୁପୋର୍ଟ ପରିବର୍ତ୍ତନ ହେବା ସହିତ ଆମକୁ ଉପାଦାନଗୁଡିକ ସ୍କେଲ କରିବାକୁ ଅନୁମତି ଦିଏ |

ଆମର ଲେଆଉଟ୍, ଗ୍ରୀଡ୍ ସିଷ୍ଟମ୍, ଏବଂ ଉପାଦାନଗୁଡ଼ିକ ପାଇଁ ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ ମୁଖ୍ୟତ the ନିମ୍ନଲିଖିତ ମିଡିଆ ଜିଜ୍ଞାସା ରେଞ୍ଜ - କିମ୍ବା ବ୍ରେକପଏଣ୍ଟ ବ୍ୟବହାର କରେ |

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

ଯେହେତୁ ଆମେ ସାସରେ ଆମର ଉତ୍ସ CSS ଲେଖୁ, ଆମର ସମସ୍ତ ମିଡିଆ ଜିଜ୍ଞାସା ସାସ୍ ମିଶ୍ରଣ ମାଧ୍ୟମରେ ଉପଲବ୍ଧ:

// 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

ପୁଣିଥରେ, ଏହି ମିଡିଆ ପ୍ରଶ୍ନଗୁଡ଼ିକ ସାସ୍ ମିଶ୍ରଣ ମାଧ୍ୟମରେ ମଧ୍ୟ ଉପଲବ୍ଧ:

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

ଏହି ମିଡିଆ ପ୍ରଶ୍ନଗୁଡ଼ିକ ସାସ୍ ମିଶ୍ରଣ ମାଧ୍ୟମରେ ମଧ୍ୟ ଉପଲବ୍ଧ:

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

ସମାନ ପରଦା ଆକାର ପରିସରକୁ ଟାର୍ଗେଟ୍ କରିବା ପାଇଁ ସାସ୍ ମିଶ୍ରଣ ହେବ:

@include media-breakpoint-between(md, xl) { ... }

Z- ଇଣ୍ଡେକ୍ସ |

ଅନେକ ବୁଟଷ୍ଟ୍ରାପ୍ ଉପାଦାନ ବ୍ୟବହାର z-indexକରେ, CSS ସମ୍ପତ୍ତି ଯାହା ବିଷୟବସ୍ତୁକୁ ସଜାଇବା ପାଇଁ ଏକ ତୃତୀୟ ଅକ୍ଷ ପ୍ରଦାନ କରି ଲେଆଉଟ୍ ନିୟନ୍ତ୍ରଣ କରିବାରେ ସାହାଯ୍ୟ କରେ | ଆମେ ବୁଟଷ୍ଟ୍ରାପରେ ଏକ ଡିଫଲ୍ଟ z- ଇଣ୍ଡେକ୍ସ ସ୍କେଲ୍ ବ୍ୟବହାର କରୁ ଯାହା ସଠିକ୍ ସ୍ତରର ନାଭିଗେସନ୍, ଟୁଲ୍ ଟିପ୍ସ ଏବଂ ପପୋଭର, ମୋଡାଲ୍ ଏବଂ ଅଧିକ ସଠିକ୍ ଭାବରେ ଡିଜାଇନ୍ ହୋଇଛି |

ଏହି ଉଚ୍ଚ ମୂଲ୍ୟଗୁଡିକ ଏକ ଇଚ୍ଛାଧୀନ ସଂଖ୍ୟାରେ ଆରମ୍ଭ ହୁଏ, ଉଚ୍ଚ ଏବଂ ନିର୍ଦ୍ଦିଷ୍ଟ ଭାବରେ ଦ୍ୱନ୍ଦ୍ୱକୁ ଏଡାଇବା ପାଇଁ ଯଥେଷ୍ଟ | ଆମର ସ୍ତରୀୟ ଉପାଦାନଗୁଡ଼ିକ ମଧ୍ୟରେ ଆମକୁ ଏଗୁଡ଼ିକର ଏକ ମାନକ ସେଟ୍ ଆବଶ୍ୟକ - ଟୁଲ୍ ଟିପ୍ସ, ପପୋଭର, ନାଭବାର୍, ଡ୍ରପଡାଉନ୍, ମୋଡାଲ୍ - ତେଣୁ ଆମେ ଆଚରଣରେ ଯୁକ୍ତିଯୁକ୍ତ ହୋଇପାରିବା | 100କ or ଣସି କାରଣ ନାହିଁ ଯାହାକୁ ଆମେ + କିମ୍ବା + ବ୍ୟବହାର କରିପାରିଲୁ ନାହିଁ 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ମୂଲ୍ୟ ବ୍ୟବହାର କରୁ | ହୋଭର / ଫୋକସ୍ / ଆକ୍ଟିଭ୍ ଉପରେ, ଭାଇଭାଇନ୍ ଉପାଦାନଗୁଡ଼ିକ ଉପରେ ସେମାନଙ୍କର ସୀମା ଦେଖାଇବା ପାଇଁ ଏକ ଉଚ୍ଚ ମୂଲ୍ୟ ସହିତ ଆମେ ଏକ ନିର୍ଦ୍ଦିଷ୍ଟ ଉପାଦାନକୁ ସାମ୍ନାକୁ ଆଣିଥାଉ |123z-index