Source

প্ৰদৰ্শন বৈশিষ্ট্য

আমাৰ প্ৰদৰ্শন সঁজুলিসমূহৰ সৈতে উপাদানসমূহৰ প্ৰদৰ্শন মান আৰু অধিক দ্ৰুত আৰু সঁহাৰিজনকভাৱে টগল কৰক। কিছুমান অধিক সাধাৰণ মানৰ বাবে সমৰ্থন অন্তৰ্ভুক্ত কৰে, লগতে প্ৰিন্ট কৰাৰ সময়ত প্ৰদৰ্শন নিয়ন্ত্ৰণ কৰাৰ বাবে কিছুমান অতিৰিক্ত।

কেনেকৈ কাম কৰে

আমাৰ প্ৰতিক্ৰিয়াশীল প্ৰদৰ্শন সঁজুলি শ্ৰেণীসমূহৰ সৈতে displayবৈশিষ্ট্যৰ মান সলনি কৰক । আমি উদ্দেশ্যপ্ৰণোদিতভাৱে কেৱল সকলো সম্ভাৱ্য মানৰ এটা উপগোট সমৰ্থন কৰোঁ display। প্ৰয়োজন অনুসৰি বিভিন্ন ইফেক্টৰ বাবে ক্লাছসমূহ একত্ৰিত কৰিব পাৰি।

সংকেত

সকলো ব্ৰেকপইন্টৰ বাবে প্ৰযোজ্য প্ৰদৰ্শন সঁজুলি শ্ৰেণীসমূহ , ৰ পৰা xsলৈকে xl, সিহতত কোনো ব্ৰেকপইন্ট সংক্ষিপ্তকৰণ নাই। কাৰণ সেই শ্ৰেণীসমূহ পৰা min-width: 0;আৰু ওপৰলৈ প্ৰয়োগ কৰা হয়, আৰু সেয়েহে এটা মাধ্যম প্ৰশ্নৰ দ্বাৰা বান্ধ খাই নাথাকে। বাকী ব্ৰেকপইণ্টবোৰত অৱশ্যে ব্ৰেকপইণ্টৰ সংক্ষিপ্তকৰণ অন্তৰ্ভুক্ত কৰা হৈছে।

সেই হিচাপে, শ্ৰেণীসমূহৰ নামকৰণ কৰা হয় এই বিন্যাস ব্যৱহাৰ কৰি:

  • .d-{value}বাবেxs
  • .d-{breakpoint}-{value}কাৰণ sm, md, lg, আৰু xl.

য'ত মূল্য এটা হ'ল:

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

মাধ্যমে প্ৰদত্ত ব্ৰেকপইন্ট বা ডাঙৰৰ সৈতে পৰ্দ্দাৰ প্ৰস্থ প্ৰভাৱিত কৰে । উদাহৰণস্বৰূপে, দুয়োটা আৰু পৰ্দাত .d-lg-noneছেট কৰে।display: none;lgxl

উদাহৰণ

d-ইনলাইন
d-ইনলাইন 
<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>

উপাদানসমূহ লুকুৱাই ৰখা

দ্ৰুত মোবাইল-বন্ধুত্বপূৰ্ণ বিকাশৰ বাবে, ডিভাইচ অনুসৰি উপাদানসমূহ দেখুৱা আৰু লুকুৱাবলৈ প্ৰতিক্ৰিয়াশীল প্ৰদৰ্শন শ্ৰেণীসমূহ ব্যৱহাৰ কৰক। একেটা চাইটৰ সম্পূৰ্ণ ভিন্ন সংস্কৰণ সৃষ্টি কৰা এৰক, ইয়াৰ পৰিবৰ্তে প্ৰতিটো পৰ্দাৰ আকাৰৰ বাবে উপাদান প্ৰতিক্ৰিয়াশীলভাৱে লুকুৱাওক।

উপাদানসমূহ লুকুৱাবলৈ যিকোনো প্ৰতিক্ৰিয়াশীল পৰ্দাৰ তাৰতম্যৰ বাবে .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>