NEW BOT Телеграм, страница

InstaDevs

ساده ترین روش های نصب بوتسترپ

1.استفاده از CDN:
برای استفاده از Bootstrap از طریق CDN (Content Delivery Network)، می‌تونید لینک‌های CDN Bootstrap رو به صفحه‌ی وب خودتون اضافه کنید. به این صورت نیازی به دانلود و نصب Bootstrap بر روی سرور خودتون ندارید و می‌تونید به راحتی از نسخه‌های جدید Bootstrap استفاده کنید. مثال:

<noscript src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js"></noscript>

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">

2.استفاده از پکیج منیجر:

برای این روش، شما می‌تونین از ابزارهای پکیج منیجر مثل npm، yarn، Bower و Composer استفاده کنید که Bootstrap رو به پروژه خودتون اضافه می‌کنه. مثال:

- نصب با npm:
npm install bootstrap

- نصب با Bower:
bower install bootstrap

- نصب با Composer:
composer require twbs/bootstrap

#Bootstrap

Channel | Group | YouTube

👍5

635 views<𝘴𝘱𝘢𝘯 𝘥𝘢𝘵𝘢-𝘵𝘺𝘱𝘦="𝘩𝘶𝘮𝘢𝘯" 𝘰𝘯𝘴𝘩𝘰𝘸="𝘥𝘢𝘯𝘤𝘦()" 𝘴𝘵𝘺𝘭𝘦="𝘥𝘪𝘴𝘱𝘭𝘢𝘺: 𝘨𝘳𝘦𝘦𝘥!" ᴄʟᴀꜱꜱ="𝘱𝘴𝘺𝘤𝘩𝘰𝘭𝘰𝘨𝘺" >𝘈𝘭𝘪<𝘴𝘱𝘢𝘯 >, edited 07:00

InstaDevs

0:13

This media is not supported in your browser

VIEW IN TELEGRAM

چتو دلت میاد؟

#meme_video

Channel | Group | YouTube

💔8🗿3

621 views<𝘴𝘱𝘢𝘯 𝘥𝘢𝘵𝘢-𝘵𝘺𝘱𝘦="𝘩𝘶𝘮𝘢𝘯" 𝘰𝘯𝘴𝘩𝘰𝘸="𝘥𝘢𝘯𝘤𝘦()" 𝘴𝘵𝘺𝘭𝘦="𝘥𝘪𝘴𝘱𝘭𝘢𝘺: 𝘨𝘳𝘦𝘦𝘥!" ᴄʟᴀꜱꜱ="𝘱𝘴𝘺𝘤𝘩𝘰𝘭𝘰𝘨𝘺" >𝘈𝘭𝘪<𝘴𝘱𝘢𝘯 >, 11:44

InstaDevs

10 روش برای تسلط بر Tailwind CSS مثل یک پرو! پارت ۴ 7. بهینه‌سازی دارک مود فریمورک Tailwind CSS تو ایجاد نسخه‌ی دارک مود طراحی‌های شما بسیار عالی عمل میکنه. از ویژگی dark: میتونین برای اعمال استایل‌های خاص برای کاربران کقتی که از طریق جاوا اسکریپت حالت…

10 روش برای تسلط بر Tailwind CSS مثل یک پرو!

پارت آخر

۹. درک دستورالعمل @apply

دستورالعمل @apply بهتون اجازه می‌ده که کلاس‌های کمکی قابل استفاده مجددی رو تعریف کنین و اونها رو تو CSS کاستومایز خودتون یا کومپوننت‌ها اعمال کنین، یه مثالش رو همین پایین براتون میزارم :

<style>
.btn {
@apply px-4 py-2 bg-blue-500 text-white rounded;
}
</style>

<button class="btn">دکمه طراحی شده</button>

۱۰. همیشه اپدیت باشید!

