SATT ACADEMY

New to Satt Academy? Create an account


or
Log in with Google Account

Web Development - Bootstrap3 - বুটস্ট্রাপ৩ গ্রিড সিস্টেম (Bootstrap3 Grid System) | NCTB BOOK

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

বুটস্ট্রাপ গ্রীড: পূর্ববর্তী অধ্যায়ে আমরা ছোট ও মাঝারি ডিভাইসের জন্য ক্লাস দ্বারা একটি গ্রীড উদাহরণ তৈরি করেছিলাম। আমরা সেখানে দুইটি 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

 

Content added || updated By
Promotion