Source

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

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

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

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

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

তিনটি কলামের মধ্যে একটি

<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তখন নেতিবাচক মার্জিন সহ সারিগুলিতে প্রতিহত করা হয়। এইভাবে, আপনার কলামের সমস্ত বিষয়বস্তু বাম পাশে দৃশ্যতভাবে সারিবদ্ধ করা হয়েছে।
একটি গ্রিড লেআউটে, বিষয়বস্তু অবশ্যই কলামের মধ্যে স্থাপন করা উচিত এবং শুধুমাত্র কলামগুলি সারিগুলির অবিলম্বে শিশু হতে পারে৷
ফ্লেক্সবক্সের জন্য ধন্যবাদ, নির্দিষ্ট করা ছাড়া গ্রিড কলামগুলি widthস্বয়ংক্রিয়ভাবে সমান প্রস্থের কলাম হিসাবে লেআউট করবে। উদাহরণস্বরূপ, .col-smইচ্ছার চারটি দৃষ্টান্ত স্বয়ংক্রিয়ভাবে ছোট ব্রেকপয়েন্ট থেকে 25% প্রশস্ত হবে আরও উদাহরণের জন্য স্বয়ংক্রিয়-লেআউট কলাম বিভাগটি দেখুন।
কলাম ক্লাসগুলি প্রতি সারি সম্ভাব্য 12টির মধ্যে আপনি যে কলামগুলি ব্যবহার করতে চান তার সংখ্যা নির্দেশ করে৷ সুতরাং, আপনি যদি তিনটি সমান-প্রস্থ কলাম জুড়ে চান, আপনি ব্যবহার করতে পারেন .col-4।
কলামগুলি widthশতাংশে সেট করা হয়, তাই সেগুলি সর্বদা তরল এবং তাদের মূল উপাদানের তুলনায় আকারের হয়৷
paddingপৃথক কলামগুলির মধ্যে নর্দমা তৈরি করার জন্য কলামগুলি অনুভূমিক থাকে, তবে, আপনি marginসারি paddingথেকে এবং কলামগুলি থেকে .no-guttersঅন দিয়ে অপসারণ করতে পারেন .row।
গ্রিডকে প্রতিক্রিয়াশীল করার জন্য, পাঁচটি গ্রিড ব্রেকপয়েন্ট রয়েছে, প্রতিটি প্রতিক্রিয়াশীল ব্রেকপয়েন্টের জন্য একটি : সমস্ত ব্রেকপয়েন্ট (অতিরিক্ত ছোট), ছোট, মাঝারি, বড় এবং অতিরিক্ত বড়।
গ্রিড ব্রেকপয়েন্টগুলি ন্যূনতম প্রস্থের মিডিয়া কোয়েরির উপর ভিত্তি করে তৈরি করা হয়, যার অর্থ তারা সেই একটি ব্রেকপয়েন্ট এবং তার উপরে থাকা সমস্ত ক্ষেত্রে প্রযোজ্য (যেমন, .col-sm-4ছোট, মাঝারি, বড় এবং অতিরিক্ত বড় ডিভাইসগুলিতে প্রযোজ্য, তবে প্রথম xsব্রেকপয়েন্ট নয়)।
আপনি আরও শব্দার্থিক মার্কআপের জন্য পূর্বনির্ধারিত গ্রিড ক্লাস (যেমন .col-4) বা Sass মিক্সন ব্যবহার করতে পারেন।

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

গ্রিড বিকল্প

যখন বুটস্ট্র্যাপ বেশিরভাগ মাপ নির্ধারণের জন্য ems বা s ব্যবহার করে, s ব্যবহার করা হয় গ্রিড ব্রেকপয়েন্ট এবং কন্টেইনার প্রস্থের জন্য। কারণ ভিউপোর্টের প্রস্থ পিক্সেলে এবং ফন্টের আকারের সাথে পরিবর্তন হয় না ।rempx

