Source

ସମ୍ପତ୍ତି ପ୍ରଦର୍ଶନ କରନ୍ତୁ |

ଆମର ପ୍ରଦର୍ଶନ ଉପଯୋଗୀତା ସହିତ ଉପାଦାନଗୁଡ଼ିକର ପ୍ରଦର୍ଶନ ମୂଲ୍ୟ ଏବଂ ଅଧିକ ଶୀଘ୍ର ଏବଂ ପ୍ରତିକ୍ରିୟାଶୀଳ ଭାବରେ ଟୋଗଲ୍ କରନ୍ତୁ | କେତେକ ସାଧାରଣ ମୂଲ୍ୟ ପାଇଁ ସମର୍ଥନ ଅନ୍ତର୍ଭୂକ୍ତ କରିବା ସହିତ ମୁଦ୍ରଣ କରିବା ସମୟରେ ପ୍ରଦର୍ଶନକୁ ନିୟନ୍ତ୍ରଣ କରିବା ପାଇଁ କିଛି ଅତିରିକ୍ତ ଅନ୍ତର୍ଭୂକ୍ତ କରେ |

ଏହା କିପରି କାମ କରେ |

ଆମର ପ୍ରତିକ୍ରିୟାଶୀଳ ପ୍ରଦର୍ଶନ ଉପଯୋଗୀ ଶ୍ରେଣୀଗୁଡ଼ିକ ସହିତ displayସମ୍ପତ୍ତିର ମୂଲ୍ୟ ପରିବର୍ତ୍ତନ କରନ୍ତୁ | ଆମେ ଉଦ୍ଦେଶ୍ୟମୂଳକ ଭାବରେ କେବଳ ସମସ୍ତ ସମ୍ଭାବ୍ୟ ମୂଲ୍ୟଗୁଡ଼ିକର ଏକ ସବ୍ସେଟ୍ ସମର୍ଥନ କରୁ display| ତୁମର ଆବଶ୍ୟକତା ଅନୁଯାୟୀ ବିଭିନ୍ନ ପ୍ରଭାବ ପାଇଁ ଶ୍ରେଣୀଗୁଡିକ ମିଳିତ ହୋଇପାରିବ |

ଟିପ୍ପଣୀ |

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

ଏହିପରି, ଫର୍ମାଟ୍ ବ୍ୟବହାର କରି ଶ୍ରେଣୀଗୁଡ଼ିକର ନାମକରଣ କରାଯାଇଛି:

.d-{value}ପାଇଁxs
.d-{breakpoint}-{value}ପାଇଁ sm,, ଏବଂ । md_lgxl

ଯେଉଁଠାରେ ମୂଲ୍ୟ ହେଉଛି ଗୋଟିଏ:

none
inline
inline-block
block
table
table-cell
table-row
flex
inline-flex

ପ୍ରଦତ୍ତ ବ୍ରେକପଏଣ୍ଟ କିମ୍ବା ବଡ଼ ସହିତ ମିଡିଆ ପ୍ରଶ୍ନଗୁଡ଼ିକ ସ୍କ୍ରିନ୍ ଓସାରକୁ ପ୍ରଭାବିତ କରେ | ଉଦାହରଣ ସ୍ୱରୂପ, ଉଭୟ ଏବଂ ସ୍କ୍ରିନ୍ ଉପରେ .d-lg-noneସେଟ୍ କରେ |display: none;lgxl

ଉଦାହରଣଗୁଡିକ

d-inline

<div class="d-inline p-2 bg-primary text-white">d-inline</div>
<div class="d-inline p-2 bg-dark text-white">d-inline</div>

d- ବ୍ଲକ d- ବ୍ଲକ

<span class="d-block p-2 bg-primary text-white">d-block</span>
<span class="d-block p-2 bg-dark text-white">d-block</span>

ଉପାଦାନଗୁଡିକ ଲୁଚାଇବା |

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

ଉପାଦାନଗୁଡିକ ଲୁଚାଇବା ପାଇଁ ଯେକ any ଣସି ପ୍ରତିକ୍ରିୟାଶୀଳ ସ୍କ୍ରିନ୍ ପରିବର୍ତ୍ତନ ପାଇଁ କେବଳ .d-noneଶ୍ରେଣୀ କିମ୍ବା ଗୋଟିଏ ଶ୍ରେଣୀ ବ୍ୟବହାର କରନ୍ତୁ |.d-{sm,md,lg,xl}-none

