در این بخش به ویژگی Display در فریم ورک بوت استرپ پرداخته می‌شود. ویژگی Display در بوت استرپ نقش مهمی در کنترل نحوه نمایش و رفتار عناصر دارد. با استفاده از این ویژگی، می‌توان مشخص کرد که یک عنصر چگونه در صفحه ظاهر شود و چه جایگاهی در ساختار چیدمان (layout) داشته باشد. این قابلیت برای طراحی واکنش گرا (responsive) بسیار کاربردی است و به طراح کمک می‌کند تا به سادگی نحوه نمایش عناصر را در اندازه‌های مختلف صفحه تغییر دهد.
نحوه نام گذاری کلاس های Display در بوت استرپ
- کلاس های کمکی (Utility classes) که در تمامی نقاط شکست (breakpoints) از xs تا xxl قابل استفاده هستند، هیچ مخففی برای نشان دادن breakpoint در نام خود ندارند.
- این کلاس‌ها از عرض min-width: 0 به بعد اعمال می‌شوند و به media query محدود نمی‌گردند.
- سایر breakpoints شامل یک مخفف مخصوص به آن breakpoint هستند.
فرمت زیر برای نام گذاری کلاس های display در بوت استرپ استفاده می‌شود:
.d-{value}برای اندازه xs، مانند.d-none..d-{breakpoint}-{value}برای اندازه های sm، md، lg، xl و xxl، مانند.d-lg-noneکه مقدارdisplay: none;را فقط روی صفحه هایی با اندازه lg، xl و xxl اعمال می‌کند.
مقدار {value} می‌تواند یکی از گزینه های زیر باشد:
-
none -
inline -
inline-block -
block -
grid -
inline-grid -
table -
table-cell -
table-row -
flex -
inline-flex
برخی از مقادیری که ویژگی display می‌تواند داشته باشد به شرح زیر هستند:
-
.d-none: این مقدار باعث می‌شود عنصر به‌طور کامل مخفی شود. عنصر نه دیده می‌شود و نه فضایی در چیدمان اشغال می‌کند. -
.d-inline: با استفاده از این مقدار، عنصر مانند یک عنصر درون‌خطی (inline) رفتار می‌کند، به‌طوری که عناصر دیگر می‌توانند در همان خط کنار آن قرار بگیرند. -
.d-block: این مقدار باعث می‌شود عنصر مانند یک عنصر سطح بلوک (block-level) نمایش داده شود؛ یعنی از خط جدید شروع شود و تمام عرض موجود را اشغال کند. -
.d-inline-block: این مقدار ترکیبی از ویژگی‌های inline و block را دارد. عنصر به صورت درون‌خطی نمایش داده می‌شود، اما می‌توان به آن ویژگی‌هایی مانند عرض، ارتفاع و margin اعمال کرد.
بیایید یک مثال از .d-inline را بررسی کنیم:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!DOCTYPE html> <html> <head> <title>Bootstrap - Display</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="container m-3 p-5"> <div class="d-inline m-2 p-4 text-bg-success">d-inline - success</div> <div class="d-inline p-4 text-bg-warning">d-inline - warning</div> </div> </body> </html> |
با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.
بیایید یک مثال از .d-block را بررسی کنیم:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!DOCTYPE html> <html> <head> <title>Bootstrap - Display</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="container mt-3"> <h4>Display - block</h4> <span class="d-block p-4 text-bg-info">d-block used for info</span> <span class="d-block p-4 text-bg-primary">d-block used for primary</span> </div> </body> </html> |
با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.
مخفی کردن عناصر
برای پنهان کردن یک عنصر در بوت استرپ، میتوانید از کلاس .d-none یا یکی از کلاس های نقطه‌گریزی مانند .d-sm-none، .d-md-none و … استفاده کنید.
جدول زیر کلاس‌هایی را نشان می‌دهد که برای پنهان یا قابل مشاهده کردن عناصر در اندازه‌های مختلف صفحه میتوانید استفاده کنید:
| اندازه صفحه | کلاس مورد نیاز |
|---|---|
| مخفی در همه اندازه‌ها | .d-none |
| فقط در xs مخفی باشد | .d-none و .d-sm-block |
| فقط در sm مخفی باشد | .d-sm-none و .d-md-block |
| فقط در md مخفی باشد | .d-md-none و .d-lg-block |
| فقط در lg مخفی باشد | .d-lg-none و .d-xl-block |
| فقط در xl مخفی باشد | .d-xl-none و .d-xxl-block |
| فقط در xxl مخفی باشد | .d-xxl-none |
| قابل نمایش در همه اندازه‌ها | .d-block |
| فقط در xs قابل نمایش باشد | .d-block و .d-sm-none |
| فقط در sm قابل نمایش باشد | .d-none، .d-sm-block، .d-md-none |
| فقط در md قابل نمایش باشد | .d-none، .d-md-block، .d-lg-none |
| فقط در lg قابل نمایش باشد | .d-none، .d-lg-block، .d-xl-none |
| فقط در xl قابل نمایش باشد | .d-none، .d-xl-block، .d-xxl-none |
| فقط در xxl قابل نمایش باشد | .d-none، .d-xxl-block |
lg ببینیم:lg، این عنصر مخفی خواهد شد.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!DOCTYPE html> <html> <head> <title>Bootstrap - Display</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="container mt-3"> <h4>Hide - display</h4> <!--Hide display on smaller than lg--> <div class="d-lg-none bg-warning">Hide on lg (large) and wider screens</div> <div class="d-none d-lg-block bg-info">Visible on screens smaller than xl (extra-large)</div> </div> </body> </html> |
با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.
نمایش در هنگام چاپ (Display in Print)
بوت استرپ این امکان را فراهم کرده است که نمایش عناصر را هنگام چاپ (Print) بهصورت جداگانه کنترل کنید. شما میتوانید با استفاده از کلاسهای کمکی مخصوص چاپ، نحوه نمایش یک عنصر را در نسخه چاپی بهصورت دقیق تنظیم کنید. این کلاس‌ها از همان مقادیر display پشتیبانی میکنند که در کلاس های واکنش گرا با .d-* استفاده می‌شوند.
لیست کلاس های نمایش در هنگام چاپ:
-
.d-print-none -
.d-print-inline -
.d-print-inline-block -
.d-print-block -
.d-print-grid -
.d-print-inline-grid -
.d-print-table -
.d-print-table-row -
.d-print-table-cell -
.d-print-flex -
.d-print-inline-flex
شما میتوانید این کلاس ها را با کلاس های نمایش صفحه (display) ترکیب کنید تا عناصر رفتار متفاوتی در حالت نمایش روی صفحه و چاپ داشته باشند. بیایید یک مثال ببینیم:
نکته: برای مشاهده تغییر رفتار نمایش، لطفاً اندازه صفحه مرورگر را تغییر دهید.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<!DOCTYPE html> <html> <head> <title>Bootstrap - Display</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="container m-3 p-3"> <h4>Print - display</h4> <!--display on print and hide on screen--> <div class="d-none d-print-block bg-primary-subtle p-3">Hide on screen and display on print only</div> <!--display on screen and hide on print--> <div class="d-print-none bg-warning p-3">Hide on print and display on screen only</div> <!--display upto large screen and show always on print--> <div class="d-none d-lg-block d-print-inline bg-danger-subtle p-3">Always display on print and hide up to large screen</div> </div> </body> </html> |
با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.
اگر به دنبال یادگیری گامبهگام این مباحث هستید، پیشنهاد میکنیم به آموزش طراحی سایت با بوت استرپ مراجعه کنید.
راستی! برای دریافت مطالب جدید در کانال تلگرام یا پیج اینستاگرام سورس باران عضو شوید.
- انتشار: ۱۹ تیر ۱۴۰۴
دسته بندی موضوعات
- آموزش ارز دیجیتال
- آموزش برنامه نویسی
- آموزش متنی برنامه نویسی
- اطلاعیه و سایر مطالب
- پروژه برنامه نویسی
- دوره های تخصصی برنامه نویسی
- رپورتاژ
- فیلم های آموزشی
- ++C
- ADO.NET
- Adobe Flash
- Ajax
- AngularJS
- apache
- ARM
- Asp.Net
- ASP.NET MVC
- AVR
- Bootstrap
- CCNA
- CCNP
- CMD
- CSS
- Dreameaver
- EntityFramework
- HTML
- IOS
- jquery
- Linq
- Mysql
- Oracle
- PHP
- PHPMyAdmin
- Rational Rose
- silver light
- SQL Server
- Stimulsoft Reports
- Telerik
- UML
- VB.NET&VB6
- WPF
- Xml
- آموزش های پروژه محور
- اتوکد
- الگوریتم تقریبی
- امنیت
- اندروید
- اندروید استودیو
- بک ترک
- بیسیک فور اندروید
- پایتون
- جاوا
- جاوا اسکریپت
- جوملا
- دلفی
- دوره آموزش Go
- دوره های رایگان پیشنهادی
- زامارین
- سئو
- ساخت CMS
- سی شارپ
- شبکه و مجازی سازی
- طراحی الگوریتم
- طراحی بازی
- طراحی وب
- فتوشاپ
- فریم ورک codeigniter
- فلاتر
- کانستراکت
- کریستال ریپورت
- لاراول
- معماری کامپیوتر
- مهندسی اینترنت
- هوش مصنوعی
- یونیتی
- کتاب های آموزشی
- Android
- ASP.NET
- AVR
- LINQ
- php
- Workflow
- اچ تی ام ال
- بانک اطلاعاتی
- برنامه نویسی سوکت
- برنامه نویسی موبایل
- پاسکال
- پایان نامه
- پایتون
- جاوا
- جاوا اسکریپت
- جی کوئری
- داده کاوی
- دلفی
- رباتیک
- سئو
- سایر کتاب ها
- سخت افزار
- سی اس اس
- سی پلاس پلاس
- سی شارپ
- طراحی الگوریتم
- فتوشاپ
- مقاله
- مهندسی نرم افزار
- هک و امنیت
- هوش مصنوعی
- ویژوال بیسیک
- نرم افزار و ابزار برنامه نویسی
- وردپرس
