TechBlogSD - ওয়ার্ডপ্রেস এবং ওয়েব ডেভেলপমেন্টের জন্য সবকিছু
ওয়েব এবং ওয়ার্ডপ্রেস নির্দেশাবলী, খবর, থিম এবং প্লাগইনগুলির পর্যালোচনা

কিভাবে বুটস্ট্র্যাপ 5 গ্রিড লেআউট ব্যবহার করবেন?

1

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

বুটস্ট্র্যাপ 5 গ্রিড লেআউট টিউটোরিয়াল

এই টিউটোরিয়ালে নিম্নলিখিত বিষয়গুলি রয়েছে:

  1. গ্রিড লেআউট বুনিয়াদি
  2. টিয়ার 5 গ্রিড সিস্টেম
  3. সমান প্রস্থের সরল গ্রিড
  4. একটি কলামের প্রস্থ এবং অন্যান্য কলামের আকার পরিবর্তন করুন
  5. পরিবর্তনশীল প্রস্থ সামগ্রী
  6. সমান প্রস্থ একাধিক সারি গ্রিড
  7. স্তূপিত অনুভূমিক গ্রিড
  8. উল্লম্ব প্রান্তিককরণ
  9. অনুভূমিক সারিবদ্ধকরণ
  10. কোন গটার সহ গ্রিড
  11. মোড়ানো কলাম গ্রিড
  12. গ্রিডের মধ্যে কলাম বিষয়বস্তু পুনর্বিন্যাস
  13. কলাম অফসেটিং
  14. গ্রিডের মধ্যে বাসা বাঁধে

1 বুটস্ট্র্যাপ গ্রিড সিস্টেমের মূল বিষয়

গ্রিড সিস্টেমটি প্রয়োজনীয় লেআউট তৈরি করতে তিনটি প্রধান CSS ক্লাস ব্যবহার করে – .container, .row এবং .col। ধারক সম্পূর্ণ বিন্যাস এবং তারপর সারি এবং তারপর কলাম জুড়ে।

  • নির্দিষ্ট প্রস্থের সাথে বিষয়বস্তু কেন্দ্রীভূত করার জন্য .container ক্লাস এবং প্রতিক্রিয়াশীল পূর্ণ প্রস্থ বিন্যাসের জন্য .container-fluid ব্যবহার করুন।
  • 12 সমান প্রস্থে বিভক্ত সমস্ত অনুভূমিক কলাম অন্তর্ভুক্ত করার জন্য আপনি .row ক্লাস ব্যবহার করতে পারেন।
  • .Col বা .col-* ক্লাস ব্যবহার করে কলামের ভিতরে প্রকৃত বিষয়বস্তু রাখুন। উদাহরণস্বরূপ, একটি সারিতে দুটি কলাম থাকতে পারে যেমন .col-8 + .col-4। কলামটি সারি শ্রেণীর অবিলম্বে সন্তান হওয়া উচিত।
  • সমস্ত কলাম ফ্লেক্সবক্স ব্যবহার করে যার অর্থ হল .col ক্লাস ব্যবহার করা সহজ সারি সমান প্রস্থ কলামে বিভক্ত হবে। উদাহরণস্বরূপ, যখন আপনি একটি।
  • আপনি স্পষ্টভাবে কলাম প্রস্থ নির্ধারণ করতে পারেন .col-sm-8 এর মত যা সারির প্রস্থের 3/4 (75%) দখল করবে।
  • ভাল দৃশ্যমানতার জন্য ডিফল্টভাবে কলাম এবং সারিতে প্যাডিং এবং মার্জিন থাকে। আপনি ".row" সহ একটি অতিরিক্ত ".noglutter" ক্লাস যোগ করে মার্জিন এবং প্যাডিং অপসারণ করতে পারেন।
  • বুটস্ট্র্যাপ 5 ছয়টি ব্রেকপয়েন্ট অফার করে – অতিরিক্ত ছোট (xs), ছোট (sm), মাঝারি (md), বড় (lg), অতিরিক্ত বড় (xl) এবং অতিরিক্ত অতিরিক্ত বড় (xxl)।
  • ডিফল্টরূপে ব্রেকপয়েন্টের সমস্ত স্তর .col ক্লাস ব্যবহার করে। অন্য যে কোন ক্লাস ব্যবহার করা হবে সমস্ত উচ্চ স্তরের ডিভাইসে। উদাহরণস্বরূপ, .col-sm-4 (ছোট) ছোট, মাঝারি, বড় এবং অতিরিক্ত বড় ডিভাইসে প্রয়োগ করা হবে।

