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

$displaysভেরিয়েবল পরিবর্তন করে এবং SCSS পুনরায় কম্পাইল করে প্রদর্শনের মান পরিবর্তন করা যেতে পারে ।

মিডিয়া ক্যোয়ারী প্রদত্ত ব্রেকপয়েন্ট বা তার চেয়ে বড় সহ স্ক্রীনের প্রস্থকে প্রভাবিত করে । উদাহরণস্বরূপ, উভয় এবং পর্দায় .d-lg-noneসেট ।display: none;lgxl

উদাহরণ

ডি-ইনলাইন

<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}-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`
লুকিয়ে শুধু মো	`.d-md-none .d-lg-block`
শুধুমাত্র এলজিতে লুকানো	`.d-lg-none .d-xl-block`
শুধুমাত্র এক্সএল-এ লুকানো	`.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 lg and wider screens

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