با ابزارهای نمایشگر ما به سرعت و پاسخگو ارزش نمایش اجزا و موارد دیگر را تغییر دهید.

مقادیر رایج نمایشگر

راdisplay property accepts a handful of values and we support many of them with utility classes. We purposefully don’t provide every value as a utility, so here’s what we support:

آنها را با اعمال هر یک از کلاس ها بر روی یک عنصر انتخابی خود به کار ببرید.

                <div class="d-inline bg-success">d-inline</div>
                <div class="d-inline bg-success">d-inline</div>
                

                <span class="d-block bg-primary">d-block</span>
                

                <div class="d-inline-block bg-warning">d-inline-block</div>
                <div class="d-inline-block bg-warning">d-inline-block</div>
                

تغییرات پاسخگو نیز برای هر ابزاری که در بالا ذکر شد وجود دارد.

• .d-none
• .d-inline
• .d-inline-block
• .d-block
• .d-table
• .d-table-cell
• .d-flex
• .d-inline-flex
• .d-sm-none
• .d-sm-inline
• .d-sm-inline-block
• .d-sm-block
• .d-sm-table
• .d-sm-table-cell
• .d-sm-flex
• .d-sm-inline-flex
• .d-md-none
• .d-md-inline
• .d-md-inline-block
• .d-md-block
• .d-md-table
• .d-md-table-cell
• .d-md-flex
• .d-md-inline-flex
• .d-lg-none
• .d-lg-inline
• .d-lg-inline-block
• .d-lg-block
• .d-lg-table
• .d-lg-table-cell
• .d-lg-flex
• .d-lg-inline-flex
• .d-xl-none
• .d-xl-inline
• .d-xl-inline-block
• .d-xl-block
• .d-xl-table
• .d-xl-table-cell
• .d-xl-flex
• .d-xl-inline-flex

پنهان کردن عناصر

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

برای پنهان کردن عناصر به سادگی از.d-none class or one of the .d-{sm,md,lg,xl}-none classes for any responsive screen variation.

برای نشان دادن یک عنصر فقط در یک فاصله معین از اندازه های صفحه، می توانید یکی را ترکیب کنید.d-*-none class with a .d-*-* class, for example .d-none.d-md-block.d-xl-none will hide the element for all screen sizes except on medium and large devices.

نمایش در چاپ

تغییر دادنdisplay value of elements when printing with our print display utilities.

با ایجاد یک نسبت ذاتی که در هر دستگاهی مقیاس می‌شود، ویدئوهای واکنش‌گرا یا جاسازی‌های نمایش اسلاید را بر اساس عرض والد ایجاد کنید.

قوانین به طور مستقیم اعمال می شود<iframe>, <embed>, <video>, and <object> elements; optionally use an explicit descendant class .embed-responsive-item when you want to match the styling for other attributes.

طرفدار نکته! You don’t need to include frameborder="0" in your <iframe>s as we override that for you.

مثال

هر جاسازی را مانند یک بپیچید<iframe> in a parent element with .embed-responsive and an aspect ratio. The .embed-responsive-item isn’t strictly required, but we encourage it.

                <div class="embed-responsive embed-responsive-16by9">
                  <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/dVkK36KOcqs?rel=0" allowfullscreen></iframe>
                </div>
                

نسبت ابعاد

نسبت ابعاد را می توان با کلاس های اصلاح کننده سفارشی کرد.

                <!-- 21:9 aspect ratio -->
                <div class="embed-responsive embed-responsive-21by9">
                  <iframe class="embed-responsive-item" src="..."></iframe>
                </div>
                
                <!-- 16:9 aspect ratio -->
                <div class="embed-responsive embed-responsive-16by9">
                  <iframe class="embed-responsive-item" src="..."></iframe>
                </div>
                
                <!-- 4:3 aspect ratio -->
                <div class="embed-responsive embed-responsive-4by3">
                  <iframe class="embed-responsive-item" src="..."></iframe>
                </div>
                
                <!-- 1:1 aspect ratio -->
                <div class="embed-responsive embed-responsive-1by1">
                  <iframe class="embed-responsive-item" src="..."></iframe>
                </div>
                

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

رفتارهای انعطاف پذیر را فعال کنید

