in English

গ্রিড সিস্টেম

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

এই পৃষ্ঠায়

উদাহরণ

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

ফ্লেক্সবক্সে নতুন বা অপরিচিত? পটভূমি, পরিভাষা, নির্দেশিকা এবং কোড স্নিপেটের জন্য এই CSS ট্রিক্স ফ্লেক্সবক্স গাইড পড়ুন ।

কলাম

<div class="container">
  <div class="row">
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
  </div>
</div>

উপরের উদাহরণটি আমাদের পূর্বনির্ধারিত গ্রিড ক্লাস ব্যবহার করে সমস্ত ডিভাইস এবং ভিউপোর্ট জুড়ে তিনটি সমান-প্রস্থ কলাম তৈরি করে। এই কলামগুলি পৃষ্ঠায় অভিভাবকের সাথে কেন্দ্রীভূত হয় .container৷

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

এটিকে ভেঙ্গে, গ্রিড সিস্টেম কীভাবে একত্রিত হয় তা এখানে:

আমাদের গ্রিড ছয়টি প্রতিক্রিয়াশীল ব্রেকপয়েন্ট সমর্থন করে । ব্রেকপয়েন্টগুলি মিডিয়া প্রশ্নের উপর ভিত্তি করে তৈরি করা হয় min-width, যার অর্থ তারা সেই ব্রেকপয়েন্ট এবং এর উপরে থাকা সমস্তগুলিকে প্রভাবিত করে (যেমন, , , , , এবং ) .col-sm-4এ প্রযোজ্য )। এর মানে আপনি প্রতিটি ব্রেকপয়েন্ট দ্বারা কন্টেইনার এবং কলামের আকার এবং আচরণ নিয়ন্ত্রণ করতে পারেন।smmdlgxlxxl
ধারক কেন্দ্র এবং অনুভূমিকভাবে আপনার বিষয়বস্তু প্যাড. .containerএকটি প্রতিক্রিয়াশীল পিক্সেল প্রস্থের .container-fluidজন্য , সমস্ত ভিউপোর্ট এবং ডিভাইস width: 100%জুড়ে বা .container-mdতরল এবং পিক্সেল প্রস্থের সংমিশ্রণের জন্য একটি প্রতিক্রিয়াশীল ধারক (যেমন, ) ব্যবহার করুন৷
সারি কলামের জন্য মোড়ক। প্রতিটি কলাম paddingতাদের মধ্যে স্থান নিয়ন্ত্রণ করার জন্য অনুভূমিক (একটি নর্দমা বলা হয়) আছে। paddingআপনার কলামের বিষয়বস্তু বাম দিকে দৃশ্যমানভাবে সারিবদ্ধ করা হয়েছে তা নিশ্চিত করার জন্য এটি নেতিবাচক মার্জিন সহ সারিগুলিতে প্রতিহত করা হয় । সারিগুলি আপনার সামগ্রীর ব্যবধান পরিবর্তন করতে কলামের আকার এবং গটার ক্লাসগুলিকে অভিন্নভাবে প্রয়োগ করতে মডিফায়ার ক্লাসগুলিকেও সমর্থন করে৷
কলামগুলি অবিশ্বাস্যভাবে নমনীয়। প্রতি সারিতে 12টি টেমপ্লেট কলাম উপলব্ধ রয়েছে, যা আপনাকে উপাদানগুলির বিভিন্ন সংমিশ্রণ তৈরি করতে দেয় যা যেকোন সংখ্যক কলামকে বিস্তৃত করে। কলাম ক্লাসগুলি স্প্যান করার জন্য টেমপ্লেট কলামের সংখ্যা নির্দেশ করে (যেমন, col-4চারটি স্প্যান করে)। widths শতাংশে সেট করা হয় তাই আপনার সবসময় একই আপেক্ষিক আকার থাকে।
গুটারগুলিও প্রতিক্রিয়াশীল এবং কাস্টমাইজযোগ্য। আমাদের মার্জিন এবং প্যাডিং ব্যবধানের মতো একই আকারের সাথে সমস্ত ব্রেকপয়েন্ট জুড়ে গটার ক্লাস উপলব্ধ । ক্লাস সহ অনুভূমিক নর্দমাগুলি , উল্লম্ব নর্দমাগুলির সাথে বা ক্লাস সহ সমস্ত নর্দমাগুলি পরিবর্তন করুন৷ এছাড়াও gutters অপসারণ উপলব্ধ..gx-*.gy-*.g-*.g-0
Sass ভেরিয়েবল, মানচিত্র, এবং মিশ্রণ গ্রিড শক্তি. আপনি যদি বুটস্ট্র্যাপে পূর্বনির্ধারিত গ্রিড ক্লাসগুলি ব্যবহার করতে না চান, তাহলে আপনি আরও শব্দার্থিক মার্কআপের সাথে আপনার নিজস্ব তৈরি করতে আমাদের গ্রিডের উত্স Sass ব্যবহার করতে পারেন। আমরা আপনার জন্য আরও বেশি নমনীয়তার জন্য এই Sass ভেরিয়েবলগুলি ব্যবহার করার জন্য কিছু CSS কাস্টম বৈশিষ্ট্যও অন্তর্ভুক্ত করি।

