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