آموزش ابزارهای پاسخگو در بوت استرپ
آموزش ابزارهای پاسخگو در بوت استرپ
در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش ابزارهای پاسخگو در بوت استرپ خواهیم پرداخت.
بوت استرپ کلاسهای کمکی برای توسعه سریعتر موبایل پسند ارائه می دهد. از این موارد می توان برای نمایش و پنهان کردن محتوا توسط دستگاه از طریق جستجوی رسانه ، همراه با دستگاه های بزرگ ، کوچک و متوسط استفاده کرد.
از این موارد کم استفاده کنید و از ایجاد نسخه های کاملاً متفاوت از یک سایت خودداری کنید. ابزارهای پاسخگو در حال حاضر فقط برای تغییر وضعیت بلوک و جدول در دسترس هستند.
| کلاس ها | دستگاه ها |
|---|---|
| visible-xs. | Extra small (less than 768px) visible |
| visible-sm. | Small (up to 768 px) visible |
| visible-md. | Medium (768 px to 991 px) visible |
| visible-lg. | Larger (992 px and above) visible |
| hidden-xs. | Extra small (less than 768px) hidden |
| hidden-sm. | Small (up to 768 px) hidden |
| hidden-md. | Medium (768 px to 991 px) hidden |
| hidden-lg. | Larger (992 px and above) hidden |
کلاس های چاپی
جدول زیر کلاسهای چاپ را لیست می کند. از این موارد برای تغییر وضعیت مطالب برای چاپ استفاده کنید.
| کلاس ها | چاپ |
|---|---|
| .visible-print | قابل مشاهده |
| .hidden-print | فقط برای مرورگر قابل مشاهده است تا چاپ نشود. |
مثال
مثال زیر استفاده از کلاسهای کمکی ذکر شده در بالا را نشان می دهد. مرورگر خود را تغییر اندازه دهید یا مثال را در دستگاه های مختلف بارگیری کنید تا کلاسهای ابزار پاسخگو را آزمایش کنید.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
<div class = "container" style = "padding: 40px;"> <div class = "row visible-on"> <div class = "col-xs-6 col-sm-3" style = "background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> <span class = "hidden-xs">Extra small</span> <span class = "visible-xs">✔ Visible on x-small</span> </div> <div class = "col-xs-6 col-sm-3" style = "background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> <span class = "hidden-sm">Small</span> <span class = "visible-sm">✔ Visible on small</span> </div> <div class = "clearfix visible-xs"></div> <div class = "col-xs-6 col-sm-3" style = "background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> <span class = "hidden-md">Medium</span> <span class = "visible-md">✔ Visible on medium</span> </div> <div class = "col-xs-6 col-sm-3" style = "background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> <span class = "hidden-lg">Large</span> <span class = "visible-lg">✔ Visible on large</span> </div> </div> </div> |
علامت های چک نشان می دهد که این عنصر در در نمای فعلی شما قابل مشاهده است
لیست جلسات قبل آموزش بوت استرپ
- آموزش بوت استرپ
- بررسی اجمالی بوت استرپ
- آموزش راه اندازی بوت استرپ
- آموزش سیستم شبکه در بوت استرپ
- بررسی اجمالی CSS در بوت استرپ
- آموزش تایپوگرافی در بوت استرپ
- آموزش کد در بوت استرپ
- آموزش جدول در بوت استرپ
- آموزش فرم ها در بوت استرپ
- آموزش دکمه ها در بوت استرپ
- آموزش تصاویر در بوت استرپ
- آموزش کلاس های کمکی در بوت استرپ
.svg)
دیدگاه شما