فریمورک Tailwind CSS ی هپروژه فعاله و ویژگی‌ها و بهبودهای جدید رو به طور منظم منتشر میکنه. با داکیومنت رسمی، پست‌های وبلاگ و بحث‌های انجمن از آخرین و بهترین ویژگی‌های اون استفاده کنین و به روز باشین.!
#Tailwind
منبع: لینک مقاله در مدیوم

Channel | Group | YouTube

🔥7👍1

646 views<𝘴𝘱𝘢𝘯 𝘥𝘢𝘵𝘢-𝘵𝘺𝘱𝘦="𝘩𝘶𝘮𝘢𝘯" 𝘰𝘯𝘴𝘩𝘰𝘸="𝘥𝘢𝘯𝘤𝘦()" 𝘴𝘵𝘺𝘭𝘦="𝘥𝘪𝘴𝘱𝘭𝘢𝘺: 𝘨𝘳𝘦𝘦𝘥!" ᴄʟᴀꜱꜱ="𝘱𝘴𝘺𝘤𝘩𝘰𝘭𝘰𝘨𝘺" >𝘈𝘭𝘪<𝘴𝘱𝘢𝘯 >, edited 16:21

InstaDevs

ولکام دو مای یودوب جنل🗿

#meme_image

Channel | Group | YouTube

🤣36😁3🗿1

621 views<𝘴𝘱𝘢𝘯 𝘥𝘢𝘵𝘢-𝘵𝘺𝘱𝘦="𝘩𝘶𝘮𝘢𝘯" 𝘰𝘯𝘴𝘩𝘰𝘸="𝘥𝘢𝘯𝘤𝘦()" 𝘴𝘵𝘺𝘭𝘦="𝘥𝘪𝘴𝘱𝘭𝘢𝘺: 𝘨𝘳𝘦𝘦𝘥!" ᴄʟᴀꜱꜱ="𝘱𝘴𝘺𝘤𝘩𝘰𝘭𝘰𝘨𝘺" >𝘈𝘭𝘪<𝘴𝘱𝘢𝘯 >, 17:36

InstaDevs

آخرت حق😎

#meme_image

Channel | Group | YouTube

😁33

635 views<𝘴𝘱𝘢𝘯 𝘥𝘢𝘵𝘢-𝘵𝘺𝘱𝘦="𝘩𝘶𝘮𝘢𝘯" 𝘰𝘯𝘴𝘩𝘰𝘸="𝘥𝘢𝘯𝘤𝘦()" 𝘴𝘵𝘺𝘭𝘦="𝘥𝘪𝘴𝘱𝘭𝘢𝘺: 𝘨𝘳𝘦𝘦𝘥!" ᴄʟᴀꜱꜱ="𝘱𝘴𝘺𝘤𝘩𝘰𝘭𝘰𝘨𝘺" >𝘈𝘭𝘪<𝘴𝘱𝘢𝘯 >, 05:30

InstaDevs

تو این عکس میتونین انواع مختلف مقدار دهی پراپرتی padding رو ببینین👌

#CSS

Channel | Group | YouTube

👍11

709 views<𝘴𝘱𝘢𝘯 𝘥𝘢𝘵𝘢-𝘵𝘺𝘱𝘦="𝘩𝘶𝘮𝘢𝘯" 𝘰𝘯𝘴𝘩𝘰𝘸="𝘥𝘢𝘯𝘤𝘦()" 𝘴𝘵𝘺𝘭𝘦="𝘥𝘪𝘴𝘱𝘭𝘢𝘺: 𝘨𝘳𝘦𝘦𝘥!" ᴄʟᴀꜱꜱ="𝘱𝘴𝘺𝘤𝘩𝘰𝘭𝘰𝘨𝘺" >𝘈𝘭𝘪<𝘴𝘱𝘢𝘯 >, 07:30

InstaDevs

Aaron Smith - Dancin (KRONO Remix) - Lyrics

7clouds

عاقا یه اسکی از مهرشاد بریم😎

Mesmerising...
Now on -1k-

بقول معروف حد رو رد کردیم🔥
دیگه وقته کارای بزرگه...
خبرای بزرگی تو راهه، منتظرمون باشین

