ଉପାୟ

ବୁଟଷ୍ଟ୍ରାପ୍ ନିର୍ମାଣ ଏବଂ ପରିଚାଳନା ପାଇଁ ବ୍ୟବହୃତ ମାର୍ଗଦର୍ଶିକା ନୀତି, ରଣନୀତି, ଏବଂ କ ques ଶଳ ବିଷୟରେ ଶିଖନ୍ତୁ ଯାହା ଦ୍ you ାରା ଆପଣ ଏହାକୁ ସହଜରେ କଷ୍ଟମାଇଜ୍ କରିପାରିବେ ଏବଂ ନିଜେ ବିସ୍ତାର କରିପାରିବେ |

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

ଏପରି କିଛି ଦେଖନ୍ତୁ ଯାହା ଠିକ୍ ନୁହେଁ, କିମ୍ବା ବୋଧହୁଏ ଭଲ କରାଯାଇପାରିବ? ଏକ ସମସ୍ୟା ଖୋଲ - ଆମେ ତୁମ ସହିତ ଆଲୋଚନା କରିବାକୁ ପସନ୍ଦ କରିବୁ |

ସାରାଂଶ

ଆମେ ଏହିଗୁଡିକର ପ୍ରତ୍ୟେକକୁ ଅଧିକ ବୁଡ଼ାଇବୁ, କିନ୍ତୁ ଏକ ଉଚ୍ଚ ସ୍ତରରେ, ଆମର ଆଭିମୁଖ୍ୟକୁ ମାର୍ଗଦର୍ଶନ କରୁଥିବା ଏଠାରେ ଅଛି |

• ଉପାଦାନଗୁଡ଼ିକ ପ୍ରତିକ୍ରିୟାଶୀଳ ଏବଂ ମୋବାଇଲ୍-ପ୍ରଥମେ ହେବା ଉଚିତ୍ |
• ଉପାଦାନଗୁଡିକ ଏକ ବେସ୍ କ୍ଲାସ୍ ସହିତ ନିର୍ମିତ ହେବା ଉଚିତ ଏବଂ ମୋଡିଫାୟର୍ କ୍ଲାସ୍ ମାଧ୍ୟମରେ ବିସ୍ତାର କରାଯିବା ଉଚିତ |
• ଉପାଦାନ ରାଜ୍ୟଗୁଡ଼ିକ ଏକ ସାଧାରଣ z- ଇଣ୍ଡେକ୍ସ ସ୍କେଲ ପାଳନ କରିବା ଉଚିତ୍ |
• ଯେତେବେଳେ ସମ୍ଭବ, ଜାଭାସ୍କ୍ରିପ୍ଟ ଅପେକ୍ଷା ଏକ HTML ଏବଂ CSS କାର୍ଯ୍ୟକାରିତାକୁ ପସନ୍ଦ କରନ୍ତୁ |
• ଯେତେବେଳେ ସମ୍ଭବ, କଷ୍ଟମ୍ ଶ yles ଳୀ ଉପରେ ଉପଯୋଗିତା ବ୍ୟବହାର କରନ୍ତୁ |
• ଯେତେବେଳେ ସମ୍ଭବ, କଠୋର HTML ଆବଶ୍ୟକତା (ଶିଶୁ ଚୟନକର୍ତ୍ତା) ବାଧ୍ୟତାମୂଳକ କରିବା ଠାରୁ ଦୂରେଇ ରୁହନ୍ତୁ |

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

