ব্রেকপয়েন্ট

মুল ধারণা

• ব্রেকপয়েন্ট হল প্রতিক্রিয়াশীল ডিজাইনের বিল্ডিং ব্লক। আপনার লেআউট কখন একটি নির্দিষ্ট ভিউপোর্ট বা ডিভাইসের আকারে অভিযোজিত হতে পারে তা নিয়ন্ত্রণ করতে সেগুলি ব্যবহার করুন।

• ব্রেকপয়েন্ট দ্বারা আপনার CSS আর্কিটেক্ট করতে মিডিয়া ক্যোয়ারী ব্যবহার করুন। মিডিয়া কোয়েরি হল CSS-এর একটি বৈশিষ্ট্য যা আপনাকে ব্রাউজার এবং অপারেটিং সিস্টেমের প্যারামিটারের সেটের উপর ভিত্তি করে শর্তসাপেক্ষে শৈলী প্রয়োগ করতে দেয়। আমরা সাধারণত min-widthআমাদের মিডিয়া প্রশ্নে ব্যবহার করি।

• মোবাইল প্রথম, প্রতিক্রিয়াশীল নকশা লক্ষ্য. বুটস্ট্র্যাপের সিএসএসের লক্ষ্য হল ক্ষুদ্রতম ব্রেকপয়েন্টে একটি লেআউট কাজ করার জন্য ন্যূনতম শৈলী প্রয়োগ করা, এবং তারপরে বড় ডিভাইসগুলির জন্য সেই নকশাটি সামঞ্জস্য করার জন্য শৈলীতে স্তরগুলি। এটি আপনার CSS অপ্টিমাইজ করে, রেন্ডারিং সময় উন্নত করে এবং আপনার দর্শকদের জন্য একটি দুর্দান্ত অভিজ্ঞতা প্রদান করে।

উপলব্ধ ব্রেকপয়েন্ট

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

প্রতিটি ব্রেকপয়েন্টকে আরামদায়ক কন্টেনার ধরে রাখার জন্য বেছে নেওয়া হয়েছিল যার প্রস্থ 12 এর গুণিতক। ব্রেকপয়েন্টগুলি সাধারণ ডিভাইসের আকার এবং ভিউপোর্ট মাত্রাগুলির একটি উপসেটের প্রতিনিধিও হয়- তারা নির্দিষ্টভাবে প্রতিটি ব্যবহারের ক্ষেত্রে বা ডিভাইসকে লক্ষ্য করে না। পরিবর্তে, রেঞ্জগুলি প্রায় যেকোনো ডিভাইসের জন্য একটি শক্তিশালী এবং সামঞ্জস্যপূর্ণ ভিত্তি প্রদান করে।

_variables.scssএই ব্রেকপয়েন্টগুলি Sass-এর মাধ্যমে কাস্টমাইজ করা যায়—আপনি এগুলিকে আমাদের স্টাইলশীটে একটি Sass মানচিত্রে পাবেন ৷

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
);

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

মিডিয়া প্রশ্নের

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

সর্বনিম্ন-প্রস্থ

বুটস্ট্র্যাপ প্রাথমিকভাবে আমাদের লেআউট, গ্রিড সিস্টেম এবং উপাদানগুলির জন্য আমাদের উৎস Sass ফাইলগুলিতে নিম্নলিখিত মিডিয়া ক্যোয়ারী রেঞ্জগুলি-বা ব্রেকপয়েন্টগুলি ব্যবহার করে৷

// Source mixins

// No media query necessary for xs breakpoint as it's effectively `@media (min-width: 0) { ... }`
@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { ... }
@include media-breakpoint-up(xxl) { ... }

// Usage

// Example: Hide starting at `min-width: 0`, and then show at the `sm` breakpoint
.custom-class {
  display: none;
}
@include media-breakpoint-up(sm) {
  .custom-class {
    display: block;
  }
}

এই Sass মিক্সিনগুলি আমাদের Sass ভেরিয়েবলে ঘোষিত মানগুলি ব্যবহার করে আমাদের সংকলিত CSS-এ অনুবাদ করে। উদাহরণ স্বরূপ:

// X-Small devices (portrait phones, less than 576px)
// No media query for `xs` since this is the default in Bootstrap

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// X-Large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

// XX-Large devices (larger desktops, 1400px and up)
@media (min-width: 1400px) { ... }

সর্বোচ্চ প্রস্থ

আমরা মাঝে মাঝে মিডিয়া কোয়েরি ব্যবহার করি যা অন্য দিকে যায় (প্রদত্ত স্ক্রীনের আকার বা ছোট ):

// No media query necessary for xs breakpoint as it's effectively `@media (max-width: 0) { ... }`
@include media-breakpoint-down(sm) { ... }
@include media-breakpoint-down(md) { ... }
@include media-breakpoint-down(lg) { ... }
@include media-breakpoint-down(xl) { ... }
@include media-breakpoint-down(xxl) { ... }

// Example: Style from medium breakpoint and down
@include media-breakpoint-down(md) {
  .custom-class {
    display: block;
  }
}

এই মিশ্রণগুলি ঘোষিত ব্রেকপয়েন্টগুলি নেয়, .02pxতাদের থেকে বিয়োগ করে এবং আমাদের max-widthমান হিসাবে ব্যবহার করে। উদাহরণ স্বরূপ:

// X-Small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }

// Small devices (landscape phones, less than 768px)
@media (max-width: 767.98px) { ... }

// Medium devices (tablets, less than 992px)
@media (max-width: 991.98px) { ... }

// Large devices (desktops, less than 1200px)
@media (max-width: 1199.98px) { ... }

// X-Large devices (large desktops, less than 1400px)
@media (max-width: 1399.98px) { ... }

// XX-Large devices (larger desktops)
// No media query since the xxl breakpoint has no upper bound on its width

একক ব্রেকপয়েন্ট

ন্যূনতম এবং সর্বোচ্চ ব্রেকপয়েন্ট প্রস্থ ব্যবহার করে স্ক্রীন আকারের একটি একক অংশকে লক্ষ্য করার জন্য মিডিয়া প্রশ্ন এবং মিশ্রণ রয়েছে।

@include media-breakpoint-only(xs) { ... }
@include media-breakpoint-only(sm) { ... }
@include media-breakpoint-only(md) { ... }
@include media-breakpoint-only(lg) { ... }
@include media-breakpoint-only(xl) { ... }
@include media-breakpoint-only(xxl) { ... }

উদাহরণস্বরূপ, এর @include media-breakpoint-only(md) { ... }ফলাফল হবে:

@media (min-width: 768px) and (max-width: 991.98px) { ... }

ব্রেকপয়েন্টের মধ্যে

একইভাবে, মিডিয়া ক্যোয়ারী একাধিক ব্রেকপয়েন্ট প্রস্থ বিস্তৃত হতে পারে:

@include media-breakpoint-between(md, xl) { ... }

যার ফলে:

// Example
// Apply styles starting from medium devices and up to extra large devices
@media (min-width: 768px) and (max-width: 1199.98px) { ... }