বুটস্ট্র্যাপ গ্রিড সিস্টেমের দিকগুলি একটি সহজ টেবিলের সাথে একাধিক ডিভাইস জুড়ে কীভাবে কাজ করে তা দেখুন।

	অতিরিক্ত ছোট <576px	ছোট ≥576px	মাঝারি ≥768px	বড় ≥992px	অতিরিক্ত বড় ≥1200px
সর্বোচ্চ ধারক প্রস্থ	কোনটিই নয় (স্বয়ংক্রিয়)	540px	720px	960px	1140px
ক্লাস প্রিফিক্স	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`
# কলাম	12
নর্দমার প্রস্থ	30px (একটি কলামের প্রতিটি পাশে 15px)
নেস্টেবল	হ্যাঁ
কলাম ক্রম	হ্যাঁ

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

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

সমান-প্রস্থ

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

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>

সমান-প্রস্থের কলামগুলি একাধিক লাইনে বিভক্ত করা যেতে পারে, তবে একটি সাফারি ফ্লেক্সবক্স বাগflex-basis ছিল যা এটিকে একটি স্পষ্ট বা ছাড়া কাজ করতে বাধা দেয় border। পুরানো ব্রাউজার সংস্করণগুলির জন্য সমাধান রয়েছে, তবে আপনি যদি আপ-টু-ডেট থাকেন তবে সেগুলির প্রয়োজন হবে না।

কলাম

<div class="container">
  <div class="row">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="w-100"></div>
    <div class="col">Column</div>
    <div class="col">Column</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>

সমান-প্রস্থ বহু-সারি

.w-100আপনি যেখানে কলামগুলিকে একটি নতুন লাইনে ভাঙতে চান সেখানে সন্নিবেশ করে একাধিক সারি বিস্তৃত সমান-প্রস্থের কলাম তৈরি করুন । .w-100কিছু প্রতিক্রিয়াশীল প্রদর্শন ইউটিলিটিগুলির সাথে মিশ্রিত করে বিরতিগুলিকে প্রতিক্রিয়াশীল করুন ।

কর্নেল

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

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

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

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

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

কর্নেল

col-8

col-4

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

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

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

col-sm-8

col-sm-4

col-sm

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

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

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

.col-12 .col-md-8

.col-6 .col-md-4

.col-6

<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
  <div class="col-12 col-md-8">.col-12 .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>

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

কলামগুলি উল্লম্ব এবং অনুভূমিকভাবে সারিবদ্ধ করতে flexbox প্রান্তিককরণ ইউটিলিটিগুলি ব্যবহার করুন৷

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

তিনটি কলামের মধ্যে একটি

<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৷ এটি সমস্ত তাৎক্ষণিক শিশু কলাম থেকে নেতিবাচক marginগুলি .rowএবং অনুভূমিকগুলিকে সরিয়ে দেয়।padding

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

একটি প্রান্ত থেকে প্রান্ত নকশা প্রয়োজন? অভিভাবক .containerবা বাদ দিন .container-fluid।

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

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

অনুশীলনে, এটি দেখতে কেমন তা এখানে। মনে রাখবেন আপনি এটিকে অন্যান্য পূর্বনির্ধারিত গ্রিড ক্লাসের সাথে ব্যবহার করা চালিয়ে যেতে পারেন (কলামের প্রস্থ, প্রতিক্রিয়াশীল স্তর, পুনঃক্রম এবং আরও অনেক কিছু সহ)।

.col-12 .col-sm-6 .col-md-8

.col-6 .col-md-4

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

কলাম মোড়ানো

যদি একটি একক সারির মধ্যে 12টির বেশি কলাম স্থাপন করা হয়, তবে অতিরিক্ত কলামের প্রতিটি গ্রুপ, একটি ইউনিট হিসাবে, একটি নতুন লাইনে মোড়ানো হবে।

.col-9

.col-4
যেহেতু 9 + 4 = 13 > 12, এই 4-কলাম-ওয়াইড ডিভটি একটি সংলগ্ন একক হিসাবে একটি নতুন লাইনে মোড়ানো হয়।

.col-6
পরবর্তী কলামগুলি নতুন লাইন বরাবর চলতে থাকে।

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

কলাম বিরতি

ফ্লেক্সবক্সে একটি নতুন লাইনে কলাম ভাঙার জন্য একটি ছোট হ্যাক প্রয়োজন: width: 100%আপনি যেখানেই আপনার কলামগুলিকে একটি নতুন লাইনে মোড়ানো করতে চান সেখানে একটি উপাদান যুক্ত করুন৷ সাধারণত এটি একাধিক .rows দিয়ে সম্পন্ন করা হয়, তবে প্রতিটি বাস্তবায়ন পদ্ধতি এটির জন্য দায়ী হতে পারে না।

.col-6 .col-sm-3

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

আপনি আমাদের প্রতিক্রিয়াশীল প্রদর্শন ইউটিলিটিগুলির সাথে নির্দিষ্ট ব্রেকপয়েন্টগুলিতে এই বিরতিটি প্রয়োগ করতে পারেন ৷

.col-6 .col-sm-4

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

পুনঃক্রম

ক্লাস অর্ডার করুন

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

প্রথম, কিন্তু ক্রমহীন

দ্বিতীয়, কিন্তু শেষ

তৃতীয়, কিন্তু প্রথম

<div class="container">
  <div class="row">
    <div class="col">
      First, but unordered
    </div>
    <div class="col order-12">
      Second, but last
    </div>
    <div class="col order-1">
      Third, but first
    </div>
  </div>
</div>

এছাড়াও প্রতিক্রিয়াশীল .order-firstএবং .order-lastশ্রেণী রয়েছে যেগুলি যথাক্রমে এবং ( ) orderপ্রয়োগ করে একটি উপাদানের পরিবর্তন করে। এই ক্লাসগুলিকে প্রয়োজন অনুসারে সংখ্যাযুক্ত ক্লাসের সাথে মিশ্রিত করা যেতে পারে।order: -1order: 13order: $columns + 1.order-*

প্রথম, কিন্তু শেষ

দ্বিতীয়, কিন্তু ক্রমহীন

তৃতীয়, কিন্তু প্রথম

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

অফসেটিং কলাম

আপনি দুটি উপায়ে গ্রিড কলাম অফসেট করতে পারেন: আমাদের প্রতিক্রিয়াশীল .offset-গ্রিড ক্লাস এবং আমাদের মার্জিন ইউটিলিটি । গ্রিড ক্লাসের আকার কলামের সাথে মেলে যখন মার্জিনগুলি দ্রুত লেআউটের জন্য বেশি উপযোগী যেখানে অফসেটের প্রস্থ পরিবর্তনশীল।

অফসেট ক্লাস

.offset-md-*ক্লাস ব্যবহার করে ডানদিকে কলাম সরান । এই ক্লাসগুলি কলাম দ্বারা একটি কলামের বাম মার্জিন বৃদ্ধি করে *। উদাহরণস্বরূপ, চারটি কলামের উপর .offset-md-4চলে যায়।.col-md-4

.col-md-4

.col-md-4 .offset-md-4

.col-md-3 .offset-md-3

.col-md-6 .offset-md-3

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

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

.col-sm-5 .col-md-6

.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0

.col-sm-6 .col-md-5 .col-lg-6

.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0

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

মার্জিন ইউটিলিটি

v4 এ ফ্লেক্সবক্সে যাওয়ার সাথে, আপনি মার্জিন ইউটিলিটিগুলি ব্যবহার করতে পারেন যেমন .mr-autoভাইবোন কলামগুলি একে অপরের থেকে দূরে রাখতে।

.col-md-4

.col-md-4 .ml-অটো

.col-md-3 .ml-md-auto

.col-auto .mr-auto

.col-অটো

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

বাসা বাঁধে

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

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

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

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

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

সাস মিক্সিং

বুটস্ট্র্যাপের উত্স 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বিভক্ত ।padding-leftpadding-right

$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, বা %) এ গ্রিড মান সেট করা নিশ্চিত করুন ।