বুটস্ট্রাপ গ্রীড সিস্টেম

বুটস্ট্রাপ গ্রীড সিস্টেমের মাধ্যমে একটি পেজকে ১২টি কলাম পর্যন্ত ভাগ করা যায়।

আপনার যদি ১২ কলাম একসাথে প্রয়োজন না হয়, তাহলে আপনি চাইলে বেশি প্রশস্থের বিভিন্ন কম্বিনেশনে কলাম গ্রুপ তৈরি করে নিতে পারেনঃ

বুটস্ট্রাপের গ্রীড সিস্টেম রেসপন্সিভ এবং স্ক্রিনের আকারের উপর নির্ভর করে কলামগুলো বিন্যাসিত হয়: বড় স্ক্রিনে হয়তো একটি কন্টেন্ট ৩ কলামে পাশাপাশি দেখতে ভাল লাগে, কিন্তু ঐ কন্টেন্টই ছোট স্ক্রিনে নিচে নিচে দেখালে দেখতে ভাল লাগবে।

গ্রীড ক্লাসসমূহ

বুটস্ট্রাপ গ্রীড সংক্রান্ত চারটি ক্লাস রয়েছেঃ

1. xs (ফোনের জন্য)
2. sm (ট্যাবলেটের জন্য)
3. md (ডেস্কটপের জন্য)
4. lg (বড় আকারের ডেস্কটপের জন্য)

অধিক ডায়নামিক এবং ফ্লেক্সিবল লে-আউট তৈরি করার জন্য উপরের ক্লাস গুলো একত্রে বিভিন্ন কম্বিনেশনে ব্যবহার করা যায়।

টিপসঃ আপনি যদি xs, sm এবং md আকারের ডিভাইসের জন্য একই লে-আউট নির্ধারন করতে চান, তাহলে শুধুমাত্র xs এর জন্য লে-আউট নির্ধারণ করলেই সকল স্ক্রিনে একই রকম দেখাবে।

গ্রীড সিস্টেম রুলস

বুটস্ট্রাপ গ্রীড সিস্টেমের কিছু রুলসঃ

1. যথাযথ এ্যালাইনমেন্ট এবং প্যাডিংয়ের জন্য .row কে অবশ্যই .container (fixed-width) অথবা .container-fluid (full-width) এর মধ্যে রাখতে হবে।
2. আনুভূমিক গ্রুপ কলাম তৈরি করার জন্য সারি ব্যবহার করুন।
3. কন্টেন্টগুলো কলামের মধ্যে এবং কলামগুলো সারির পরপরই রাখতে হবে।
4. পূর্ব-নির্ধারিত ক্লাস যেমন; .row এবং .col-sm-4 মাধ্যমে সহজে এবং দ্রুততার সহিত গ্রীড লে-আউট তৈরি করা যায়।
5. কলামগুলো প্যাডিংয়ের মাধ্যমে গাটার (কলাম কন্টেন্টের মধ্যে ফাকাস্থান) তৈরি করে। একটি .rows এর প্রথম এবং শেষ কলামে নেগেটিভ মার্জিন ব্যবহৃত হয়।
6. গ্রীড কলাম ১২ টি কলামের মাধ্যমে তৈরি করা হয়েছে। উদাহরণস্বরুপ, যদি সমান তিনটি কলাম চান তাহলে .col-sm-4 ক্লাস ব্যবহার করতে হবে।

একটি বুটস্ট্রাপ গ্রীডের বেসিক গঠন

নিচে বুটস্ট্রাপ গ্রীডের একটি বেসিক গঠন দেখানো হলোঃ

kt_satt_skill_example_id=1210

তাহলে, আপনি যে লে-আউট চান সেটি তৈরি করার জন্য প্রথমে একটি কন্টেইনার তৈরি করুন (< div class="container" >)। তারপর, একটি সারি(row) তৈরি করুন (< div class="row" >)। তারপর প্রয়োজন অনুযায়ী কলামের সংখ্যা যুক্ত করুন। ( .col-*-* ক্লাসের সাহায্য)। মনে রাখবেন প্রতি সারিতে সর্বোচ্চ ১২টি কলাম যুক্ত করতে পারবেন।

গ্রীড অপশন

নিম্নলিখিত টেবিলে দেখানো হলো কিভাবে বিভিন্ন ডিভাইসে বুটস্ট্রাপ গ্রীড সিস্টেম কাজ করেঃ

