تخفیف ویژه ماه محرم، فرصت یادگیری با 35٪ تخفیف (کد تخفیف: moharam)
زمان باقی مانده

 السّلام علیک یا اباعبداللّه الحسین

سبد (0)

تبلیغات

جی کوئری موبایل-شبکه بندی

شبکه بندی(grid) در جی کوئری موبایل

جی کوئری موبایل یک مجموعه از طرح بندی ها را که بر اساس css هستند، برای ستون ها ارائه می دهد. اما این طرح بندی های ستون، به طور کلی در یک دستگاه موبایل توصیه نمی شود زیرا عرض دستگاه های موبایل متفاوت می باشد. 

اما زمان هایی وجود دارند که شما می خواهید عناصر کوچکتر را مانند دکمه ها یا تب های هدایتی را مکان دهی کنید به طوری که در کنار یکدیگر قرار بگیرند که گویا در یک جدول قرار دارند. اینجاست که ستون بندی ها مهم می شوند. 

ستون ها در یک شبکه بندی(grid) دارای عرض برابر هستند(و به طور کلی عرض آنها 100% است) و border و background و margin و padding ندارند.

5 نوع شبکه بندی وجود دارند که می توانند مورد استفاده قرار بگیرند:

کلاس شبکه بندیستون هاعرض ستونبرابر است بامثال
ui-grid-solo 1 100% ui-block-a امتحان کنید
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 امتحان کنید
Note

در داخل ظرف(container) ستون مورد نظر، عناصر فرزند می توانند بر اساس تعداد ستون ها، کلاس ui-block-a|b|c|d|e را دارا باشند. ستون ها نیز درکنار یکدیگر شناور خواهند بود. 
مثال 1: برای کلاس ui-grid-a که یک شبکه بندی دو ستونه است، شما باید دو عنصر فرزند را تعریف کنید: ui-block-a و ui-block-b
مثال 2: برای کلاس ui-grid-b که یک شبکه بندی 3 ستونه است، شما باید سه عنصر فرزند را تعریف کنید: 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>
خودتان امتحان کنید »

شما می توانید block های خود را نیز با استفاده از استایل های درونی، شخصی سازی کنید:

 

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

ردیف های چند گانه

امکان استفاده از ردیف های چندگانه نیز در داخل ستون های شما، وجود دارد. 

نکته: کلاس ui-block-a همواره یک خط جدید را ایجاد می کند: 

مثال

<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>
خودتان امتحان کنید »

شبکه بندی واکنش گرا

در صفحه های نمایش کوچک، استفاده از تعداد زیادی دکمه به همراه متن، در کنار یکدیگر در یک ردیف، توصیه نمی شود. 

برای اینکه شبکه بندی واکنش گرا داشته باشیم، کلاس ui-responsive را به ظرف(container) مورد نظر خود اضافه کنید: 

مثال

<div class="ui-grid-b ui-responsive">
خودتان امتحان کنید »
تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین -  بانک ملت معرفی بیاموز در شبکه سه پرداخت آنلاین - بانک اقتصاد نوین پرداخت آنلاین - بانک سامان
 
دوره های آموزشی راه اندازی کسب و کارهای اینترنتی
تبلیغات اینترنتی