jQuery Mobile গ্রিড

jQuery Mobile লেআউট গ্রিড

jQuery Mobile একটি CSS-ভিত্তিক স্তম্ভ সাজানোর প্যাকেজ প্রদান করে। কিন্তু সাধারণত, মোবাইল ডিভাইসের স্ক্রিন প্রস্থের সীমাবদ্ধতার কারণে, মোবাইল ডিভাইসে স্তম্ভ সাজানো সুপারিশ নয়।

কিন্তু কখনও আপনাকে ছোট ইলিমেন্ট, যেমন বাটন বা নেভিগেশন বার, এমনকি টেবিলের মতো সাথে একসাথে ফ্লোট করতে হবে, এমনকি এই স্তম্ভ সাজানো সর্বোত্তম হবে。

গ্রিডের স্তম্ভগুলি সমান প্রস্থের রয়েছে (মোট প্রস্থ 100%), নিচে কোনও ফার্ম, ব্যাকগ্রাউন্ড, মার্গান্তর বা মার্গমুখ নেই。

ব্যবহার্য সাজানো গ্রিড শ্রেণী চারটি রয়েছে:

গ্রিড শ্রেণী স্তম্ভ স্তম্ভ প্রস্থ সম্পর্কিত প্রকল্পনা
ui-grid-a 2 50% / 50% ui-block-a|b পরীক্ষা
ui-grid-b 3 33% / 33% / 33% ui-block-a|b|c পরীক্ষা
ui-grid-c 4 25% / 25% / 25% / 25% ui-block-a|b|c|d পরীক্ষা
ui-grid-d 5 20% / 20% / 20% / 20% / 20% ui-block-a|b|c|d|e পরীক্ষা

সুঝানা:স্তম্ভ কনটেনারে, স্তম্ভের সংখ্যা অনুযায়ী, সাব-এলিমেন্টকে ui-block-a|b|c|d|e শ্রেণী নির্দিষ্ট করা যায়। এই স্তম্ভগুলি ক্রমশঃ একত্রিতভাবে ফ্লোট করবে。

প্রকল্পনা 1: ui-grid-a শ্রেণীর জন্য (দুটি স্তম্ভ সাজানো), আপনাকে ui-block-a এবং ui-block-b সংকেত করতে হবে。

প্রকল্পনা 2: ui-grid-b শ্রেণীর জন্য (তিনটি স্তম্ভ সাজানো), তিনটি সাব-এলিমেন্ট ui-block-a, ui-block-b এবং ui-block-c যোগ করুন。

গ্রিড সাজানো

আপনি CSS-এর মাধ্যমেও স্তম্ভ ব্লককে অবস্থান দিতে পারেন:

প্রকল্পনা

<style>
.ui-block-a, 
.ui-block-b, 
.ui-block-c 
{
background-color: lightgray;
border: 1px solid black;
height: 100px;
font-weight: bold;
text-align: center;
padding: 30px;
}
</style>

আপনার হাতে পরীক্ষা করুন

আপনি শুধুমাত্র লাইনের স্টাইল ব্যবহার করেও ব্লককে অবস্থান দিতে পারেন:

<div class="ui-block-a" style="border: 1px solid black;"><span>Text..</span></div>

বহুসারি

একটি সারিতে একাধিক সারি রাখা হওয়াও সম্ভব。

মন্তব্য:ui-block-a-class সর্বদা একটি নতুন সারি তৈরি করবে:

প্রকল্পনা

<div class="ui-grid-b">
  <div class="ui-block-a"><span>Some Text</span></div>
  <div class="ui-block-b"><span>Some Text</span></div>
  <div class="ui-block-c"><span>Some Text</span></div>
  <div class="ui-block-a"><span>Some Text</span></div>
  <div class="ui-block-b"><span>Some Text</span></div>
  <div class="ui-block-a"><span>Some Text</span></div>
</div>

আপনার হাতে পরীক্ষা করুন