উদাহরণ

পরবর্তী অধ্যায়গুলোতে বিভিন্ন ডিভাইসের জন্য গ্রীড সিস্টেমের উদাহরণ দেয়া হয়েছে:

1. Stacked-to-Horizontal
2. ছোট ডিভাইস
3. মিডিয়াম ডিভাইস
4. বড় ডিভাইস

বুটস্ট্রাপ গ্রীড উদাহরণ: Stacked-to-horizontal

বুটস্ট্রাপ গ্রীডঃ এখানে আমরা একটি বেসিক গ্রীড লে-আউট তৈরি করবো যেটি মোবাইল এবং ট্যাবলেটের ক্ষেত্রে কলামগুলো নিচে নিচে দেখাবে এবং ডেস্কটপের ক্ষেত্রে (মিডিয়াম/বড় ডিভাইস) এটি আনুভূমিক(horizontal) বা পাশাপাশি দেখাবে ভাবে দেখাবে।

নিচের উদাহরণে একটি সরল "stacked-to-horizontal" উদাহরণ দেখানো হলো। যেটি দুই কলাম বিশিষ্ট একটি সাধারণ লে-আউট। এই উদাহরণের দুটি কলাম একদম ছোট স্ক্রিন ব্যতিত অন্য সকল স্ক্রিনেই ৩৩.৩%/৬৬.৬% আনুভূমিক লে-আউটে প্রদর্শিত হবে। অর্থাৎ একদম ছোট স্ক্রিনে প্রত্যেকটি কলাম ১০০% জায়গা নিয়েই প্রদর্শিত হবেঃ

kt_satt_skill_example_id=1213

টিপসঃ এছাড়াও আপনার প্রয়োজন মতো .container এর পরিবর্তে .container-fluid ক্লাসও ব্যবহার করতে পারেনঃ

kt_satt_skill_example_id=1215

বুটস্ট্রাপ গ্রীড উদাহরণ: ছোট ডিভাইস

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

টিপসঃ ছোট ডিভাইস বলতে ৭৬৮ পিক্সেল থেকে ৯৯২ পিক্সেল রেজুলেশনের স্ক্রিনযুক্ত ডিভাইসকে(মূলত ট্যাবলেট) বুঝায়।

ছোট ডিভাইসের জন্য আমরা .col-sm-* ক্লাস ব্যবহার করবো।

উপরে যে দুটি কলামের কথা বলা হয়েছে তার জন্য আমরা নিম্নলিখিত ক্লাসগুলো ব্যবহার করিঃ

kt_satt_skill_example_id=1219

এই উদাহরণটি ছোট (এবং মিডিয়াম এবং বড়) স্ক্রিনের জন্য ৫০% এবং ৫০% অনুপাতে দুটি কলাম তৈরি করবে। অতিরিক্ত ছোট ডিভাইসে(মোবাইল) কলামগুলো নিচে নিচে অবস্থান করবে। অর্থাৎ মোবাইল স্ক্রিনের ক্ষেত্রে প্রত্যেকটি কলাম স্বয়ংক্রিয়ভাবে ১০০% প্রস্থ নিয়ে নেবেঃ

kt_satt_skill_example_id=1221

নোটঃ এটা নিশ্চিত করুন যে কলামের যোগফল ১২টি যৌক্তিক কলামের বেশি নয়।
২৫%/৭৫% অনুপাতে কলামের জন্য .col-sm-3 এবং .col-sm-9 ক্লাস ব্যবহার করুনঃ

kt_satt_skill_example_id=1223

মিডিয়াম ডিভাইসের জন্য কিভাবে ভিন্ন অনুপাতের কলাম তৈরি করা যায় তা পরবর্তী অধ্যায়ে দেখানো হয়েছে।

বুটস্ট্রাপ গ্রীড উদাহরণ: মিডিয়াম ডিভাইস(সাধারণ ডেক্সটপ/ল্যাপটপ)

বুটস্ট্রাপ গ্রীড: পূর্ববর্তী অধ্যায়ে আমরা ছোট ডিভাইসের জন্য গ্রীড উদাহরণ দেখিয়েছি। 50%/50 অনুপাতে ভাগ করার জন্য আমরা দুটি div ব্যবহার করেছি:

kt_satt_skill_example_id=1254

মিডিয়াম ডিভাইসে হয়তো ডিজাইনটি 33.3%/66.6% অনুপাতে ভাল হবে।

