ସମୀକ୍ଷା
ତୁମର ବୁଟଷ୍ଟ୍ରାପ୍ ପ୍ରୋଜେକ୍ଟ ରଖିବା ପାଇଁ ଉପାଦାନ ଏବଂ ବିକଳ୍ପଗୁଡ଼ିକ, ରାପିଙ୍ଗ୍ ପାତ୍ରଗୁଡିକ, ଏକ ଶକ୍ତିଶାଳୀ ଗ୍ରୀଡ୍ ସିଷ୍ଟମ୍, ଏକ ନମନୀୟ ମିଡିଆ ବସ୍ତୁ ଏବଂ ପ୍ରତିକ୍ରିୟାଶୀଳ ୟୁଟିଲିଟି କ୍ଲାସ୍ ଅନ୍ତର୍ଭୁକ୍ତ କରେ |
ପାତ୍ରଗୁଡିକ |
କଣ୍ଟେନରଗୁଡ଼ିକ ହେଉଛି ବୁଟଷ୍ଟ୍ରାପରେ ସବୁଠାରୁ ମ basic ଳିକ ଲେଆଉଟ୍ ଉପାଦାନ ଏବଂ ଆମର ଡିଫଲ୍ଟ ଗ୍ରୀଡ୍ ସିଷ୍ଟମ୍ ବ୍ୟବହାର କରିବା ସମୟରେ ଆବଶ୍ୟକ | ଧାରଣକାରୀ, ପ୍ୟାଡ୍, ଏବଂ (ବେଳେବେଳେ) ସେମାନଙ୍କ ଭିତରେ ଥିବା ବିଷୟବସ୍ତୁକୁ କେନ୍ଦ୍ର କରିବା ପାଇଁ ବ୍ୟବହୃତ ହୁଏ | ଯେତେବେଳେ ପାତ୍ରଗୁଡିକ ବସା ବାନ୍ଧିହେବ, ଅଧିକାଂଶ ଲେଆଉଟ୍ ଗୁଡିକ ଏକ ନାଷ୍ଟେଡ୍ ପାତ୍ରର ଆବଶ୍ୟକ କରନ୍ତି ନାହିଁ |
ତିନୋଟି ଭିନ୍ନ ପାତ୍ର ସହିତ ବୁଟଷ୍ଟ୍ରାପ୍ ଆସେ:
.container
, ଯାହାmax-width
ପ୍ରତ୍ୟେକ ପ୍ରତିକ୍ରିୟାଶୀଳ ବ୍ରେକପଏଣ୍ଟରେ ସେଟ୍ କରେ |.container-fluid
, ଯାହାwidth: 100%
ସମସ୍ତ ବ୍ରେକପଏଣ୍ଟରେ ଅଛି |.container-{breakpoint}
, ଯାହାକିwidth: 100%
ନିର୍ଦ୍ଦିଷ୍ଟ ବ୍ରେକପଏଣ୍ଟ ପର୍ଯ୍ୟନ୍ତ |
max-width
ପ୍ରତ୍ୟେକ ସାରଣୀଟି ମୂଳ ସହିତ .container
ଏବଂ .container-fluid
ପ୍ରତ୍ୟେକ ବ୍ରେକପଏଣ୍ଟରେ କିପରି ତୁଳନା କରାଯାଏ, ନିମ୍ନରେ ଥିବା ସାରଣୀ ବର୍ଣ୍ଣନା କରେ |
ସେମାନଙ୍କୁ କାର୍ଯ୍ୟରେ ଦେଖନ୍ତୁ ଏବଂ ଆମ ଗ୍ରୀଡ୍ ଉଦାହରଣରେ ତୁଳନା କରନ୍ତୁ |
ଅତିରିକ୍ତ ଛୋଟ <576px |
ଛୋଟ ≥576px |
ମଧ୍ୟମ ≥768px |
ବଡ଼ ≥992px |
ଅତିରିକ୍ତ ବୃହତ ≥1200px | |
|
---|---|---|---|---|---|
.container |
100% | 540px | 720px | 960px | 1140px |
.container-sm |
100% | 540px | 720px | 960px | 1140px |
.container-md |
100% | 100% | 720px | 960px | 1140px |
.container-lg |
100% | 100% | 100% | 960px | 1140px |
.container-xl |
100% | 100% | 100% | 100% | 1140px |
.container-fluid |
100% | 100% | 100% | 100% | 100% |
ସମସ୍ତ-ଏକ-ଏକ |
ଆମର ଡିଫଲ୍ଟ .container
ଶ୍ରେଣୀ ହେଉଛି ଏକ ପ୍ରତିକ୍ରିୟାଶୀଳ, ସ୍ଥିର-ଓସାର ପାତ୍ର, ଯାହାର ଅର୍ଥ max-width
ପ୍ରତ୍ୟେକ ବ୍ରେକପଏଣ୍ଟରେ ଏହାର ପରିବର୍ତ୍ତନ |
ତରଳ |
.container-fluid
ଭ୍ୟୁପୋର୍ଟର ସମ୍ପୂର୍ଣ୍ଣ ଓସାରକୁ ବିସ୍ତାର କରି ଏକ ପୂର୍ଣ୍ଣ ଓସାର ପାତ୍ର ପାଇଁ ବ୍ୟବହାର କରନ୍ତୁ |
ପ୍ରତିକ୍ରିୟାଶୀଳ |
ବୁଟଷ୍ଟ୍ରାପ୍ v4.4 ରେ ପ୍ରତିକ୍ରିୟାଶୀଳ ପାତ୍ରଗୁଡିକ ନୂତନ ଅଟେ | ସେମାନେ ଆପଣଙ୍କୁ ଏକ ଶ୍ରେଣୀ ନିର୍ଦ୍ଦିଷ୍ଟ କରିବାକୁ ଅନୁମତି ଦିଅନ୍ତି ଯାହା ନିର୍ଦ୍ଦିଷ୍ଟ ବ୍ରେକପଏଣ୍ଟ ପହଞ୍ଚିବା ପର୍ଯ୍ୟନ୍ତ 100% ଚଉଡା, ଯାହା ପରେ ଆମେ max-width
ପ୍ରତ୍ୟେକ ଉଚ୍ଚ ବ୍ରେକପଏଣ୍ଟ ପାଇଁ s ପ୍ରୟୋଗ କରୁ | ଉଦାହରଣ ସ୍ୱରୂପ, ବ୍ରେକପଏଣ୍ଟ ପହଞ୍ଚିବା .container-sm
ପର୍ଯ୍ୟନ୍ତ ଆରମ୍ଭ କରିବା ପାଇଁ 100% ଚଉଡା sm
, ଯେଉଁଠାରେ ଏହା ସହିତ ମାପଚୁପ ହେବ md
, lg
ଏବଂ xl
|
ପ୍ରତିକ୍ରିୟାଶୀଳ ବ୍ରେକପଏଣ୍ଟ |
ଯେହେତୁ ପ୍ରଥମେ ମୋବାଇଲ୍ ହେବା ପାଇଁ ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ ବିକଶିତ ହୋଇଛି, ଆମେ ଆମର ଲେଆଉଟ୍ ଏବଂ ଇଣ୍ଟରଫେସ୍ ପାଇଁ ସମ୍ବେଦନଶୀଳ ବ୍ରେକପଏଣ୍ଟ ସୃଷ୍ଟି କରିବାକୁ ମୁଠାଏ ମିଡିଆ ଜିଜ୍ଞାସା ବ୍ୟବହାର କରୁ | ଏହି ବ୍ରେକପଏଣ୍ଟଗୁଡ଼ିକ ପ୍ରାୟତ minimum ସର୍ବନିମ୍ନ ଭ୍ୟୁପୋର୍ଟ ପ୍ରସ୍ଥ ଉପରେ ଆଧାରିତ ଏବଂ ଭ୍ୟୁପୋର୍ଟ ପରିବର୍ତ୍ତନ ହେବା ସହିତ ଆମକୁ ଉପାଦାନଗୁଡିକ ସ୍କେଲ କରିବାକୁ ଅନୁମତି ଦିଏ |
ଆମର ଲେଆଉଟ୍, ଗ୍ରୀଡ୍ ସିଷ୍ଟମ୍, ଏବଂ ଉପାଦାନଗୁଡ଼ିକ ପାଇଁ ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ ମୁଖ୍ୟତ the ନିମ୍ନଲିଖିତ ମିଡିଆ ଜିଜ୍ଞାସା ରେଞ୍ଜ - କିମ୍ବା ବ୍ରେକପଏଣ୍ଟ ବ୍ୟବହାର କରେ |
ଯେହେତୁ ଆମେ ସାସରେ ଆମର ଉତ୍ସ CSS ଲେଖୁ, ଆମର ସମସ୍ତ ମିଡିଆ ଜିଜ୍ଞାସା ସାସ୍ ମିଶ୍ରଣ ମାଧ୍ୟମରେ ଉପଲବ୍ଧ:
ଆମେ ବେଳେବେଳେ ମିଡିଆ ଜିଜ୍ଞାସା ବ୍ୟବହାର କରୁ ଯାହା ଅନ୍ୟ ଦିଗକୁ ଯାଏ (ପ୍ରଦତ୍ତ ସ୍କ୍ରିନ୍ ଆକାର କିମ୍ବା ଛୋଟ ):
ଧ୍ୟାନ ଦିଅନ୍ତୁ ଯେହେତୁ ବ୍ରାଉଜର୍ ଗୁଡିକ ବର୍ତ୍ତମାନ ପରିସର ପ୍ରସଙ୍ଗ ଜିଜ୍ଞାସାକୁ ସମର୍ଥନ କରୁନାହାଁନ୍ତି, ଆମେ ଏହି ତୁଳନାଗୁଡ଼ିକ ପାଇଁ ଉଚ୍ଚ ସଠିକତା ସହିତ ମୂଲ୍ୟ ବ୍ୟବହାର କରି ଭଗ୍ନାଂଶ ପ୍ରସ୍ଥ (ଯାହା ଉଚ୍ଚ-ଡିପି ଡିଭାଇସରେ ନିର୍ଦ୍ଦିଷ୍ଟ ଅବସ୍ଥାରେ ଘଟିପାରେ) ର ସୀମା min-
ଏବଂ max-
ଉପସର୍ଗ ଏବଂ ଭ୍ୟୁପୋର୍ଟ୍ସ ଉପରେ କାର୍ଯ୍ୟ କରୁ | ।
ପୁନର୍ବାର, ଏହି ମିଡିଆ ପ୍ରଶ୍ନଗୁଡ଼ିକ ସାସ୍ ମିଶ୍ରଣ ମାଧ୍ୟମରେ ମଧ୍ୟ ଉପଲବ୍ଧ:
ସର୍ବନିମ୍ନ ଏବଂ ସର୍ବାଧିକ ବ୍ରେକପଏଣ୍ଟ ଓସାର ବ୍ୟବହାର କରି ସ୍କ୍ରିନ୍ ଆକାରର ଗୋଟିଏ ସେଗମେଣ୍ଟକୁ ଟାର୍ଗେଟ୍ କରିବା ପାଇଁ ମିଡିଆ ଜିଜ୍ଞାସା ଏବଂ ମିକ୍ସନ୍ସ ମଧ୍ୟ ଅଛି |
ଏହି ମିଡିଆ ପ୍ରଶ୍ନଗୁଡ଼ିକ ସାସ୍ ମିଶ୍ରଣ ମାଧ୍ୟମରେ ମଧ୍ୟ ଉପଲବ୍ଧ:
ସେହିଭଳି, ମିଡିଆ ପ୍ରଶ୍ନଗୁଡ଼ିକ ଏକାଧିକ ବ୍ରେକପଏଣ୍ଟ ଓସାର ବିସ୍ତାର କରିପାରେ:
ସମାନ ପରଦା ଆକାର ପରିସରକୁ ଟାର୍ଗେଟ୍ କରିବା ପାଇଁ ସାସ୍ ମିଶ୍ରଣ ହେବ:
Z- ଇଣ୍ଡେକ୍ସ |
ଅନେକ ବୁଟଷ୍ଟ୍ରାପ୍ ଉପାଦାନ ବ୍ୟବହାର z-index
କରେ, CSS ସମ୍ପତ୍ତି ଯାହା ବିଷୟବସ୍ତୁକୁ ସଜାଇବା ପାଇଁ ଏକ ତୃତୀୟ ଅକ୍ଷ ପ୍ରଦାନ କରି ଲେଆଉଟ୍ ନିୟନ୍ତ୍ରଣ କରିବାରେ ସାହାଯ୍ୟ କରେ | ଆମେ ବୁଟଷ୍ଟ୍ରାପରେ ଏକ ଡିଫଲ୍ଟ z- ଇଣ୍ଡେକ୍ସ ସ୍କେଲ୍ ବ୍ୟବହାର କରୁ ଯାହା ସଠିକ୍ ସ୍ତରର ନାଭିଗେସନ୍, ଟୁଲ୍ ଟିପ୍ସ ଏବଂ ପପୋଭର, ମୋଡାଲ୍ ଏବଂ ଅଧିକ ସଠିକ୍ ଭାବରେ ଡିଜାଇନ୍ ହୋଇଛି |
ଏହି ଉଚ୍ଚ ମୂଲ୍ୟଗୁଡିକ ଏକ ଇଚ୍ଛାଧୀନ ସଂଖ୍ୟାରେ ଆରମ୍ଭ ହୁଏ, ଉଚ୍ଚ ଏବଂ ନିର୍ଦ୍ଦିଷ୍ଟ ଭାବରେ ଦ୍ୱନ୍ଦ୍ୱକୁ ଏଡାଇବା ପାଇଁ ଯଥେଷ୍ଟ | ଆମର ସ୍ତରୀୟ ଉପାଦାନଗୁଡ଼ିକ ମଧ୍ୟରେ ଆମକୁ ଏଗୁଡ଼ିକର ଏକ ମାନକ ସେଟ୍ ଆବଶ୍ୟକ - ଟୁଲ୍ ଟିପ୍ସ, ପପୋଭର, ନାଭବାର୍, ଡ୍ରପଡାଉନ୍, ମୋଡାଲ୍ - ତେଣୁ ଆମେ ଆଚରଣରେ ଯୁକ୍ତିଯୁକ୍ତ ହୋଇପାରିବା | 100
କ or ଣସି କାରଣ ନାହିଁ ଯାହାକୁ ଆମେ + କିମ୍ବା + ବ୍ୟବହାର କରିପାରିଲୁ ନାହିଁ 500
|
ଆମେ ଏହି ବ୍ୟକ୍ତିଗତ ମୂଲ୍ୟଗୁଡ଼ିକର କଷ୍ଟମାଇଜେସନ୍ କୁ ଉତ୍ସାହିତ କରୁନାହୁଁ; ଯଦି ତୁମେ ଗୋଟିଏ ବଦଳାଇବା ଉଚିତ, ତୁମେ ସେଗୁଡ଼ିକୁ ପରିବର୍ତ୍ତନ କରିବା ଆବଶ୍ୟକ |
ଉପାଦାନଗୁଡ଼ିକ ମଧ୍ୟରେ ଓଭରଲିପ୍ ସୀମା ପରିଚାଳନା କରିବାକୁ (ଉଦାହରଣ ସ୍ୱରୂପ, ଇନପୁଟ୍ ଗୋଷ୍ଠୀର ବଟନ୍ ଏବଂ ଇନପୁଟ୍), ଆମେ , ଏବଂ ଡିଫଲ୍ଟ, ହୋଭର , ଏବଂ ସକ୍ରିୟ ସ୍ଥିତି ପାଇଁ ନିମ୍ନ ଏକକ ଅଙ୍କ z-index
ମୂଲ୍ୟ ବ୍ୟବହାର କରୁ | ହୋଭର / ଫୋକସ୍ / ଆକ୍ଟିଭ୍ ଉପରେ, ଭାଇଭାଇନ୍ ଉପାଦାନଗୁଡ଼ିକ ଉପରେ ସେମାନଙ୍କର ସୀମା ଦେଖାଇବା ପାଇଁ ଏକ ଉଚ୍ଚ ମୂଲ୍ୟ ସହିତ ଆମେ ଏକ ନିର୍ଦ୍ଦିଷ୍ଟ ଉପାଦାନକୁ ସାମ୍ନାକୁ ଆଣିଥାଉ |1
2
3
z-index