স্কিপ করে মূল কন্টেন্ট এ যাও ডক্স নেভিগেশন এড়িয়ে যান
Check
in English

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

আমাদের ডিসপ্লে ইউটিলিটিগুলির সাথে উপাদানগুলির প্রদর্শন মান এবং আরও অনেক কিছু দ্রুত এবং প্রতিক্রিয়াশীলভাবে টগল করুন৷ আরও কিছু সাধারণ মানগুলির জন্য সমর্থন অন্তর্ভুক্ত করে, সেইসাথে মুদ্রণের সময় প্রদর্শন নিয়ন্ত্রণের জন্য কিছু অতিরিক্ত।

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

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

displaySCSS-এ সংজ্ঞায়িত মান পরিবর্তন করে $utilitiesএবং পুনরায় কম্পাইল করে প্রদর্শনের মান পরিবর্তন করা যেতে পারে।

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

উদাহরণ

ডি-ইনলাইন
ডি-ইনলাইন
html
<div class="d-inline p-2 text-bg-primary">d-inline</div>
<div class="d-inline p-2 text-bg-dark">d-inline</div>
ডি-ব্লক ডি-ব্লক
html
<span class="d-block p-2 text-bg-primary">d-block</span>
<span class="d-block p-2 text-bg-dark">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
লুকিয়ে শুধু মো .d-md-none .d-lg-block
শুধুমাত্র এলজিতে লুকানো .d-lg-none .d-xl-block
শুধুমাত্র এক্সএল-এ লুকানো .d-xl-none
শুধুমাত্র xxl এ লুকানো .d-xxl-none .d-xxl-block
সবার উপর দৃশ্যমান .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 থেকে ছোট পর্দায় লুকান
html
<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

মুদ্রণ এবং প্রদর্শন ক্লাস একত্রিত করা যেতে পারে.

শুধুমাত্র স্ক্রীন (শুধু মুদ্রণে লুকান)
শুধুমাত্র মুদ্রণ (শুধু পর্দায় লুকান)
স্ক্রিনে বড় পর্যন্ত লুকান, কিন্তু সবসময় প্রিন্টে দেখান
html
<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
    ),