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

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

কেনেকৈ কাম কৰে

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

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

<div class="container">
  <div class="row">
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
  </div>
</div>

ওপৰৰ উদাহৰণটোৱে আমাৰ পূৰ্বনিৰ্ধাৰিত গ্ৰীড শ্ৰেণীসমূহ ব্যৱহাৰ কৰি সৰু, মধ্যমীয়া, ডাঙৰ, আৰু অতিৰিক্ত ডাঙৰ ডিভাইচসমূহত তিনিটা সমান-প্ৰস্থৰ স্তম্ভ সৃষ্টি কৰে। সেই স্তম্ভবোৰ পৃষ্ঠাত মূলৰ সৈতে কেন্দ্ৰ কৰি ৰখা হয় .container।

ইয়াক ভাঙি পেলালে, ইয়াত ই কেনেকৈ কাম কৰে:

• কণ্টেইনাৰসমূহে আপোনাৰ চাইটৰ বিষয়বস্তুসমূহ কেন্দ্ৰ আৰু অনুভূমিকভাৱে পেড কৰাৰ এটা উপায় প্ৰদান কৰে। .containerএটা প্ৰতিক্ৰিয়াশীল পিক্সেল প্ৰস্থৰ .container-fluidবাবে বা width: 100%সকলো দৰ্শনপৰ্ট আৰু ডিভাইচ আকাৰৰ বাবে ব্যৱহাৰ কৰক ।
• শাৰীবোৰ স্তম্ভৰ বাবে ৰেপাৰ। প্ৰতিটো স্তম্ভৰ paddingমাজৰ ঠাই নিয়ন্ত্ৰণৰ বাবে অনুভূমিক (যাক নালা বোলা হয়) থাকে। তাৰ paddingপিছত ঋণাত্মক প্ৰান্ত থকা শাৰীবোৰত ইয়াক প্ৰতিহত কৰা হয়। এইদৰে, আপোনাৰ স্তম্ভসমূহৰ সকলো বিষয়বস্তু দৃশ্যমানভাৱে বাওঁফালে তললৈ প্ৰান্তিককৃত কৰা হয়।
• এটা গ্ৰীড বিন্যাসত, বিষয়বস্তু স্তম্ভসমূহৰ ভিতৰত ৰাখিব লাগিব আৰু কেৱল স্তম্ভসমূহ শাৰীৰ তাৎক্ষণিক সন্তান হ'ব পাৰে।
• flexbox ৰ বাবে ধন্যবাদ, এটা নিৰ্দিষ্ট নকৰা গ্ৰীড স্তম্ভসমূহে widthস্বয়ংক্ৰিয়ভাৱে সমান প্ৰস্থৰ স্তম্ভ হিচাপে বিন্যাস কৰিব। উদাহৰণস্বৰূপে, চাৰিটা উদাহৰণৰ .col-smপ্ৰতিটো স্বয়ংক্ৰিয়ভাৱে সৰু ব্ৰেকপইণ্টৰ পৰা আৰু ওপৰলৈ ২৫% বহল হ’ব। অধিক উদাহৰণৰ বাবে স্বয়ংক্ৰিয়-বিন্যাস স্তম্ভসমূহ অংশ চাওক ।
• স্তম্ভ শ্ৰেণীসমূহে প্ৰতি শাৰীত সম্ভাৱ্য ১২ টাৰ ভিতৰত আপুনি ব্যৱহাৰ কৰিব বিচৰা স্তম্ভৰ সংখ্যা সূচায়। গতিকে, যদি আপুনি তিনিটা সমান-প্ৰস্থৰ স্তম্ভৰ ওপৰেৰে বিচাৰে, আপুনি ব্যৱহাৰ কৰিব পাৰে .col-4।
• স্তম্ভ widthসমূহ শতাংশত নিৰ্ধাৰণ কৰা হয়, গতিকে সিহঁত সদায় তৰল আৰু সিহঁতৰ মূল উপাদানৰ তুলনাত আকাৰৰ।
• paddingস্তম্ভসমূহৰ ব্যক্তিগত স্তম্ভসমূহৰ মাজত নালা সৃষ্টি কৰিবলে অনুভূমিক থাকে, অৱশ্যে, আপুনি marginশাৰীসমূহৰ paddingপৰা আৰু স্তম্ভসমূহৰ .no-guttersপৰা আঁতৰাব পাৰে .row।
• গ্ৰীডক প্ৰতিক্ৰিয়াশীল কৰিবলৈ, পাঁচটা গ্ৰীড ব্ৰেকপইন্ট আছে, প্ৰতিটো প্ৰতিক্ৰিয়াশীল ব্ৰেকপইন্টৰ বাবে এটা : সকলো ব্ৰেকপইন্ট (অতিৰিক্ত সৰু), সৰু, মধ্যমীয়া, ডাঙৰ, আৰু অতিৰিক্ত ডাঙৰ।
• গ্ৰীড ব্ৰেকপইন্টসমূহ নূন্যতম প্ৰস্থৰ মাধ্যম প্ৰশ্নসমূহৰ ওপৰত ভিত্তি কৰি কৰা হয়, অৰ্থাৎ সিহত সেই এটা ব্ৰেকপইন্ট আৰু ইয়াৰ ওপৰৰ সকলোত প্ৰযোজ্য (যেনে, .col-sm-4সৰু, মধ্যমীয়া, ডাঙৰ, আৰু অতিৰিক্ত ডাঙৰ ডিভাইচসমূহৰ বাবে প্ৰযোজ্য, কিন্তু প্ৰথম xsব্ৰেকপইন্ট নহয়)।
• আপুনি অধিক অৰ্থগত মাৰ্কআপৰ বাবে পূৰ্বনিৰ্ধাৰিত গ্ৰীড শ্ৰেণীসমূহ (যেনে .col-4) বা Sass মিক্সিনসমূহ ব্যৱহাৰ কৰিব পাৰে।

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

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

