প্রদর্শন সম্পত্তি
আমাদের ডিসপ্লে ইউটিলিটিগুলির সাথে উপাদানগুলির প্রদর্শন মান এবং আরও অনেক কিছু দ্রুত এবং প্রতিক্রিয়াশীলভাবে টগল করুন৷ আরও কিছু সাধারণ মানগুলির জন্য সমর্থন অন্তর্ভুক্ত করে, সেইসাথে মুদ্রণের সময় প্রদর্শন নিয়ন্ত্রণের জন্য কিছু অতিরিক্ত।
আমাদের প্রতিক্রিয়াশীল প্রদর্শন ইউটিলিটি ক্লাসের সাথে 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
মিডিয়া ক্যোয়ারী প্রদত্ত ব্রেকপয়েন্ট বা তার চেয়ে বড় সহ স্ক্রীনের প্রস্থকে প্রভাবিত করে । উদাহরণস্বরূপ, উভয় এবং পর্দায় .d-lg-none
সেট ।display: none;
lg
xl
দ্রুত মোবাইল-বান্ধব বিকাশের জন্য, ডিভাইস দ্বারা উপাদানগুলি দেখানো এবং লুকানোর জন্য প্রতিক্রিয়াশীল প্রদর্শন ক্লাসগুলি ব্যবহার করুন৷ একই সাইটের সম্পূর্ণ ভিন্ন সংস্করণ তৈরি করা এড়িয়ে চলুন, পরিবর্তে প্রতিটি স্ক্রিনের আকারের জন্য প্রতিক্রিয়াশীলভাবে উপাদান লুকান।
উপাদানগুলি লুকানোর জন্য শুধুমাত্র .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 |
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
মুদ্রণ এবং প্রদর্শন ক্লাস একত্রিত করা যেতে পারে.