আসুন বুটস্ট্রাপকে জটিল করে তুলি!
লক্ষ্য করুন যে কীভাবে কল-এসএম 100% প্রস্থটি (অন্য পদগুলিতে নতুন লাইনে বিভক্ত) দখল করেছে 576pxতবে কর্নেল তা করে না। আপনি জিআইএফ-র শীর্ষ কেন্দ্রে বর্তমান প্রস্থটি লক্ষ্য করতে পারেন।
এখানে কোড আসে:
<div class="container">
<div class="row">
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
</div>
<div class="row">
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
</div>
</div>
ডিফল্টরূপে বুটস্ট্র্যাপ সমান প্রস্থের সাথে একক সারিতে সমস্ত কলাম (কল) সারিবদ্ধ করে। এই ক্ষেত্রে তিনcol পর্দার আকার যাই হোক না কেন, প্রতিটিই 100% / 3 প্রস্থকে দখল করবে। আপনি জিআইএফ লক্ষ্য করতে পারেন।
এখন যদি আমরা প্রতি লাইনে কেবল একটি কলাম রেন্ডার করতে চাইব তবে প্রতিটি কলামে 100% প্রস্থটি দেওয়া হোক তবে কেবল ছোট পর্দার জন্য ? এখন আসেcol-xx ক্লাস !
আমি ব্যবহার করেছি col-smকারণ আমি কলামগুলি 576px এর নীচে আলাদা লাইনে বিভক্ত করতে চেয়েছিলাম। এই 4col-xx ক্লাসটি মোবাইল, ট্যাবলেট, ল্যাপটপ, বড় মনিটর ইত্যাদির মতো বিভিন্ন ডিসপ্লে ডিভাইসের জন্য বুটস্ট্র্যাপ সরবরাহ করে
সুতরাং, col-sm576px এর নীচে ভঙ্গ হবে , 768px এর নীচে col-mdভেঙে যাবে, col-lg992px এর নীচে ভেঙ্গে যাবে এবং col-xl1200px এর নীচে ভঙ্গ হবে
নোট করুন যে col-xsবুটস্ট্র্যাপ 4 এ কোনও শ্রেণি নেই ।
এই সুন্দর পরিমাণ। আপনি কাজে ফিরে যেতে পারেন।
তবে এর চেয়ে আরও কিছু আছে। এখন আসে col-*এবং col-xx-*প্রস্থ কাস্টমাইজ করার জন্য।
উপরের উদাহরণে মনে রাখবেন যে আমি উল্লেখ করেছি colবা col-xxএকটি সারিতে সমান প্রস্থ নিয়েছি । সুতরাং আমরা যদি কোনও নির্দিষ্টকে আরও প্রস্থ দিতে চাই তবে আমরা এটি colকরতে পারি।
বুটস্ট্র্যাপ সারিটি 12 ভাগে বিভক্ত, সুতরাং উপরের উদাহরণে 3 টি ছিল colতাই প্রত্যেকে 12/3 = 4 অংশ নেয়। প্রস্থ পরিমাপের উপায় হিসাবে আপনি এই অংশগুলি বিবেচনা করতে পারেন।
আমরা এটি ফর্ম্যাটে col-*যেমন লিখতে পারি যেমন col-4:
<div class="row">
<div class="col-4">col</div>
<div class="col-4">col</div>
<div class="col-4">col</div>
</div>
এবং এতে কোনও তাত্পর্য হবে না কারণ ডিফল্ট বুটস্ট্র্যাপ দ্বারা সমান প্রস্থ দেয় col(4 + 4 + 4 = 12)।
তবে, আমরা যদি ১ ম colঅংশে ২ য় অংশ, ৩ য় অংশকে ২ য় অংশ colএবং ২ ভাগ (১২-7-৩ = ২) থেকে তৃতীয় col(3 + ৩ + ২ সুতরাং মোট ১২) দিতে চাই, তবে আমরা কেবল এটি করতে পারি:
<div class="row">
<div class="col-7">col-7</div>
<div class="col-3">col-3</div>
<div class="col-2">col-2</div>
</div>
এবং আপনি col-xx-*ক্লাসের প্রস্থও কাস্টমাইজ করতে পারেন ।
<div class="row">
<div class="col-sm-7">col-sm-7</div>
<div class="col-sm-3">col-sm-3</div>
<div class="col-sm-2">col-sm-2</div>
</div>
অ্যাকশনটিতে এটি কীভাবে দেখায়?
যোগফল col12 এর বেশি হলে কী হবে ? তারপরে colউইলটি শিফট / নীচের লাইনে সামঞ্জস্য করবে। হ্যাঁ, একটি সারিতে অনেকগুলি কলাম থাকতে পারে!
<div class="row">
<div class="col-12">col-12</div>
<div class="col-9">col-9</div>
<div class="col-6">col-6</div>
<div class="col-6">col-6</div>
</div>
যদি আমরা বড় পর্দার জন্য এক সারিতে 3 টি কলাম চাই তবে এই কলামগুলিকে ছোট পর্দার জন্য 2 সারিতে বিভক্ত করি তবে কী হবে?
<div class="row">
<div class="col-12 col-sm">col-12 col-sm TOP</div>
<div class="col col-sm">col col-sm</div>
<div class="col col-sm">col col-sm</div>
</div>
আপনি এখানে প্রায় খেলতে পারেন: https://jsfiddle.net/JerryGoyal/6vqno0Lm/
px।