Bootstrap এ বেছিভাগ আকাৰ সংজ্ঞায়িত কৰাৰ বাবে ems বা s ব্যৱহাৰ কৰিলেও, s গ্ৰীড ব্ৰেকপইন্ট আৰু ধাৰক প্ৰস্থৰ বাবে ব্যৱহাৰ কৰা হয় । কাৰণ দৰ্শনপৰ্টৰ প্ৰস্থ পিক্সেলত আৰু আখৰৰ আকাৰৰ সৈতে সলনি নহয় ।rempx

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

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

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

সমান-প্ৰস্থ

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

<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>

সমান-প্ৰস্থৰ বহু-ৰেখা

.w-100আপুনি স্তম্ভসমূহক এটা নতুন শাৰীলৈ ভাঙিব বিচৰা ঠাইত এটা সন্নিৱিষ্ট কৰি একাধিক শাৰীত বিস্তৃত সমান-প্ৰস্থৰ স্তম্ভ সৃষ্টি কৰক । .w-100কিছুমান প্ৰতিক্ৰিয়াশীল প্ৰদৰ্শন সঁজুলিৰ সৈতে মিহলাই বিৰতিসমূহক প্ৰতিক্ৰিয়াশীল কৰক ।

এটা Safari flexbox বাগ আছিল যি ইয়াক এটা স্পষ্ট flex-basisবা border. পুৰণি ব্ৰাউজাৰ সংস্কৰণসমূহৰ বাবে ৱৰ্কআৰউণ্ড আছে, কিন্তু যদি আপোনাৰ লক্ষ্য ব্ৰাউজাৰসমূহ বাগী সংস্কৰণসমূহত নপৰে তেন্তে সেইবোৰৰ প্ৰয়োজন হ'ব নালাগে।

<div class="container">
  <div class="row">
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="w-100"></div>
    <div class="col">col</div>
    <div class="col">col</div>
  </div>
</div>

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

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

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

<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।

<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) ত অনুভূমিক হয়।

<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>

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

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

<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>

নালা

