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

উদাহরণ

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>
ডি-ব্লক ডি-ব্লক 
<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
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>