গ্ৰীড ব্যৱস্থা

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

এই পৃষ্ঠাত

উদাহৰণ

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

flexbox ত নতুন বা অচিনাকি? পটভূমি, পৰিভাষা, নিৰ্দেশনা, আৰু ক'ড স্নিপেটৰ বাবে এই CSS Tricks flexbox সহায়ক পঢ়ক ।

স্তম্ভ

html

<div class="container text-center">
  <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তাৰ পিছত ঋণাত্মক প্ৰান্তৰ সৈতে শাৰীসমূহত প্ৰতিহত কৰা হয় যাতে আপোনাৰ স্তম্ভসমূহৰ বিষয়বস্তু বাওঁফালে দৃশ্যমানভাৱে প্ৰান্তিককৃত হোৱাটো নিশ্চিত কৰিব পাৰি। শাৰীসমূহে পৰিবৰ্তক শ্ৰেণীসমূহকো সমৰ্থন কৰে যাতে আপোনাৰ বিষয়বস্তুৰ ব্যৱধান সলনি কৰিবলে স্তম্ভ আকাৰ আৰু নালা শ্ৰেণীসমূহ একেদৰে প্ৰয়োগ কৰিবলে।
স্তম্ভবোৰ অবিশ্বাস্যভাৱে নমনীয়। প্ৰতিটো শাৰীত ১২টা সাঁচ স্তম্ভ উপলব্ধ, যিয়ে আপোনাক যিকোনো সংখ্যক স্তম্ভত বিস্তৃত উপাদানসমূহৰ বিভিন্ন সংমিশ্ৰণ সৃষ্টি কৰাৰ অনুমতি দিয়ে। স্তম্ভ শ্ৰেণীসমূহে স্পেন কৰিবলগীয়া সাঁচ স্তম্ভৰ সংখ্যা সূচায় (যেনে, col-4চাৰিটা স্পেন কৰে)। widths শতাংশত নিৰ্ধাৰণ কৰা হৈছে যাতে আপোনাৰ সদায় একে আপেক্ষিক আকাৰ থাকে।
নালাবোৰো প্ৰতিক্ৰিয়াশীল আৰু কাষ্টমাইজেবল। আমাৰ মাৰ্জিন আৰু পেডিং ব্যৱধানৰ দৰে সকলো একে আকাৰৰ সৈতে সকলো ব্ৰেকপইণ্টত নালা ক্লাছ উপলব্ধ । ক্লাছৰ সৈতে অনুভূমিক নালাসমূহ , ৰ সৈতে উলম্ব নালাসমূহ , বা শ্ৰেণীসমূহৰ সৈতে সকলো নালা সলনি কৰক। নালা আঁতৰাবলৈও উপলব্ধ।.gx-*.gy-*.g-*.g-0
Sass চলক, মেপ, আৰু মিক্সিনসমূহ গ্ৰীডক শক্তি প্ৰদান কৰে। যদি আপুনি Bootstrap ত পূৰ্বনিৰ্ধাৰিত গ্ৰীড শ্ৰেণীসমূহ ব্যৱহাৰ কৰিব নিবিচাৰে, আপুনি আমাৰ গ্ৰীডৰ উৎস Sass ব্যৱহাৰ কৰিব পাৰে অধিক অৰ্থগত মাৰ্কআপৰ সৈতে আপোনাৰ নিজৰ সৃষ্টি কৰিবলে। আমি আপোনাৰ বাবে আৰু অধিক নমনীয়তাৰ বাবে এই Sass চলকসমূহ গ্ৰহণ কৰিবলে কিছুমান CSS স্বনিৰ্বাচিত বৈশিষ্ট্যও অন্তৰ্ভুক্ত কৰিছো।

flexbox ৰ চাৰিওফালে থকা সীমাবদ্ধতা আৰু বাগসমূহৰ বিষয়ে সচেতন হওক , যেনে কিছুমান HTML উপাদানক flex ধাৰক হিচাপে ব্যৱহাৰ কৰিব নোৱাৰা ।

গ্ৰীড বিকল্পসমূহ

Bootstrap ৰ গ্ৰীড ব্যৱস্থাপ্ৰণালীয়ে ছয়টা অবিকল্পিত ব্ৰেকপইন্ট, আৰু আপুনি স্বনিৰ্বাচিত কৰা যিকোনো ব্ৰেকপইন্টত খাপ খুৱাব পাৰে । ছটা অবিকল্পিত গ্ৰীড স্তৰ নিম্নলিখিত:

অতিৰিক্ত সৰু (xs)
সৰু (sm)
মধ্যমীয়া (md)
ডাঙৰ (lg)
অতিৰিক্ত বৃহৎ (xl)
অতিৰিক্ত অতিৰিক্ত বৃহৎ (xxl)

ওপৰত উল্লেখ কৰা অনুসৰি, এই ব্ৰেকপইন্টসমূহৰ প্ৰতিটোৰ নিজস্ব ধাৰক, একক শ্ৰেণী উপসৰ্গ, আৰু পৰিবৰ্তক আছে। এই ব্ৰেকপইন্টসমূহৰ মাজেৰে গ্ৰীড কেনেকৈ সলনি হয়:

	xs <৫৭৬px	sm ≥৫৭৬px	md ≥৭৬৮px	lg ≥৯৯২px	xl ≥১২০০px	xxl ≥১৪০০px
পাত্ৰ`max-width`	কোনো নাই (অটো)	৫৪০পিক্সেল	৭২০পিক্সেল	৯৬০px	১১৪০পিক্সেল	১৩২০পিক্সেল
শ্ৰেণী উপসৰ্গ	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`	`.col-xxl-`
# স্তম্ভৰ	১২
নালাৰ প্ৰস্থ	1.5rem (বাওঁ আৰু সোঁফালে .75rem)
কাষ্টম নালা	হয়
নেষ্টেবল	হয়
স্তম্ভ অৰ্ডাৰ দিয়া	হয়

স্বয়ংক্ৰিয়-বিন্যাস স্তম্ভসমূহ

সহজ স্তম্ভ আকাৰ নিৰ্ধাৰণৰ বাবে ব্ৰেকপইন্ট-নিৰ্দিষ্ট স্তম্ভ শ্ৰেণীসমূহ ব্যৱহাৰ কৰক যেনে এটা স্পষ্ট সংখ্যাযুক্ত শ্ৰেণী অবিহনে .col-sm-6।

সমান-প্ৰস্থ

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

২ ৰ ১

২ ৰ ২

৩ ৰ ১

৩ ৰ ২

৩ ৰ ৩

html

<div class="container text-center">
  <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>

এটা স্তম্ভৰ প্ৰস্থ নিৰ্ধাৰণ কৰা

flexbox গ্ৰীড স্তম্ভসমূহৰ বাবে স্বয়ংক্ৰিয়-বিন্যাসৰ অৰ্থ হৈছে আপুনি এটা স্তম্ভৰ প্ৰস্থ সংহতি কৰিব পাৰিব আৰু ভাই-ভনী স্তম্ভসমূহক ইয়াৰ চাৰিওফালে স্বয়ংক্ৰিয়ভাৱে আকাৰ সলনি কৰিব পাৰিব। আপুনি পূৰ্বনিৰ্ধাৰিত গ্ৰীড শ্ৰেণীসমূহ (তলত দেখুওৱাৰ দৰে), গ্ৰীড মিক্সিনসমূহ, বা ইনলাইন প্ৰস্থসমূহ ব্যৱহাৰ কৰিব পাৰে। মন কৰিব যে কেন্দ্ৰ স্তম্ভৰ প্ৰস্থ যিমানেই নহওক কিয় আন স্তম্ভবোৰে আকাৰ সলনি কৰিব।

৩ ৰ ১

৩ টাৰ ২ টা (বহল)

৩ ৰ ৩

৩ ৰ ১

৩ টাৰ ২ টা (বহল)

৩ ৰ ৩

html

<div class="container text-center">
  <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স্তম্ভসমূহৰ বিষয়বস্তুৰ প্ৰাকৃতিক প্ৰস্থৰ ওপৰত ভিত্তি কৰি আকাৰ দিবলৈ শ্ৰেণীসমূহ ব্যৱহাৰ কৰক ।

৩ ৰ ১

পৰিৱৰ্তনশীল প্ৰস্থৰ বিষয়বস্তু

৩ ৰ ৩

৩ ৰ ১

পৰিৱৰ্তনশীল প্ৰস্থৰ বিষয়বস্তু

৩ ৰ ৩

html

<div class="container text-center">
  <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

কল-৮

কল-৪

html

<div class="container text-center">
  <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-৮

col-sm-৪

col-sm

html

<div class="container text-center">
  <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>

মিক্স এণ্ড মেচ

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

.কল-মড-৮

.কল-৬ .কল-এমডি-৪

.কল-৬

html

<div class="container text-center">
  <!-- 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আপুনি স্তম্ভবোৰক ইয়াৰ প্ৰাকৃতিক প্ৰস্থ দিব পাৰে ।

দ্ৰুতভাৱে মূল গ্ৰীড পৰিকল্পনা সৃষ্টি কৰিবলে বা আপোনাৰ কাৰ্ড পৰিকল্পনাসমূহ নিয়ন্ত্ৰণ কৰিবলে এই শাৰী স্তম্ভ শ্ৰেণীসমূহ ব্যৱহাৰ কৰক।

স্তম্ভ

html

<div class="container text-center">
  <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>

স্তম্ভ

html

<div class="container text-center">
  <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>

স্তম্ভ

html

<div class="container text-center">
  <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>

স্তম্ভ

html

<div class="container text-center">
  <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>

স্তম্ভ

html

<div class="container text-center">
  <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>

স্তম্ভ

html

<div class="container text-center">
  <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আৰু .col-sm-*এটা বৰ্ত্তমানৰ স্তম্ভৰ ভিতৰত স্তম্ভসমূহৰ গোট যোগ কৰক .col-sm-*। নেষ্টেড শাৰীসমূহে স্তম্ভসমূহৰ এটা গোট অন্তৰ্ভুক্ত কৰিব লাগে যি 12 বা তাতকৈ কম যোগ কৰে (আপুনি সকলো 12 উপলব্ধ স্তম্ভ ব্যৱহাৰ কৰাৰ প্ৰয়োজন নাই)।

স্তৰ ১: .col-sm-3

স্তৰ ২: .কল-৮ .কল-এছএম-৬

স্তৰ ২: .কল-৪ .কল-এছএম-৬

html

<div class="container text-center">
  <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>

ছাছ

Bootstrap ৰ উৎস Sass নথিপত্ৰসমূহ ব্যৱহাৰ কৰাৰ সময়ত, আপোনাৰ ওচৰত Sass চলকসমূহ আৰু মিক্সিনসমূহ ব্যৱহাৰ কৰাৰ বিকল্প আছে স্বনিৰ্বাচিত, অৰ্থবোধক, আৰু প্ৰতিক্ৰিয়াশীল পৃষ্ঠা পৰিকল্পনা সৃষ্টি কৰিবলে। আমাৰ পূৰ্বনিৰ্ধাৰিত গ্ৰীড শ্ৰেণীসমূহে দ্ৰুত প্ৰতিক্ৰিয়াশীল পৰিকল্পনাসমূহৰ বাবে ব্যৱহাৰৰ বাবে প্ৰস্তুত শ্ৰেণীসমূহৰ এটা সম্পূৰ্ণ চুইট প্ৰদান কৰিবলে এই একেবোৰ চলক আৰু মিক্সিনসমূহ ব্যৱহাৰ কৰে।

চলকসমূহ

চলক আৰু মেপসমূহে স্তম্ভসমূহৰ সংখ্যা, নালাৰ প্ৰস্থ, আৰু মাধ্যম প্ৰশ্ন বিন্দু নিৰ্ধাৰণ কৰে য'ত ভাসমান স্তম্ভসমূহ আৰম্ভ কৰিব লাগে। আমি ওপৰত নথিভুক্ত কৰা পূৰ্বনিৰ্ধাৰিত গ্ৰীড শ্ৰেণীসমূহ সৃষ্টি কৰিবলৈ, লগতে তলত তালিকাভুক্ত স্বনিৰ্বাচিত মিক্সিনসমূহৰ বাবে এইবোৰ ব্যৱহাৰ কৰো।

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

$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);
  }
}

মূল বিষয়বস্তু

গৌণ বিষয়বস্তু

html

<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-row-columns.row-cols-*

$grid-columns: 12 !default;
$grid-gutter-width: 1.5rem !default;
$grid-row-columns: 6 !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, বা %) ত সংহতি কৰাটো নিশ্চিত কৰক ।