2 টিয়ার 6 গ্রিড সিস্টেম

নীচের টেবিলে বুটস্ট্র্যাপ 5 এ দেওয়া ছয়টি স্তরের ব্রেকপয়েন্ট দেখানো হয়েছে:

গ্রিড অতিরিক্ত ছোট ছোট মধ্যম বড় অতিরিক্ত বড় অতিরিক্ত অতিরিক্ত বড়
ব্রেকপয়েন্ট <576px ≥576px ≥768px ≥992px ≥1200px ≥1400px
CSS ক্লাস সঙ্গে- .col-sm- .col-md- .col-lg- .col-xl- .col-xxl-
ধারক সর্বোচ্চ প্রস্থ কোনটি (স্বয়ংক্রিয়) 540px 720px 960px 1140px 1320px
  • কলাম – প্রতিটি সারি 12 সমান প্রস্থ কলামে বিভক্ত।
  • গটার প্রস্থ – কলামের প্রতিটি পাশে 15 পিক্সেল মোট 30px।
  • নেস্টিং – হ্যাঁ, কলাম অন্যান্য কলামের মধ্যে বাসা বাঁধতে পারে।
  • কলাম অর্ডারিং – হ্যাঁ, কলামের যে কোনো সারির মধ্যে থাকা সামগ্রী পুনর্বিন্যাস করা যেতে পারে।

গ্রিডগুলি আরও ভালভাবে বোঝার জন্য আসুন আমরা বিভিন্ন উদাহরণ দেখাই:

3 সমান প্রস্থ সরল গ্রিড

শুধু ".col" ক্লাস ব্যবহার করে সমান কলাম সহ সাধারণ গ্রিড তৈরি করুন। ".Col" ক্লাস ব্যবহার করার সময় সারিটি স্বয়ংক্রিয়ভাবে সমান প্রস্থের কলামে বিভক্ত হয়ে যাবে। উদাহরণস্বরূপ যখন দুটি ".col" ক্লাস ব্যবহার করা হয় তখন সারি দুটি 1/2 1/2+1/2 কলামে বিভক্ত হবে। নীচে সাধারণ ".col" ক্লাস ব্যবহার করে 1/2+1/2 এবং 1/3+1/3+1/3 কলাম তৈরির উদাহরণ কোড দেওয়া হল।

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

নীচের মত ব্রাউজারে সমান কলামগুলি দেখানো হবে:

কিভাবে বুটস্ট্র্যাপ 5 গ্রিড লেআউট ব্যবহার করবেন?

4 একটি কলাম প্রস্থ এবং অন্যান্য কলামের আকার পরিবর্তন করুন

বুটস্ট্র্যাপ গ্রিড সিস্টেম আপনাকে একটি কলামের প্রস্থ নির্ধারণ করতে দেয় এবং একই সারির মধ্যে অবশিষ্ট কলামগুলি স্বয়ংক্রিয়ভাবে সমন্বয় করা হবে। উদাহরণস্বরূপ, যখন আপনি পরপর "col + col-6 + col" সংজ্ঞায়িত করেন তখন এটি স্বয়ংক্রিয়ভাবে "1/3 + 1/6 + 1/3" কলামের মত বিভক্ত হয়ে যাবে। একটি কলাম সংজ্ঞায়িত করার জন্য নীচে দুটি উদাহরণ দেওয়া হল এবং তারপর বাকি দুটি অন্যান্য কলাম সেই অনুযায়ী সমন্বয় করা হবে।

কিভাবে বুটস্ট্র্যাপ 5 গ্রিড লেআউট ব্যবহার করবেন?