ବୁଟଷ୍ଟ୍ରାପ୍ ର ପ୍ରତିକ୍ରିୟାଶୀଳ ଶ yles ଳୀଗୁଡିକ ପ୍ରତିକ୍ରିୟାଶୀଳ ହେବା ପାଇଁ ନିର୍ମିତ, ଏକ ପନ୍ଥା ଯାହାକୁ ପ୍ରାୟତ mobile ମୋବାଇଲ୍-ପ୍ରଥମ କୁହାଯାଏ | ଆମେ ଏହି ଶବ୍ଦକୁ ଆମର ଡକସ୍ ରେ ବ୍ୟବହାର କରୁ ଏବଂ ପ୍ରାୟତ it ଏହା ସହିତ ସହମତ, କିନ୍ତୁ ବେଳେବେଳେ ଏହା ବହୁତ ବ୍ୟାପକ ହୋଇପାରେ | ଯଦିଓ ପ୍ରତ୍ୟେକ ଉପାଦାନ ବୁଟଷ୍ଟ୍ରାପରେ ସମ୍ପୁର୍ଣ୍ଣ ଭାବରେ ପ୍ରତିକ୍ରିୟାଶୀଳ ହେବା ଉଚିତ ନୁହେଁ, ଏହି ପ୍ରତିକ୍ରିୟାଶୀଳ ଉପାୟଟି CSS ଓଭରବ୍ରିଡ୍ ହ୍ରାସ କରିବା ବିଷୟରେ ଯାହା ଆପଣଙ୍କୁ ଭ୍ୟୁପୋର୍ଟ ବଡ ହେବା ସହିତ ଶ yles ଳୀ ଯୋଡିବାକୁ ପ୍ରେରିତ କରିଥାଏ |

ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ ଉପରେ, ଆପଣ ଏହାକୁ ଆମର ମିଡିଆ ପ୍ରଶ୍ନଗୁଡ଼ିକରେ ସ୍ପଷ୍ଟ ଭାବରେ ଦେଖିବେ | ଅଧିକାଂଶ କ୍ଷେତ୍ରରେ, ଆମେ min-widthଜିଜ୍ଞାସା ବ୍ୟବହାର କରୁ ଯାହା ଏକ ନିର୍ଦ୍ଦିଷ୍ଟ ବ୍ରେକପଏଣ୍ଟରେ ପ୍ରୟୋଗ ହେବା ଆରମ୍ଭ କରେ ଏବଂ ଉଚ୍ଚ ବ୍ରେକପଏଣ୍ଟ ଦେଇ ଚାଲିଥାଏ | ଉଦାହରଣ ସ୍ୱରୂପ, ଅସୀମତା ପାଇଁ ଏକ .d-noneପ୍ରଯୁଜ୍ୟ | min-width: 0ଅନ୍ୟ ପଟେ, .d-md-noneମଧ୍ୟମ ବ୍ରେକପଏଣ୍ଟ ଏବଂ ଅପ୍ ଠାରୁ ଏକ ପ୍ରୟୋଗ |

ବେଳେବେଳେ ଆମେ ବ୍ୟବହାର କରିବୁ max-widthଯେତେବେଳେ ଏକ ଉପାଦାନର ଅନ୍ତର୍ନିହିତ ଜଟିଳତା ଏହା ଆବଶ୍ୟକ କରେ | ବେଳେବେଳେ, ଆମର ଉପାଦାନଗୁଡ଼ିକରୁ ମୂଳ କାର୍ଯ୍ୟକାରିତାକୁ ପୁନ r ଲିଖନ କରିବା ଅପେକ୍ଷା ଏହି ଓଭରବ୍ରିଡଗୁଡିକ କାର୍ଯ୍ୟକାରିତା ଏବଂ ମାନସିକ ସ୍ତରରେ ଅଧିକ ସ୍ପଷ୍ଟ ଅଟେ | ଆମେ ଏହି ଉପାୟକୁ ସୀମିତ କରିବାକୁ ଚେଷ୍ଟା କରୁ, କିନ୍ତୁ ସମୟ ସମୟରେ ଏହାକୁ ବ୍ୟବହାର କରିବୁ |

କ୍ଲାସ୍

ଆମର ପୁନ o ବୁଟ୍ ବ୍ୟତୀତ, କ୍ରସ୍-ବ୍ରାଉଜର୍ ନର୍ମାଲାଇଜେସନ୍ ଷ୍ଟାଇଲ୍ ଶୀଟ୍, ଆମର ସମସ୍ତ ଶ yles ଳୀ ଚୟନକର୍ତ୍ତା ଭାବରେ ଶ୍ରେଣୀ ବ୍ୟବହାର କରିବାକୁ ଲକ୍ଷ୍ୟ ରଖିଛି | ଏହାର ଅର୍ଥ ହେଉଛି ପ୍ରକାର ଚୟନକର୍ତ୍ତା (ଯଥା, input[type="text"]) ଏବଂ ଅତିରିକ୍ତ ପ୍ୟାରେଣ୍ଟ୍ କ୍ଲାସ୍ (ଯଥା, .parent .child) ର ଷ୍ଟିଅରିଂ କ୍ଲିଅର୍ ଯାହା ଶ st ଳୀକୁ ଅତି ସହଜରେ ନବଲିଖନ କରିବାକୁ ନିର୍ଦ୍ଦିଷ୍ଟ କରିଥାଏ |