ফ্লেক্সবক্সের আশেপাশে থাকা সীমাবদ্ধতা এবং বাগ সম্পর্কে সচেতন থাকুন , যেমন ফ্লেক্স কন্টেইনার হিসেবে কিছু HTML উপাদান ব্যবহার করতে না পারা ।

গ্রিড বিকল্প

বুটস্ট্র্যাপের গ্রিড সিস্টেম ছয়টি ডিফল্ট ব্রেকপয়েন্ট এবং আপনার কাস্টমাইজ করা যেকোনো ব্রেকপয়েন্ট জুড়ে মানিয়ে নিতে পারে। ছয়টি ডিফল্ট গ্রিড স্তর নিম্নরূপ:

অতিরিক্ত ছোট (xs)
ছোট (sm)
মাঝারি (md)
বড় (lg)
অতিরিক্ত বড় (xl)
অতিরিক্ত অতিরিক্ত বড় (xxl)

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

	xs <576px	sm ≥576px	md ≥768px	lg ≥992px	xl ≥1200px	xxl ≥1400px
ধারক`max-width`	কোনটিই নয় (স্বয়ংক্রিয়)	540px	720px	960px	1140px	1320px
শ্রেণি উপসর্গ	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`	`.col-xxl-`
# কলাম	12
নর্দমার প্রস্থ	1.5rem (.75rem বাম এবং ডানে)
কাস্টম gutters	হ্যাঁ
নেস্টেবল	হ্যাঁ
কলাম ক্রম	হ্যাঁ

স্বয়ংক্রিয় লেআউট কলাম

একটি সুস্পষ্ট সংখ্যাযুক্ত ক্লাস ছাড়াই সহজ কলাম আকারের জন্য ব্রেকপয়েন্ট-নির্দিষ্ট কলাম ক্লাসগুলি ব্যবহার করুন .col-sm-6।

সমান-প্রস্থ

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

2 এর 1

2 এর 2

1 এর 3

৩টির মধ্যে ২টি

3 এর 3

<div class="container">
  <div class="row">
    <div class="col">
      1 of 2
    </div>
    <div class="col">
      2 of 2
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col">
      2 of 3
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

এক কলামের প্রস্থ সেট করা হচ্ছে

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

1 এর 3

3 এর মধ্যে 2 (বিস্তৃত)

3 এর 3

1 এর 3

3 এর মধ্যে 2 (বিস্তৃত)

3 এর 3

<div class="container">
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-6">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-5">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

পরিবর্তনশীল প্রস্থ সামগ্রী

col-{breakpoint}-autoতাদের বিষয়বস্তুর স্বাভাবিক প্রস্থের উপর ভিত্তি করে কলামের আকারের জন্য ক্লাস ব্যবহার করুন ।

1 এর 3

পরিবর্তনশীল প্রস্থ সামগ্রী

3 এর 3

1 এর 3

পরিবর্তনশীল প্রস্থ সামগ্রী

3 এর 3

<div class="container">
  <div class="row justify-content-md-center">
    <div class="col col-lg-2">
      1 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
</div>

প্রতিক্রিয়াশীল ক্লাস

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

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

গ্রিডগুলির জন্য যেগুলি ডিভাইসগুলির মধ্যে ছোট থেকে বড় পর্যন্ত একই, .colএবং .col-*ক্লাসগুলি ব্যবহার করুন৷ যখন আপনার একটি বিশেষ আকারের কলামের প্রয়োজন হয় তখন একটি সংখ্যাযুক্ত শ্রেণী নির্দিষ্ট করুন; অন্যথায়, বিনা দ্বিধায় লেগে থাকুন .col।

কর্নেল

col-8

col-4

<div class="container">
  <div class="row">
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
  </div>
  <div class="row">
    <div class="col-8">col-8</div>
    <div class="col-4">col-4</div>
  </div>
</div>

অনুভূমিকভাবে স্তুপীকৃত

ক্লাসের একটি একক সেট ব্যবহার করে .col-sm-*, আপনি একটি মৌলিক গ্রিড সিস্টেম তৈরি করতে পারেন যা স্ট্যাক করা শুরু হয় এবং ছোট ব্রেকপয়েন্ট ( sm) এ অনুভূমিক হয়ে যায়।

col-sm-8

col-sm-4

col-sm

<div class="container">
  <div class="row">
    <div class="col-sm-8">col-sm-8</div>
    <div class="col-sm-4">col-sm-4</div>
  </div>
  <div class="row">
    <div class="col-sm">col-sm</div>
    <div class="col-sm">col-sm</div>
    <div class="col-sm">col-sm</div>
  </div>
</div>

মিশ্রিত করা এবং মেলে

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

.col-md-8

.col-6 .col-md-4

.col-6

<div class="container">
  <!-- Stack the columns on mobile by making one full-width and the other half-width -->
  <div class="row">
    <div class="col-md-8">.col-md-8</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  </div>

  <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
  <div class="row">
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  </div>

  <!-- Columns are always 50% wide, on mobile and desktop -->
  <div class="row">
    <div class="col-6">.col-6</div>
    <div class="col-6">.col-6</div>
  </div>
</div>

সারি কলাম

.row-cols-*আপনার কন্টেন্ট এবং লেআউটকে সেরা রেন্ডার করে এমন কলামের সংখ্যা দ্রুত সেট করতে প্রতিক্রিয়াশীল ক্লাস ব্যবহার করুন । যেখানে সাধারণ .col-*ক্লাসগুলি পৃথক কলামগুলিতে প্রযোজ্য হয় (যেমন, .col-md-4), সারি কলামের ক্লাসগুলি .rowএকটি শর্টকাট হিসাবে অভিভাবকের উপর সেট করা হয়৷ .row-cols-autoআপনি কলাম তাদের প্রাকৃতিক প্রস্থ দিতে পারেন সঙ্গে .

দ্রুত বেসিক গ্রিড লেআউট তৈরি করতে বা আপনার কার্ড লেআউট নিয়ন্ত্রণ করতে এই সারি কলাম ক্লাস ব্যবহার করুন।

কলাম

<div class="container">
  <div class="row row-cols-2">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

কলাম

<div class="container">
  <div class="row row-cols-3">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

কলাম

<div class="container">
  <div class="row row-cols-auto">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

কলাম

<div class="container">
  <div class="row row-cols-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

কলাম

<div class="container">
  <div class="row row-cols-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col-6">Column</div>
    <div class="col">Column</div>
  </div>
</div>

কলাম

<div class="container">
  <div class="row row-cols-1 row-cols-sm-2 row-cols-md-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

আপনি সহগামী Sass mixin ব্যবহার করতে পারেন row-cols(),:

.element {
  // Three columns to start
  @include row-cols(3);

  // Five columns from medium breakpoint up
  @include media-breakpoint-up(md) {
    @include row-cols(5);
  }
}

বাসা বাঁধে

ডিফল্ট গ্রিডের সাথে আপনার সামগ্রী নেস্ট করতে, একটি বিদ্যমান কলামের মধ্যে একটি নতুন .rowএবং কলামের সেট যোগ করুন । নেস্টেড সারিগুলিতে 12 বা তার কম পর্যন্ত যোগ করা কলামগুলির একটি সেট অন্তর্ভুক্ত করা উচিত (এটি প্রয়োজনীয় নয় যে আপনি উপলব্ধ 12টি কলাম ব্যবহার করুন)৷.col-sm-*.col-sm-*

লেভেল 1: .col-sm-3

লেভেল 2: .col-8 .col-sm-6

লেভেল 2: .col-4 .col-sm-6

<div class="container">
  <div class="row">
    <div class="col-sm-3">
      Level 1: .col-sm-3
    </div>
    <div class="col-sm-9">
      <div class="row">
        <div class="col-8 col-sm-6">
          Level 2: .col-8 .col-sm-6
        </div>
        <div class="col-4 col-sm-6">
          Level 2: .col-4 .col-sm-6
        </div>
      </div>
    </div>
  </div>
</div>

সস

বুটস্ট্র্যাপের উত্স Sass ফাইলগুলি ব্যবহার করার সময়, আপনার কাছে কাস্টম, শব্দার্থিক, এবং প্রতিক্রিয়াশীল পৃষ্ঠা বিন্যাস তৈরি করতে Sass ভেরিয়েবল এবং মিক্সিন ব্যবহার করার বিকল্প রয়েছে। আমাদের পূর্বনির্ধারিত গ্রিড ক্লাসগুলি দ্রুত প্রতিক্রিয়াশীল লেআউটগুলির জন্য ব্যবহারের জন্য প্রস্তুত ক্লাসগুলির একটি সম্পূর্ণ স্যুট প্রদান করতে একই ভেরিয়েবল এবং মিক্সিনগুলি ব্যবহার করে৷

ভেরিয়েবল

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

$grid-columns:      12;
$grid-gutter-width: 1.5rem;

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

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px,
  xxl: 1320px
);

মিক্সিন

মিক্সিনগুলি পৃথক গ্রিড কলামগুলির জন্য শব্দার্থিক CSS তৈরি করতে গ্রিড ভেরিয়েবলের সাথে একত্রে ব্যবহৃত হয়।

// Creates a wrapper for a series of columns
@include make-row();

// Make the element grid-ready (applying everything but the width)
@include make-col-ready();

// Without optional size values, the mixin will create equal columns (similar to using .col)
@include make-col();
@include make-col($size, $columns: $grid-columns);

// Offset with margins
@include make-col-offset($size, $columns: $grid-columns);

উদাহরণ ব্যবহার

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

.example-container {
  @include make-container();
  // Make sure to define this width after the mixin to override
  // `width: 100%` generated by `make-container()`
  width: 800px;
}

.example-row {
  @include make-row();
}

.example-content-main {
  @include make-col-ready();

  @include media-breakpoint-up(sm) {
    @include make-col(6);
  }
  @include media-breakpoint-up(lg) {
    @include make-col(8);
  }
}

.example-content-secondary {
  @include make-col-ready();

  @include media-breakpoint-up(sm) {
    @include make-col(6);
  }
  @include media-breakpoint-up(lg) {
    @include make-col(4);
  }
}

মূল

মাধ্যমিক বিষয়বস্তু

<div class="example-container">
  <div class="example-row">
    <div class="example-content-main">Main content</div>
    <div class="example-content-secondary">Secondary content</div>
  </div>
</div>

গ্রিড কাস্টমাইজ করা

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

কলাম এবং নর্দমা

Sass ভেরিয়েবলের মাধ্যমে গ্রিড কলামের সংখ্যা পরিবর্তন করা যেতে পারে। $grid-columnsপ্রতিটি পৃথক কলামের প্রস্থ (শতাংশে) তৈরি করতে ব্যবহৃত হয় যখন $grid-gutter-widthকলামের গটারগুলির প্রস্থ নির্ধারণ করে।

$grid-columns: 12 !default;
$grid-gutter-width: 1.5rem !default;

গ্রিড স্তর

নিজেরাই কলামের বাইরে গিয়ে, আপনি গ্রিড স্তরের সংখ্যাও কাস্টমাইজ করতে পারেন। আপনি যদি মাত্র চারটি গ্রিড স্তর চান তবে আপনি এইরকম কিছু আপডেট $grid-breakpointsকরবেন :$container-max-widths

$grid-breakpoints: (
  xs: 0,
  sm: 480px,
  md: 768px,
  lg: 1024px
);

$container-max-widths: (
  sm: 420px,
  md: 720px,
  lg: 960px
);

Sass ভেরিয়েবল বা মানচিত্রে কোন পরিবর্তন করার সময়, আপনাকে আপনার পরিবর্তনগুলি সংরক্ষণ করতে হবে এবং পুনরায় কম্পাইল করতে হবে। এটি করার ফলে কলামের প্রস্থ, অফসেট এবং অর্ডারের জন্য পূর্বনির্ধারিত গ্রিড ক্লাসের একটি একেবারে নতুন সেট আউটপুট হবে। কাস্টম ব্রেকপয়েন্ট ব্যবহার করার জন্য প্রতিক্রিয়াশীল দৃশ্যমানতা ইউটিলিটিগুলিও আপডেট করা হবে। px(না rem, em, বা %) এ গ্রিড মান সেট করা নিশ্চিত করুন ।