সংজ্ঞায়িত প্রস্থ সহ কলামের চারপাশে কলাম সামঞ্জস্য করার কোড নিচে দেওয়া হল:

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

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

".Col- {breakpoint} -auto" ক্লাস ব্যবহার করে কলামগুলির প্রস্থ প্রকৃত সামগ্রীতে সীমাবদ্ধ করা যেতে পারে, উদাহরণস্বরূপ, ".col-md-auto"।

কিভাবে বুটস্ট্র্যাপ 5 গ্রিড লেআউট ব্যবহার করবেন?

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

<div class="container"> <div class="row justify-content-md-center"> <div class="col col-lg-2"> .col .col-lg-2 </div> <div class="col-md-auto"> .col-md-auto (variable width) </div> <div class="col col-lg-2"> .col .col-lg-2 </div> </div> <div class="row"> <div class="col"> .col </div> <div class="col-md-auto"> .col-md-auto (variable width) </div> <div class="col col-lg-2"> .col .col-lg-2 </div> </div> </div>

6 সমান প্রস্থ একাধিক সারি গ্রিড

একটানা ".col" ক্লাস ব্যবহার করে সারির মধ্যে একাধিক কলাম লেআউট তৈরি করুন। আপনাকে শুধু ".w-100" ক্লাস সন্নিবেশ করতে হবে যেখানে একটি ব্রেকপয়েন্ট প্রয়োজন।

কিভাবে বুটস্ট্র্যাপ 5 গ্রিড লেআউট ব্যবহার করবেন?

একক "সারি" শ্রেণী ব্যবহার করে সমান প্রস্থের একাধিক সারি তৈরি করার কোড নিচে দেওয়া হল।

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

7 স্তূপিত অনুভূমিক গ্রিড

আপনি ".col-sm-" ক্লাস ব্যবহার করে স্ট্যাক করা গ্রিড লেআউট তৈরি করতে পারেন যা ডেস্কটপে অনুভূমিক গ্রিডে প্রসারিত হবে ।

কিভাবে বুটস্ট্র্যাপ 5 গ্রিড লেআউট ব্যবহার করবেন?

উপরে দেখানো হিসাবে স্ট্যাক করা অনুভূমিক গ্রিড লেআউট তৈরির কোড নিচে দেওয়া হল।

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

8 উল্লম্ব সারিবদ্ধকরণ

একটি কলামের ভিতরের বিষয়বস্তুর উল্লম্ব সারিবদ্ধতা নীচের মত ".row" শ্রেণীর সাথে নিম্নলিখিত তিনটি শ্রেণীর একটি যোগ করে সামঞ্জস্য করা যেতে পারে:

<div class="row align-items-start"> - Align content vertical top <div class="row align-items-center"> - Align content vertical middle <div class="row align-items-end"> - Align content vertical bottom

9 অনুভূমিক সারিবদ্ধকরণ

উল্লম্ব সারিবদ্ধতার অনুরূপ, আপনি নীচের মত কলামগুলির অনুভূমিক সারিবদ্ধতাও সামঞ্জস্য করতে পারেন:

<div class="container"> <div class="row justify-content-start"> <div class="col-4"> .col-4 </div> <div class="col-4"> .col-4 </div> </div> <div class="row justify-content-center"> <div class="col-4"> .col-4 </div> <div class="col-4"> .col-4 </div> </div> <div class="row justify-content-end"> <div class="col-4"> .col-4 </div> <div class="col-4"> .col-4 </div> </div> <div class="row justify-content-around"> <div class="col-4"> .col-4 </div> <div class="col-4"> .col-4 </div> </div> <div class="row justify-content-between"> <div class="col-4"> .col-4 </div> <div class="col-4"> .col-4 </div> </div> </div>

এটি ব্রাউজারে নিম্নলিখিত ফলাফল তৈরি করবে:

কিভাবে বুটস্ট্র্যাপ 5 গ্রিড লেআউট ব্যবহার করবেন?

10 গিটার কোন গটার সঙ্গে