ଏହିପରି, ଉପାଦାନଗୁଡିକ ଏକ ବେସ୍ ଶ୍ରେଣୀ ସହିତ ନିର୍ମିତ ହେବା ଉଚିତ ଯାହା ସାଧାରଣ ଗୃହଗୁଡିକ, ଅଣ-ନଥିବା ସମ୍ପତ୍ତି-ମୂଲ୍ୟ ଯୁଗଳ ନୁହେଁ | ଉଦାହରଣ ସ୍ୱରୂପ, .btnଏବଂ .btn-primary। ଆମେ , ଏବଂ , .btnସମସ୍ତ ସାଧାରଣ ଶ yles ଳୀ ପାଇଁ ବ୍ୟବହାର କରୁ | ତା’ପରେ ଆମେ ରଙ୍ଗ, ପୃଷ୍ଠଭୂମି-ରଙ୍ଗ, ସୀମା-ରଙ୍ଗ ଇତ୍ୟାଦି ଯୋଡିବାକୁ ପସନ୍ଦ କରୁଥିବା ମୋଡିଫାୟର୍ ବ୍ୟବହାର କରୁ |displaypaddingborder-width.btn-primary

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

z- ଇଣ୍ଡେକ୍ସ ମାପକାଠି |

ବୁଟଷ୍ଟ୍ରାପରେ ଦୁଇଟି z-indexମାପ ଅଛି - ଏକ ଉପାଦାନ ମଧ୍ୟରେ ଉପାଦାନ ଏବଂ ଓଭରଲେଟ୍ ଉପାଦାନ |

ଉପାଦାନ ଉପାଦାନଗୁଡିକ |

• borderସମ୍ପତ୍ତି ପରିବର୍ତ୍ତନ ନକରି ଡବଲ୍ ସୀମାକୁ ରୋକିବା ପାଇଁ ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ ର କିଛି ଉପାଦାନଗୁଡ଼ିକ ଓଭରଲିପ୍ ଉପାଦାନ ସହିତ ନିର୍ମିତ | ଉଦାହରଣ ସ୍ୱରୂପ, ବଟନ୍ ଗୋଷ୍ଠୀ, ଇନପୁଟ୍ ଗୋଷ୍ଠୀ, ଏବଂ ପୃଷ୍ଠା |
• ଏହି ଉପାଦାନଗୁଡ଼ିକ ଏକ ମାନକ z-indexସ୍କେଲ୍ ଅଂଶୀଦାର 0କରେ 3|
• 0ଡିଫଲ୍ଟ (ପ୍ରାରମ୍ଭିକ), 1ହେଉଛି :hover, 2ହେଉଛି :active/ ଅଟେ .active, ଏବଂ 3ଅଟେ :focus|
• ଏହି ଉପାୟ ଆମର ସର୍ବାଧିକ ଉପଭୋକ୍ତା ଅଗ୍ରାଧିକାରର ଆଶା ସହିତ ମେଳ ଖାଏ | ଯଦି ଏକ ଉପାଦାନ ଧ୍ୟାନ ଦିଆଯାଏ, ଏହା ଦୃଶ୍ୟରେ ଏବଂ ଉପଭୋକ୍ତାଙ୍କ ଦୃଷ୍ଟିରେ | ସକ୍ରିୟ ଉପାଦାନଗୁଡିକ ଦ୍ୱିତୀୟ ସର୍ବାଧିକ କାରଣ ସେମାନେ ସ୍ଥିତିକୁ ସୂଚିତ କରନ୍ତି | ହୋଭର ତୃତୀୟ ସର୍ବାଧିକ କାରଣ ଏହା ଉପଭୋକ୍ତାଙ୍କର ଉଦ୍ଦେଶ୍ୟକୁ ସୂଚିତ କରେ, କିନ୍ତୁ ପ୍ରାୟ ଯେକ anything ଣସି ଜିନିଷକୁ ଘୁଞ୍ଚାଇ ଦିଆଯାଇପାରେ |

ଓଭରଲେଟ୍ ଉପାଦାନଗୁଡିକ |

ବୁଟଷ୍ଟ୍ରାପରେ ଅନେକ ଉପାଦାନ ଅନ୍ତର୍ଭୂକ୍ତ ହୋଇଛି ଯାହାକି ଏକ ପ୍ରକାରର ଓଭରଲେଜ୍ ଭାବରେ କାର୍ଯ୍ୟ କରେ | z-indexସର୍ବୋଚ୍ଚ , ଡ୍ରପଡାଉନ୍, ଫିକ୍ସଡ୍ ଏବଂ ଷ୍ଟିକି ନାଭବାର୍, ମୋଡାଲ୍, ଟୁଲ୍ ଟିପ୍ସ ଏବଂ ପପୋଭର କ୍ରମରେ ଏହା ଅନ୍ତର୍ଭୂକ୍ତ କରେ | ଏହି ଉପାଦାନଗୁଡ଼ିକର ସେମାନଙ୍କର ନିଜସ୍ୱ z-indexସ୍କେଲ ଅଛି ଯାହାଠାରୁ ଆରମ୍ଭ ହୁଏ 1000| ଏହି ପ୍ରାରମ୍ଭ ସଂଖ୍ୟା ଅନିୟମିତ ଏବଂ ଆମର ଶ yles ଳୀ ଏବଂ ଆପଣଙ୍କ ପ୍ରୋଜେକ୍ଟର କଷ୍ଟମ୍ ଶ yles ଳୀ ମଧ୍ୟରେ ଏକ ଛୋଟ ବଫର୍ ଭାବରେ କାର୍ଯ୍ୟ କରେ |

