كيفية استخدام نقاط التوقف واستعلامات الوسائط مع مقطع الخلفية في Tailwind

أثناء إنشاء أقسام مختلفة في صفحة ويب، يمكن أن تكون هناك سيناريوهات يحتاج فيها المبرمج إلى قص الخلفية أو تعديلها لتجميع المحتوى. تساعد هذه المنهجية في إدارة المحتوى الملحق بشكل فعال بالإضافة إلى تصميم أقسام الصفحة المختلفة.

تتناول هذه المدونة المفاهيم الأساسية التالية:

كيفية استخدام/استخدام نقاط التوقف واستعلامات الوسائط مع مقطع الخلفية في Tailwind؟
تطبيق نقاط التوقف مع مقطع الخلفية في Tailwind.
تطبيق استعلامات الوسائط باستخدام مقطع الخلفية في Tailwind.

كيفية استخدام/استخدام نقاط التوقف واستعلامات الوسائط مع مقطع الخلفية في Tailwind؟

ال ' بغ-كليب-{الكلمة الرئيسية} تُستخدم الأداة المساعدة لتعيين المربع المحيط بخلفية العنصر. يمكن استخدام هذه الأداة المساعدة مع خصائص متعددة، مثل ' صندوق الحشو '،' مربع الحدود '،' مربع المحتوى '، و ' مربع الكتابة '.

المثال 1: تطبيق نقاط التوقف باستخدام مقطع الخلفية في Tailwind

يطبق هذا المثال نقاط التوقف مع مقطع الخلفية عبر ' بغ-كليب-{الكلمة الرئيسية} ' فائدة مع ' دكتور في الطب 'أي: شاشات متوسطة الحجم و' إل جي 'أي فئات الشاشة كبيرة الحجم:

< لغة البرمجة >
< رأس >
< ميتا مجموعة محارف = 'utf-8' >
< ميتا اسم = 'إطار العرض' محتوى = 'العرض=عرض الجهاز، المقياس الأولي=1' >
< النصي src = 'https://cdn.tailwindcss.com' >< / النصي >
< / رأس >
< جسم >
< منطقة النص فصل = 'bg-clip-border p-6 bg-yellow-500 border-4 border-red-500 الحدود المتقطعة md:bg-clip-text lg:bg-clip-padding' > هذا هو Tailwind CSS < / منطقة النص >
< / جسم >
< / لغة البرمجة >

وفقًا لسطور الكود هذه:

أولاً، حدد مسار CDN للاستفادة من وظائف Tailwind.
ثم قم بإنشاء عنصر '' يشتمل على ' <strong> بغ-كليب-{الكلمة الرئيسية}</strong> 'الأداة المساعدة بحيث يتم ضبطها على 'الحدود' على الشاشات الصغيرة الحجم وضبطها على ' <strong> bg-مقطع-نص</strong> ' و ' <strong> bg-مقطع الحشو</strong> 'المرافق على الشاشات المتوسطة والكبيرة الحجم عبر' <strong> دكتور في الطب</strong> ' و ' <strong> إل جي</strong> 'الفصول على التوالي.</li> </ul> <p> <strong> ملحوظة:</strong> إن تحديد الأداة المساعدة هو ببساطة نفس تحديدها في ' <strong> سم</strong> ' فصل.</p><hr> <br /> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-4062866992167421" crossorigin="anonymous"></script>  <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-4062866992167421" data-ad-slot="9858463164" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><br /> <hr> <p> <strong> انتاج |</strong> </p> <p> <img class="alignnone wp-image-392117 size-full" alt="" src="https://softoban.com/img/other/ED/how-to-use-breakpoints-and-media-queries-with-background-clip-in-tailwind-1.gif"></p> <br /> <ins class="staticpubads89354" data-sizes-desktop="728x90,750x100,750x200,750x300" data-sizes-mobile="300x250,336x280,360x300" data-slot="5"></ins><br /> <p> تشير هذه النتيجة إلى أنه عند توسيع حجم الشاشة، يتم قص الخلفية وفقًا لذلك.</p> <h2 id="c"> <strong> المثال 2: تطبيق استعلامات الوسائط باستخدام مقطع الخلفية في Tailwind</strong> </h2> <p> يطبق العرض التوضيحي للكود التالي استعلامات الوسائط مع 'مقطع الخلفية' عبر ' <strong> @وسائط</strong> 'القاعدة والمعلمة المحددة:</p> <!DOCTYPE html> <br> < <a href="http://december.com/html/4/element/html.html"><span class="kw2"> لغة البرمجة</span></a> > <br> < <a href="http://december.com/html/4/element/head.html"><span class="kw2"> رأس</span></a> > <br> < <a href="http://december.com/html/4/element/meta.html"><span class="kw2"> ميتا</span></a> <span class="kw3"> مجموعة محارف</span><span class="sy0"> =</span><span class="st0"> 'utf-8'</span> > <br> < <a href="http://december.com/html/4/element/meta.html"><span class="kw2"> ميتا</span></a> <span class="kw3"> اسم</span><span class="sy0"> =</span><span class="st0"> 'إطار العرض'</span> <span class="kw3"> محتوى</span><span class="sy0"> =</span><span class="st0"> 'العرض=عرض الجهاز، المقياس الأولي=1'</span> > <br> < <a href="http://december.com/html/4/element/script.html"><span class="kw2"> النصي</span></a> <span class="kw3"> src</span><span class="sy0"> =</span><span class="st0"> 'https://cdn.tailwindcss.com'</span> ><<span class="sy0"> /</span> <a href="http://december.com/html/4/element/script.html"><span class="kw2"> النصي</span></a> > <br> <<span class="sy0"> /</span> <a href="http://december.com/html/4/element/head.html"><span class="kw2"> رأس</span></a> > <br> < <a href="http://december.com/html/4/element/body.html"><span class="kw2"> جسم</span></a> > <br> < <a href="http://december.com/html/4/element/textarea.html"><span class="kw2"> منطقة النص</span></a> <span class="kw3"> فصل</span><span class="sy0"> =</span><span class="st0"> 'p-6 bg-أصفر-500 حدود-4 حدود-أحمر-500 حدود متقطعة'</span> <span class="kw3"> بطاقة تعريف</span><span class="sy0"> =</span><span class="st0"> 'درجة حرارة'</span> >هذا هو Tailwind CSS<<span class="sy0"> /</span> <a href="http://december.com/html/4/element/textarea.html"><span class="kw2"> منطقة النص</span></a> > <br> <<span class="sy0"> /</span> <a href="http://december.com/html/4/element/body.html"><span class="kw2"> جسم</span></a> > <br> < <a href="http://december.com/html/4/element/style.html"><span class="kw2"> أسلوب</span></a> <span class="kw3"> يكتب</span><span class="sy0"> =</span><span class="st0"> 'النص / المغلق'</span> > <br> #درجة حرارة<span class="br0"> {</span> <br> مقطع الخلفية: مربع الحدود؛ <br> <span class="br0"> }</span> <br> @<span class="kw3"> وسائط</span> <span class="br0"> (</span> الأعلى-<span class="kw3"> عرض</span> :500 بكسل<span class="br0"> )</span><span class="br0"> {</span> <br> #درجة حرارة<span class="br0"> {</span> <br> مقطع الخلفية: مربع الحشو؛ <br> <span class="br0"> }</span><span class="br0"> }</span> <br> <<span class="sy0"> /</span> <a href="http://december.com/html/4/element/style.html"><span class="kw2"> أسلوب</span></a> > <br> <<span class="sy0"> /</span> <a href="http://december.com/html/4/element/html.html"><span class="kw2"> لغة البرمجة</span></a> ><p> في هذا المقتطف من الكود:</p> <ul> <li> كرر منهجيات دمج مسار Tailwind CDN وإنشاء عنصر '<textarea>'.</li> <li> الآن، في كود CSS، حدد الإعداد الافتراضي ' <strong> مقطع الخلفية</strong> 'الملكية باعتبارها' <strong> مربع الحدود</strong> '.</li> <li> وبعد ذلك قم بتنفيذ ' <strong> @وسائط</strong> ' مع المعلمة المحددة بحيث طالما أن عرض الشاشة يساوي '500' بكسل، فإن ' <strong> مقطع الخلفية</strong> 'تم تعيين الخاصية على' <strong> صندوق الحشو</strong> '.</li> </ul> <p> <strong> انتاج |</strong> </p> <p> <img class="alignnone wp-image-392118 size-full" alt="" src="https://softoban.com/img/other/ED/how-to-use-breakpoints-and-media-queries-with-background-clip-in-tailwind-2.gif"></p> <p> من هذه النتيجة، يمكن التحقق من أن مقطع الخلفية قد تم نقله وفقًا لعرض الشاشة المتغير.</p> <h2> <strong> خاتمة</strong> </h2> <p> يمكن استخدام مقطع الخلفية مع نقاط توقف Tailwind واستعلامات الوسائط عبر ' <strong> بغ-كليب-{الكلمة الرئيسية}</strong> ' فائدة مع ' <strong> دكتور في الطب</strong> ' أو ' <strong> إل جي</strong> 'الفصول، أو عبر' <strong> @وسائط</strong> ' قاعدة. يمكن تعيين الكلمة الرئيسية على 'مربع الحشو' و'مربع الحدود' و'مربع المحتوى' و'مربع النص' والمزيد. في هذا الدليل، أوضحنا استخدام نقاط التوقف واستعلامات الوسائط مع مقطع الخلفية في Tailwind.</p> </article> <div class="d-flex justify-content-center"> <script type="text/javascript">(function() { if (window.pluso)if (typeof window.pluso.start == "function") return; if (window.ifpluso==undefined) { window.ifpluso = 1; var d = document, s = d.createElement('script'), g = 'getElementsByTagName'; s.type = 'text/javascript'; s.charset='UTF-8'; s.async = true; s.src = ('https:' == window.location.protocol ? 'https' : 'http') + '://share.pluso.ru/pluso-like.js'; var h=d[g]('body')[0]; h.appendChild(s); }})();</script> <div class="pluso" data-background="transparent" data-options="big,round,line,horizontal,nocounter,theme=06" data-services="facebook,twitter,email,print"></div> </div> <div class="tag-widget post-tag-container mb-5 mt-5"> <div class="tagcloud"> <a href="/akhr/" class="tag-cloud-link">آخر</a> </div> </div> </div> </div> <div class="col-lg-4 sidebar ftco-animate bg-light pt-5"> <div class="sidebar-box ftco-animate"> <h3 class="sidebar-heading">فئة</h3> <ul class="categories"> <li> <a href="/raspberry-pi/">فطيرة التوت</a> </li><li> <a href="/ethernet/">إيثرنت</a> </li><li> <a href="/other/">آخر</a> </li><li> <a href="/nano/">نانو</a> </li><li> <a href="/zoom/">تكبير</a> </li><li> <a href="/cinnamon/">قرفة</a> </li><li> <a href="/reviews/">المراجعات</a> </li><li> <a href="/zorinos/">Zorinos</a> </li><li> <a href="/radio/">مذياع</a> </li><li> <a href="/minecraft/">ماين كرافت</a> </li><li> <a href="/ssh/">Ssh</a> </li><li> <a href="/openvas/">Openvas</a> </li><li> <a href="/compression/">ضغط</a> </li><li> <a href="/laravel/">ارافيل</a> </li><li> <a href="/aircrack/">ايركراك</a> </li><li> <a href="/office-productivity-software/">برامج الإنتاجية المكتبية</a> </li><li> <a href="/boot/">حذاء طويل</a> </li><li> <a href="/system-calls/">مكالمات النظام</a> </li><li> <a href="/sysctl/">Sysctl</a> </li><li> <a href="/networking/">الشبكات</a> </li><li> <a href="/gpu/">Gpu</a> </li><li> <a href="/gimp/">أعرج</a> </li><li> <a href="/plex/">نوع من أنواع الصفائح من نوع Plex</a> </li><li> <a href="/uefi/">Uefi</a> </li><li> <a href="/docker/">عامل ميناء</a> </li><li> <a href="/firewall/">جدار الحماية</a> </li><li> <a href="/wireshark/">Wireshark</a> </li><li> <a href="/synology/">سينولوجيا</a> </li><li> <a href="/pdf/">بي دي إف</a> </li><li> <a href="/ethereum/">اثير</a> </li><li> <a href="/parrot-os/">نظام الببغاء</a> </li><li> <a href="/sublime/">سامية</a> </li><li> <a href="/selinux/">سيلينو</a> </li><li> <a href="/hyper-v/">مفرط- V</a> </li><li> <a href="/phone/">هاتف</a> </li><li> <a href="/kodi/">الشفرة</a> </li><li> <a href="/gnome/">جنوم</a> </li><li> <a href="/manjaro/">رقة</a> </li><li> <a href="/mouse/">الفأر</a> </li><li> <a href="/nmap/">Nmap</a> </li><li> <a href="/metasploit/">ميتاسبلويت</a> </li><li> <a href="/torrent/">سيل</a> </li><li> <a href="/tablet/">لوح</a> </li><li> <a href="/pycharm/">بيشارم</a> </li><li> <a href="/curl/">لفة</a> </li><li> <a href="/kde/">أين</a> </li><li> <a href="/gcc/">مجلس التعاون الخليجي</a> </li><li> <a href="/fonts/">الخطوط</a> </li><li> <a href="/ssl/">Ssl</a> </li><li> <a href="/nvidia/">نفيديا</a> </li><li> <a href="/images/">الصور</a> </li><li> <a href="/usb/">يو اس بي</a> </li><li> <a href="/squid/">حبار</a> </li><li> <a href="/mate/">رفيق</a> </li><li> <a href="/vlc-media-player/">مشغل الميديا vlc</a> </li><li> <a href="/dns/">نظام أسماء النطاقات</a> </li><li> <a href="/bitcoin/">بيتكوين</a> </li><li> <a href="/keyboard/">لوحة المفاتيح</a> </li><li> <a href="/inkscape/">إنكسكيب</a> </li><li> <a href="/encryption/">التشفير</a> </li><li> <a href="/fedora/">فيدورا</a> </li><li> <a href="/owncloud/">Owncloud</a> </li><li> <a href="/scanner/">الماسح الضوئي</a> </li><li> <a href="/atom/">ذرة</a> </li><li> <a href="/red-hat/">قبعة حمراء</a> </li><li> <a href="/teamviewer/">برنامج Teamviewer</a> </li><li> <a href="/skype/">سكايب</a> </li><li> <a href="/vpn/">Vpn</a> </li><li> <a href="/xfce/">Xfce</a> </li><li> <a href="/jupyter-notebook/">دفتر Jupyter</a> </li><li> <a href="/nfs/">Nfs</a> </li><li> <a href="/blog/">مدونة</a> </li><li> <a href="/lvm/">لفم</a> </li><li> <a href="/suse/">Suse</a> </li><li> <a href="/media-players/">مشغلات الوسائط</a> </li><li> <a href="/posix/">بوسيكس</a> </li><li> <a href="/steam/">بخار</a> </li><li> <a href="/jenkins/">جينكينز</a> </li><li> <a href="/power/">قوة</a> </li><li> <a href="/oracle-linux/">أوراكل لينكس</a> </li><li> <a href="/netstat/">Netstat</a> </li><li> <a href="/kvm/">متر مربع</a> </li><li> <a href="/bluetooth/">بلوتوث</a> </li><li> <a href="/ssd/">Ssd</a> </li><li> <a href="/grep/">سيطرة</a> </li><li> <a href="/gentoo/">جنتو</a> </li><li> <a href="/odyssey/">ملحمة</a> </li><li> <a href="/audio/">صوتي</a> </li><li> <a href="/cpu/">وحدة المعالجة المركزية</a> </li><li> <a href="/tensorflow/">تينسورفلو</a> </li><li> <a href="/autodesk/">أوتوديسك</a> </li><li> <a href="/lubuntu/">لوبونتو</a> </li><li> <a href="/llvm/">لفم</a> </li><li> <a href="/windows/">شبابيك</a> </li><li> <a href="/microsoft-edge/">Microsoft Edge (قديم)</a> </li><li> <a href="/internet-explorer/">متصفح الانترنت</a> </li><li> <a href="/office/">مكتب. مقر. مركز</a> </li><li> <a href="/akhr/">آخر</a> </li><li> <a href="/skayb/">سكايب</a> </li><li> <a href="/nzam-asma-alntaqat/">نظام أسماء النطاقات</a> </li><li> <a href="/ftyrt-altwt/">فطيرة التوت</a> </li><li> <a href="/kamyra-wyb/">كاميرا ويب</a> </li><li> <a href="/mshghlat-alwsayt/">مشغلات الوسائط</a> </li><li> <a href="/cpanel/">cPanel</a> </li><li> <a href="/habrwksy/">هابروكسي</a> </li><li> <a href="/jnwm/">جنوم</a> </li><li> <a href="/hdha-twyl/">حذاء طويل</a> </li><li> <a href="/samyt/">سامية</a> </li><li> <a href="/awbwntw-24-04-cat/">أوبونتو 24.04</a> </li><li> <a href="/com-nextcloud/">com.nextcloud</a> </li><li> <a href="/fdylt/">فضيلة</a> </li><li> <a href="/nfydya/">نفيديا</a> </li><li> <a href="/bwr-usb/">عبور USB</a> </li><li> <a href="/fydwra/">فيدورا</a> </li><li> <a href="/alaqla-alamn/">#الإقلاع الآمن</a> </li> </ul> </div> <div class="sidebar-box ftco-animate"> <h3 class="sidebar-heading">المشاركات الشعبية</h3> <div class="block-21 mb-4 d-flex"> <a class="blog-img mr-4" style="background-image: url(https://softoban.com/img/other/73/how-to-fix-resolve-text-message-notifications-not-functioning-on-android-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/kyfyt-aslah-hl-mshklt-dm-ml-ash-arat-alrsayl-alnsyt-ly-nzam-android">كيفية إصلاح/حل مشكلة عدم عمل إشعارات الرسائل النصية على نظام Android</a> </h3> <div class="meta"> <div> <a href="/akhr/"><span class="icon-chat"></span> آخر</a> </div> </div> </div> </div><div class="block-21 mb-4 d-flex"> <a class="blog-img mr-4" style="background-image: url(https://softoban.com/img/other/80/how-to-integrate-the-mongodb-java-driver-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/kyfyt-dmj-brnamj-tshghyl-mongodb-java">كيفية دمج برنامج تشغيل MongoDB Java</a> </h3> <div class="meta"> <div> <a href="/akhr/"><span class="icon-chat"></span> آخر</a> </div> </div> </div> </div><div class="block-21 mb-4 d-flex"> <a class="blog-img mr-4" style="background-image: url(https://softoban.com/img/other/03/how-to-find-a-directory-in-linux-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/kyfyt-albhth-n-dlyl-fy-lynks">كيفية البحث عن دليل في لينكس</a> </h3> <div class="meta"> <div> <a href="/akhr/"><span class="icon-chat"></span> آخر</a> </div> </div> </div> </div><div class="block-21 mb-4 d-flex"> <a class="blog-img mr-4" style="background-image: url(https://softoban.com/img/other/49/how-to-use-retrievers-in-langchain-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/kyfyt-astkhdam-almstrdwn-fy-langchain">كيفية استخدام المستردون في LangChain؟</a> </h3> <div class="meta"> <div> <a href="/akhr/"><span class="icon-chat"></span> آخر</a> </div> </div> </div> </div><div class="block-21 mb-4 d-flex"> <a class="blog-img mr-4" style="background-image: url(https://softoban.com/img/other/10/how-to-fix-mouse-freezing-in-windows-11-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/kyfyt-aslah-tjmyd-almaws-fy-nzam-altshghyl-windows-11">كيفية إصلاح تجميد الماوس في نظام التشغيل Windows 11؟</a> </h3> <div class="meta"> <div> <a href="/akhr/"><span class="icon-chat"></span> آخر</a> </div> </div> </div> </div><div class="block-21 mb-4 d-flex"> <a class="blog-img mr-4" style="background-image: url(https://softoban.com/img/windows/39/fix-view-print-detailed-performance.png);"></a> <div class="text"> <h3 class="heading"> <a href="/fix-view-print-detailed-performance">إصلاح عرض وطباعة الأداء التفصيلي ورابط معلومات النظام لا يعملان في Windows 7 - Winhelponline</a> </h3> <div class="meta"> <div> <a href="/windows/"><span class="icon-chat"></span> شبابيك</a> </div> </div> </div> </div><div class="block-21 mb-4 d-flex"> <a class="blog-img mr-4" style="background-image: url(https://softoban.com/img/other/43/what-is-a-clearfix-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/ma-hw-klyrfks">ما هو كليرفكس؟</a> </h3> <div class="meta"> <div> <a href="/akhr/"><span class="icon-chat"></span> آخر</a> </div> </div> </div> </div><div class="block-21 mb-4 d-flex"> <a class="blog-img mr-4" style="background-image: url(https://softoban.com/img/other/FE/making-a-bash-script-return-with-different-return-codes-on-exit-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/a-adt-ns-bash-m-rmwz-arja-mkhtlft-nd-alkhrwj">إعادة نص Bash مع رموز إرجاع مختلفة عند الخروج</a> </h3> <div class="meta"> <div> <a href="/akhr/"><span class="icon-chat"></span> آخر</a> </div> </div> </div> </div><div class="block-21 mb-4 d-flex"> <a class="blog-img mr-4" style="background-image: url(https://softoban.com/img/other/02/how-to-import-and-export-scheduled-tasks-using-powershell-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/kyfyt-astyrad-wtsdyr-almham-almjdwlt-bastkhdam-powershell">كيفية استيراد وتصدير المهام المجدولة باستخدام PowerShell</a> </h3> <div class="meta"> <div> <a href="/akhr/"><span class="icon-chat"></span> آخر</a> </div> </div> </div> </div><div class="block-21 mb-4 d-flex"> <a class="blog-img mr-4" style="background-image: url(https://softoban.com/img/other/7D/what-is-the-define-directive-in-c-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/ma-hw-define-altwjyh-fy-c">ما هو #define التوجيه في C ++</a> </h3> <div class="meta"> <div> <a href="/akhr/"><span class="icon-chat"></span> آخر</a> </div> </div> </div> </div><div class="block-21 mb-4 d-flex"> <a class="blog-img mr-4" style="background-image: url(https://softoban.com/img/other/9C/how-to-implement-a-foreach-loop-in-python-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/kyfyt-tnfydh-hlqt-foreach-fy-baythwn">كيفية تنفيذ حلقة _ForEach_ في بايثون</a> </h3> <div class="meta"> <div> <a href="/akhr/"><span class="icon-chat"></span> آخر</a> </div> </div> </div> </div><div class="block-21 mb-4 d-flex"> <a class="blog-img mr-4" style="background-image: url(https://softoban.com/img/other/9B/sql-server-cast-function-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/wzyft-arsal-khadm-sql">وظيفة إرسال خادم SQL</a> </h3> <div class="meta"> <div> <a href="/akhr/"><span class="icon-chat"></span> آخر</a> </div> </div> </div> </div><div class="block-21 mb-4 d-flex"> <a class="blog-img mr-4" style="background-image: url(https://softoban.com/img/other/42/call-c-from-c-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/atsl-b-c-mn-c">اتصل بـ C++ من C</a> </h3> <div class="meta"> <div> <a href="/akhr/"><span class="icon-chat"></span> آخر</a> </div> </div> </div> </div><div class="block-21 mb-4 d-flex"> <a class="blog-img mr-4" style="background-image: url(https://softoban.com/img/other/F3/pandas-series-to-csv-1.jpg);"></a> <div class="text"> <h3 class="heading"> <a href="/slslt-pandas-aly-csv">سلسلة Pandas إلى CSV</a> </h3> <div class="meta"> <div> <a href="/akhr/"><span class="icon-chat"></span> آخر</a> </div> </div> </div> </div><div class="block-21 mb-4 d-flex"> <a class="blog-img mr-4" style="background-image: url(https://softoban.com/img/other/90/how-to-clean-install-nvidia-drivers-on-ubuntu-22-04-lts-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/kyfyt-tnzyf-tthbyt-bramj-tshghyl-nvidia-ly-ubuntu-22-04-lts">كيفية تنظيف تثبيت برامج تشغيل NVIDIA على Ubuntu 22.04 LTS</a> </h3> <div class="meta"> <div> <a href="/akhr/"><span class="icon-chat"></span> آخر</a> </div> </div> </div> </div><div class="block-21 mb-4 d-flex"> <a class="blog-img mr-4" style="background-image: url(https://softoban.com/img/other/6C/how-to-integrate-the-mongodb-node-js-driver-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/kyfyt-dmj-brnamj-tshghyl-mongodb-node-js">كيفية دمج برنامج تشغيل MongoDB Node.js</a> </h3> <div class="meta"> <div> <a href="/akhr/"><span class="icon-chat"></span> آخر</a> </div> </div> </div> </div><div class="block-21 mb-4 d-flex"> <a class="blog-img mr-4" style="background-image: url(https://softoban.com/img/other/26/how-to-fix-discord-audio-cutting-out-during-voice-call-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/kyfyt-aslah-qt-alswt-ly-alftnt-athna-almkalmt-alswtyt">كيفية إصلاح قطع الصوت على الفتنة أثناء المكالمة الصوتية</a> </h3> <div class="meta"> <div> <a href="/akhr/"><span class="icon-chat"></span> آخر</a> </div> </div> </div> </div><div class="block-21 mb-4 d-flex"> <a class="blog-img mr-4" style="background-image: url(https://softoban.com/img/other/1B/is-there-an-easy-way-to-convert-jquery-code-to-javascript-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/hl-hnak-tryqt-shlt-lthwyl-kwd-jquery-aly-javascript">هل هناك طريقة سهلة لتحويل كود jQuery إلى JavaScript؟</a> </h3> <div class="meta"> <div> <a href="/akhr/"><span class="icon-chat"></span> آخر</a> </div> </div> </div> </div><div class="block-21 mb-4 d-flex"> <a class="blog-img mr-4" style="background-image: url(https://softoban.com/img/other/9B/how-to-remove-last-n-characters-from-a-string-in-bash-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/kyfyt-azalt-alahrf-n-alakhyrt-mn-slslt-fy-bash">كيفية إزالة الأحرف n الأخيرة من سلسلة في Bash</a> </h3> <div class="meta"> <div> <a href="/akhr/"><span class="icon-chat"></span> آخر</a> </div> </div> </div> </div><div class="block-21 mb-4 d-flex"> <a class="blog-img mr-4" style="background-image: url(https://softoban.com/img/other/71/mysql-where-date-greater-than-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/mysql-hyth-altarykh-akbr-mn">MySQL حيث التاريخ أكبر من</a> </h3> <div class="meta"> <div> <a href="/akhr/"><span class="icon-chat"></span> آخر</a> </div> </div> </div> </div> </div> </div> </div> </div> </section> </div> </div>  <div id="ftco-loader" class="show fullscreen"><svg class="circular" width="48px" height="48px"><circle class="path-bg" cx="24" cy="24" r="22" fill="none" stroke-width="4" stroke="#eeeeee"/><circle class="path" cx="24" cy="24" r="22" fill="none" stroke-width="4" stroke-miterlimit="10" stroke="#F96D00"/></svg></div> <script src="https://softoban.com/template/js/jquery.min.js"></script> <script src="https://softoban.com/template/js/jquery-migrate-3.0.1.min.js"></script> <script src="https://softoban.com/template/js/popper.min.js"></script> <script src="https://softoban.com/template/js/bootstrap.min.js"></script> <script src="https://softoban.com/template/js/jquery.easing.1.3.js"></script> <script src="https://softoban.com/template/js/jquery.waypoints.min.js"></script> <script src="https://softoban.com/template/js/jquery.stellar.min.js"></script> <script src="https://softoban.com/template/js/owl.carousel.min.js"></script> <script src="https://softoban.com/template/js/jquery.magnific-popup.min.js"></script> <script src="https://softoban.com/template/js/aos.js"></script> <script src="https://softoban.com/template/js/jquery.animateNumber.min.js"></script> <script src="https://softoban.com/template/js/scrollax.min.js"></script> <script src="https://softoban.com/template/js/main.js"></script> <script async="" defer="" src="//www.instagram.com/embed.js"></script> <script async="" src="https://platform.twitter.com/widgets.js"></script> <script> window.onload = function(){ for(i in document.images) { if(document.images[i].naturalWidth==0){ if(window.location.pathname.length > 1){ document.images[i].style="display:none" } else { document.images[i].src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=" } } } } $(document).ready(() => { $('nav').find('a').each(function(){ if($(this).attr('href') == window.location.pathname){ $(this).parent('li').addClass('active') } }) var wrapper = '<div class="embeded-video"></div>'; if($('iframe[width="560"]').length > 1){ $('.m_v').remove(); }else{ } $('iframe[src^="https://www.youtube.com/embed/"]').wrap(wrapper); let loc = window.location.pathname; if(loc == '/privacy-policy'){ $('div.embeded-video').remove(); $('blockquote').remove(); } }) </script> <script type="text/javascript" src="https://s.skimresources.com/js/192355X1670518.skimlinks.js"></script></body> </html>