শেখ মাহফুজুর রহমান
বুটস্ট্র্যাপের গ্রিড সিস্টেম একটি পেজে ১২টি পর্যন্ত কলাম যোগ করতে দেয়। আপনি যদি আলাদাভাবে সবগুলো (১২টি) কলাম ব্যবহার করতে না চান তাহলে কিছু কলামকে গ্রুপ বা গুচ্ছাকৃত করে প্রশস্তততর কলাম তৈরি করতে পারবেনঃ
|
span 1 |
span 1 |
span 1 |
span 1 |
span 1 |
span 1 |
span 1 |
span 1 |
span 1 |
span 1 |
span 1 |
span 1 |
|
span 4 |
span 4 |
span 4 |
|||||||||
|
span 4 |
span 8 |
||||||||||
|
span 6 |
span 6 |
||||||||||
|
span 12 |
|||||||||||
বুটস্ট্র্যাপ গ্রিড সিস্টেম রেস্পন্সিভ হয়ে থাকে এবং স্ক্রিনের আকার অনুযায়ী কলামগুলো পুনরায় সজ্জিত হয়ঃ বড় স্ক্রিনে তিনটি কলামের মধ্যে কন্টেন্টগুলো সাজালে দেখতে ভালো লাগে কিন্তু ছোট স্ক্রিনে কন্টেন্টগুলো একটি আরেকটির উপর স্তুপাকারে সজ্জিত হলে দেখতে ভালো লাগবে।
টিপসঃ মনে রখবেন একটি রো বা সারির জন্য ১২টি পর্যন্ত গ্রিড কলাম যোগ করতে হবে। এর চেয়ে বেশি কলাম যোগ করা হলে, স্ক্রিন যত বড়ই হোক না কেন, সেগুলো স্তুপাকার হয়ে যাবে।
গ্রিড ক্লাস
বুটস্ট্র্যাপ গ্রিড সিস্টেমের চারটি ক্লাস রয়েছেঃ
- xs (ফোনের জন্য)
- sm (টেবলেটের জন্য)
- md (ডেস্কটপের জন্য)
- lg (বড় ডেস্কটপের জন্য)
উপরের ক্লাসগুলো একসাথে করে আরও ডাইনামিক এবং ফ্ল্যাক্সিবল লেআউট তৈরি করা সম্ভব।
টিপসঃ প্রত্যেকটি ক্লাস মাপ অনুযায়ী হয়ে থাকে, তাই আপনি যদি xs এবং sm এর জন্য একই উইডথ (প্রস্থ্য) ঠিক করতে চান তাহলে আপনাকে শুধু xs কে নির্দিষ্ট করে দিলেই হবে।
গ্রিড সিস্টেমের নিয়ম
কিছু বুটস্ট্র্যাপ গ্রিড সিস্টেমের নিয়ম:
সঠিক অ্যালাইনম্যান্ট ও প্যাডিং এর জন্য রো'গুলোকে অবশ্যই .container (এর প্রস্থ্য পরিবর্তিত হয়না) অথবা .container-fluid (প্রস্থ্য পুরো স্ক্রিনে প্রসারিত হতে পারে) এর ভিতরে রাখতে হবে।
- কতগুলো কলাম নিয়ে একটি হরাইজন্টাল গ্রুপ তৈরি করতে রো ব্যবহার করুন।
- কন্টেন্টকে অবশ্যই কলামের ভিতরে রাখতে হবে এবং কলামগুলোই শুধুমাত্র রো এর ইমিডিয়েট চাইল্ড হতে পারে।
.rowএবং.col-sm-4এর মতো পুর্ব-সংজ্ঞায়িত ক্লাসগুলো তাৎক্ষণিকভাবে তৈরি গ্রিড লেআউটের জন্য ব্যবহার করা যায়।- কলাম এর কন্টেন্টগুলোর মধ্যে প্যাডিং এর মাধ্যমে ফাঁক তৈরি করে। এই প্যাডিং
.rowsএর উপর নেগেটিভ মার্জিনের মাধ্যমে প্রথম ও শেষ কলামের এর জন্য রো'তে অফসেট থাকে। - আপনি কতটি কলামে প্রসারিত করবেন তা ১২টি কলামের নাম্বার নির্দিষ্ট করে দেয়ার মাধ্যমে গ্রিড কলাম তৈরি করতে পারবেন। উদাহরণস্বরূপ, তিনটি সমান কলাম তিনটি
.col-sm-4ব্যবহার করবেন।
একটি বুটস্ট্র্যাপ গ্রিডের বেসিক স্ট্রাকচার
নিচে একটি বুটস্ট্যাপ গ্রিডের বেসিক স্ট্রাকচার দেয়া হলোঃ
<div class="container"> <div class="row"> <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">)। তারপর একটি রো তৈরি করুন (<div class="row">)। এরপরে, ইচ্ছেমতো কলাম সংখ্যা যোগ করুন ( সঠিক .col-*-* ক্লাসসহ ট্যাগ)। খেয়াল রাখবেন, .col-*-* এর নাম্বারগুলো প্রত্যেক রো এর জন্য ১২ পর্যন্ত হতে হবে।
গ্রিড অপশান
বিভিন্ন ডিভাইসে বুটস্ট্র্যাপ গ্রিড সিস্টেম কিভাবে কাজ করে তা নিচের ছকে ব্যাখ্যা করা হলোঃ
|
অতি ছোট ডিভাইস ফোন (<768px) |
ছোট ডিভাইস ট্যাবলেট (>=768px) |
মাঝারি ডিভাইস ডেস্কটপ (>=992px) |
বড় ডিভাইস ডেস্কটপ (>=1200px) |
|
| গ্রিড এর আচরন |
সব সময়ে অনুভূমিক |
শুরুতে ধসে যায়, ব্রেকপয়েন্ট এর উপরে অনুভূমিক |
শুরুতে ধসে যায়, ব্রেকপয়েন্ট এর উপরে অনুভূমিক |
শুরুতে ধসে যায়, ব্রেকপয়েন্ট এর উপরে অনুভূমিক |
| ধারক এর প্রস্থ |
নাই (স্বয়ংক্রিয়) |
750px |
970px |
1170px |
| ক্লাস প্রিফিক্স |
.col-xs- |
.col-sm- |
.col-md- |
.col-lg- |
| কলাম সংখ্যা |
12 |
12 |
12 |
12 |
| কলামের প্রসস্থতা |
স্বয়ংক্রিয় |
~62px |
~81px |
~97px |
| গুটার প্রস্থ |
30px (কলামের প্রতিটি পার্শ্বে 15px) |
30px (কলামের প্রতিটি পার্শ্বে 15px) |
30px (কলামের প্রতিটি পার্শ্বে 15px) |
30px (কলামের প্রতিটি পার্শ্বে 15px) |
| Nestable |
হ্যাঁ |
হ্যাঁ |
হ্যাঁ |
হ্যাঁ |
| অফসেটস |
হ্যাঁ |
হ্যাঁ |
হ্যাঁ |
হ্যাঁ |
| কলাম ক্রম |
হ্যাঁ |
হ্যাঁ |
হ্যাঁ |
হ্যাঁ |