ব্ৰেকপইণ্ট-নিৰ্দিষ্ট পেডিং আৰু ঋণাত্মক মাৰ্জিন ইউটিলিটি ক্লাছৰ দ্বাৰা নালাসমূহক সঁহাৰিজনকভাৱে সামঞ্জস্য কৰিব পাৰি। এটা নিৰ্দিষ্ট শাৰীত নালা সলনি কৰিবলে, s ত এটা ঋণাত্মক মাৰ্জিন সঁজুলি আৰু s .rowত মিল থকা পেডিং সঁজুলিসমূহ যোৰ কৰক। .colঅবাঞ্চিত অভাৰফ্ল ' এৰাই চলিবলৈ .containerবা .container-fluidঅভিভাৱককো সামঞ্জস্য কৰিব লাগিব পাৰে, পুনৰ মিল থকা পেডিং সঁজুলি ব্যৱহাৰ কৰি।

lgডাঙৰ ( ) ব্ৰেকপইন্ট আৰু ওপৰত বুটষ্ট্ৰেপ গ্ৰীড স্বনিৰ্বাচিত কৰাৰ এটা উদাহৰণ ইয়াত দিয়া হৈছে । আমি .colপেডিং বৃদ্ধি কৰিছো, অভিভাৱকৰ ওপৰত .px-lg-5সেইটো প্ৰতিহত কৰিছো আৰু তাৰ পিছত ৰেপাৰটো সামঞ্জস্য কৰিছো ।.mx-lg-n5.row.container.px-lg-5

<div class="container px-lg-5">
  <div class="row mx-lg-n5">
    <div class="col py-3 px-lg-5 border bg-light">Custom column padding</div>
    <div class="col py-3 px-lg-5 border bg-light">Custom column padding</div>
  </div>
</div>

শাৰী স্তম্ভ

.row-cols-*আপোনাৰ বিষয়বস্তু আৰু পৰিকল্পনা সৰ্বোত্তমভাৱে ৰেণ্ডাৰ কৰা স্তম্ভসমূহৰ সংখ্যা দ্ৰুতভাৱে সংহতি কৰিবলে প্ৰতিক্ৰিয়াশীল শ্ৰেণীসমূহ ব্যৱহাৰ কৰক। য'ত সাধাৰণ .col-*শ্ৰেণীসমূহ ব্যক্তিগত স্তম্ভসমূহৰ বাবে প্ৰযোজ্য হয় (যেনে, .col-md-4), শাৰী স্তম্ভ শ্ৰেণীসমূহক .rowএটা চৰ্টকাট হিচাপে অভিভাৱকত সংহতি কৰা হয়।

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

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

প্ৰান্তিককৰণ

স্তম্ভসমূহ উলম্বভাৱে আৰু অনুভূমিকভাৱে প্ৰান্তিককৰণ কৰিবলে flexbox প্ৰান্তিককৰণ সঁজুলিসমূহ ব্যৱহাৰ কৰক। Internet Explorer 10-11 এ ফ্লেক্স বস্তুসমূহৰ উলম্ব প্ৰান্তিককৰণ সমৰ্থন নকৰে যেতিয়া ফ্লেক্স কণ্টেইনাৰত min-heightতলত দেখুওৱাৰ দৰে এটা থাকে। অধিক বিৱৰণৰ বাবে Flexbugs #3 চাওক।

উলম্ব প্ৰান্তিককৰণ

<div class="container">
  <div class="row align-items-start">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-center">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-end">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
</div>

<div class="container">
  <div class="row">
    <div class="col align-self-start">
      One of three columns
    </div>
    <div class="col align-self-center">
      One of three columns
    </div>
    <div class="col align-self-end">
      One of three columns
    </div>
  </div>
</div>

অনুভূমিক প্ৰান্তিককৰণ

<div class="container">
  <div class="row justify-content-start">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-center">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-end">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-around">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-between">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
</div>

নালা নাই

আমাৰ পূৰ্বনিৰ্ধাৰিত গ্ৰীড শ্ৰেণীসমূহত স্তম্ভসমূহৰ মাজৰ নালাসমূহ ৰ সহায়ত আঁতৰাব পাৰি .no-gutters। ই সকলো তাৎক্ষণিক শিশু স্তম্ভৰ পৰা ঋণাত্মক margins .rowআৰু অনুভূমিক আঁতৰাই পেলায়।padding

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

