SATT ACADEMY

New to Satt Academy? Create an account


or
Log in with Google Account

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

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

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

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

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

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

kt_satt_skill_example_id=1219

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

kt_satt_skill_example_id=1221

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

kt_satt_skill_example_id=1223

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

Content added || updated By
Promotion