درخواست دادنdisplay utilities to create a flexbox container and transform عناصر کودکان را هدایت می کند into flex items. Flex containers and items are able to be modified further with additional flex properties.

                <div class="d-flex p-2">I'm a flexbox container!</div>
                

                <div class="d-inline-flex p-2">I'm an inline flexbox container!</div>
                

تغییرات پاسخگو نیز برای وجود دارد.d-flex and .d-inline-flex.

• .d-flex
• .d-inline-flex
• .d-sm-flex
• .d-sm-inline-flex
• .d-md-flex
• .d-md-inline-flex
• .d-lg-flex
• .d-lg-inline-flex
• .d-xl-flex
• .d-xl-inline-flex

جهت

جهت اقلام فلکس را در یک ظرف فلکس با ابزارهای جهت تنظیم کنید. row. However, you may encounter situations where you needed to explicitly set this value (like responsive layouts).

استفاده کنید.flex-row to set a horizontal direction (the browser default), or .flex-row-reverse to start the horizontal direction from the opposite side.

                <div class="d-flex flex-row">
                  <div class="p-2">Flex item 1</div>
                  <div class="p-2">Flex item 2</div>
                  <div class="p-2">Flex item 3</div>
                </div>
                <div class="d-flex flex-row-reverse">
                  <div class="p-2">Flex item 1</div>
                  <div class="p-2">Flex item 2</div>
                  <div class="p-2">Flex item 3</div>
                </div>
                

استفاده کنید.flex-column to set a vertical direction, or .flex-column-reverse to start the vertical direction from the opposite side.

                <div class="d-flex flex-column">
                  <div class="p-2">Flex item 1</div>
                  <div class="p-2">Flex item 2</div>
                  <div class="p-2">Flex item 3</div>
                </div>
                <div class="d-flex flex-column-reverse">
                  <div class="p-2">Flex item 1</div>
                  <div class="p-2">Flex item 2</div>
                  <div class="p-2">Flex item 3</div>
                </div>
                

تغییرات پاسخگو نیز برای وجود داردflex-direction.

• .flex-row
• .flex-row-reverse
• .flex-column
• .flex-column-reverse
• .flex-sm-row
• .flex-sm-row-reverse
• .flex-sm-column
• .flex-sm-column-reverse
• .flex-md-row
• .flex-md-row-reverse
• .flex-md-column
• .flex-md-column-reverse
• .flex-lg-row
• .flex-lg-row-reverse
• .flex-lg-column
• .flex-lg-column-reverse
• .flex-xl-row
• .flex-xl-row-reverse
• .flex-xl-column
• .flex-xl-column-reverse

مطالب را توجیه کنید

استفاده کنیدjustify-content utilities on flexbox containers to change the alignment of flex items on the main axis (the x-axis to start, y-axis if flex-direction: column). Choose from start (browser default), end, center, between, or around.

                <div class="d-flex justify-content-start">...</div>
                <div class="d-flex justify-content-end">...</div>
                <div class="d-flex justify-content-center">...</div>
                <div class="d-flex justify-content-between">...</div>
                <div class="d-flex justify-content-around">...</div>
                

تغییرات پاسخگو نیز برای وجود داردjustify-content.

• .justify-content-start
• .justify-content-end
• .justify-content-center
• .justify-content-between
• .justify-content-around
• .justify-content-sm-start
• .justify-content-sm-end
• .justify-content-sm-center
• .justify-content-sm-between
• .justify-content-sm-around
• .justify-content-md-start
• .justify-content-md-end
• .justify-content-md-center
• .justify-content-md-between
• .justify-content-md-around
• .justify-content-lg-start
• .justify-content-lg-end
• .justify-content-lg-center
• .justify-content-lg-between
• .justify-content-lg-around
• .justify-content-xl-start
• .justify-content-xl-end
• .justify-content-xl-center
• .justify-content-xl-between
• .justify-content-xl-around

موارد را تراز کنید

استفاده کنیدalign-items utilities on flexbox containers to change the alignment of flex items on the cross axis (the y-axis to start, x-axis if flex-direction: column). Choose from start, end, center, baseline, or stretch (browser default).

                <div class="d-flex align-items-start">...</div>
                <div class="d-flex align-items-end">...</div>
                <div class="d-flex align-items-center">...</div>
                <div class="d-flex align-items-baseline">...</div>
                <div class="d-flex align-items-stretch">...</div>
                