টিপস: ছোট ডিভাইস বলতে ৯৯২ পিক্সেল থেকে ১১৯৯ পিক্সেল রেজুলেশনের স্ক্রিনযুক্ত ডিভাইসকে বুঝায়।

মিডিয়াম ডিভাইসের জন্য আমরা .col-md-* ক্লাস ব্যবহার করবো।

এখন আমরা মিডিয়াম ডিভাইসের জন্য কলাম প্রস্থ যুক্ত করবো:

kt_satt_skill_example_id=1255

এক্ষেত্রে ছোট ডিভাইসের জন্য col-sm-* ক্লাস গুলো কাজ করবে এবং মিডিয়াম ডিভাইসের জন্য col-md-* ক্লাস কাজ করবে।

এই উদাহরণে আমরা ছোট ডিভাইসের জন্য 50%/50% এবং মিডিয়াম ডিভাইসের জন্য 33.3%/66.6% অনুপাতে কলাম তৈরি করবো। কিন্তু অতিরিক্ত ছোট (মোবাইল) ডিভাইসের ক্ষেত্রে কলামগুলো নিচে নিচে দেখাবে। কারন মোবাইল ডিভাইসের জন্য আমরা কলাম লে-আউট নির্দিষ্ট করে দেইনি:

kt_satt_skill_example_id=1256

নোটঃ এটা নিশ্চিত করুন যে কলামগুলোর যোগফল ১২ এর বেশি নয়!

শুধুমাত্র মিডিয়াম ডিভাইসের জন্য

এই উদাহরণে শুধুমাত্র .col-md-4 এবং .col-md-8 ক্লাস নির্দিষ্ট করে দিয়েছি (.col-sm-* ব্যাতীত)। এর মানে মিডিয়াম এবং বড় ডিভাইসে 50%/50% অনুপাতে কলাম তৈরি হবে কারন কলাম ক্লাসগুলো ছোট ডিভাইসের ক্লাসগুলোকে বেশি প্রাধান্য দেয়। এক্ষেত্রে ছোট দুটি ডিভাইসে কলামগুলো ভার্টিক্যাল আকারে দেখাবেঃ

kt_satt_skill_example_id=1257

বড় ডিভাইসের জন্য কিভাবে ভিন্ন অনুপাতের কলাম তৈরি করা যায় তা পরবর্তী অধ্যায়ে দেখানো হয়েছে।

বুটস্ট্রাপ গ্রীড উদাহরণঃ বড় ডিভাইস

বুটস্ট্রাপ গ্রীড: পূর্ববর্তী অধ্যায়ে আমরা ছোট ও মাঝারি ডিভাইসের জন্য ক্লাস দ্বারা একটি গ্রীড উদাহরণ তৈরি করেছিলাম। আমরা সেখানে দুইটি div (কলাম) ব্যবহার করেছি এবং তাদের ছোট ডিভাইসে 50%/50% কলামে এবং মাঝারি ডিভাইসে 33.3%/66.6% কলামে বিভক্ত করেছিঃ

kt_satt_skill_example_id=1259

কিন্তু বড় ডিভাইসের ডিজাইনের ক্ষেত্রে লে-আউটটি 25%/75% লে-আউটে বিভক্ত হলে ভাল দেখাবে।

টিপসঃ বড় ডিভাইস বলতে ১২০০ পিক্সেল বা তার বেশি রেজুলেশনের স্ক্রিন যুক্ত ডিভাইসকে বুঝায়।

বড় ডিভাইসের জন্য আমরা .col-lg-* ক্লাস ব্যবহার করবো।

সুতরাং এখন আমরা বড় ডিভাইসের জন্য কলাম প্রস্থ নির্ধারন করবোঃ

kt_satt_skill_example_id=1260

এক্ষেত্রে ছোট ডিভাইসের জন্য col-sm-* ক্লাস, মিডিয়াম ডিভাইসের জন্য col-md-* ক্লাস এবং বড় ডিভাইসের জন্য col-lg-* ক্লাস কাজ করবে।

নিম্নলিখিত উদাহরণে ছোট ডিভাইসের জন্য 50%/50% কলাম, মাঝারি ডিভাইসের জন্য 33.%/66.6% কলাম, এবং বড় ডিভাইসের 25%/75% কলাম তৈরি করা হয়েছেঃ

kt_satt_skill_example_id=1262

শুধুমাত্র বড় ডিভাইসের জন্য ব্যবহার

