ابزارهای کاربردی برای چیدمان

برای توسعه سریعتر سازگار با موبایل و پاسخگو، Bootstrap شامل ده ها کلاس کاربردی برای نمایش، پنهان کردن، تراز کردن و فاصله گذاری محتوا است.

در حال تغییرdisplay

از ابزارهای نمایشگر ما برای تغییر پاسخگویی مقادیر رایج displayویژگی استفاده کنید. آن را با سیستم شبکه، محتوا، یا مؤلفه‌های خود ترکیب کنید تا آنها را در نماهای خاص نشان دهید یا پنهان کنید.

گزینه های Flexbox

بوت استرپ 4 با فلکس باکس ساخته شده است، اما همه عناصر displayبه آن تغییر داده نشده است، display: flexزیرا این امر باعث اضافه شدن بسیاری از موارد غیر ضروری و تغییر غیرمنتظره رفتارهای کلیدی مرورگر می شود. اکثر اجزای ما با فعال کردن flexbox ساخته شده‌اند.

اگر نیاز به افزودن display: flexبه یک عنصر دارید، این کار را با .d-flexیا یکی از انواع پاسخگو (به عنوان مثال، .d-sm-flex) انجام دهید. شما به این کلاس یا displayمقدار نیاز دارید تا امکان استفاده از ابزارهای اضافی flexbox را برای اندازه، تراز، فاصله و موارد دیگر فراهم کنید.

حاشیه و بالشتک

از ابزار marginو padding فاصله برای کنترل نحوه فاصله و اندازه عناصر و اجزاء استفاده کنید. Bootstrap 4 شامل یک مقیاس پنج سطحی برای ابزارهای فاصله گذاری است که بر اساس یک متغیر 1remپیش فرض $spacerمقدار است. مقادیری را برای همه درگاه‌ها انتخاب کنید (مثلاً .mr-3برای margin-right: 1rem)، یا انواع پاسخگو را برای هدف قرار دادن درگاه‌های دید خاص انتخاب کنید (مثلاً .mr-md-3برای margin-right: 1remشروع در mdنقطه شکست).

تغییر وضعیتvisibility

زمانی displayکه نیازی به تغییر دادن نیست، می‌توانید با ابزارهای دیدvisibility ما، عنصر یک عنصر را تغییر دهید . عناصر نامرئی همچنان بر روی طرح بندی صفحه تأثیر می گذارند، اما از نظر بصری از بازدیدکنندگان پنهان می شوند.