Tailwind'de Arka Plan Klibi ile Kesme Noktaları ve Medya Sorguları Nasıl Kullanılır

Tailwind De Arka Plan Klibi Ile Kesme Noktalari Ve Medya Sorgulari Nasil Kullanilir

Bir web sayfasında farklı bölümler oluştururken, programcının içeriği biriktirmek için arka planı kırpması veya değiştirmesi gereken senaryolar olabilir. Bu metodoloji, eklenen içeriğin etkili bir şekilde yönetilmesine ve farklı sayfa bölümlerinin şekillendirilmesine yardımcı olur.

Bu blog aşağıdaki temel kavramları detaylandırmaktadır:

Tailwind'de Arka Plan Klibi ile Kesme Noktaları ve Medya Sorguları Nasıl Kullanılır/Kullanılır?
Tailwind'de Arka Plan Klibi ile Kesme Noktaları Uygulama.
Tailwind'de Arka Plan Klipiyle Medya Sorgularını Uygulama.

Tailwind'de Arka Plan Klibi ile Kesme Noktaları ve Medya Sorguları Nasıl Kullanılır/Kullanılır?

“ bg-clip-{anahtar kelime} ” yardımcı programı, öğenin arka planının sınırlayıcı kutusunu ayarlamak için kullanılır. Bu yardımcı program ' gibi birden fazla özellikle kullanılabilir. dolgu kutusu ', ' sınır kutusu ', ' içerik kutusu ', Ve ' Metin kutusu ”.

Örnek 1: Arka Rüzgarda Arka Plan Klibi ile Kesme Noktaları Uygulama

Bu örnek, uygulanan ' aracılığıyla Arka Plan Klibi ile kesme noktalarını uygular. bg-clip-{anahtar kelime} ' ile ' yardımcı programı MD ” yani orta büyüklükte ekranlar ve “ lg ” yani büyük boyutlu ekran sınıfları:

< HTML >
< KAFA >
< meta karakter seti = 'utf-8' >
< meta isim = 'görüntü alanı' içerik = 'genişlik=aygıt genişliği, başlangıç ölçeği=1' >
< senaryo kaynak = 'https://cdn.tailwindcss.com' >< / senaryo >
< / KAFA >
< vücut >
< metin alanı sınıf = 'bg-clip-border p-6 bg-yellow-500 border-4 border-red-500 border-dashed md:bg-clip-text lg:bg-clip-padding' > Bu Tailwind CSS'dir < / metin alanı >
< / vücut >
< / HTML >

Bu kod satırlarına göre:

