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

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

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

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

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

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

نقاط شکست یا برک پوینت

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

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

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

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

در اینجا نمونه ای از سفارشی کردن شبکه بوت استرپ در نقطه شکست بزرگ (lg) و بالاتر آمده است. ما پدینگ .col را با .px-lg-5 افزایش دادیم

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

چیدمان عمودی

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