قالب مدیریت آمپل - قالب مدیریت چند منظوره

صفحه آرایی

خرید قالب

گزینه های شبکه

ببینید که چگونه جنبه های سیستم شبکه بوت استرپ در چندین دستگاه با یک جدول مفید کار می کند.

	دستگاه های بسیار کوچک تلفن ها (<768px)	دستگاه های کوچک تبلت ها (≥768px)	دستگاه های متوسط دسکتاپ ها (≥992px)	دستگاه های بزرگ دسکتاپ ها (≥1200px)
رفتار شبکه	افقی در همه زمان ها	برای شروع جمع شد، افقی بالای نقاط شکست
حداکثر عرض صفحه	هیچکدام (خودکار)	750px	970px	1170px
پیشوند کلاس	`.col-xs-`	`.col-sm-`	`.col-md-`	`.col-lg-`
# از ستون ها	12
حداکثر عرض ستون	خودکار	60px	78px	95px
عرض ناودان	30px (15px در هر طرف یک ستون)
تودرتو	بله
افست	بله
ترتیب ستون	بله

کلاس‌های گرید برای دستگاه‌هایی با عرض صفحه بزرگ‌تر یا مساوی اندازه‌های نقطه شکست اعمال می‌شوند و کلاس‌های شبکه‌ای را که برای دستگاه‌های کوچک‌تر هدف‌گذاری شده‌اند لغو می‌کنند. بنابراین، اعمال هر کلاس .col-md- بر روی یک عنصر نه تنها بر استایل آن در دستگاه‌های متوسط، بلکه در دستگاه‌های بزرگ نیز تأثیر می‌گذارد، اگر کلاس .col-lg- باشد.

مثال: انباشته به افقی

با استفاده از یک مجموعه واحد از کلاس‌های شبکه .col-md-*، می‌توانید یک سیستم شبکه پیش‌فرض ایجاد کنید که قبل از افقی شدن در دستگاه‌های تلفن همراه و تبلت‌ها (محدوده بسیار کوچک تا کوچک) شروع می‌شود. دستگاه های رومیزی (متوسط). ستون های شبکه را در هر .row قرار دهید.

.col-md-1

.col-md-8

.col-md-4

.col-md-6

مثال: موبایل و دسکتاپ

آیا نمی خواهید ستون های شما به سادگی در دستگاه های کوچکتر جمع شوند؟ با افزودن .col-xs-* .col-md-* به ستون‌های خود، از کلاس‌های شبکه دستگاه کوچک و متوسط اضافی استفاده کنید. برای درک بهتر نحوه کارکرد آن به مثال زیر مراجعه کنید.

.col-xs-12 .col-md-8

.col-xs-6 .col-md-4

.col-xs-6

مثال: موبایل، تبلت، دسکتاپ

با ایجاد طرح‌بندی‌های پویاتر و قدرتمندتر با کلاس‌های .col-sm-* تبلت، از مثال قبلی استفاده کنید.

.col-xs-12 .col-sm-6 .col-md-8

.col-xs-6 .col-md-4

.col-xs-6 .col-sm-4

ستون پاسخگو بازنشانی می شود

با چهار سطح شبکه‌های موجود، احتمالاً با مشکلاتی مواجه خواهید شد که در نقاط شکست خاص، ستون‌های شما کاملاً درست پاک نمی‌شوند، زیرا یکی از آنها بلندتر از دیگری است. برای رفع آن، از ترکیبی از .clearfix و کلاس‌های ابزار پاسخگو ما استفاده کنید.

.col-xs-6 .col-sm-3
اندازه نمای خود را تغییر دهید یا به عنوان مثال آن را در تلفن خود بررسی کنید.

.col-xs-6 .col-sm-3

تنظیم ستون ها

با استفاده از کلاس‌های .col-md-offset-*، ستون‌ها را به سمت راست حرکت دهید. این کلاس ها حاشیه سمت چپ یک ستون را با ستون های * افزایش می دهند. برای مثال، .col-md-offset-4 .col-md-4 را روی چهار ستون منتقل می‌کند.

.col-md-4

.col-md-4 .col-md-offset-4

.col-md-3 .col-md-offset-3

.col-md-6 .col-md-offset-3

پنل خدمات