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