শেখ মাহফুজুর রহমান
বুটস্ট্র্যাপ গ্রিডের উদাহরণঃ স্ট্যাকড থেকে হরাইজন্টাল
আমরা একটি সাধারণ গ্রিড সিস্টেম তৈরি করবো যা মোবাইল/টেবলেট-এ স্ট্যাকড বা স্তুপাকারে (একটির উপর আরেকটি) দেখাবে, কিন্তু মাঝারী/বড় ডিভাইস যেমন ডেস্কটপে হরাইজন্টাল হয়ে যাবে।
নিচের উদাহরণটি একটি খুবই সাধারণ "stacked-to-horizontal" লেআউট তৈরি করেঃ
উদাহরণঃ Stacked-to-horizontal
<div class="container"> <h1>Hello World!</h1> <div class="row"> <div class="col-sm-6" style="background-color:lavender;"> <p>Lorem ipsum...</p> </div> <div class="col-sm-6" style="background-color:lavenderblush;"> <p>Sed ut perspiciatis...</p> </div> </div> </div>
ফলাফল : Stacked-to-horizontal
টিপসঃ .col-sm-* ক্লাসের নাম্বারগুলো কতটি column এ div টি প্রসারিত হবে তা নির্দেশ করে (১২টির মধ্যে)। তাই, .col-sm-1 এক কলাম পর্যন্ত প্রসারিত হয়, .col-sm-4 চার কলাম পর্যন্ত প্রসারিত হয়, .col-sm-6 ছয় কলাম পর্যন্ত প্রসারিত হয় ইত্যাদি।
নোটঃ নিশ্চিত করতে হবে যেন মোট কলাম সংখ্যা ১২ এর মধ্যে থাকে।
টিপসঃ ক্লাস .container কে .container-fluid তে পরিবর্তন করে আপনি যেকোন ফিক্সড-উইডথ লেআউটকে ফুল-উইডথ লেআউটে পরিবর্তন করতে পারবেনঃ
উদাহরণঃ Fluid container
<div class="container-fluid"> <h1>Hello World!</h1> <div class="row"> <div class="col-sm-6" style="background-color:lavender;"> <p>Lorem ipsum...</p> </div> <div class="col-sm-6" style="background-color:lavenderblush;"> <p>Sed ut perspiciatis...</p> </div> </div> </div>
ফলাফল : Fluid container