নিচের উদাহরণে, আমরা শুধুমাত্র .col-lg-6 ক্লাস উল্লেখ করেছি (.col-md-* এবং/অথবা .col-sm-* ছাড়া)। এর মানে হল যে বড় ডিভাইসে কলামগুলো ৫০%/৫০% অনুপাতে বিভক্ত হবে। কিন্তু, মিডিয়াম ও ছোট ডিভাইসের ক্ষেত্রে কলামগুলো নিচে নিচে অবস্থান করবে। কারন আমরা মিডিয়াম এবং ছোট ডিভাইসের জন্য কলাম লে-আউট উল্লেখ করিনিঃ

kt_satt_skill_example_id=1263

এই পেজের মধ্যে আমরা বুটস্ট্রাপ গ্রীড লে-আউটের কিছু বেসিকে উদাহরণ দেয়ার চেষ্টা করেছি।

তিনটি সমান কলামের জন্য

নিম্নলিখিত উদাহরণে দেখানো হয়েছে যে ছোট স্ক্রিনের জন্য কিভাবে সমান প্রস্থ বিশিষ্ট তিনটি কলাম তৈরি করা যায়, যা মিডিয়াম এবং বড় স্ক্রিনের জন্য একই ভাবে কাজ করবে। কিন্তু মোবাইল ফোনের ক্ষেত্রে কলামগুলো নিচে নিচে অবস্থান করবেঃ

kt_satt_skill_example_id=1268

তিনটি অসমান কলামের জন্য

নিম্নলিখিত উদাহরণে দেখানো হয়েছে যে ছোট স্ক্রিনের জন্য কিভাবে ভিন্ন প্রস্থ বিশিষ্ট তিনটি কলাম তৈরি করা যায়, যা মিডিয়াম এবং বড় স্ক্রিনের জন্য একই ভাবে কাজ করবেঃ

kt_satt_skill_example_id=1270

দুটি অসমান কলামের জন্য

নিম্নলিখিত উদাহরণে দেখানো হয়েছে যে ছোট স্ক্রিনের জন্য কিভাবে ভিন্ন প্রস্থ বিশিষ্ট দুইটি কলাম তৈরি করা যায়, যা মিডিয়াম এবং বড় স্ক্রিনের জন্য একই ভাবে কাজ করবেঃ

kt_satt_skill_example_id=1272

দুটি কলামের মধ্যে আরো দুটি নেস্টেড কলাম

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

kt_satt_skill_example_id=1274

মিক্সডঃ মোবাইল এবং ডেস্কটপ

বুটস্ট্রাপ গ্রীড সিস্টেমে চারটি ক্লাস রয়েছে: xs(মোবাইল), sm(ট্যাবলেট), md(ডেস্কটপ) and lg(বড় ডেস্কটপ)। ডাইনামিক ও ফ্লেক্সিবল লে-আউট তৈরি করার ক্ষেত্রে ক্লাসগুলো একত্রে ব্যবহার করা যায়।

টিপস: বুটস্ট্রাপ গ্রীড সিস্টেমে ছোট ক্লাসগুলোকে বেশি প্রাধান্য দেয়া হয়েছে। আপনি যদি xs এবং sm ক্লাসে একই লে-আউট পেতে চান তাহলে শুধুমাত্র xs ক্লাস উল্লেখ করলেই হবে।

kt_satt_skill_example_id=1276

মিশ্রঃ মোবাইল, ট্যাবলেট এবং ডেস্কটপ

kt_satt_skill_example_id=1278

ফ্লোট ক্লিয়ার

নির্দিষ্ট ব্রেকপয়েন্টে অদ্ভুত wrapping প্রতিরোধ করতে ফ্লোট ক্লিয়ার করুন(.clearfix ক্লাসের মাধ্যমে):

kt_satt_skill_example_id=1279

কলাম অফসেট

কলামকে ডানদিকে সরিয়ে নেয়ার জন্য .col-*-offset-* ক্লাস ব্যবহার করুন। এটি কলামের বাম দিকের মার্জিন বৃদ্ধি(কলামের প্রস্থের সমান) করেঃ

kt_satt_skill_example_id=1280

Push এবং Pull - কলাম ক্রম পরিবর্তন

গ্রীড কলামের ক্রম পরিবর্তন করার জন্য .col-*-push-* ক্লাস ব্যবহার করুনঃ

kt_satt_skill_example_id=1282