বুটস্ট্রাপ গ্রীড সিস্টেম
বুটস্ট্রাপ গ্রীড সিস্টেমের মাধ্যমে ওয়েবপেজকে ১২ কলামে ভাগ করা যায়।
আপনি যদি ১২ কলামের মধ্যে সবগুলো কলাম একত্রে ব্যবহার করতে না চান, তাহলে আপনি কলামগুলোর বিভিন্ন গ্রুপ তৈরি করে অধিক প্রস্থের কলাম তৈরি করতে পারবেনঃ
| 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 (বড় ডেস্কটপের জন্য)
অধিক ডায়নামিক এবং ফ্লেক্সিবল লে-আউট তৈরি করার জন্য উপরের ক্লাস গুলো একত্রে বিভিন্ন কম্বিনেশনে ব্যবহার করা যায়।
বুটস্ট্রাপ গ্রীডের সিস্টেমের বেসিক গঠন
নিচে বুটস্ট্রাপ গ্রীডের বেসিক গঠন দেখানো হলোঃ
kt_satt_skill_example_id=767
প্রথমত; আপনি যে লে-আউট অর্জন করতে চান সেটি তৈরি পাওয়ার জন্য একটি কন্টেইনার তৈরি করুন ( < div class="container">)। তারপর, একটি সারি তৈরি করুন (< div class="row">) এবং প্রয়োজনমতো কলামের সংখ্যা যুক্ত করুন। ( .col-*-* ক্লাসের সাহায্যে)। মনে রাখবেন প্রতি সারিতে সর্বোচ্চ ১২টি কলাম যুক্ত করা যায়।
নিচে বুটস্ট্রাপ বেসিক গ্রীড লে-আউটের কিছু উদাহরণ দেয়া হলো।
সমান প্রস্থ বিশিষ্ট তিনটি কলাম
নিম্নলিখিত উদাহরনে সমান প্রস্থের তিনটি কলাম তৈরি করা হলো যা ট্যাবলেট থেকে শুরু করে বড় ডেস্কটপে সমান তিন ভাগে ভাগ হবে কিন্তু মোবাইল ফোনের ক্ষেত্রে কলামগুলো স্বয়ংক্রিয়ভাবে একটির পর একটি নিচে নিচে অবস্থান করবেঃ
kt_satt_skill_example_id=769
দুইটি অসমান কলাম
নিম্নলিখিত উদাহরনে কিভাবে ভিন্ন প্রস্থ বিশিষ্ট দুইটি কলাম ট্যাবলেট থেকে শুরু করে বড় ডেস্কটপের জন্য তৈরি করা যায় তা দেখানো হলোঃ
kt_satt_skill_example_id=770
