প্রদর্শন সম্পত্তি

কিভাবে এটা কাজ করে

আমাদের প্রতিক্রিয়াশীল প্রদর্শন ইউটিলিটি ক্লাসের সাথে 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

উদাহরণ

<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মাঝারি এবং বড় ডিভাইসগুলি ছাড়া সমস্ত পর্দার আকারের জন্য উপাদানটি লুকিয়ে রাখবে৷

<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

ডিসপ্লে ইউটিলিটিগুলি আমাদের ইউটিলিটি 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
    ),