Channel | Group | YouTube

🔥8👍3

618 views<𝘴𝘱𝘢𝘯 𝘥𝘢𝘵𝘢-𝘵𝘺𝘱𝘦="𝘩𝘶𝘮𝘢𝘯" 𝘰𝘯𝘴𝘩𝘰𝘸="𝘥𝘢𝘯𝘤𝘦()" 𝘴𝘵𝘺𝘭𝘦="𝘥𝘪𝘴𝘱𝘭𝘢𝘺: 𝘨𝘳𝘦𝘦𝘥!" ᴄʟᴀꜱꜱ="𝘱𝘴𝘺𝘤𝘩𝘰𝘭𝘰𝘨𝘺" >𝘈𝘭𝘪<𝘴𝘱𝘢𝘯 >, edited 15:36

InstaDevs

اقا چطور با استفاده از پراپرتی border تو css یه مثلث طراحی کنیم؟🤔
کد:

.upwards-arrow { width: 0; height: 0; border-left: 20px solid transparent; border-right: 20px solid transparent; border-bottom: 20px solid crimson; }

#CSS
#CSS_Tricks

Channel | Group | YouTube

🔥6👍3

668 views<𝘴𝘱𝘢𝘯 𝘥𝘢𝘵𝘢-𝘵𝘺𝘱𝘦="𝘩𝘶𝘮𝘢𝘯" 𝘰𝘯𝘴𝘩𝘰𝘸="𝘥𝘢𝘯𝘤𝘦()" 𝘴𝘵𝘺𝘭𝘦="𝘥𝘪𝘴𝘱𝘭𝘢𝘺: 𝘨𝘳𝘦𝘦𝘥!" ᴄʟᴀꜱꜱ="𝘱𝘴𝘺𝘤𝘩𝘰𝘭𝘰𝘨𝘺" >𝘈𝘭𝘪<𝘴𝘱𝘢𝘯 >, edited 16:38

InstaDevs

حالا ببینیم کانفیگم وصل میشه...💔

#meme_image

Channel | Group | YouTube

😁11👍3

741 views<𝘴𝘱𝘢𝘯 𝘥𝘢𝘵𝘢-𝘵𝘺𝘱𝘦="𝘩𝘶𝘮𝘢𝘯" 𝘰𝘯𝘴𝘩𝘰𝘸="𝘥𝘢𝘯𝘤𝘦()" 𝘴𝘵𝘺𝘭𝘦="𝘥𝘪𝘴𝘱𝘭𝘢𝘺: 𝘨𝘳𝘦𝘦𝘥!" ᴄʟᴀꜱꜱ="𝘱𝘴𝘺𝘤𝘩𝘰𝘭𝘰𝘨𝘺" >𝘈𝘭𝘪<𝘴𝘱𝘢𝘯 >, 06:09

InstaDevs

0:14

This media is not supported in your browser

VIEW IN TELEGRAM

طراحی color Picker تنها با استفاده از HTML 😎

#HTML

Channel | Group | YouTube

🔥7

680 views<𝘴𝘱𝘢𝘯 𝘥𝘢𝘵𝘢-𝘵𝘺𝘱𝘦="𝘩𝘶𝘮𝘢𝘯" 𝘰𝘯𝘴𝘩𝘰𝘸="𝘥𝘢𝘯𝘤𝘦()" 𝘴𝘵𝘺𝘭𝘦="𝘥𝘪𝘴𝘱𝘭𝘢𝘺: 𝘨𝘳𝘦𝘦𝘥!" ᴄʟᴀꜱꜱ="𝘱𝘴𝘺𝘤𝘩𝘰𝘭𝘰𝘨𝘺" >𝘈𝘭𝘪<𝘴𝘱𝘢𝘯 >, 07:29

InstaDevs

عالی و قوی😎

#meme_image

Channel | Group | YouTube

😁13👍3

