ଲେଆଉଟ୍ ପାଇଁ ଉପଯୋଗୀତା |
ଦ୍ରୁତ ମୋବାଇଲ୍ ଅନୁକୂଳ ଏବଂ ପ୍ରତିକ୍ରିୟାଶୀଳ ବିକାଶ ପାଇଁ, ବୁଟଷ୍ଟ୍ରାପ୍ ବିଷୟବସ୍ତୁ ଦେଖାଇବା, ଲୁଚାଇବା, ଆଲାଇନ୍ କରିବା ଏବଂ ବ୍ୟବଧାନ ପାଇଁ ଦଶହଜାର ଉପଯୋଗୀ ଶ୍ରେଣୀ ଅନ୍ତର୍ଭୂକ୍ତ କରେ |
ପରିବର୍ତ୍ତନdisplay
ସମ୍ପତ୍ତିର ସାଧାରଣ ମୂଲ୍ୟଗୁଡ଼ିକୁ ପ୍ରତିକ୍ରିୟାଶୀଳ ଭାବରେ ଟୋଗଲ୍ କରିବା ପାଇଁ ଆମର ପ୍ରଦର୍ଶନ ଉପଯୋଗୀତା ବ୍ୟବହାର କରନ୍ତୁ | display
ନିର୍ଦ୍ଦିଷ୍ଟ ଦୃଶ୍ୟପଟରେ ସେମାନଙ୍କୁ ଦେଖାଇବା କିମ୍ବା ଲୁଚାଇବା ପାଇଁ ଏହାକୁ ଆମର ଗ୍ରୀଡ୍ ସିଷ୍ଟମ୍, ବିଷୟବସ୍ତୁ, କିମ୍ବା ଉପାଦାନଗୁଡ଼ିକ ସହିତ ମିଶ୍ରଣ କରନ୍ତୁ |
ଫ୍ଲେକ୍ସବକ୍ସ ବିକଳ୍ପଗୁଡ଼ିକ |
ବୁଟଷ୍ଟ୍ରାପ୍ ଫ୍ଲେକ୍ସବକ୍ସ ସହିତ ନିର୍ମିତ, କିନ୍ତୁ ପ୍ରତ୍ୟେକ ଉପାଦାନର display
ପରିବର୍ତ୍ତନ କରାଯାଇ ନାହିଁ display: flex
କାରଣ ଏହା ଅନେକ ଅନାବଶ୍ୟକ ଓଭରବ୍ରିଡ୍ ଯୋଗାଇବ ଏବଂ ଅପ୍ରତ୍ୟାଶିତ ଭାବରେ କି ବ୍ରାଉଜର୍ ଆଚରଣକୁ ପରିବର୍ତ୍ତନ କରିବ | ଆମର ଅଧିକାଂଶ ଉପାଦାନ ଫ୍ଲେକ୍ସବକ୍ସ ସକ୍ଷମ ସହିତ ନିର୍ମିତ |
ଯଦି ଆପଣ ଏକ ଉପାଦାନକୁ ଯୋଡିବା ଆବଶ୍ୟକ କରନ୍ତି display: flex
, ତାହା ସହିତ .d-flex
କିମ୍ବା ପ୍ରତିକ୍ରିୟାଶୀଳ ପ୍ରକାରଗୁଡ଼ିକ ମଧ୍ୟରୁ ଗୋଟିଏ (ଯଥା, .d-sm-flex
) ସହିତ କରନ୍ତୁ | ସାଇଜ୍, ଆଲାଇନ୍ମେଣ୍ଟ, ବ୍ୟବଧାନ, ଏବଂ ଅଧିକ ପାଇଁ display
ଆମର ଅତିରିକ୍ତ ଫ୍ଲେକ୍ସବକ୍ସ ଉପଯୋଗିତାକୁ ବ୍ୟବହାର କରିବାକୁ ଅନୁମତି ଦେବାକୁ ତୁମେ ଏହି ଶ୍ରେଣୀ କିମ୍ବା ମୂଲ୍ୟ ଆବଶ୍ୟକ କରିବ |
ମାର୍ଜିନ୍ ଏବଂ ପ୍ୟାଡିଂ |
ଉପାଦାନ ଏବଂ ଉପାଦାନଗୁଡିକ କିପରି ବ୍ୟବଧାନ ଏବଂ ଆକାରର ହୁଏ ତାହା ନିୟନ୍ତ୍ରଣ କରିବା ପାଇଁ margin
ଏବଂ padding
ବ୍ୟବଧାନ ଉପଯୋଗୀତା ବ୍ୟବହାର କରନ୍ତୁ | 1rem
ଏକ ମୂଲ୍ୟ ଡିଫଲ୍ଟ $spacer
ଭେରିଏବଲ୍ ଉପରେ ଆଧାର କରି ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ ବ୍ୟବଧାନ ଉପଯୋଗୀତା ପାଇଁ ଏକ ଛଅ ସ୍ତରୀୟ ସ୍କେଲ୍ ଅନ୍ତର୍ଭୁକ୍ତ କରେ | .me-3
ସମସ୍ତ ଭ୍ୟୁପୋର୍ଟ୍ ପାଇଁ ମୂଲ୍ୟ ବାଛନ୍ତୁ (ଉଦାହରଣ ସ୍ୱରୂପ, margin-right: 1rem
LTR ରେ), କିମ୍ବା ନିର୍ଦ୍ଦିଷ୍ଟ ଦୃଶ୍ୟକୁ ଲକ୍ଷ୍ୟ କରିବା ପାଇଁ ପ୍ରତିକ୍ରିୟାଶୀଳ ପ୍ରକାରଗୁଡିକ ବାଛନ୍ତୁ (ଉଦାହରଣ ସ୍ୱରୂପ, LTR .me-md-3
ପାଇଁ margin-right: 1rem
- md
ବ୍ରେକପଏଣ୍ଟରୁ ଆରମ୍ଭ) |
ଟୋଗଲ୍ କରନ୍ତୁ |visibility
ଯେତେବେଳେ display
ଟୋଗଲ୍ କରିବା ଆବଶ୍ୟକ ନାହିଁ, ଆପଣ ଆମର ଦୃଶ୍ୟମାନତା ଉପଯୋଗିତାvisibility
ସହିତ ଏକ ଉପାଦାନର ଟୋଗଲ୍ କରିପାରିବେ | ଅଦୃଶ୍ୟ ଉପାଦାନଗୁଡ଼ିକ ତଥାପି ପୃଷ୍ଠାର ଲେଆଉଟ୍ ଉପରେ ପ୍ରଭାବ ପକାଇବ, କିନ୍ତୁ ପରିଦର୍ଶକମାନଙ୍କଠାରୁ ଭିଜୁଆଲ୍ ଲୁକ୍କାୟିତ |