تغییرات پاسخگو نیز برای وجود داردalign-items.

• .align-items-start
• .align-items-end
• .align-items-center
• .align-items-baseline
• .align-items-stretch
• .align-items-sm-start
• .align-items-sm-end
• .align-items-sm-center
• .align-items-sm-baseline
• .align-items-sm-stretch
• .align-items-md-start
• .align-items-md-end
• .align-items-md-center
• .align-items-md-baseline
• .align-items-md-stretch
• .align-items-lg-start
• .align-items-lg-end
• .align-items-lg-center
• .align-items-lg-baseline
• .align-items-lg-stretch
• .align-items-xl-start
• .align-items-xl-end
• .align-items-xl-center
• .align-items-xl-baseline
• .align-items-xl-stretch

خود را تراز کنید

استفاده کنیدalign-self utilities on flexbox items to individually change their alignment on the cross axis (the y-axis to start, x-axis if flex-direction: column). Choose from the same options as align-items: start, end, center, baseline, or stretch (browser default).

                <div class="align-self-start">Aligned flex item</div>
                <div class="align-self-end">Aligned flex item</div>
                <div class="align-self-center">Aligned flex item</div>
                <div class="align-self-baseline">Aligned flex item</div>
                <div class="align-self-stretch">Aligned flex item</div>
                

تغییرات پاسخگو نیز برای وجود داردalign-self.

• .align-self-start
• .align-self-end
• .align-self-center
• .align-self-baseline
• .align-self-stretch
• .align-self-sm-start
• .align-self-sm-end
• .align-self-sm-center
• .align-self-sm-baseline
• .align-self-sm-stretch
• .align-self-md-start
• .align-self-md-end
• .align-self-md-center
• .align-self-md-baseline
• .align-self-md-stretch
• .align-self-lg-start
• .align-self-lg-end
• .align-self-lg-center
• .align-self-lg-baseline
• .align-self-lg-stretch
• .align-self-xl-start
• .align-self-xl-end
• .align-self-xl-center
• .align-self-xl-baseline
• .align-self-xl-stretch

حاشیه های خودکار

وقتی ترازهای انعطاف پذیر را با حاشیه های خودکار ترکیب می کنید، Flexbox می تواند کارهای بسیار عالی انجام دهد. .mr-auto), and pushing two items to the left (.ml-auto).

متأسفانه، IE10 و IE11 به درستی از حاشیه‌های خودکار در موارد انعطاف‌پذیری که والد آنها پیش‌فرض ندارد، پشتیبانی نمی‌کنند.justify-content value. این پاسخ StackOverflow را ببینید for more details.

                <div class="d-flex">
                  <div class="p-2">Flex item</div>
                  <div class="p-2">Flex item</div>
                  <div class="p-2">Flex item</div>
                </div>
                
                <div class="d-flex">
                  <div class="mr-auto p-2">Flex item</div>
                  <div class="p-2">Flex item</div>
                  <div class="p-2">Flex item</div>
                </div>
                
                <div class="d-flex">
                  <div class="p-2">Flex item</div>
                  <div class="p-2">Flex item</div>
                  <div class="ml-auto p-2">Flex item</div>
                </div>
                

با تراز آیتم ها

با مخلوط کردن، یک مورد فلکس را به صورت عمودی به بالا یا پایین ظرف منتقل کنیدalign-items, flex-direction: column, and margin-top: auto or margin-bottom: auto.

                <div class="d-flex align-items-start flex-column" style="height: 200px;">
                  <div class="mb-auto p-2">Flex item</div>
                  <div class="p-2">Flex item</div>
                  <div class="p-2">Flex item</div>
                </div>
                
                <div class="d-flex align-items-end flex-column" style="height: 200px;">
                  <div class="p-2">Flex item</div>
                  <div class="p-2">Flex item</div>
                  <div class="mt-auto p-2">Flex item</div>
                </div>
                

بسته بندی کردن