ପ୍ରତ୍ୟେକ ଓଭରଲେଜ୍ ଉପାଦାନ ଏହାର z-indexମୂଲ୍ୟକୁ ସାମାନ୍ୟ ବ increases ାଇଥାଏ ଯାହା ଦ୍ U ାରା ସାଧାରଣ UI ନୀତି ବ୍ୟବହାରକାରୀଙ୍କୁ ଧ୍ୟାନ କିମ୍ବା ହୋଭର୍ ଉପାଦାନଗୁଡ଼ିକୁ ସବୁବେଳେ ଦୃଷ୍ଟିରେ ରଖିବାକୁ ଅନୁମତି ଦେଇଥାଏ | ଉଦାହରଣ ସ୍ୱରୂପ, ଏକ ମୋଡାଲ୍ ହେଉଛି ଡକ୍ୟୁମେଣ୍ଟ୍ ବ୍ଲକିଂ (ଉଦାହରଣ ସ୍ୱରୂପ, ଆପଣ ମୋଡାଲ୍ ର କାର୍ଯ୍ୟ ପାଇଁ ଅନ୍ୟ କ action ଣସି କାର୍ଯ୍ୟ କରିପାରିବେ ନାହିଁ), ତେଣୁ ଆମେ ଏହାକୁ ଆମର ନାଭବାର୍ ଉପରେ ରଖିଥାଉ |

z-indexଆମର ଲେଆଉଟ୍ ପୃଷ୍ଠାରେ ଏହା ବିଷୟରେ ଅଧିକ ଜାଣନ୍ତୁ |

JS ଉପରେ HTML ଏବଂ CSS |

ଯେତେବେଳେ ସମ୍ଭବ, ଆମେ ଜାଭାସ୍କ୍ରିପ୍ଟ ଉପରେ HTML ଏବଂ CSS ଲେଖିବାକୁ ପସନ୍ଦ କରୁ | ସାଧାରଣତ ,, HTML ଏବଂ CSS ଅଧିକ ଭିନ୍ନ ଏବଂ ସମସ୍ତ ଭିନ୍ନ ଭିନ୍ନ ସ୍ତରର ଅଧିକ ଲୋକଙ୍କ ପାଇଁ ଉପଲବ୍ଧ ଅଟେ | ଜାଭାସ୍କ୍ରିପ୍ଟ ଅପେକ୍ଷା HTML ଏବଂ CSS ମଧ୍ୟ ଆପଣଙ୍କ ବ୍ରାଉଜରରେ ଦ୍ରୁତ ଅଟେ, ଏବଂ ଆପଣଙ୍କର ବ୍ରାଉଜର୍ ସାଧାରଣତ you ଆପଣଙ୍କ ପାଇଁ ବହୁତ କାର୍ଯ୍ୟକାରିତା ପ୍ରଦାନ କରିଥାଏ |

ଏହି ନୀତି ହେଉଛି ଆମର ପ୍ରଥମ ଶ୍ରେଣୀ ଜାଭାସ୍କ୍ରିପ୍ଟ API ହେଉଛି dataଗୁଣ | ଆମର ଜାଭାସ୍କ୍ରିପ୍ଟ ପ୍ଲଗଇନ୍ ବ୍ୟବହାର କରିବାକୁ ଆପଣଙ୍କୁ ପ୍ରାୟ କ Java ଣସି ଜାଭାସ୍କ୍ରିପ୍ଟ ଲେଖିବା ଆବଶ୍ୟକ ନାହିଁ | ଏହା ପରିବର୍ତ୍ତେ, HTML ଲେଖନ୍ତୁ | ଆମର ଜାଭାସ୍କ୍ରିପ୍ଟ ସମୀକ୍ଷା ପୃଷ୍ଠାରେ ଏହା ବିଷୟରେ ଅଧିକ ପ .଼ନ୍ତୁ |