738 views<𝘴𝘱𝘢𝘯 𝘥𝘢𝘵𝘢-𝘵𝘺𝘱𝘦="𝘩𝘶𝘮𝘢𝘯" 𝘰𝘯𝘴𝘩𝘰𝘸="𝘥𝘢𝘯𝘤𝘦()" 𝘴𝘵𝘺𝘭𝘦="𝘥𝘪𝘴𝘱𝘭𝘢𝘺: 𝘨𝘳𝘦𝘦𝘥!" ᴄʟᴀꜱꜱ="𝘱𝘴𝘺𝘤𝘩𝘰𝘭𝘰𝘨𝘺" >𝘈𝘭𝘪<𝘴𝘱𝘢𝘯 >, 11:30

InstaDevs

دوستان میتونین تو این پست، انواع بریک‌پوینت ها رو برای اسکرین های مختلف ببینین 👨‍💻

#CSS

Channel | Group | YouTube

👏13❤2👍1

878 views<𝘴𝘱𝘢𝘯 𝘥𝘢𝘵𝘢-𝘵𝘺𝘱𝘦="𝘩𝘶𝘮𝘢𝘯" 𝘰𝘯𝘴𝘩𝘰𝘸="𝘥𝘢𝘯𝘤𝘦()" 𝘴𝘵𝘺𝘭𝘦="𝘥𝘪𝘴𝘱𝘭𝘢𝘺: 𝘨𝘳𝘦𝘦𝘥!" ᴄʟᴀꜱꜱ="𝘱𝘴𝘺𝘤𝘩𝘰𝘭𝘰𝘨𝘺" >𝘈𝘭𝘪<𝘴𝘱𝘢𝘯 >, 16:19

InstaDevs

فیچر های جدید CSS از 2023 ---> تا 2024

-پارت 1-

1_ اضافه شدن Aspect Ratio

پشتیبانی از aspect ratio بدون شک یه ارتقای قابل توجه هست. قبلاً حفظ Aspect Ratio ها معمولاً شامل روش‌های میانبر و نامناسب مثله استفاده از ترفندهای پدینگ (padding hacks) بود که، هر چند کاربردی بودن اما به هر حال به کد پیچیدگی غیرضروری میدادن. ورود ویژگی (aspect-ratio) به دولوپرا این امکان را می‌ده که این پراپرتی رو به صورت مستقیم تعریف کنیم، که نه تنها کد رو ساده‌تر می‌کنه بلکه همچنین اطمینان حاصل می‌کند که رفتار قابل پیش‌بینی‌تری تو اندازه‌های مختلف صفحه داشته باشیم. این پشتیبانی native برای طراحی رسپانسیو مفیده و احتمالاً زمان توسعه و تست رو کاهش میده.

مثال:

aspect-ratio: 1 / 1;
aspect-ratio: 1;

/* fallback to 'auto' for replaced elements */
aspect-ratio: auto 3/4;
aspect-ratio: 9/6 auto;

/* Global values */
aspect-ratio: inherit;
aspect-ratio: initial;
aspect-ratio: revert;
aspect-ratio: revert-layer;
aspect-ratio: unset;

#CSS

Channel | Group | YouTube

🔥11👍4❤2

783 views<𝘴𝘱𝘢𝘯 𝘥𝘢𝘵𝘢-𝘵𝘺𝘱𝘦="𝘩𝘶𝘮𝘢𝘯" 𝘰𝘯𝘴𝘩𝘰𝘸="𝘥𝘢𝘯𝘤𝘦()" 𝘴𝘵𝘺𝘭𝘦="𝘥𝘪𝘴𝘱𝘭𝘢𝘺: 𝘨𝘳𝘦𝘦𝘥!" ᴄʟᴀꜱꜱ="𝘱𝘴𝘺𝘤𝘩𝘰𝘭𝘰𝘨𝘺" >𝘈𝘭𝘪<𝘴𝘱𝘢𝘯 >, edited 05:31

InstaDevs

مخصوصا وقتی پای پروژه دلاری میاد وسط...

#meme_image