نحوه بسته شدن اقلام فلکس را در یک ظرف فلکس تغییر دهید. .flex-nowrap, wrapping with .flex-wrap, or reverse wrapping with .flex-wrap-reverse.

                <div class="d-flex flex-nowrap">
                  ...
                </div>
                

                <div class="d-flex flex-wrap">
                  ...
                </div>
                

                <div class="d-flex flex-wrap-reverse">
                  ...
                </div>
                

تغییرات پاسخگو نیز برای وجود داردflex-wrap.

• .flex-nowrap
• .flex-wrap
• .flex-wrap-reverse
• .flex-sm-nowrap
• .flex-sm-wrap
• .flex-sm-wrap-reverse
• .flex-md-nowrap
• .flex-md-wrap
• .flex-md-wrap-reverse
• .flex-lg-nowrap
• .flex-lg-wrap
• .flex-lg-wrap-reverse
• .flex-xl-nowrap
• .flex-xl-wrap
• .flex-xl-wrap-reverse

سفارش

تغییر دادنvisual order of specific flex items with a handful of order utilities. We only provide options for making an item first or last, as well as a reset to use the DOM order. As order takes any integer value (e.g., 5), add custom CSS for any additional values needed.

                <div class="d-flex flex-nowrap">
                  <div class="order-3 p-2">First flex item</div>
                  <div class="order-2 p-2">Second flex item</div>
                  <div class="order-1 p-2">Third flex item</div>
                </div>
                

تغییرات پاسخگو نیز برای وجود داردorder.

• .order-1
• .order-2
• .order-3
• .order-4
• .order-5
• .order-6
• .order-7
• .order-8
• .order-9
• .order-10
• .order-11
• .order-12
• .order-sm-1
• .order-sm-2
• .order-sm-3
• .order-sm-4
• .order-sm-5
• .order-sm-6
• .order-sm-7
• .order-sm-8
• .order-sm-9
• .order-sm-10
• .order-sm-11
• .order-sm-12
• .order-md-1
• .order-md-2
• .order-md-3
• .order-md-4
• .order-md-5
• .order-md-6
• .order-md-7
• .order-md-8
• .order-md-9
• .order-md-10
• .order-md-11
• .order-md-12
• .order-lg-1
• .order-lg-2
• .order-lg-3
• .order-lg-4
• .order-lg-5
• .order-lg-6
• .order-lg-7
• .order-lg-8
• .order-lg-9
• .order-lg-10
• .order-lg-11
• .order-lg-12
• .order-xl-1
• .order-xl-2
• .order-xl-3
• .order-xl-4
• .order-xl-5
• .order-xl-6
• .order-xl-7
• .order-xl-8
• .order-xl-9
• .order-xl-10
• .order-xl-11
• .order-xl-12

تراز کردن محتوا

استفاده کنیدalign-content utilities on flexbox containers to align flex items together on the cross axis. Choose from start (browser default), end, center, between, around, or stretch. To demonstrate these utilities, we’ve enforced flex-wrap: wrap and increased the number of flex items.

سر بالا! This property has no effect on single rows of flex items.

                <div class="d-flex align-content-start flex-wrap">
                  ...
                </div>
                

                <div class="d-flex align-content-end flex-wrap">
                  ...
                </div>
                

                <div class="d-flex align-content-center flex-wrap">
                  ...
                </div>
                

                <div class="d-flex align-content-between flex-wrap">
                  ...
                </div>
                

                <div class="d-flex align-content-around flex-wrap">
                  ...
                </div>
                

                <div class="d-flex align-content-stretch flex-wrap">
                  ...
                </div>
                

تغییرات پاسخگو نیز برای وجود داردalign-content.

• .align-content-start
• .align-content-end
• .align-content-center
• .align-content-around
• .align-content-stretch
• .align-content-sm-start
• .align-content-sm-end
• .align-content-sm-center
• .align-content-sm-around
• .align-content-sm-stretch
• .align-content-md-start
• .align-content-md-end
• .align-content-md-center
• .align-content-md-around
• .align-content-md-stretch
• .align-content-lg-start
• .align-content-lg-end
• .align-content-lg-center
• .align-content-lg-around
• .align-content-lg-stretch
• .align-content-xl-start
• .align-content-xl-end
• .align-content-xl-center
• .align-content-xl-around
• .align-content-xl-stretch

