כיצד להשתמש בנקודות פריצה ושאילתות מדיה עם קליפ רקע ב-Tailwind

בזמן יצירת קטעים שונים בדף אינטרנט, יכולים להיות תרחישים שבהם המתכנת צריך לגזור את הרקע או לשנות אותו כדי לצבור את התוכן. מתודולוגיה זו מסייעת בניהול יעיל של התוכן המצורף, כמו גם בעיצוב חלקי עמודים שונים.

בלוג זה מרחיב את מושגי הליבה הבאים:

כיצד להשתמש/להשתמש בנקודות שבירה ושאילתות מדיה עם קליפ רקע ב-Tailwind?
החלת נקודות שבירה עם קליפ רקע ב-Tailwind.
החלת שאילתות מדיה עם קליפ רקע ב-Tailwind.

כיצד להשתמש/להשתמש בנקודות שבירה ושאילתות מדיה עם קליפ רקע ב-Tailwind?

ה ' bg-clip-{מילת מפתח} כלי השירות משמש להגדרת התיבה התוחמת של הרקע של האלמנט. ניתן להשתמש בכלי שירות זה עם מאפיינים מרובים, כגון ' תיבת ריפוד ',' תיבת גבול ',' תיבת תוכן ', ו' תיבת טקסט '.

דוגמה 1: החלת נקודות שבירה עם קליפ רקע ב-Tailwind

דוגמה זו מיישמת את נקודות השבירה עם קליפ הרקע באמצעות 'המיושם' bg-clip-{מילת מפתח} ' כלי שירות עם ' md 'כלומר, מסכים בגודל בינוני ו' lg 'כלומר, שיעורי מסך בגודל גדול:

< html >
< רֹאשׁ >
< מטא ערכת תווים = 'utf-8' >
< מטא שֵׁם = 'נקודת מבט' תוֹכֶן = 'width=device-width, initial-scale=1' >
< תַסרִיט src = 'https://cdn.tailwindcss.com' >< / תַסרִיט >
< / רֹאשׁ >
< גוּף >
< אזור טקסט מעמד = 'bg-clip-border p-6 bg-yellow-500 border-4 border-red-500 border-printed md:bg-clip-text lg:bg-clip-padding' > זה Tailwind CSS < / אזור טקסט >
< / גוּף >
< / html >

לפי שורות קוד אלו:

