প্ৰদৰ্শন বৈশিষ্ট্য
আমাৰ প্ৰদৰ্শন সঁজুলিসমূহৰ সৈতে উপাদানসমূহৰ প্ৰদৰ্শন মান আৰু অধিক দ্ৰুত আৰু সঁহাৰিজনকভাৱে টগল কৰক। কিছুমান অধিক সাধাৰণ মানৰ বাবে সমৰ্থন অন্তৰ্ভুক্ত কৰে, লগতে প্ৰিন্ট কৰাৰ সময়ত প্ৰদৰ্শন নিয়ন্ত্ৰণ কৰাৰ বাবে কিছুমান অতিৰিক্ত।
কেনেকৈ কাম কৰে
আমাৰ প্ৰতিক্ৰিয়াশীল প্ৰদৰ্শন সঁজুলি শ্ৰেণীসমূহৰ সৈতে 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;
কৰে ।lg
xl
xxl
উদাহৰণ
<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>
<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 |
<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
),