با استفاده از ابزارهای شناور پاسخگو، شناورها را روی هر عنصر، در هر نقطه شکست، تغییر دهید.

این کلاس‌های کاربردی یک عنصر را به چپ یا راست شناور می‌کنند یا شناور را غیرفعال می‌کنند، بر اساس اندازه نمای فعلی با استفاده ازCSS float property. !important is included to avoid specificity issues. These use the same viewport breakpoints as our grid system.

تغییر وضعیت شناور با کلاس:

                <div class="float-left">Float left on all viewport sizes</div><br>
                <div class="float-right">Float right on all viewport sizes</div><br>
                <div class="float-none">Don't float on all viewport sizes</div>
                

پاسخگو

تغییرات پاسخگو نیز برای هر کدام وجود داردfloat value.

                <div class="float-sm-left">Float left on viewports sized SM (small) or wider</div><br>
                <div class="float-md-left">Float left on viewports sized MD (medium) or wider</div><br>
                <div class="float-lg-left">Float left on viewports sized LG (large) or wider</div><br>
                <div class="float-xl-left">Float left on viewports sized XL (extra-large) or wider</div><br>
                

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

• .float-left
• .float-right
• .float-none
• .float-sm-left
• .float-sm-right
• .float-sm-none
• .float-md-left
• .float-md-right
• .float-md-none
• .float-lg-left
• .float-lg-right
• .float-lg-none
• .float-xl-left
• .float-xl-right
• .float-xl-none

متن را با تصاویر پس زمینه با کلاس جایگزینی تصویر عوض کنید.

استفاده کنید.text-hide class or mixin to help replace an element’s text content with a background image.

                <h1 class="text-hide">Custom heading</h1>
                

استفاده کنید.text-hide class to maintain the accessibility and SEO benefits of heading tags, but want to utilize a background-image instead of text.

                <h1 class="text-hide my-2" style="background-image: url('../../../app-assets/images/logo/logo.png'); width: 30px; height: 26px;">Bootstrap</h1>
                

از این ابزارهای مختصر برای پیکربندی سریع موقعیت یک عنصر استفاده کنید.

بالا ثابت

یک عنصر را از لبه به لبه در بالای پنجره دید قرار دهید.

                <div class="fixed-top">...</div>
                

پایین ثابت

یک عنصر را از لبه به لبه در پایین درگاه دید قرار دهید.

                <div class="fixed-bottom">...</div>
                

بالای چسب

یک عنصر را از لبه به لبه در بالای پنجره نمایش قرار دهید، اما فقط پس از اینکه از کنار آن عبور کنید. .sticky-top utility uses CSS’s position: sticky, which isn’t fully supported in all browsers.

Microsoft Edge و IE11 رندر خواهند شدposition: sticky as position: relative.به این ترتیب، ما استایل ها را در یک می پیچیم@supports query, limiting the stickiness to only browsers that properly can render it.

                <div class="sticky-top">...</div>
                

از ابزارهای صفحه خوان برای پنهان کردن عناصر در همه دستگاه ها به جز صفحه خوان ها استفاده کنید.

یک عنصر را در همه دستگاه‌ها پنهان کنیدexcept screen readersبا.sr-only. Combine .sr-only with .sr-only-focusable to show the element again when it’s focused (e.g. by a keyboard-only user). Can also be used as mixins.

                <a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>
                

با ابزارهای عرض و ارتفاع خود، به راحتی یک عنصر را به عرض یا بلندی (نسبت به مادرش) بسازید.

ابزارهای عرض و ارتفاع از$sizes Sass map in _variables.scss. Includes support for 25%, 50%, 75%, and 100% by default. Modify those values as you need to generate different utilities here.

                <div class="w-25 p-3" style="background-color: #eee;">Width 25%</div>
                <div class="w-50 p-3" style="background-color: #eee;">Width 50%</div>
                <div class="w-75 p-3" style="background-color: #eee;">Width 75%</div>
                <div class="w-100 p-3" style="background-color: #eee;">Width 100%</div>
                

                <div style="height: 100px; background-color: rgba(255,0,0,0.1);">
                  <div class="h-25 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 25%</div>
                  <div class="h-50 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 50%</div>
                  <div class="h-75 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 75%</div>
                  <div class="h-100 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 100%</div>
                </div>
                

