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

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

এই পৃষ্ঠাত

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

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

সংকেত

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

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

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

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

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

প্ৰদৰ্শন মানসমূহ চলক সলনি কৰি $displaysআৰু SCSS পুনৰায় কম্পাইলিং কৰি পৰিবৰ্তন কৰিব পাৰি।

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

উদাহৰণ

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,xxl}-none

এটা উপাদান কেৱল পৰ্দ্দাৰ আকাৰৰ এটা নিৰ্দিষ্ট ব্যৱধানত দেখুৱাবলৈ আপুনি এটা শ্ৰেণীক এটা .d-*-noneশ্ৰেণীৰ সৈতে একত্ৰিত কৰিব পাৰে .d-*-*, উদাহৰণস্বৰূপে .d-none .d-md-block .d-xl-none .d-xxl-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-xxl-block`
কেৱল xxl ত লুকাই আছে	`.d-xxl-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 .d-xxl-none`
কেৱল xxl ত দৃশ্যমান	`.d-none .d-xxl-block`

lg আৰু বহল পৰ্দাত লুকুৱাওক

lg তকৈ সৰু পৰ্দাত লুকুৱাওক

<div class="d-lg-none">hide on lg and wider screens</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-grid
.d-print-table
.d-print-table-row
.d-print-table-cell
.d-print-flex
.d-print-inline-flex

প্ৰিন্ট আৰু প্ৰদৰ্শন শ্ৰেণীসমূহ একত্ৰিত কৰিব পাৰি।

কেৱল পৰ্দা (কেৱল প্ৰিন্টত লুকুৱাওক)

কেৱল প্ৰিন্ট কৰক (কেৱল পৰ্দাত লুকুৱাওক)

পৰ্দাত ডাঙৰলৈকে লুকুৱাওক, কিন্তু সদায় প্ৰিন্টত দেখুৱাওক

<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>

ছাছ

ইউটিলিটিজ এপিআই

প্ৰদৰ্শন সঁজুলিসমূহ আমাৰ সঁজুলিসমূহ API ত ঘোষণা কৰা হৈছে scss/_utilities.scss. সঁজুলি API কেনেকৈ ব্যৱহাৰ কৰিব লাগে শিকিব।

    "display": (
      responsive: true,
      print: true,
      property: display,
      class: d,
      values: inline inline-block block grid table table-row table-cell flex inline-flex none
    ),