ଶେଷରେ, ଆମର ଶ yles ଳୀ ସାଧାରଣ ୱେବ୍ ଉପାଦାନଗୁଡ଼ିକର ମ fundamental ଳିକ ଆଚରଣ ଉପରେ ନିର୍ଭର କରେ | ଯେତେବେଳେ ସମ୍ଭବ, ବ୍ରାଉଜର୍ ଯାହା ପ୍ରଦାନ କରେ ତାହା ବ୍ୟବହାର କରିବାକୁ ଆମେ ପସନ୍ଦ କରୁ | ଉଦାହରଣ ସ୍ୱରୂପ, ଆପଣ ପ୍ରାୟ ଯେକ element ଣସି ଉପାଦାନ ଉପରେ ଏକ ଶ୍ରେଣୀ ରଖିପାରିବେ .btn, କିନ୍ତୁ ଅଧିକାଂଶ ଉପାଦାନଗୁଡ଼ିକ କ sem ଣସି ଅର୍ଥଗତ ମୂଲ୍ୟ କିମ୍ବା ବ୍ରାଉଜର୍ କାର୍ଯ୍ୟକାରିତା ପ୍ରଦାନ କରନ୍ତି ନାହିଁ | ତେଣୁ ଏହା ପରିବର୍ତ୍ତେ, ଆମେ <button>s ଏବଂ <a>s ବ୍ୟବହାର କରୁ |

ଅଧିକ ଜଟିଳ ଉପାଦାନଗୁଡ଼ିକ ପାଇଁ ମଧ୍ୟ ସମାନ | ଯେତେବେଳେ ଆମେ ଏକ ଇନପୁଟ୍ ସ୍ଥିତିକୁ ଆଧାର କରି ଏକ ପ୍ୟାରେଣ୍ଟ୍ ଉପାଦାନରେ କ୍ଲାସ୍ ଯୋଡିବା ପାଇଁ ଆମର ନିଜସ୍ୱ ଫର୍ମ ବ valid ଧିକରଣ ପ୍ଲଗଇନ୍ ଲେଖିପାରିବା, ଯାହା ଦ୍ us ାରା ଆମକୁ ଲାଲ୍ ରଙ୍ଗର ଟେକ୍ସଟ୍ ଷ୍ଟାଇଲ୍ କରିବାକୁ ଅନୁମତି ଦିଆଯାଏ, ପ୍ରତ୍ୟେକ ବ୍ରାଉଜର୍ ଆମକୁ ପ୍ରଦାନ କରୁଥିବା / ଛଉ-ଉପାଦାନ ବ୍ୟବହାର କରିବାକୁ ପସନ୍ଦ କରୁ :valid|:invalid

ଉପଯୋଗିତା

Utility classes—formerly helpers in Bootstrap 3—are a powerful ally in combatting CSS bloat and poor page performance. A utility class is typically a single, immutable property-value pairing expressed as a class (e.g., .d-block represents display: block;). Their primary appeal is speed of use while writing HTML and limiting the amount of custom CSS you have to write.

Specifically regarding custom CSS, utilities can help combat increasing file size by reducing your most commonly repeated property-value pairs into single classes. This can have a dramatic effect at scale in your projects.

Flexible HTML

ସବୁବେଳେ ସମ୍ଭବ ନୁହେଁ, ଆମେ ଉପାଦାନଗୁଡ଼ିକ ପାଇଁ ଆମର HTML ଆବଶ୍ୟକତାଗୁଡ଼ିକରେ ଅତ୍ୟଧିକ ତତ୍ପରତା ନହେବା ପାଇଁ ଚେଷ୍ଟା କରୁ | >ଏହିପରି, ଆମେ ଆମର CSS ଚୟନକର୍ତ୍ତାମାନଙ୍କରେ ଏକକ ଶ୍ରେଣୀ ଉପରେ ଧ୍ୟାନ ଦେବୁ ଏବଂ ତୁରନ୍ତ ଶିଶୁ ଚୟନକର୍ତ୍ତା ( ) କୁ ଏଡାଇବାକୁ ଚେଷ୍ଟା କରୁ | ଏହା ତୁମର କାର୍ଯ୍ୟାନ୍ୱୟନରେ ଆପଣଙ୍କୁ ଅଧିକ ନମନୀୟତା ପ୍ରଦାନ କରେ ଏବଂ ଆମର CSS କୁ ସରଳ ଏବଂ କମ୍ ନିର୍ଦ୍ଦିଷ୍ଟ ରଖିବାରେ ସାହାଯ୍ୟ କରେ |