ସ୍କ୍ରିନ୍ ଆକାରର ଏକ ନିର୍ଦ୍ଦିଷ୍ଟ ବ୍ୟବଧାନରେ କେବଳ ଏକ ଉପାଦାନ ଦେଖାଇବାକୁ ତୁମେ ଗୋଟିଏ .d-*-noneଶ୍ରେଣୀକୁ ଏକ ଶ୍ରେଣୀ ସହିତ ମିଶ୍ରଣ କରିପାରିବ .d-*-*, ଉଦାହରଣ ସ୍ୱରୂପ .d-none .d-md-block .d-xl-noneମଧ୍ୟମ ଏବଂ ବଡ଼ ଉପକରଣ ବ୍ୟତୀତ ସମସ୍ତ ସ୍କ୍ରିନ ଆକାର ପାଇଁ ଉପାଦାନକୁ ଲୁଚାଇବ |

ସ୍କ୍ରିନ୍ ଆକାର \|	କ୍ଲାସ୍
ସମସ୍ତଙ୍କ ଉପରେ ଲୁକ୍କାୟିତ \|	`.d-none`
କେବଳ xs ରେ ଲୁକ୍କାୟିତ \|	`.d-none .d-sm-block`
କେବଳ sm ରେ ଲୁକ୍କାୟିତ \|	`.d-sm-none .d-md-block`
କେବଳ md ରେ ଲୁକ୍କାୟିତ \|	`.d-md-none .d-lg-block`
କେବଳ lg ରେ ଲୁକ୍କାୟିତ \|	`.d-lg-none .d-xl-block`
କେବଳ xl ରେ ଲୁକ୍କାୟିତ \|	`.d-xl-none`
ସମସ୍ତଙ୍କ ଉପରେ ଦୃଶ୍ୟମାନ \|	`.d-block`
କେବଳ xs ରେ ଦୃଶ୍ୟମାନ \|	`.d-block .d-sm-none`
କେବଳ sm ରେ ଦୃଶ୍ୟମାନ \|	`.d-none .d-sm-block .d-md-none`
କେବଳ md ରେ ଦୃଶ୍ୟମାନ \|	`.d-none .d-md-block .d-lg-none`
କେବଳ lg ରେ ଦୃଶ୍ୟମାନ \|	`.d-none .d-lg-block .d-xl-none`
କେବଳ xl ରେ ଦୃଶ୍ୟମାନ \|	`.d-none .d-xl-block`

hide on screens wider than lg

lg ଠାରୁ ଛୋଟ ପରଦାରେ ଲୁଚାନ୍ତୁ |

<div class="d-lg-none">hide on screens wider than lg</div>
<div class="d-none d-lg-block">hide on screens smaller than lg</div>

ମୁଦ୍ରଣରେ ପ୍ରଦର୍ଶନ କରନ୍ତୁ |

displayଆମର ପ୍ରିଣ୍ଟ୍ ଡିସପ୍ଲେ ୟୁଟିଲିଟି କ୍ଲାସ୍ ସହିତ ମୁଦ୍ରଣ କରିବା ସମୟରେ ଉପାଦାନଗୁଡ଼ିକର ମୂଲ୍ୟ ପରିବର୍ତ୍ତନ କରନ୍ତୁ | ଆମର ପ୍ରତିକ୍ରିୟାଶୀଳ ଉପଯୋଗୀତା ସହିତ ସମାନ displayମୂଲ୍ୟ ପାଇଁ ସମର୍ଥନ ଅନ୍ତର୍ଭୂକ୍ତ କରେ |.d-*

.d-print-none
.d-print-inline
.d-print-inline-block
.d-print-block
.d-print-table
.d-print-table-row
.d-print-table-cell
.d-print-flex
.d-print-inline-flex

ପ୍ରିଣ୍ଟ୍ ଏବଂ ଡିସପ୍ଲେ କ୍ଲାସ୍ ଗୁଡିକ ମିଳିତ ହୋଇପାରିବ |

କେବଳ ସ୍କ୍ରିନ୍ (କେବଳ ମୁଦ୍ରଣରେ ଲୁଚାନ୍ତୁ)

Print Only (Hide on screen only)

ସ୍କ୍ରିନରେ ବଡ ପର୍ଯ୍ୟନ୍ତ ଲୁଚାନ୍ତୁ, କିନ୍ତୁ ସବୁବେଳେ ପ୍ରିଣ୍ଟରେ ଦେଖାନ୍ତୁ |

<div class="d-print-none">Screen Only (Hide on print only)</div>
<div class="d-none d-print-block">Print Only (Hide on screen only)</div>
<div class="d-none d-lg-block d-print-block">Hide up to large on screen, but always show on print</div>