এজ-টু-এজ ডিজাইনৰ প্ৰয়োজন? অভিভাৱক .containerবা ড্ৰপ কৰক .container-fluid।

.no-gutters {
  margin-right: 0;
  margin-left: 0;

  > .col,
  > [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
  }
}

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

<div class="row no-gutters">
  <div class="col-sm-6 col-md-8">.col-sm-6 .col-md-8</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

স্তম্ভ ৰেপিং

যদি এটা শাৰীৰ ভিতৰত ১২ টাতকৈ অধিক স্তম্ভ ৰখা হয়, অতিৰিক্ত স্তম্ভৰ প্ৰতিটো গোটে, এটা একক হিচাপে, এটা নতুন শাৰীত ৰেপ কৰিব।

<div class="container">
  <div class="row">
    <div class="col-9">.col-9</div>
    <div class="col-4">.col-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
    <div class="col-6">.col-6<br>Subsequent columns continue along the new line.</div>
  </div>
</div>

স্তম্ভ ভাঙি যায়

flexbox ত এটা নতুন শাৰীলৈ স্তম্ভ ভাঙিবলৈ এটা সৰু হেকৰ প্ৰয়োজন: width: 100%আপুনি য'তেই আপোনাৰ স্তম্ভসমূহক এটা নতুন শাৰীত ৰেপ কৰিব বিচাৰে তাৰ সৈতে এটা উপাদান যোগ কৰক। সাধাৰণতে ইয়াক একাধিক .rows ৰ সৈতে সম্পন্ন কৰা হয়, কিন্তু প্ৰতিটো প্ৰণয়ন পদ্ধতিয়ে ইয়াৰ বাবে হিচাপ দিব নোৱাৰে।

<div class="container">
  <div class="row">
    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>

    <!-- Force next columns to break to new line -->
    <div class="w-100"></div>

    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
  </div>
</div>

আপুনি আমাৰ প্ৰতিক্ৰিয়াশীল প্ৰদৰ্শন সঁজুলিসমূহৰ সৈতে নিৰ্দিষ্ট ব্ৰেকপইন্টসমূহত এই বিৰতি প্ৰয়োগ কৰিব পাৰে ।

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

    <!-- Force next columns to break to new line at md breakpoint and up -->
    <div class="w-100 d-none d-md-block"></div>

    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
  </div>
</div>

পুনৰ ক্ৰমবদ্ধ কৰা

ক্লাছ অৰ্ডাৰ কৰক

আপোনাৰ বিষয়বস্তুৰ দৃশ্যমান ক্ৰম.order- নিয়ন্ত্ৰণৰ বাবে শ্ৰেণীসমূহ ব্যৱহাৰ কৰক । এই শ্ৰেণীসমূহ প্ৰতিক্ৰিয়াশীল, গতিকে আপুনি ব্ৰেকপইন্টৰ দ্বাৰা সংহতি কৰিব পাৰে (যেনে, ). পাঁচোটা গ্ৰীড স্তৰৰ মাজেৰে মাধ্যমৰ বাবে সমৰ্থন অন্তৰ্ভুক্ত কৰা হৈছে ।order.order-1.order-md-2112

<div class="container">
  <div class="row">
    <div class="col">
      First in DOM, no order applied
    </div>
    <div class="col order-12">
      Second in DOM, with a larger order
    </div>
    <div class="col order-1">
      Third in DOM, with an order of 1
    </div>
  </div>
</div>

ইয়াৰ উপৰিও ৰেচপন্সিভ .order-firstআৰু ক্লাছ আছে যিয়ে ক্ৰমে আৰু ( ) প্ৰয়োগ কৰি এটা উপাদানৰ .order-lastপৰিৱৰ্তন কৰে । এই শ্ৰেণীসমূহক প্ৰয়োজন অনুসৰি সংখ্যাযুক্ত শ্ৰেণীসমূহৰ সৈতেও আন্তঃমিশ্ৰণ কৰিব পাৰি ।orderorder: -1order: 13order: $columns + 1.order-*

<div class="container">
  <div class="row">
    <div class="col order-last">
      First in DOM, ordered last
    </div>
    <div class="col">
      Second in DOM, unordered
    </div>
    <div class="col order-first">
      Third in DOM, ordered first
    </div>
  </div>
