নিচে Bootstrap grid layouts এর কিছু উদাহহরন লক্ষ্য করা যাকঃ
Three Equal Columns (তিনটি সমান কলামের জন্য)
নিম্নলিখিত উদাহরণের মাধ্যমে দেখা যাবে কিভাবে একটি তিন সমান প্রস্থ কলাম ট্যাবলেট এ শুরু হয় এবং সেটা বড় ডেস্কটপের স্কেলিং পায়, মোবাইলে কলামগুলো স্বয়ংক্রিয় ভাবে স্থান পায় ।
<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>
ফলাফল : তিনটি সমান কলামের জন্য
Three Unequal Columns (তিনটি অসমান কলামের জন্য)
নিম্নলিখিত উদাহরণের মাধ্যমে দেখা যাবে কিভাবে তিনটি ভিন্ন প্রস্থের কলাম ট্যাবলেট এ শুরু হয় এবং সেটা বড় ডেস্কটপের স্কেলিং পায়ঃ
উদাহরনঃ
<div class="row"> <div class="col-sm-3">.col-sm-3</div> <div class="col-sm-6">.col-sm-6</div> <div class="col-sm-3">.col-sm-3</div> </div>
ফলাফল : তিনটি অসমান কলামের জন্য
Two Unequal Columns (দুইটি অসমান কলামের জন্য)
নিম্নলিখিত উদাহরণের মাধ্যমে দেখা যাবে কিভাবে দুটি ভিন্ন প্রস্থের কলাম ট্যাবলেট এ শুরু হয় এবং সেটা বড় ডেস্কটপের স্কেলিং পায়ঃ
উদাহরনঃ
<div class="row"> <div class="col-sm-4">.col-sm-4</div> <div class="col-sm-8">.col-sm-8</div> </div>
ফলাফল : দুইটি অসমান কলামের জন্য
দুইটি নেস্টেড কলাম এর সাথে দুইটি কলাম (Two Columns With Two Nested Columns)
নিম্নলিখিত উদাহরণে দেখা যাবে যে কিভাবে two columns ট্যাবলেট এ শুরু এবং বড় ডেস্কটপে সেটা Scaling করবে যা বড় কলামের মধ্যে অন্য দুটি কলাম (সমান প্রস্থ) (মোবাইল ফোন, এই কলাম এবং তাদের nested
কলাম stackহবে)
উদাহরনঃ
<div class="row"> <div class="col-sm-8"> .col-sm-8 <div class="row"> <div class="col-sm-6">.col-sm-6</div> <div class="col-sm-6">.col-sm-6</div> </div> </div> <div class="col-sm-4">.col-sm-4</div> </div>
ফলাফল : দুইটি নেস্টেড কলাম এর সাথে দুই কলাম
মিশ্র: মোবাইল এবং ডেস্কটপ (Mixed: Mobile And Desktop)
Bootstrap grid সিস্টেমের চারটি ক্লাস আছেঃ xs (phones), sm (tablets), md (desktops), এবং lg (larger desktops) এই class গুলো ব্যবহার করে আরো গতিশীল এবং নমনীয় লেআউট তৈরি করা যায়।
টিপ: প্রতিটি Class বর্গাকার, তাই আপনি xs এবং sm জন্য একই প্রস্থ সেট করতে চান তাহলে আপনাকে শুধুমাত্র xs নির্দিষ্ট করতে হবে.
উদাহরনঃ
<div class="row"> <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> </div> <div class="row"> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> </div> <div class="row"> <div class="col-xs-6">.col-xs-6</div> <div class="col-xs-6">.col-xs-6</div> </div>
টিপস: মনে রাখবেন, গ্রিড কলামে একটি সারি জন্য বারো পর্যন্ত যোগ করা যেতে পারে, এর বেশি হলে কলাম কোন ব্যাপার viewport স্ট্যাক করবে না ।
মিশ্র: মোবাইল, ট্যাবলেট এবং ডেস্কটপ (Mixed: Mobile, Tablet And Desktop)
উদাহরনঃ
<div class="row"> <div class="col-xs-12 col-sm-6 col-lg-8">.col-xs-12 .col-sm-6 .col-lg-8</div> <div class="col-xs-6 col-lg-4">.col-xs-6 .col-lg-4</div> </div> <div class="row"> <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div> <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div> <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div> </div>
ফলাফল : মিশ্র: মোবাইল, ট্যাবলেট এবং ডেস্কটপ
Clear Floats
নির্দিষ্ট ব্রেকপয়েন্ট এ Clear floats (.clearfix class এর সঙ্গে) ব্যবহার করা হয় যাতে uneven content এর সাথে strange wrapping প্রতিরোধ করা যায় ।
উদাহরনঃ
<div class="row"> <div class="col-xs-6 col-sm-3"> Column 1 <br> Resize the browser window to see the effect. </div> <div class="col-xs-6 col-sm-3">Column 2</div> <!-- Add clearfix for only the required viewport --> <div class="clearfix visible-xs"></div> <div class="col-xs-6 col-sm-3">Column 3</div> <div class="col-xs-6 col-sm-3">Column 4</div> </div>
ফলাফল : Clear Float
ভারসাম্য করা কলাম (Offsetting Columns)
.col-md-offset-* classes ব্যবহার করা কলামকে ডান পাশ্র সরিয়ে নেয়া হয় ।
এই ক্লাস * কলাম এর সাহায্যে কলামের বাম মার্জিন বৃদ্ধি করে:
উদাহরনঃ
<div class="row"> <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div> <div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0"> .col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div> </div>
ফলাফল : Offsetting Column
ধাক্কা ও টানা - কলামের ক্রম পরিবর্তন (Push And Pull - Change Column Ordering)
.col-md-push-* এবং .col-md-pull-* classes এর সাহায্যে grid columns এর order পরিবর্তন করা হয় ।
উদাহরনঃ
<div class="row"> <div class="col-sm-4 col-sm-push-8">.col-sm-4 .col-sm-push-8</div> <div class="col-sm-8 col-sm-pull-4">.col-sm-8 .col-sm-pull-4</div> </div>
ফলাফল : Push And Pull
ধন্যবাদ মনযোগ সহকারে টিউটোরিয়ালটি পরার জন্য। আশা করি বুঝতে পেরেছেন ।