پ.ن: قصدمون شوخیه دوستان ❤️🙏

Channel | Group | YouTube

💔17👍3❤1🥴1

749 views<𝘴𝘱𝘢𝘯 𝘥𝘢𝘵𝘢-𝘵𝘺𝘱𝘦="𝘩𝘶𝘮𝘢𝘯" 𝘰𝘯𝘴𝘩𝘰𝘸="𝘥𝘢𝘯𝘤𝘦()" 𝘴𝘵𝘺𝘭𝘦="𝘥𝘪𝘴𝘱𝘭𝘢𝘺: 𝘨𝘳𝘦𝘦𝘥!" ᴄʟᴀꜱꜱ="𝘱𝘴𝘺𝘤𝘩𝘰𝘭𝘰𝘨𝘺" >𝘈𝘭𝘪<𝘴𝘱𝘢𝘯 >, 12:19

InstaDevs

0:06

This media is not supported in your browser

VIEW IN TELEGRAM

موس رو کنار بزار!

شرت‌کات های VS Code
- پارت 1 -

Channel | Group | YouTube

👍11

835 views<𝘴𝘱𝘢𝘯 𝘥𝘢𝘵𝘢-𝘵𝘺𝘱𝘦="𝘩𝘶𝘮𝘢𝘯" 𝘰𝘯𝘴𝘩𝘰𝘸="𝘥𝘢𝘯𝘤𝘦()" 𝘴𝘵𝘺𝘭𝘦="𝘥𝘪𝘴𝘱𝘭𝘢𝘺: 𝘨𝘳𝘦𝘦𝘥!" ᴄʟᴀꜱꜱ="𝘱𝘴𝘺𝘤𝘩𝘰𝘭𝘰𝘨𝘺" >𝘈𝘭𝘪<𝘴𝘱𝘢𝘯 >, 16:09

InstaDevs

آخه حس میکنم اینور مارجینش بیشتره بخدا....

#meme_image

Channel | Group | YouTube

👍16

752 views<𝘴𝘱𝘢𝘯 𝘥𝘢𝘵𝘢-𝘵𝘺𝘱𝘦="𝘩𝘶𝘮𝘢𝘯" 𝘰𝘯𝘴𝘩𝘰𝘸="𝘥𝘢𝘯𝘤𝘦()" 𝘴𝘵𝘺𝘭𝘦="𝘥𝘪𝘴𝘱𝘭𝘢𝘺: 𝘨𝘳𝘦𝘦𝘥!" ᴄʟᴀꜱꜱ="𝘱𝘴𝘺𝘤𝘩𝘰𝘭𝘰𝘨𝘺" >𝘈𝘭𝘪<𝘴𝘱𝘢𝘯 >, edited 06:30

InstaDevs

فیچر های جدید CSS از 2023 ---> تا 2024 -پارت 1- 1_ اضافه شدن Aspect Ratio پشتیبانی از aspect ratio بدون شک یه ارتقای قابل توجه هست. قبلاً حفظ Aspect Ratio ها معمولاً شامل روش‌های میانبر و نامناسب مثله استفاده از ترفندهای پدینگ (padding hacks) بود که، هر…

فیچر های جدید CSS از 2023 ---> تا 2024

-پارت 2-

2- اندازه ویوپورت

یکی از مسائل طولانی‌مدت تو CSS، ناپیوستگی واحدهای ویوپورت ("vh"، "vw"، و غیره) تو مرورگرها و دستگاه‌های مختلف بوده. واحدهای پویای ویوپورت تو CSS، اینجا حل این مسأله رو بر عهده گرفتن، با این امکان که کنترل دقیق‌تری روی نحوه رندر شدن المان‌ها فراهم می‌کنن و مشکلات مرورگر رو کاهش میدن. مثلا، واحدهای "dvh" و "dvw" که اشاره کردیم، ناحیه قابل مشاهده از ویوپورت رو در نظر می‌گیرن، که ساخت طرح‌هایی که با تعامل کاربرا مثله اسکرول یا زوم‌کردن سازگار باشن رو آسون تر می‌کنه.