ראשית, ציין את נתיב ה-CDN כדי לעשות שימוש בפונקציות Tailwind.
לאחר מכן, צור אלמנט '' הכולל את ' <strong> bg-clip-{מילת מפתח}</strong> ' כלי שירות כך שהוא מוגדר ל'גבול' במסכים בגודל קטן ומוגדר ל' <strong> bg-clip-text</strong> ' ו' <strong> bg-clip-padding</strong> ' כלי עזר במסכים בגודל בינוני וגדול באמצעות ' <strong> md</strong> ' ו' <strong> lg</strong> 'שיעורים, בהתאמה.</li> </ul> <p> <strong> הערה:</strong> ציון כלי השירות פשוט זהה לציון שלו ב' <strong> sm</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"> html</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"> 'width=device-width, initial-scale=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-yellow-500 border-4 border-red-500 border-mevaed'</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"> 'טקסט/css'</span> > <br> #טמפ'<span class="br0"> {</span> <br> רקע-קליפ: border-box; <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> רקע-קליפ: padding-box; <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"> html</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 Breakpoints ו-Media Queries באמצעות ' <strong> bg-clip-{מילת מפתח}</strong> ' כלי שירות עם ' <strong> md</strong> ' או ' <strong> lg</strong> ' שיעורים, או באמצעות ' <strong> @כְּלֵי תִקְשׁוֹרֶת</strong> 'כלל. ניתן להגדיר את מילת המפתח ל-'padding-box', 'border-box', 'content-box', 'text-box' ועוד. במדריך זה, הדגמנו את השימוש בנקודות השבירה ושאילתות המדיה עם קליפ רקע ב-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="/aher/" 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/">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/">מקלעת</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/">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/">Selinux</a> </li><li> <a href="/hyper-v/">Hyper-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/">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/">Gcc</a> </li><li> <a href="/fonts/">גופנים</a> </li><li> <a href="/ssl/">Ssl</a> </li><li> <a href="/nvidia/">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/">Dns</a> </li><li> <a href="/bitcoin/">ביטקוין</a> </li><li> <a href="/keyboard/">מקלדת</a> </li><li> <a href="/inkscape/">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/">Lvm</a> </li><li> <a href="/suse/">Suse</a> </li><li> <a href="/media-players/">נגני מדיה</a> </li><li> <a href="/posix/">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/">Autodesk</a> </li><li> <a href="/lubuntu/">Lubuntu</a> </li><li> <a href="/llvm/">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="/aher/">אַחֵר</a> </li><li> <a href="/sqyyp/">סקייפ</a> </li><li> <a href="/p-y-ptl/">פאי פטל</a> </li><li> <a href="/mzlmt-yntrnt/">מצלמת אינטרנט</a> </li><li> <a href="/ngny-mdyh/">נגני מדיה</a> </li><li> <a href="/cpanel/">cPanel</a> </li><li> <a href="/h-prwqsy/">האפרוקסי</a> </li><li> <a href="/gamad/">גַמָד</a> </li><li> <a href="/magap/">מַגָף</a> </li><li> <a href="/nisgab/">נִשׂגָב</a> </li><li> <a href="/wbwntw-24-04-cat/">אובונטו 24.04</a> </li><li> <a href="/nextcloud/">nextcloud</a> </li><li> <a href="/ma-alah/">מַעֲלָה</a> </li><li> <a href="/h-brt-usb/">העברת usb</a> </li><li> <a href="/pdwrh/">פדורה</a> </li><li> <a href="/hp-lh-btwhh/">#הפעלה בטוחה</a> </li><li> <a href="/h-brt-mksyr/">העברת מכשיר</a> </li><li> <a href="/sdn/">SDN</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/5E/how-to-deploy-docker-container-to-aws-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/kyzd-lprws-t-docker-container-l-aws">כיצד לפרוס את Docker Container ל-AWS</a> </h3> <div class="meta"> <div> <a href="/aher/"><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/82/how-to-interpret-transformer-schematic-symbols-1.jpg);"></a> <div class="text"> <h3 class="heading"> <a href="/kyzd-lprs-smlym-skmtyym-sl-sn-y">כיצד לפרש סמלים סכמטיים של שנאי</a> </h3> <div class="meta"> <div> <a href="/aher/"><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/96/restore-point-creation-disabled-group-policy-winhelponline.png);"></a> <div class="text"> <h3 class="heading"> <a href="/restore-point-creation-disabled-group-policy-winhelponline">יצירת נקודת שחזור מושבתת על ידי מדיניות קבוצתית - 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/DE/how-to-update-rsync-on-raspberry-pi-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/kyzd-l-dkn-rsync-b-raspberry-pi">כיצד לעדכן Rsync ב-Raspberry Pi</a> </h3> <div class="meta"> <div> <a href="/aher/"><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/88/pandas-join-vs-merge-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/pandas-join-l-wmt-myzwg">Pandas Join לעומת מיזוג</a> </h3> <div class="meta"> <div> <a href="/aher/"><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/69/how-to-disable-dms-from-random-people-on-discord-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/kyzd-lhsbyt-hwd-wt-dm-m-nsym-qr-yym-bdysqwrd">כיצד להשבית הודעות DM מאנשים אקראיים בדיסקורד</a> </h3> <div class="meta"> <div> <a href="/aher/"><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/3F/setting-up-the-mlflow-authentication-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/hgdrt-ymwt-mlflow">הגדרת אימות MLflow</a> </h3> <div class="meta"> <div> <a href="/aher/"><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/89/how-to-use-the-asyncio-library-in-langchain-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/kyzd-lhstms-bspryyt-asyncio-b-langchain">כיצד להשתמש בספריית 'asyncio' ב-LangChain?</a> </h3> <div class="meta"> <div> <a href="/aher/"><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/52/how-to-use-aws-cli-on-windows-1.gif);"></a> <div class="text"> <h3 class="heading"> <a href="/kyzd-lhstms-b-aws-cli-b-windows">כיצד להשתמש ב-AWS CLI ב-Windows</a> </h3> <div class="meta"> <div> <a href="/aher/"><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/7A/how-to-use-arsort-function-in-php-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/kyzd-lhstms-bpwnqzyyt-arsort-b-php">כיצד להשתמש בפונקציית arsort() ב-PHP</a> </h3> <div class="meta"> <div> <a href="/aher/"><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/how-to-work-with-writable-streams-in-node-js-1.gif);"></a> <div class="text"> <h3 class="heading"> <a href="/kyzd-l-bwd-m-zrmym-lktybh-b-node-js">כיצד לעבוד עם זרמים לכתיבה ב-Node.js?</a> </h3> <div class="meta"> <div> <a href="/aher/"><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/0E/how-to-use-php-strrpos-function-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/kyzd-lhstms-bpwnqzyyt-php-strrpos">כיצד להשתמש בפונקציית PHP strrpos()</a> </h3> <div class="meta"> <div> <a href="/aher/"><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/53/how-to-use-web-workers-for-multithreading-in-javascript-1.jpg);"></a> <div class="text"> <h3 class="heading"> <a href="/kyzd-lhstms-b-web-workers-lrybwy-hhlykym-b-javascript">כיצד להשתמש ב-Web Workers לריבוי ההליכים ב-JavaScript?</a> </h3> <div class="meta"> <div> <a href="/aher/"><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/79/crunch-for-linux-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/qr-nz-bwr-lynwqs">קראנץ' עבור לינוקס</a> </h3> <div class="meta"> <div> <a href="/aher/"><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/A0/how-to-install-nginx-on-ubuntu-24-04-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/kyzd-lhtqyn-nginx-l-wbwntw-24-04">כיצד להתקין Nginx על אובונטו 24.04</a> </h3> <div class="meta"> <div> <a href="/aher/"><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/20/how-to-clone-most-recent-commit-from-gitlab-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/kyzd-lskpl-t-h-commit-h-hrwn-m-gitlab">כיצד לשכפל את ה-Commit האחרון מ- GitLab?</a> </h3> <div class="meta"> <div> <a href="/aher/"><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/6A/how-to-plot-an-equation-in-matlab-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/kyzd-lsrtt-msww-h-b-matlab">כיצד לשרטט משוואה ב-MATLAB</a> </h3> <div class="meta"> <div> <a href="/aher/"><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/C9/what-is-the-difference-between-potentiometers-and-rheostats-1.jpg);"></a> <div class="text"> <h3 class="heading"> <a href="/mh-hhbdl-byn-pwtnzywmtrym-lry-wsttym">מה ההבדל בין פוטנציומטרים לריאוסטטים</a> </h3> <div class="meta"> <div> <a href="/aher/"><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/ED/how-to-use-breakpoints-and-media-queries-with-background-clip-in-tailwind-1.gif);"></a> <div class="text"> <h3 class="heading"> <a href="/kyzd-lhstms-bnqwdwt-pryzh-ws-yltwt-mdyh-m-qlyp-rq-b-tailwind">כיצד להשתמש בנקודות פריצה ושאילתות מדיה עם קליפ רקע ב-Tailwind</a> </h3> <div class="meta"> <div> <a href="/aher/"><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/19/how-to-add-option-to-select-tag-from-input-text-using-javascript-1.gif);"></a> <div class="text"> <h3 class="heading"> <a href="/kyzd-lhwsyp-psrwt-lbhyrt-tg-mtqst-qlt-b-mz-wt-javascript">כיצד להוסיף אפשרות לבחירת תג מטקסט קלט באמצעות JavaScript</a> </h3> <div class="meta"> <div> <a href="/aher/"><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>