বুটস্ট্রাপ গ্রীড সিস্টেম
বুটস্ট্রাপ গ্রীড সিস্টেম
বুটস্ট্রাপ গ্রীড সিস্টেমের মাধ্যমে একটি পেজকে ১২টি কলাম পর্যন্ত ভাগ করা যায়।
আপনার যদি ১২ কলাম একসাথে প্রয়োজন না হয়, তাহলে আপনি চাইলে বেশি প্রশস্থের বিভিন্ন কম্বিনেশনে কলাম গ্রুপ তৈরি করে নিতে পারেনঃ
span 12 span 6 span 6 span 4 span 8 span 4 span 4 span 4 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1
বুটস্ট্রাপের গ্রীড সিস্টেম রেসপন্সিভ এবং স্ক্রিনের আকারের উপর নির্ভর করে কলামগুলো বিন্যাসিত হয়: বড় স্ক্রিনে হয়তো একটি কন্টেন্ট ৩ কলামে পাশাপাশি দেখতে ভাল লাগে, কিন্তু ঐ কন্টেন্টই ছোট স্ক্রিনে নিচে নিচে দেখালে দেখতে ভাল লাগবে।
টিপসঃ মনে রাখবেন, একটি সারির জন্য সর্বোচ্চ ১২ টি কলাম সেট করবেন। ভিউপোর্টের আকার যাই হোক, তারবেশি হলে কলামগুলো গাদাগাদি হয়ে যাবে।
গ্রীড ক্লাসসমূহ
বুটস্ট্রাপ গ্রীড সংক্রান্ত চারটি ক্লাস রয়েছেঃ
- xs (ফোনের জন্য)
- sm (ট্যাবলেটের জন্য)
- md (ডেস্কটপের জন্য)
- lg (বড় আকারের ডেস্কটপের জন্য)
অধিক ডায়নামিক এবং ফ্লেক্সিবল লে-আউট তৈরি করার জন্য উপরের ক্লাস গুলো একত্রে বিভিন্ন কম্বিনেশনে ব্যবহার করা যায়।
টিপসঃ আপনি যদি xs, sm এবং md আকারের ডিভাইসের জন্য একই লে-আউট নির্ধারন করতে চান, তাহলে শুধুমাত্র xs এর জন্য লে-আউট নির্ধারণ করলেই সকল স্ক্রিনে একই রকম দেখাবে।
গ্রীড সিস্টেম রুলস
বুটস্ট্রাপ গ্রীড সিস্টেমের কিছু রুলসঃ
- যথাযথ এ্যালাইনমেন্ট এবং প্যাডিংয়ের জন্য
.rowকে অবশ্যই.container(fixed-width) অথবা.container-fluid(full-width) এর মধ্যে রাখতে হবে। - আনুভূমিক গ্রুপ কলাম তৈরি করার জন্য সারি ব্যবহার করুন।
- কন্টেন্টগুলো কলামের মধ্যে এবং কলামগুলো সারির পরপরই রাখতে হবে।
- পূর্ব-নির্ধারিত ক্লাস যেমন;
.rowএবং.col-sm-4মাধ্যমে সহজে এবং দ্রুততার সহিত গ্রীড লে-আউট তৈরি করা যায়। - কলামগুলো প্যাডিংয়ের মাধ্যমে গাটার (কলাম কন্টেন্টের মধ্যে ফাকাস্থান) তৈরি করে। একটি
.rowsএর প্রথম এবং শেষ কলামে নেগেটিভ মার্জিন ব্যবহৃত হয়। - গ্রীড কলাম ১২ টি কলামের মাধ্যমে তৈরি করা হয়েছে। উদাহরণস্বরুপ, যদি সমান তিনটি কলাম চান তাহলে
.col-sm-4ক্লাস ব্যবহার করতে হবে।
একটি বুটস্ট্রাপ গ্রীডের বেসিক গঠন
নিচে বুটস্ট্রাপ গ্রীডের একটি বেসিক গঠন দেখানো হলোঃ
<div class="container">
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row">
...
</div>
</div>
তাহলে, আপনি যে লে-আউট চান সেটি তৈরি করার জন্য প্রথমে একটি কন্টেইনার তৈরি করুন (<div class="container">)। তারপর, একটি সারি(row) তৈরি করুন (<div
class="row">)। তারপর প্রয়োজন অনুযায়ী কলামের সংখ্যা যুক্ত করুন। ( .col-*-* ক্লাসের সাহায্য)। মনে রাখবেন প্রতি সারিতে সর্বোচ্চ ১২টি কলাম যুক্ত করতে পারবেন।
গ্রীড অপশন
নিম্নলিখিত টেবিলে দেখানো হলো কিভাবে বিভিন্ন ডিভাইসে বুটস্ট্রাপ গ্রীড সিস্টেম কাজ করেঃ
| অতি ছোট ডিভাইস ফোন (<768px) |
ছোট ডিভাইস ট্যাবলেট (>=768px) |
মিডিয়াম ডিভাইস ডেস্কটপ (>=992px) |
বৃহদাকার ডিভাইস বড় ডেস্কটপ (>=1200px) |
|
|---|---|---|---|---|
| গ্রীডের আচরন | সবক্ষেত্রেই আনুভূমিক হয় | Collapsed to start, horizontal above breakpoints | Collapsed to start, horizontal above breakpoints | Collapsed to start, horizontal above breakpoints |
| Container width | নেই (auto) | 750px | 970px | 1170px |
| Class prefix | .col-xs- | .col-sm- | .col-md- | .col-lg- |
| Number of columns | 12 | 12 | 12 | 12 |
| Column width | Auto | ~62px | ~81px | ~97px |
| গাটারের প্রশস্ততা | 30px (প্রতি কলামের উভয়পাশে 15px করে) | 30px (প্রতি কলামের উভয়পাশে 15px করে) | 30px (প্রতি কলামের উভয়পাশে 15px করে) | 30px (প্রতি কলামের উভয়পাশে 15px করে) |
| নেস্টেবল | হ্যাঁ | হ্যাঁ | হ্যাঁ | হ্যাঁ |
| অফসেট | হ্যাঁ | হ্যাঁ | হ্যাঁ | হ্যাঁ |
| কলাম ওর্ডারিং | হ্যাঁ | হ্যাঁ | হ্যাঁ | হ্যাঁ |
উদাহরণ
পরবর্তী অধ্যায়গুলোতে বিভিন্ন ডিভাইসের জন্য গ্রীড সিস্টেমের উদাহরণ দেয়া হয়েছে: