ମିଡିଆ ଅବଜେକ୍ଟ |
ବ୍ଲଗ୍ ମନ୍ତବ୍ୟ, ଟ୍ୱିଟ୍, ଏବଂ ଅନ୍ୟାନ୍ୟ ପରି ପୁନରାବୃତ୍ତି ଉପାଦାନ ଗଠନ ପାଇଁ ବୁଟଷ୍ଟ୍ରାପ୍ ର ମିଡିଆ ଅବଜେକ୍ଟ ପାଇଁ ଡକ୍ୟୁମେଣ୍ଟେସନ୍ ଏବଂ ଉଦାହରଣ |
ମିଡିଆ ଅବଜେକ୍ଟ ଜଟିଳ ଏବଂ ପୁନରାବୃତ୍ତି ଉପାଦାନ ଗଠନ କରିବାରେ ସାହାଯ୍ୟ କରେ ଯେଉଁଠାରେ କିଛି ମିଡିଆ ବିଷୟବସ୍ତୁ ସହିତ ସ୍ଥାନିତ ହୋଇଥାଏ ଯାହା ମିଡିଆକୁ ଘୋଡ଼ାଇ ନଥାଏ | ଏଥିସହ, ଫ୍ଲେକ୍ସବକ୍ସକୁ ଧନ୍ୟବାଦ ଦେଇ କେବଳ ଦୁଇଟି ଆବଶ୍ୟକ ଶ୍ରେଣୀ ସହିତ ଏହା କରେ |
ନିମ୍ନରେ ଗୋଟିଏ ମିଡିଆ ବସ୍ତୁର ଏକ ଉଦାହରଣ ଦିଆଯାଇଛି | କେବଳ ଦୁଇଟି ଶ୍ରେଣୀ ଆବଶ୍ୟକ - ରାପିଙ୍ଗ୍ .media
ଏବଂ .media-body
ତୁମର ବିଷୟବସ୍ତୁ | ଇଚ୍ଛାଧୀନ ପ୍ୟାଡିଂ ଏବଂ ମାର୍ଜିନ୍ ବ୍ୟବଧାନ ଉପଯୋଗୀତା ଦ୍ୱାରା ନିୟନ୍ତ୍ରିତ ହୋଇପାରିବ |
ମିଡିଆ ହେଡିଙ୍ଗ୍ |
ଗ୍ରାଭିଡା ନଲ୍ଲାରେ କ୍ରାସ୍ ଆମ୍ଟ୍ ନିବ୍ ଲିବେରୋ ବସିଥାଏ | Nulla vel metus scelerisque ante sollicitudin | କ୍ରାସ୍ ପୁରସ୍ ଓଡିଓ, ଭାଲପୁଟେଟ୍ ରେ ଭେଷ୍ଟିବୁଲମ୍, ଟେମ୍ପସ୍ ଭିଭେରା ଟର୍ପିସ୍ | Fusce condimentum nunc ac nisi vulputate fringilla | ଫାଉସିବସରେ ଡୋନେକ୍ ଲାସିନିଆ କନଗ୍ ଫେଲିସ୍ |ଫ୍ଲେକ୍ସବଗ୍ # 12: ଇନଲାଇନ୍ ଉପାଦାନଗୁଡିକ ଫ୍ଲେକ୍ସ ଆଇଟମ୍ ଭାବରେ ବ୍ୟବହାର କରାଯାଏ ନାହିଁ |
::before
ଇଣ୍ଟରନେଟ୍ ଏକ୍ସପ୍ଲୋରର 10-11 ଲିଙ୍କ୍ କିମ୍ବା ପ୍ରତିଛବି ( କିମ୍ବା ଛଦ୍ମ-ଉପାଦାନ) ପରି ଇନଲାଇନ୍ ଉପାଦାନଗୁଡ଼ିକୁ ::after
ଫ୍ଲେକ୍ସ ଆଇଟମ୍ ଭାବରେ ଉପସ୍ଥାପନ କରେ ନାହିଁ | ଏକମାତ୍ର କାର୍ଯ୍ୟଧାରା ହେଉଛି ଏକ ଅଣ-ଇନଲାଇନ୍ display
ମୂଲ୍ୟ ସେଟ୍ କରିବା (ଯଥା block
,, inline-block
କିମ୍ବା flex
) | ଏକ ସହଜ ଫିକ୍ସ ଭାବରେ ଆମର ପ୍ରଦର୍ଶନ ଉପଯୋଗୀତା.d-flex
ମଧ୍ୟରୁ ଗୋଟିଏ ବ୍ୟବହାର କରିବାକୁ ଆମେ ପରାମର୍ଶ ଦେଉ |
ଉତ୍ସ: GitHub ରେ ଫ୍ଲେକ୍ସବଗ୍ |
ମିଡିଆ ବସ୍ତୁଗୁଡ଼ିକ ଅସୀମ ଭାବରେ ବସା ହୋଇପାରେ, ଯଦିଓ ଆମେ ଆପଣଙ୍କୁ କିଛି ସମୟରେ ବନ୍ଦ କରିବାକୁ ପରାମର୍ଶ ଦେଇଥାଉ | ପ୍ୟାରେଣ୍ଟ୍ ମିଡିଆ ବସ୍ତୁର .media
ଭିତରେ ବସା ବାନ୍ଧନ୍ତୁ |.media-body
ମିଡିଆ ହେଡିଙ୍ଗ୍ |
ଗ୍ରାଭିଡା ନଲ୍ଲାରେ କ୍ରାସ୍ ଆମ୍ଟ୍ ନିବ୍ ଲିବେରୋ ବସିଥାଏ | Nulla vel metus scelerisque ante sollicitudin | କ୍ରାସ୍ ପୁରସ୍ ଓଡିଓ, ଭାଲପୁଟେଟ୍ ରେ ଭେଷ୍ଟିବୁଲମ୍, ଟେମ୍ପସ୍ ଭିଭେରା ଟର୍ପିସ୍ | Fusce condimentum nunc ac nisi vulputate fringilla | ଫାଉସିବସରେ ଡୋନେକ୍ ଲାସିନିଆ କନଗ୍ ଫେଲିସ୍ |ଏକ ମିଡିଆ ଅବଜେକ୍ଟରେ ଥିବା ମିଡିଆ ଫ୍ଲେକ୍ସବକ୍ସ ୟୁଟିଲିଟି ସହିତ ତୁମର .media-body
ବିଷୟବସ୍ତୁର ଉପର (ଡିଫଲ୍ଟ), ମଧ୍ୟଭାଗ କିମ୍ବା ଶେଷରେ ଆଲାଇନ୍ ହୋଇପାରିବ |
ଶୀର୍ଷ-ଆଲାଇନ୍ ମିଡିଆ |
ଗ୍ରାଭିଡା ନଲ୍ଲାରେ କ୍ରାସ୍ ଆମ୍ଟ୍ ନିବ୍ ଲିବେରୋ ବସିଥାଏ | Nulla vel metus scelerisque ante sollicitudin | କ୍ରାସ୍ ପୁରସ୍ ଓଡିଓ, ଭାଲପୁଟେଟ୍ ରେ ଭେଷ୍ଟିବୁଲମ୍, ଟେମ୍ପସ୍ ଭିଭେରା ଟର୍ପିସ୍ | Fusce condimentum nunc ac nisi vulputate fringilla | ଫାଉସିବସରେ ଡୋନେକ୍ ଲାସିନିଆ କନଗ୍ ଫେଲିସ୍ |
Donec sed odio dui | Nullam quis risus eget urna mollis ornare vel eu leo | Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridulus mus।
କେନ୍ଦ୍ର-ଆଲାଇନ୍ ମିଡିଆ |
ଗ୍ରାଭିଡା ନଲ୍ଲାରେ କ୍ରାସ୍ ଆମ୍ଟ୍ ନିବ୍ ଲିବେରୋ ବସିଥାଏ | Nulla vel metus scelerisque ante sollicitudin | କ୍ରାସ୍ ପୁରସ୍ ଓଡିଓ, ଭାଲପୁଟେଟ୍ ରେ ଭେଷ୍ଟିବୁଲମ୍, ଟେମ୍ପସ୍ ଭିଭେରା ଟର୍ପିସ୍ | Fusce condimentum nunc ac nisi vulputate fringilla | ଫାଉସିବସରେ ଡୋନେକ୍ ଲାସିନିଆ କନଗ୍ ଫେଲିସ୍ |
Donec sed odio dui | Nullam quis risus eget urna mollis ornare vel eu leo | Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridulus mus।
ତଳ-ଆଲାଇନ୍ ମିଡିଆ |
ଗ୍ରାଭିଡା ନଲ୍ଲାରେ କ୍ରାସ୍ ଆମ୍ଟ୍ ନିବ୍ ଲିବେରୋ ବସିଥାଏ | Nulla vel metus scelerisque ante sollicitudin | କ୍ରାସ୍ ପୁରସ୍ ଓଡିଓ, ଭାଲପୁଟେଟ୍ ରେ ଭେଷ୍ଟିବୁଲମ୍, ଟେମ୍ପସ୍ ଭିଭେରା ଟର୍ପିସ୍ | Fusce condimentum nunc ac nisi vulputate fringilla | ଫାଉସିବସରେ ଡୋନେକ୍ ଲାସିନିଆ କନଗ୍ ଫେଲିସ୍ |
Donec sed odio dui | Nullam quis risus eget urna mollis ornare vel eu leo | Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridulus mus।
ମିଡିଆ ବସ୍ତୁଗୁଡ଼ିକରେ ବିଷୟବସ୍ତୁର କ୍ରମକୁ HTML ନିଜେ ପରିବର୍ତ୍ତନ କରି କିମ୍ବା order
ସମ୍ପତ୍ତି ସେଟ୍ କରିବାକୁ କିଛି କଷ୍ଟମ୍ ଫ୍ଲେକ୍ସବକ୍ସ CSS ଯୋଗ କରି (ତୁମର ପସନ୍ଦର ଏକ ପୂର୍ଣ୍ଣ ସଂଖ୍ୟାରେ) ପରିବର୍ତ୍ତନ କର |
ମିଡିଆ ଅବଜେକ୍ଟ |
ଗ୍ରାଭିଡା ନଲ୍ଲାରେ କ୍ରାସ୍ ଆମ୍ଟ୍ ନିବ୍ ଲିବେରୋ ବସିଥାଏ | Nulla vel metus scelerisque ante sollicitudin | କ୍ରାସ୍ ପୁରସ୍ ଓଡିଓ, ଭାଲପୁଟେଟ୍ ରେ ଭେଷ୍ଟିବୁଲମ୍, ଟେମ୍ପସ୍ ଭିଭେରା ଟର୍ପିସ୍ | Fusce condimentum nunc ac nisi vulputate fringilla | ଫାଉସିବସରେ ଡୋନେକ୍ ଲାସିନିଆ କନଗ୍ ଫେଲିସ୍ |କାରଣ ମିଡିଆ ବସ୍ତୁର ବହୁତ କମ୍ ଗଠନମୂଳକ ଆବଶ୍ୟକତା ଅଛି, ଆପଣ ଏହି ଉପାଦାନଗୁଡ଼ିକୁ HTML ଉପାଦାନ ତାଲିକାରେ ମଧ୍ୟ ବ୍ୟବହାର କରିପାରିବେ | ଆପଣଙ୍କର <ul>
କିମ୍ବା <ol>
, .list-unstyled
ଯେକ any ଣସି ବ୍ରାଉଜର୍ ଡିଫଲ୍ଟ ତାଲିକା ଶ yles ଳୀଗୁଡିକ ଅପସାରଣ କରିବାକୁ, ଏବଂ ତାପରେ .media
ଆପଣଙ୍କର <li>
s ଉପରେ ପ୍ରୟୋଗ କରନ୍ତୁ | ସବୁଥର ପରି, ଯେଉଁଠାରେ ସୂକ୍ଷ୍ମ ସଜାଡ଼ିବା ପାଇଁ ଆବଶ୍ୟକ ହୁଏ, ବ୍ୟବଧାନ ଉପଯୋଗୀତା ବ୍ୟବହାର କରନ୍ତୁ |
-
ତାଲିକା ଆଧାରିତ ମିଡିଆ ବସ୍ତୁ |
ଗ୍ରାଭିଡା ନଲ୍ଲାରେ କ୍ରାସ୍ ଆମ୍ଟ୍ ନିବ୍ ଲିବେରୋ ବସିଥାଏ | Nulla vel metus scelerisque ante sollicitudin | କ୍ରାସ୍ ପୁରସ୍ ଓଡିଓ, ଭାଲପୁଟେଟ୍ ରେ ଭେଷ୍ଟିବୁଲମ୍, ଟେମ୍ପସ୍ ଭିଭେରା ଟର୍ପିସ୍ | Fusce condimentum nunc ac nisi vulputate fringilla | ଫାଉସିବସରେ ଡୋନେକ୍ ଲାସିନିଆ କନଗ୍ ଫେଲିସ୍ | -
ତାଲିକା ଆଧାରିତ ମିଡିଆ ବସ୍ତୁ |
ଗ୍ରାଭିଡା ନଲ୍ଲାରେ କ୍ରାସ୍ ଆମ୍ଟ୍ ନିବ୍ ଲିବେରୋ ବସିଥାଏ | Nulla vel metus scelerisque ante sollicitudin | କ୍ରାସ୍ ପୁରସ୍ ଓଡିଓ, ଭାଲପୁଟେଟ୍ ରେ ଭେଷ୍ଟିବୁଲମ୍, ଟେମ୍ପସ୍ ଭିଭେରା ଟର୍ପିସ୍ | Fusce condimentum nunc ac nisi vulputate fringilla | ଫାଉସିବସରେ ଡୋନେକ୍ ଲାସିନିଆ କନଗ୍ ଫେଲିସ୍ | -
ତାଲିକା ଆଧାରିତ ମିଡିଆ ବସ୍ତୁ |
ଗ୍ରାଭିଡା ନଲ୍ଲାରେ କ୍ରାସ୍ ଆମ୍ଟ୍ ନିବ୍ ଲିବେରୋ ବସିଥାଏ | Nulla vel metus scelerisque ante sollicitudin | କ୍ରାସ୍ ପୁରସ୍ ଓଡିଓ, ଭାଲପୁଟେଟ୍ ରେ ଭେଷ୍ଟିବୁଲମ୍, ଟେମ୍ପସ୍ ଭିଭେରା ଟର୍ପିସ୍ | Fusce condimentum nunc ac nisi vulputate fringilla | ଫାଉସିବସରେ ଡୋନେକ୍ ଲାସିନିଆ କନଗ୍ ଫେଲିସ୍ |