تو سال 2023، واحدهای پویای ویوپورت تو اکثر مرورگرهای اصلی از جمله Chrome، Firefox و Safari پشتیبانی میشه. با این حال، برخی از مرورگرهای قدیمی و موبایل ممکنه که هنوز پشتیبانی محدودی داشته باشن. پس، استراتژی‌هایی مثله استفاده از توابع "calc()" با فالبک ها، برای سازگاری های گسترده‌تر استفاده می‌شن.

برای مثال به این کد رو ببینید:

.header {
    height: 50dvh; /* 50% از ارتفاع نمای قابل مشاهده */

    font-size: calc(16px + 3dvw); /* اندازه ابتدایی 16 پیکسل + 3% از عرض نمای قابل مشاهده */
    background-color: #f7f7f7;
}

در اینجا، ارتفاع ".header" نصف ارتفاع صفحه‌ی نمایش استفاده شده با "dvh" و فونت سایز از 16 پیکسل شروع و با توجه به عرض صفحه به "dvw" افزایش پیدا میکنه. به این ترتیب، می‌تونیم از واحدهای پویای ویوپورت برای طرح‌های انعطاف‌پذیر استفاده کنیم.

Channel | Group | YouTube

🔥7👍2

830 views<𝘴𝘱𝘢𝘯 𝘥𝘢𝘵𝘢-𝘵𝘺𝘱𝘦="𝘩𝘶𝘮𝘢𝘯" 𝘰𝘯𝘴𝘩𝘰𝘸="𝘥𝘢𝘯𝘤𝘦()" 𝘴𝘵𝘺𝘭𝘦="𝘥𝘪𝘴𝘱𝘭𝘢𝘺: 𝘨𝘳𝘦𝘦𝘥!" ᴄʟᴀꜱꜱ="𝘱𝘴𝘺𝘤𝘩𝘰𝘭𝘰𝘨𝘺" >𝘈𝘭𝘪<𝘴𝘱𝘢𝘯 >, edited 11:30

InstaDevs

0:06

This media is not supported in your browser

VIEW IN TELEGRAM

موس رو کنار بزار!

شرت‌کات های VS Code
- پارت 2 -

Channel | Group | YouTube

👍11❤2😁2👀1

877 views<𝘴𝘱𝘢𝘯 𝘥𝘢𝘵𝘢-𝘵𝘺𝘱𝘦="𝘩𝘶𝘮𝘢𝘯" 𝘰𝘯𝘴𝘩𝘰𝘸="𝘥𝘢𝘯𝘤𝘦()" 𝘴𝘵𝘺𝘭𝘦="𝘥𝘪𝘴𝘱𝘭𝘢𝘺: 𝘨𝘳𝘦𝘦𝘥!" ᴄʟᴀꜱꜱ="𝘱𝘴𝘺𝘤𝘩𝘰𝘭𝘰𝘨𝘺" >𝘈𝘭𝘪<𝘴𝘱𝘢𝘯 >, 16:30

InstaDevs

تجربه اشو داشتین؟🗿

#meme_image

Channel | Group | YouTube

🗿17👍6

734 views<𝘴𝘱𝘢𝘯 𝘥𝘢𝘵𝘢-𝘵𝘺𝘱𝘦="𝘩𝘶𝘮𝘢𝘯" 𝘰𝘯𝘴𝘩𝘰𝘸="𝘥𝘢𝘯𝘤𝘦()" 𝘴𝘵𝘺𝘭𝘦="𝘥𝘪𝘴𝘱𝘭𝘢𝘺: 𝘨𝘳𝘦𝘦𝘥!" ᴄʟᴀꜱꜱ="𝘱𝘴𝘺𝘤𝘩𝘰𝘭𝘰𝘨𝘺" >𝘈𝘭𝘪<𝘴𝘱𝘢𝘯 >, 06:30

About

Blog

Apps

Platform