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

به عنوان مثال، در اینجا دو طرح‌بندی شبکه‌ای وجود دارد که برای هر دستگاه و درگاه نمایشی اعمال می‌شود xs تا xl. هر تعداد کلاس بدون واحد را برای هر نقطه شکستی که نیاز دارید اضافه کنید و عرض هر ستون یکسان خواهد بود.

طرح‌بندی خودکار برای ستون‌های شبکه flexbox همچنین به این معنی است که می‌توانید عرض یک ستون را تنظیم کنید و اندازه ستون‌های خواهر و برادر را به‌طور خودکار در اطراف آن تغییر دهید. می‌توانید از کلاس‌های شبکه از پیش تعریف‌شده (مانند شکل زیر)، میکس‌های شبکه یا عرض‌های درون خطی استفاده کنید. توجه داشته باشید که سایر ستون ها بدون توجه به عرض ستون مرکزی، اندازه آنها تغییر می کند.

استفاده کنید col-{breakpoint}-auto کلاس ها به اندازه ستون ها بر اساس عرض طبیعی محتوای آنها.

با درج a ستون هایی با عرض مساوی ایجاد کنید که چندین ردیف را در بر می گیرند .w-100 جایی که می خواهید ستون ها به یک خط جدید شکسته شوند. با مخلوط کردن وقفه ها را پاسخگو کنید .w-100 با برخی از ابزارهای نمایش ریسپانسیو.

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

تمام نقاط شکست

برای شبکه هایی که از کوچکترین دستگاه ها تا بزرگترین آنها یکسان هستند, استفاده کنید .col و .col-* کلاس ها زمانی که به ستونی با اندازه خاص نیاز دارید یک کلاس شماره گذاری شده را مشخص کنید. در غیر این صورت، با خیال راحت به آن پایبند باشید .col.

با استفاده از یک مجموعه AZ .col-sm-* کلاس‌ها، می‌توانید یک سیستم شبکه اصلی ایجاد کنید که به صورت انباشته شروع می‌شود و در نقطه شکست کوچک افقی می‌شود (sm).

آیا نمی خواهید ستون های شما به سادگی در برخی از لایه های شبکه جمع شوند؟ در صورت نیاز از ترکیبی از کلاس های مختلف برای هر ردیف استفاده کنید. مثال زیر را ببینید تا ایده بهتری در مورد نحوه کارکرد آن داشته باشید.

ناودان ها را می توان با استفاده از لایه های مخصوص نقطه شکست و کلاس های سودمند حاشیه منفی تنظیم کرد. برای تغییر ناودان در یک ردیف معین، یک ابزار حاشیه منفی را روی آن جفت کنید .row و تطبیق ابزارهای پدینگ بر روی .cols. The .container یا .container-fluid ممکن است برای جلوگیری از سرریز ناخواسته، با استفاده از ابزار padding تطبیق، والدین نیز نیاز به تنظیم داشته باشند.

در اینجا نمونه ای از شخصی سازی شبکه بوت استرپ به طور گسترده آورده شده است (lg) نقطه شکست و بالاتر ما افزایش داده ایم .col پدینگ با .px-lg-5, با آن مقابله کرد .mx-lg-n5 روی المنت پدر .row و سپس تنظیم کرد .container وارپر با .px-lg-5.

استفاده کنید ابزارهای تراز flexbox برای تراز عمودی و افقی ستون ها. اینترنت اکسپلورر 10-11 از تراز عمودی اقلام انعطاف پذیر پشتیبانی نمی کند، زمانی که ظرف انعطاف پذیر دارای یک است min-height همانطور که در زیر نشان داده شده است.برای جزئیات بیشتر Flexbugs شماره 3 را ببینید.

چیدمان عمودی

با درج a ستون هایی با عرض مساوی ایجاد کنید که چندین ردیف را در بر می گیرند .w-100 جایی که می خواهید ستون ها به یک خط جدید شکسته شوند. با مخلوط کردن وقفه ها را پاسخگو کنید .w-100 با برخی از ابزارهای نمایش ریسپانسیو.