</div>

স্তম্ভসমূহ অফছেটিং কৰা

আপুনি গ্ৰীড স্তম্ভসমূহক দুটা ধৰণে অফছেট কৰিব পাৰে: আমাৰ প্ৰতিক্ৰিয়াশীল .offset-গ্ৰীড শ্ৰেণীসমূহ আৰু আমাৰ মাৰ্জিন সঁজুলিসমূহ । গ্ৰীড শ্ৰেণীসমূহক স্তম্ভসমূহৰ সৈতে মিলাবলৈ আকাৰ দিয়া হয় আনহাতে মাৰ্জিনসমূহ দ্ৰুত পৰিকল্পনাসমূহৰ বাবে অধিক উপযোগী য'ত অফছেটৰ প্ৰস্থ পৰিৱৰ্তনশীল।

অফছেট শ্ৰেণীসমূহ

.offset-md-*শ্ৰেণীসমূহ ব্যৱহাৰ কৰি স্তম্ভসমূহ সোঁফালে লৈ যাওক । এই শ্ৰেণীবোৰে এটা স্তম্ভৰ বাওঁফালৰ প্ৰান্ত স্তম্ভৰ দ্বাৰা বৃদ্ধি কৰে *। উদাহৰণস্বৰূপে, চাৰিটা স্তম্ভৰ ওপৰেৰে .offset-md-4গতি কৰে ।.col-md-4

<div class="container">
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
  </div>
  <div class="row">
    <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
    <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
  </div>
  <div class="row">
    <div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
  </div>
</div>

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

<div class="container">
  <div class="row">
    <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
    <div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</div>
  </div>
  <div class="row">
    <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
    <div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0</div>
  </div>
</div>

মাৰ্জিন উপযোগীতাসমূহ

v4 ত flexbox লৈ যোৱাৰ সৈতে, আপুনি মাৰ্জিন সঁজুলিসমূহ ব্যৱহাৰ কৰিব পাৰে যেনে .mr-autoভাই-ভনী স্তম্ভসমূহক ইটোৱে সিটোৰ পৰা আঁতৰাই ৰাখিবলৈ বাধ্য কৰা।

<div class="container">
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
  </div>
  <div class="row">
    <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
    <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
  </div>
  <div class="row">
    <div class="col-auto mr-auto">.col-auto .mr-auto</div>
    <div class="col-auto">.col-auto</div>
  </div>
</div>

বাহ সজা

অবিকল্পিত গ্ৰীডৰ সৈতে আপোনাৰ বিষয়বস্তু নেষ্ট কৰিবলে, এটা নতুন .rowআৰু .col-sm-*এটা বৰ্ত্তমানৰ স্তম্ভৰ ভিতৰত স্তম্ভসমূহৰ গোট যোগ কৰক .col-sm-*। নেষ্টেড শাৰীসমূহে স্তম্ভসমূহৰ এটা গোট অন্তৰ্ভুক্ত কৰিব লাগে যি 12 বা তাতকৈ কম যোগ কৰে (আপুনি সকলো 12 উপলব্ধ স্তম্ভ ব্যৱহাৰ কৰাৰ প্ৰয়োজন নাই)।

<div class="container">
  <div class="row">
    <div class="col-sm-9">
      Level 1: .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: 30px;

$grid-breakpoints: (
  // Extra small screen / phone
  xs: 0,
  // Small screen / phone
  sm: 576px,
  // Medium screen / tablet
  md: 768px,
  // Large screen / desktop
  lg: 992px,
  // Extra large screen / wide desktop
  xl: 1200px
);

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

মিক্সিন

ব্যক্তিগত গ্ৰীড স্তম্ভসমূহৰ বাবে অৰ্থগত 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();
@include make-col($size, $columns: $grid-columns);

// Get fancy by offsetting, or changing the sort order
@include make-col-offset($size, $columns: $grid-columns);

উদাহৰণ ব্যৱহাৰ

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

.example-container {
  width: 800px;
  @include make-container();
}

.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: 30px !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, বা %) ত সংহতি কৰাটো নিশ্চিত কৰক ।