ସମୀକ୍ଷା

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

ପାତ୍ରଗୁଡିକ |

କଣ୍ଟେନର୍ ଗୁଡିକ ବୁଟଷ୍ଟ୍ରାପ୍ ର ସବୁଠାରୁ ମ basic ଳିକ ଲେଆଉଟ୍ ଉପାଦାନ ଏବଂ ଆମର ଡିଫଲ୍ଟ ଗ୍ରୀଡ୍ ସିଷ୍ଟମ୍ ବ୍ୟବହାର କରିବା ସମୟରେ ଆବଶ୍ୟକ | max-widthଏକ ପ୍ରତିକ୍ରିୟାଶୀଳ, ସ୍ଥିର-ଓସାର ଧାରଣକାରୀ (ଅର୍ଥାତ୍ ପ୍ରତ୍ୟେକ ବ୍ରେକପଏଣ୍ଟରେ ଏହାର ପରିବର୍ତ୍ତନ) କିମ୍ବା ତରଳ-ମୋଟେଇ (ଅର୍ଥାତ୍ ଏହା ସର୍ବଦା ପ୍ରଶସ୍ତ) ରୁ ବାଛନ୍ତୁ 100%|

ଯେତେବେଳେ ପାତ୍ରଗୁଡିକ ବସା ବାନ୍ଧିହେବ, ଅଧିକାଂଶ ଲେଆଉଟ୍ ଗୁଡିକ ଏକ ନାଷ୍ଟେଡ୍ ପାତ୍ରର ଆବଶ୍ୟକ କରନ୍ତି ନାହିଁ |

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

.container-fluidଭ୍ୟୁପୋର୍ଟର ସମ୍ପୂର୍ଣ୍ଣ ଓସାରକୁ ବିସ୍ତାର କରି ଏକ ପୂର୍ଣ୍ଣ ଓସାର ପାତ୍ର ପାଇଁ ବ୍ୟବହାର କରନ୍ତୁ |

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

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

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

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

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

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

@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

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

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

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

@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