İlk olarak Tailwind işlevlerini kullanmak için CDN yolunu belirtin.
Daha sonra “” öğesini içeren “<textarea>” öğesini oluşturun. <strong> bg-clip-{anahtar kelime}</strong> ” yardımcı programı küçük boyutlu ekranlarda “kenarlık” olarak ayarlanacak ve “ <strong> bg-klip-metni</strong> ' Ve ' <strong> bg-klip-dolgu</strong> ” orta ve büyük boyutlu ekranlardaki yardımcı programlar “ <strong> MD</strong> ' Ve ' <strong> lg</strong> ” sınıfları sırasıyla.</li> </ul> <p> <strong> Not:</strong> Yardımcı programı belirtmek, onu '' bölümünde belirtmekle aynı şeydir. <strong> sm</strong> ' sınıf.</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> Çıktı</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> Bu sonuç, ekran boyutu genişletildiğinde arka planın buna göre kırpıldığı anlamına gelir.</p> <h2 id="c"> <strong> Örnek 2: Tailwind'de Arka Plan Klibi ile Medya Sorgularını Uygulama</strong> </h2> <p> Aşağıdaki kod gösterimi, 'Arka Plan Klibi' içeren Medya Sorgularını ' <strong> @medya</strong> ” kuralı ve belirtilen parametre:</p> <!DOCTYPEhtml> <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"> KAFA</span></a> > <br> < <a href="http://december.com/html/4/element/meta.html"><span class="kw2"> meta</span></a> <span class="kw3"> karakter seti</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"> meta</span></a> <span class="kw3"> isim</span><span class="sy0"> =</span><span class="st0"> 'görüntü alanı'</span> <span class="kw3"> içerik</span><span class="sy0"> =</span><span class="st0"> 'genişlik=aygıt genişliği, başlangıç ölçeği=1'</span> > <br> < <a href="http://december.com/html/4/element/script.html"><span class="kw2"> senaryo</span></a> <span class="kw3"> kaynak</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"> senaryo</span></a> > <br> <<span class="sy0"> /</span> <a href="http://december.com/html/4/element/head.html"><span class="kw2"> KAFA</span></a> > <br> < <a href="http://december.com/html/4/element/body.html"><span class="kw2"> vücut</span></a> > <br> < <a href="http://december.com/html/4/element/textarea.html"><span class="kw2"> metin alanı</span></a> <span class="kw3"> sınıf</span><span class="sy0"> =</span><span class="st0"> 'p-6 bg-sarı-500 kenarlık-4 kenarlık-kırmızı-500 kenarlık-kesikli'</span> <span class="kw3"> İD</span><span class="sy0"> =</span><span class="st0"> 'sıcaklık'</span> >Bu Tailwind CSS'sidir<<span class="sy0"> /</span> <a href="http://december.com/html/4/element/textarea.html"><span class="kw2"> metin alanı</span></a> > <br> <<span class="sy0"> /</span> <a href="http://december.com/html/4/element/body.html"><span class="kw2"> vücut</span></a> > <br> < <a href="http://december.com/html/4/element/style.html"><span class="kw2"> stil</span></a> <span class="kw3"> tip</span><span class="sy0"> =</span><span class="st0"> 'metin/css'</span> > <br> #sıcaklık<span class="br0"> {</span> <br> arka plan klibi: kenarlık kutusu; <br> <span class="br0"> }</span> <br> @<span class="kw3"> medya</span> <span class="br0"> (</span> maksimum<span class="kw3"> Genişlik</span> :500 piksel<span class="br0"> )</span><span class="br0"> {</span> <br> #sıcaklık<span class="br0"> {</span> <br> arka plan klibi: dolgu kutusu; <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"> stil</span></a> > <br> <<span class="sy0"> /</span> <a href="http://december.com/html/4/element/html.html"><span class="kw2"> HTML</span></a> ><p> Bu kod parçacığında:</p> <ul> <li> Tailwind CDN yolunu dahil etmek ve “<textarea>” öğesini oluşturmak için metodolojileri tekrarlayın.</li> <li> Şimdi CSS kodunda varsayılanı belirtin ' <strong> arka plan klibi</strong> 'özellik' olarak <strong> sınır kutusu</strong> ”.</li> <li> Bundan sonra “uygulayın” <strong> @medya</strong> Verilen parametreyle, ekranın genişliği “500” piksele eşit olduğu sürece “ <strong> arka plan klibi</strong> ” özelliği “ olarak ayarlandı <strong> dolgu kutusu</strong> ”.</li> </ul> <p> <strong> Çıktı</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> Bu sonuçtan, Arka Plan Klibi'nin ekranın değişen genişliğine göre geçiş yaptığı doğrulanabilir.</p> <h2> <strong> Çözüm</strong> </h2> <p> Arka Plan Klibi, uygulanan ' <strong> bg-clip-{anahtar kelime}</strong> ' ile ' yardımcı programı <strong> MD</strong> ' veya ' <strong> lg</strong> ” sınıfları veya “ aracılığıyla <strong> @medya</strong> ' kural. Anahtar kelime “dolgu kutusu”, “kenarlık kutusu”, “içerik kutusu”, “metin kutusu” ve daha fazlası olarak ayarlanabilir. Bu kılavuzda, Tailwind'de Arka Plan Klipli Kesme Noktaları ve Medya Sorgularının kullanımını gösterdik.</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="/diger/" class="tag-cloud-link">Diğer</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">Kategori</h3> <ul class="categories"> <li> <a href="/raspberry-pi/">Ahududu Pi</a> </li><li> <a href="/ethernet/">Ethernet</a> </li><li> <a href="/other/">Başka</a> </li><li> <a href="/nano/">Nano</a> </li><li> <a href="/zoom/">Yakınlaştırma</a> </li><li> <a href="/cinnamon/">Tarçın</a> </li><li> <a href="/reviews/">Yorumlar</a> </li><li> <a href="/zorinos/">Zorinos</a> </li><li> <a href="/radio/">Radyo</a> </li><li> <a href="/minecraft/">Minecraft</a> </li><li> <a href="/ssh/">Ssh</a> </li><li> <a href="/openvas/">Açık Deniz</a> </li><li> <a href="/compression/">Sıkıştırma</a> </li><li> <a href="/laravel/">Laravel</a> </li><li> <a href="/aircrack/">Hava Çatlağı</a> </li><li> <a href="/office-productivity-software/">Ofis Verimlilik Yazılımı</a> </li><li> <a href="/boot/">Bot</a> </li><li> <a href="/system-calls/">Sistem Çağrıları</a> </li><li> <a href="/sysctl/">Sistem</a> </li><li> <a href="/networking/">Ağ Oluşturma</a> </li><li> <a href="/gpu/">Gpu</a> </li><li> <a href="/gimp/">Gimp</a> </li><li> <a href="/plex/">Kat</a> </li><li> <a href="/uefi/">Uefi</a> </li><li> <a href="/docker/">Liman Işçisi</a> </li><li> <a href="/firewall/">Güvenlik Duvarı</a> </li><li> <a href="/wireshark/">Tel Köpekbalığı</a> </li><li> <a href="/synology/">Sinoloji</a> </li><li> <a href="/pdf/">Pdf</a> </li><li> <a href="/ethereum/">Ethereum</a> </li><li> <a href="/parrot-os/">Papağan Işletim Sistemi</a> </li><li> <a href="/sublime/">Yüce</a> </li><li> <a href="/selinux/">Selinux</a> </li><li> <a href="/hyper-v/">Hiper-V</a> </li><li> <a href="/phone/">Telefon</a> </li><li> <a href="/kodi/">Kod</a> </li><li> <a href="/gnome/">Cüce</a> </li><li> <a href="/manjaro/">Incelik</a> </li><li> <a href="/mouse/">Fare</a> </li><li> <a href="/nmap/">Nmap</a> </li><li> <a href="/metasploit/">Metasploit</a> </li><li> <a href="/torrent/">Sel</a> </li><li> <a href="/tablet/">Tablet</a> </li><li> <a href="/pycharm/">Şeytan</a> </li><li> <a href="/curl/">Kıvrılmak</a> </li><li> <a href="/kde/">Nerede</a> </li><li> <a href="/gcc/">Gcc</a> </li><li> <a href="/fonts/">Yazı Tipleri</a> </li><li> <a href="/ssl/">Ssl</a> </li><li> <a href="/nvidia/">Nvidia</a> </li><li> <a href="/images/">Görüntüler</a> </li><li> <a href="/usb/">Usb</a> </li><li> <a href="/squid/">Kalamar</a> </li><li> <a href="/mate/">Mat</a> </li><li> <a href="/vlc-media-player/">Vlc Medya Oynatıcı</a> </li><li> <a href="/dns/">Dns</a> </li><li> <a href="/bitcoin/">Bitcoin</a> </li><li> <a href="/keyboard/">Tuş Takımı</a> </li><li> <a href="/inkscape/">Inkscape</a> </li><li> <a href="/encryption/">Şifreleme</a> </li><li> <a href="/fedora/">Fötr Şapka</a> </li><li> <a href="/owncloud/">Owncloud</a> </li><li> <a href="/scanner/">Tarayıcı</a> </li><li> <a href="/atom/">Atom</a> </li><li> <a href="/red-hat/">Kırmızı Şapka</a> </li><li> <a href="/teamviewer/">Takım Görüntüleyici</a> </li><li> <a href="/skype/">Skype</a> </li><li> <a href="/vpn/">Vpn</a> </li><li> <a href="/xfce/">Xfce</a> </li><li> <a href="/jupyter-notebook/">Jüpiter Defter</a> </li><li> <a href="/nfs/">Nfs</a> </li><li> <a href="/blog/">Blog</a> </li><li> <a href="/lvm/">Lvm</a> </li><li> <a href="/suse/">Suse</a> </li><li> <a href="/media-players/">Medya Oynatıcılar</a> </li><li> <a href="/posix/">Posix</a> </li><li> <a href="/steam/">Buhar</a> </li><li> <a href="/jenkins/">Jenkinler</a> </li><li> <a href="/power/">Güç</a> </li><li> <a href="/oracle-linux/">Oracle Linux</a> </li><li> <a href="/netstat/">Netstat</a> </li><li> <a href="/kvm/">Metrekare</a> </li><li> <a href="/bluetooth/">Bluetooth</a> </li><li> <a href="/ssd/">Ssd</a> </li><li> <a href="/grep/">Kavramak</a> </li><li> <a href="/gentoo/">Gentoo</a> </li><li> <a href="/odyssey/">Yolculuk</a> </li><li> <a href="/audio/">Ses</a> </li><li> <a href="/cpu/">İşlemci</a> </li><li> <a href="/tensorflow/">Tensör Akışı</a> </li><li> <a href="/autodesk/">Otomatik Masa</a> </li><li> <a href="/lubuntu/">Lubuntu</a> </li><li> <a href="/llvm/">Llvm</a> </li><li> <a href="/windows/">Pencereler</a> </li><li> <a href="/microsoft-edge/">Microsoft Edge (Eski)</a> </li><li> <a href="/internet-explorer/">Internet Explorer</a> </li><li> <a href="/office/">Ofis</a> </li><li> <a href="/baska/">Başka</a> </li><li> <a href="/ahududu-pi/">Ahududu Pi</a> </li><li> <a href="/web-kamerasi/">web kamerası</a> </li><li> <a href="/medya-oynaticilar/">medya oynatıcılar</a> </li><li> <a href="/diger/">Diğer</a> </li><li> <a href="/cpanel/">cPanel</a> </li><li> <a href="/haproksi/">haproksi</a> </li><li> <a href="/cuce/">cüce</a> </li><li> <a href="/bot/">bot</a> </li><li> <a href="/yuce/">yüce</a> </li><li> <a href="/removal-guides/">Kaldırma Kılavuzları</a> </li><li> <a href="/ubuntu-24-04-cat/">Ubuntu 24.04</a> </li><li> <a href="/sonraki-bulut/">sonraki bulut</a> </li><li> <a href="/erdem/">Erdem</a> </li><li> <a href="/usb-gecidi/">USB geçidi</a> </li><li> <a href="/fotr-sapka/">fötr şapka</a> </li><li> <a href="/guvenli-onyukleme/">#Güvenli Önyükleme</a> </li><li> <a href="/cihaz-gecisi/">cihaz geçişi</a> </li><li> <a href="/sdn/">SDN</a> </li><li> <a href="/surucu-kurulumu/">sürücü kurulumu</a> </li><li> <a href="/wakeonlan/">Wakeonlan</a> </li><li> <a href="/dsm7-cat/">dsm7</a> </li><li> <a href="/cif-ler/">cif'ler</a> </li> </ul> </div> <div class="sidebar-box ftco-animate"> <h3 class="sidebar-heading">Popüler Mesajlar</h3> <div class="block-21 mb-4 d-flex"> <a class="blog-img mr-4" style="background-image: url(https://softoban.com/img/other/F4/how-to-create-table-dynamically-in-javascript-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/javascript-te-dinamik-olarak-tablo-nasil-olusturulur">JavaScript'te Dinamik Olarak Tablo Nasıl Oluşturulur</a> </h3> <div class="meta"> <div> <a href="/baska/"><span class="icon-chat"></span> Başka</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/36/how-to-build-a-discord-welcome-experience-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/discord-karsilama-deneyimi-nasil-olusturulur">Discord Karşılama Deneyimi Nasıl Oluşturulur?</a> </h3> <div class="meta"> <div> <a href="/diger/"><span class="icon-chat"></span> Diğer</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/DA/how-to-upscale-an-image-using-midjourney-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/midjourney-kullanilarak-bir-goruntu-nasil-yukseltilir">Midjourney Kullanılarak Bir Görüntü Nasıl Yükseltilir?</a> </h3> <div class="meta"> <div> <a href="/diger/"><span class="icon-chat"></span> Diğer</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/E6/how-to-use-composition-in-java-with-examples-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/java-da-kompozisyon-orneklerle-nasil-kullanilir">Java'da Kompozisyon Örneklerle Nasıl Kullanılır?</a> </h3> <div class="meta"> <div> <a href="/diger/"><span class="icon-chat"></span> Diğer</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/B3/how-to-use-dot-commands-in-the-node-js-repl-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/node-js-repl-de-nokta-komutlari-nasil-kullanilir">Node.js REPL'de Nokta Komutları Nasıl Kullanılır?</a> </h3> <div class="meta"> <div> <a href="/diger/"><span class="icon-chat"></span> Diğer</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/FF/how-to-export-path-environment-variable-in-linux-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/linux-ta-path-ortam-degiskeni-nasil-disa-aktarilir">Linux'ta “PATH” ortam değişkeni nasıl dışa aktarılır</a> </h3> <div class="meta"> <div> <a href="/diger/"><span class="icon-chat"></span> Diğer</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/09/show-system-information-using-attu-with-milvus-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/milvus-ile-attu-kullanarak-sistem-bilgilerini-goster">Milvus ile Attu Kullanarak Sistem Bilgilerini Göster</a> </h3> <div class="meta"> <div> <a href="/diger/"><span class="icon-chat"></span> Diğer</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/3C/how-to-setup-django-environment-on-ec2-windows-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/ec2-windows-ta-django-ortami-nasil-kurulur">EC2 Windows'ta Django Ortamı Nasıl Kurulur</a> </h3> <div class="meta"> <div> <a href="/diger/"><span class="icon-chat"></span> Diğer</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/1F/7-fixes-for-shockwave-flash-has-crashed-in-google-chrome-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/shockwave-flash-icin-7-duzeltme-google-chrome-da-coktu">Shockwave Flash için 7 Düzeltme Google Chrome'da Çöktü</a> </h3> <div class="meta"> <div> <a href="/baska/"><span class="icon-chat"></span> Başka</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/9E/fix-windows-is-still-setting-up-the-class-configuration-for-this-device-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/windows-hala-bu-aygit-icin-sinif-yapilandirmasini-ayarliyor-duzeltme">“Windows Hala Bu Aygıt İçin Sınıf Yapılandırmasını Ayarlıyor” Düzeltme</a> </h3> <div class="meta"> <div> <a href="/diger/"><span class="icon-chat"></span> Diğer</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/58/c-const-function-examples-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/c-const-fonksiyon-ornekleri">C++ Const Fonksiyon Örnekleri</a> </h3> <div class="meta"> <div> <a href="/diger/"><span class="icon-chat"></span> Diğer</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/94/sql-join-on-multiple-conditions-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/birden-cok-kosulda-sql-birlestirme">Birden Çok Koşulda SQL Birleştirme</a> </h3> <div class="meta"> <div> <a href="/diger/"><span class="icon-chat"></span> Diğer</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/CA/golang-casting-examples-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/golang-dokum-ornekleri">Golang Döküm Örnekleri</a> </h3> <div class="meta"> <div> <a href="/diger/"><span class="icon-chat"></span> Diğer</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/8A/who-owns-roblox-1.jpg);"></a> <div class="text"> <h3 class="heading"> <a href="/roblox-un-sahibi-kim">Roblox'un Sahibi Kim?</a> </h3> <div class="meta"> <div> <a href="/baska/"><span class="icon-chat"></span> Başka</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/7B/how-to-iterate-loop-through-json-array-using-javascript-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/javascript-kullanarak-json-dizisi-araciligiyla-donguyu-yineleme">JavaScript kullanarak JSON dizisi aracılığıyla döngüyü yineleme</a> </h3> <div class="meta"> <div> <a href="/diger/"><span class="icon-chat"></span> Diğer</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-fix-systemctl-command-not-found-error-in-linux-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/linux-ta-systemctl-komutu-bulunamadi-hatasi-nasil-onarilir">Linux'ta systemctl Komutu Bulunamadı Hatası Nasıl Onarılır</a> </h3> <div class="meta"> <div> <a href="/diger/"><span class="icon-chat"></span> Diğer</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/0D/how-to-convert-data-types-using-cast-in-postgresql-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/postgresql-de-cast-kullanarak-veri-turlerini-donusturme">PostgreSQL'de CAST Kullanarak Veri Türlerini Dönüştürme</a> </h3> <div class="meta"> <div> <a href="/diger/"><span class="icon-chat"></span> Diğer</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/F7/how-to-find-raspberry-pi-memory-amount-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/raspberry-pi-bellek-miktari-nasil-bulunur">Raspberry Pi Bellek Miktarı Nasıl Bulunur?</a> </h3> <div class="meta"> <div> <a href="/diger/"><span class="icon-chat"></span> Diğer</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/B1/mastering-android-alarms-set-alarms-like-a-pro-1.jpg);"></a> <div class="text"> <h3 class="heading"> <a href="/android-alarmlarinda-uzmanlasmak-alarmlari-profesyonel-gibi-ayarlayin">Android Alarmlarında Uzmanlaşmak: Alarmları Profesyonel Gibi Ayarlayın</a> </h3> <div class="meta"> <div> <a href="/diger/"><span class="icon-chat"></span> Diğer</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-make-a-wheat-farm-in-minecraft-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/minecraft-ta-bugday-ciftligi-nasil-yapilir">Minecraft'ta Buğday Çiftliği Nasıl Yapılır?</a> </h3> <div class="meta"> <div> <a href="/baska/"><span class="icon-chat"></span> Başka</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>