همچنین می توانید استفاده کنیدmax-width: 100%; and max-height: 100%; utilities as needed.

                    <img class="mw-100" src="..." alt="Max-width 100%">
                

                <div style="height: 100px; background-color: rgba(255,0,0,0.1);">
                  <div class="mh-100" style="width: 100px; height: 200px; background-color: rgba(0,0,255,0.1);">Max-height 100%</div>
                </div>
                

بوت استرپ شامل طیف گسترده ای از کلاس های کاربردی حاشیه و padding پاسخگو برای تغییر ظاهر یک عنصر است.

چگونه کار می کند

پاسخگو پسند اختصاص دهیدmargin or padding values to an element or a subset of its sides with shorthand classes. Includes support for individual properties, all properties, and vertical and horizontal properties. Classes are built from a default Sass map ranging from .25rem to 3rem.

نشانه گذاری

ابزارهای فاصله گذاری که برای همه نقاط شکست، ازxs to xl, have no breakpoint abbreviation in them. This is because those classes are applied from min-width: 0 and up, and thus are not bound by a media query. The remaining breakpoints, however, do include a breakpoint abbreviation.

کلاس ها با استفاده از فرمت نامگذاری می شوند{property}{sides}-{size} for xs and {property}{sides}-{breakpoint}-{size} for sm, md, lg, and xl.

جایی کهproperty is one of:

• m - for classes that set margin
• p - for classes that set padding

جایی کهsides is one of:

• t - for classes that set margin-top or padding-top
• b - for classes that set margin-bottom or padding-bottom
• l - for classes that set margin-left or padding-left
• r - for classes that set margin-right or padding-right
• x - for classes that set both *-left and *-right
• y - for classes that set both *-top and *-bottom
• خالی - برای کلاس هایی که a را تنظیم می کنندmargin or padding on all 4 sides of the element

جایی کهsize is one of:

• 0 - for classes that eliminate the margin or padding by setting it to 0
• 1 - (by default) for classes that set the margin or padding to $spacer * .25
• 2 - (by default) for classes that set the margin or padding to $spacer * .5
• 3 - (by default) for classes that set the margin or padding to $spacer
• 4 - (by default) for classes that set the margin or padding to $spacer * 1.5
• 5 - (by default) for classes that set the margin or padding to $spacer * 3
• auto - for classes that set the margin to auto

(شما می توانید اندازه های بیشتری را با افزودن ورودی ها به آن اضافه کنید$spacers Sass map variable.)

مرکز افقی

علاوه بر این، Bootstrap همچنین شامل یک.mx-auto class for horizontally centering fixed-width block level content—that is, content that has display: block and a width set—by setting the horizontal margins to auto.

                <div class="mx-auto" style="width: 200px;">
                  Centered element
                </div>
                

تراز عمودی عناصر سلولی درون خطی، بلوک درون خطی، جدول درون خطی و سلول جدول را به راحتی تغییر دهید.

تغییر تراز عناصر باvertical-alignment utilities. Please note that vertical-align only affects inline, inline-block, inline-table, and table cell elements.

را انتخاب کنید.align-baseline, .align-top, .align-middle, .align-bottom, .align-text-bottom, and .align-text-top as needed.

با سلول های جدول:

                <table style="height: 100px;">
                  <tbody>
                    <tr>
                      <td class="align-baseline">baseline</td>
                      <td class="align-top">top</td>
                      <td class="align-middle">middle</td>
                      <td class="align-bottom">bottom</td>
                      <td class="align-text-top">text-top</td>
                      <td class="align-text-bottom">text-bottom</td>
                    </tr>
                  </tbody>
                </table>
                

قابلیت مشاهده عناصر را بدون تغییر در نمایشگر با ابزارهای دید کنترل کنید.

را تنظیم کنیدvisibility of elements with our visibility utilities. These do not modify the display value at all and are helpful for hiding content from most users, but still keeping them for screen readers.

درخواست دادن.visible or .invisible as needed.

                <div class="visible">...</div>
                <div class="invisible">...</div>