ডিফল্টরূপে কলামগুলির অনুভূমিক প্যাডিং থাকবে এবং সারিগুলির আরও ভাল সারিবদ্ধতার জন্য নেতিবাচক অনুভূমিক মার্জিন থাকবে। আপনি নীচে দেখানো হিসাবে "সারি" সহ "নো-গটার" ক্লাস ব্যবহার করে সেই মার্জিন এবং প্যাডিংগুলি সরাতে পারেন।

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

এটি নিম্নলিখিত ফলাফল উত্পাদন করবে:

কিভাবে বুটস্ট্র্যাপ 5 গ্রিড লেআউট ব্যবহার করবেন?

11 মোড়ানো কলাম গ্রিড

যখন আপনার সারিতে 12 টিরও বেশি কলাম থাকবে তখন কলামগুলি স্বয়ংক্রিয়ভাবে পরবর্তী সারিতে মোড়ানো হবে। উদাহরণস্বরূপ, নীচের প্রথম দুটি কলামের সাথে প্রথম সারিতে (9+2 = 11) ফিট হবে এবং তৃতীয় এবং চতুর্থ কলামগুলি নতুন লাইনে আবৃত হবে।

<div class="row"> <div class="col-9">.col-9 (Row 1)</div> <div class="col-2">.col-2 (Row 1)</div> <div class="col-4">.col-4 (Row 1)</div> <div class="col-5">.col-5 (Row 1)</div> </div>

মোড়ানো কলামগুলি নীচের মত দেখাবে:

কিভাবে বুটস্ট্র্যাপ 5 গ্রিড লেআউট ব্যবহার করবেন?

12 কলাম বিষয়বস্তু গ্রিডের মধ্যে পুনর্বিন্যাস

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

<div class="container"> <div class="row"> <div class="col"> First .col No order </div> <div class="col order-12"> Second .col .order-12 moved to last </div> <div class="col order-1"> Third .col .order-1 moved to first </div> </div> </div>

ফলাফলটি নীচের মত দেখায় যাতে কোন অর্ডারকৃত কলাম অন্য সমস্ত অর্ডারকৃত কলামের অগ্রাধিকার পাবে এবং প্রথম কলামে দেখানো হবে। "অর্ডার -12" ক্লাস ব্যবহার করে কলামের সামগ্রী শেষ অবস্থানে সরানো হবে। এবং "অর্ডার -1" ব্যবহার করে কলামের মধ্যে থাকা বিষয়বস্তু কেন্দ্র (প্রথম) অবস্থানে সরানো হবে।

কিভাবে বুটস্ট্র্যাপ 5 গ্রিড লেআউট ব্যবহার করবেন?

13 কলাম অফসেটিং

বুটস্ট্র্যাপ 4 থেকে, তারা ফ্লেক্সবক্স গ্রিড লেআউট ব্যবহারের কারণে কলাম অফসটিং বৈশিষ্ট্যটি বাদ দিয়েছে। কিন্তু আপনি "ml-auto", "mr-auto", ইত্যাদি মার্জিন ইউটিলিটি ক্লাস ব্যবহার করে কলামগুলি সরাতে পারেন।

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

মার্জিন ক্লাস ব্যবহার করে কলাম অফসেট করার ফলাফল নিচে দেওয়া হল:

কিভাবে বুটস্ট্র্যাপ 5 গ্রিড লেআউট ব্যবহার করবেন?

14 গ্রিডের মধ্যে বাসা বাঁধা

নীচে দেখানো হিসাবে আপনি অন্যান্য কলামের মধ্যেও কলামগুলি বাসা বাঁধতে পারেন:

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

এটি নিম্নলিখিত ফলাফল উত্পাদন করবে:

কিভাবে বুটস্ট্র্যাপ 5 গ্রিড লেআউট ব্যবহার করবেন?

উপসংহার

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


বুটস্ট্র্যাপ 5 শিখুন (সূচক )


রেকর্ডিং উত্স: webnots.com
Leave A Reply

এই ওয়েবসাইট আপনার অভিজ্ঞতা উন্নত করতে কুকি ব্যবহার করে। আমরা ধরে নেব যে আপনি এটির সাথে ঠিক আছেন, তবে আপনি ইচ্ছা করলে অপ্ট-আউট করতে পারেন। আমি স্বীকার করছি আরো বিস্তারিত