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