Katkopisteiden ja mediakyselyjen käyttäminen taustaleikkeellä Tailwindissä

Kun luot web-sivulle erilaisia osioita, voi olla tilanteita, joissa ohjelmoijan on leikattava tausta tai muutettava sitä sisällön keräämiseksi. Tämä menetelmä auttaa liitetyn sisällön tehokkaassa hallinnassa sekä sivun eri osien muotoilussa.

Tämä blogi käsittelee seuraavia ydinkäsitteitä:

Kuinka käyttää / hyödyntää keskeytyspisteitä ja mediakyselyitä taustaleikkeellä Tailwindissa?
Rajoituspisteiden käyttäminen taustaleikkeellä Tailwindissä.
Mediakyselyjen käyttäminen taustaleikkeellä Tailwindissä.

Kuinka käyttää / hyödyntää keskeytyspisteitä ja mediakyselyitä taustaleikkeellä Tailwindissa?

' bg-clip-{avainsana} ”-apuohjelmalla asetetaan elementin taustan rajoitusruutu. Tätä apuohjelmaa voidaan käyttää useiden ominaisuuksien kanssa, kuten ' pehmustelaatikko ', ' raja-laatikko ', ' sisältölaatikko ”, ja ” tekstilaatikko ”.

Esimerkki 1: Katkaisupisteiden käyttäminen taustaleikkeellä myötätuulessa

Tämä esimerkki käyttää keskeytyspisteitä taustaleikkeen kanssa sovelletun ' bg-clip-{avainsana} ' apuohjelma ' md ”eli keskikokoiset näytöt ja ” lg ”eli suurikokoiset näyttöluokat:

< html >
< pää >
< meta merkkisetti = 'utf-8' >
< meta nimi = 'näkymä' sisältö = 'width=device-width, original-scale=1' >
< käsikirjoitus src = 'https://cdn.tailwindcss.com' >< / käsikirjoitus >
< / pää >
< kehon >
< tekstialue luokkaa = 'bg-clip-border p-6 bg-yellow-500 border-4 border-red-500 border-dash md:bg-clip-text lg:bg-clip-padding' > Tämä on Tailwind CSS < / tekstialue >
< / kehon >
< / html >

Näiden koodirivien mukaan:

Määritä ensin CDN-polku, jotta voit hyödyntää Tailwind-toimintoja.
Tee sitten ''-elementti, joka sisältää ' <strong> bg-clip-{avainsana}</strong> '-apuohjelma siten, että se on asetettu 'reunaksi' pienikokoisilla näytöillä ja asetukseksi ' <strong> bg-clip-teksti</strong> ' ja ' <strong> bg-clip-pehmuste</strong> ' apuohjelmat keskikokoisilla ja suurilla näytöillä ' <strong> md</strong> ' ja ' <strong> lg</strong> ”luokat.</li> </ul> <p> <strong> Huomautus:</strong> Apuohjelman määrittäminen yksinkertaisesti on sama kuin sen määrittäminen ' <strong> sm</strong> ”luokka.</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> Lähtö</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> Tämä tulos tarkoittaa, että näytön kokoa suurennettaessa tausta leikataan vastaavasti.</p> <h2 id="c"> <strong> Esimerkki 2: Mediakyselyjen käyttäminen taustaleikkeellä Tailwindissä</strong> </h2> <p> Seuraava koodiesittely koskee mediakyselyitä 'taustaleikkeellä' ' <strong> @media</strong> ” sääntö ja määritetty parametri:</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"> pää</span></a> > <br> < <a href="http://december.com/html/4/element/meta.html"><span class="kw2"> meta</span></a> <span class="kw3"> merkkisetti</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"> nimi</span><span class="sy0"> =</span><span class="st0"> 'näkymä'</span> <span class="kw3"> sisältö</span><span class="sy0"> =</span><span class="st0"> 'width=device-width, original-scale=1'</span> > <br> < <a href="http://december.com/html/4/element/script.html"><span class="kw2"> käsikirjoitus</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"> käsikirjoitus</span></a> > <br> <<span class="sy0"> /</span> <a href="http://december.com/html/4/element/head.html"><span class="kw2"> pää</span></a> > <br> < <a href="http://december.com/html/4/element/body.html"><span class="kw2"> kehon</span></a> > <br> < <a href="http://december.com/html/4/element/textarea.html"><span class="kw2"> tekstialue</span></a> <span class="kw3"> luokkaa</span><span class="sy0"> =</span><span class="st0"> 'p-6 bg-yellow-500 border-4 border-red-500 border-dahed'</span> <span class="kw3"> id</span><span class="sy0"> =</span><span class="st0"> 'lämpö'</span> >Tämä on Tailwind CSS<<span class="sy0"> /</span> <a href="http://december.com/html/4/element/textarea.html"><span class="kw2"> tekstialue</span></a> > <br> <<span class="sy0"> /</span> <a href="http://december.com/html/4/element/body.html"><span class="kw2"> kehon</span></a> > <br> < <a href="http://december.com/html/4/element/style.html"><span class="kw2"> tyyli</span></a> <span class="kw3"> tyyppi</span><span class="sy0"> =</span><span class="st0"> 'teksti/css'</span> > <br> #lämpö<span class="br0"> {</span> <br> background-clip: border-box; <br> <span class="br0"> }</span> <br> @<span class="kw3"> media</span> <span class="br0"> (</span> max-<span class="kw3"> leveys</span> :500px<span class="br0"> )</span><span class="br0"> {</span> <br> #lämpö<span class="br0"> {</span> <br> taustaleike: pehmustelaatikko; <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"> tyyli</span></a> > <br> <<span class="sy0"> /</span> <a href="http://december.com/html/4/element/html.html"><span class="kw2"> html</span></a> ><p> Tässä koodinpätkässä:</p> <ul> <li> Toista menetelmät Tailwind CDN -polun sisällyttämiseksi ja '<textarea>'-elementin luomiseksi.</li> <li> Määritä nyt CSS-koodissa oletusarvo ' <strong> taustaleike</strong> ' kiinteistö ' <strong> raja-laatikko</strong> ”.</li> <li> Tämän jälkeen toteuta ' <strong> @media</strong> ' sääntö annetulla parametrilla siten, että niin kauan kuin näytön leveys on '500' pikseliä, ' <strong> taustaleike</strong> ominaisuus on asetettu arvoon <strong> pehmustelaatikko</strong> ”.</li> </ul> <p> <strong> Lähtö</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> Tämän tuloksen perusteella voidaan varmistaa, että taustaleike on siirtynyt näytön muuttuneen leveyden mukaisesti.</p> <h2> <strong> Johtopäätös</strong> </h2> <p> Taustaleikettä voidaan käyttää Tailwind Breakpoints ja Media Queryjen kanssa sovelletun ' <strong> bg-clip-{avainsana}</strong> ' apuohjelma ' <strong> md</strong> ' tai ' <strong> lg</strong> ' luokilla tai ' <strong> @media</strong> ”sääntö. Avainsanaksi voidaan asettaa 'padding-box', 'border-box', 'content-box', 'text-box' ja paljon muuta. Tässä oppaassa olemme osoittaneet Breakpoints and Media Queries with Background Clipin käytön Tailwindissä.</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="/muut/" class="tag-cloud-link">Muut</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">Luokka</h3> <ul class="categories"> <li> <a href="/raspberry-pi/">Raspberry Pi</a> </li><li> <a href="/ethernet/">Ethernet</a> </li><li> <a href="/other/">Muut</a> </li><li> <a href="/nano/">Nano</a> </li><li> <a href="/zoom/">Zoomaus</a> </li><li> <a href="/cinnamon/">Kaneli</a> </li><li> <a href="/reviews/">Arvostelut</a> </li><li> <a href="/zorinos/">Zorinos</a> </li><li> <a href="/radio/">Radio</a> </li><li> <a href="/minecraft/">Minecraft</a> </li><li> <a href="/ssh/">Ssh</a> </li><li> <a href="/openvas/">Openvas</a> </li><li> <a href="/compression/">Puristus</a> </li><li> <a href="/laravel/">Laravel</a> </li><li> <a href="/aircrack/">Lentokone</a> </li><li> <a href="/office-productivity-software/">Toimiston Tuottavuusohjelmisto</a> </li><li> <a href="/boot/">Saapas</a> </li><li> <a href="/system-calls/">Järjestelmäpuhelut</a> </li><li> <a href="/sysctl/">Sysctl</a> </li><li> <a href="/networking/">Verkostoitumista</a> </li><li> <a href="/gpu/">Gpu</a> </li><li> <a href="/gimp/">Linkuttaa</a> </li><li> <a href="/plex/">Plex</a> </li><li> <a href="/uefi/">Uefi</a> </li><li> <a href="/docker/">Satamatyöläinen</a> </li><li> <a href="/firewall/">Palomuuri</a> </li><li> <a href="/wireshark/">Johdotus</a> </li><li> <a href="/synology/">Synologia</a> </li><li> <a href="/pdf/">Pdf</a> </li><li> <a href="/ethereum/">Ethereum</a> </li><li> <a href="/parrot-os/">Parrot Os</a> </li><li> <a href="/sublime/">Ylevä</a> </li><li> <a href="/selinux/">Selinux</a> </li><li> <a href="/hyper-v/">Hyper-V</a> </li><li> <a href="/phone/">Puhelin</a> </li><li> <a href="/kodi/">Koodi</a> </li><li> <a href="/gnome/">Gnome</a> </li><li> <a href="/manjaro/">Herkku</a> </li><li> <a href="/mouse/">Hiiri</a> </li><li> <a href="/nmap/">Nmap</a> </li><li> <a href="/metasploit/">Metasploit</a> </li><li> <a href="/torrent/">Torrent</a> </li><li> <a href="/tablet/">Tabletti</a> </li><li> <a href="/pycharm/">Pycharm</a> </li><li> <a href="/curl/">Kiemura</a> </li><li> <a href="/kde/">Missä</a> </li><li> <a href="/gcc/">Gcc</a> </li><li> <a href="/fonts/">Fontit</a> </li><li> <a href="/ssl/">Ssl</a> </li><li> <a href="/nvidia/">Nvidia</a> </li><li> <a href="/images/">Kuvia</a> </li><li> <a href="/usb/">Usb</a> </li><li> <a href="/squid/">Kalmari</a> </li><li> <a href="/mate/">Toveri</a> </li><li> <a href="/vlc-media-player/">Vlc Media Player</a> </li><li> <a href="/dns/">Dns</a> </li><li> <a href="/bitcoin/">Bitcoin</a> </li><li> <a href="/keyboard/">Näppäimistö</a> </li><li> <a href="/inkscape/">Inkcape</a> </li><li> <a href="/encryption/">Salaus</a> </li><li> <a href="/fedora/">Fedora</a> </li><li> <a href="/owncloud/">Owncloud</a> </li><li> <a href="/scanner/">Skanneri</a> </li><li> <a href="/atom/">Atomi</a> </li><li> <a href="/red-hat/">Punainen Hattu</a> </li><li> <a href="/teamviewer/">Teamviewer</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/">Jupyter -Muistikirja</a> </li><li> <a href="/nfs/">Nfs</a> </li><li> <a href="/blog/">Blogi</a> </li><li> <a href="/lvm/">Lvm</a> </li><li> <a href="/suse/">Suse</a> </li><li> <a href="/media-players/">Mediasoittimet</a> </li><li> <a href="/posix/">Posix</a> </li><li> <a href="/steam/">Höyryä</a> </li><li> <a href="/jenkins/">Jenkins</a> </li><li> <a href="/power/">Tehoa</a> </li><li> <a href="/oracle-linux/">Oracle Linux</a> </li><li> <a href="/netstat/">Netstat</a> </li><li> <a href="/kvm/">Neliömetriä</a> </li><li> <a href="/bluetooth/">Bluetooth</a> </li><li> <a href="/ssd/">Ssd</a> </li><li> <a href="/grep/">Pito</a> </li><li> <a href="/gentoo/">Gentoo</a> </li><li> <a href="/odyssey/">Odysseia</a> </li><li> <a href="/audio/">Audio</a> </li><li> <a href="/cpu/">Prosessori</a> </li><li> <a href="/tensorflow/">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/">Windows</a> </li><li> <a href="/microsoft-edge/">Microsoft Edge (Vanha)</a> </li><li> <a href="/internet-explorer/">Internet Explorer</a> </li><li> <a href="/office/">Toimisto</a> </li><li> <a href="/muut/">Muut</a> </li><li> <a href="/muu/">muu</a> </li><li> <a href="/web-kamera/">web-kamera</a> </li><li> <a href="/mediasoittimet/">mediasoittimet</a> </li><li> <a href="/cpanel/">cPanel</a> </li><li> <a href="/haproxy/">haproxy</a> </li><li> <a href="/tonttu/">tonttu</a> </li><li> <a href="/saapas/">saapas</a> </li><li> <a href="/yleva/">ylevä</a> </li><li> <a href="/ubuntu-24-04-cat/">Ubuntu 24.04</a> </li><li> <a href="/seuraava-pilvi/">seuraava pilvi</a> </li><li> <a href="/hyve/">hyve</a> </li><li> <a href="/usb-lapivienti/">usb-läpivienti</a> </li><li> <a href="/suojattu-kaynnistys/">#suojattu käynnistys</a> </li><li> <a href="/laite-lapivienti/">laite-läpivienti</a> </li><li> <a href="/sdn/">SDN</a> </li> </ul> </div> <div class="sidebar-box ftco-animate"> <h3 class="sidebar-heading">Suosittu Viestiä</h3> <div class="block-21 mb-4 d-flex"> <a class="blog-img mr-4" style="background-image: url(https://softoban.com/img/other/1C/what-is-cloud-storage-and-why-we-should-use-it-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/mika-on-pilvitallennus-ja-miksi-meidan-pitaisi-kayttaa-sita">Mikä on pilvitallennus ja miksi meidän pitäisi käyttää sitä?</a> </h3> <div class="meta"> <div> <a href="/muut/"><span class="icon-chat"></span> Muut</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-find-item-ids-in-minecraft-java-edition-basic-guide-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/tuotetunnusten-loytaminen-minecraft-java-editionista-perusopas">Tuotetunnusten löytäminen Minecraft Java Editionista - Perusopas</a> </h3> <div class="meta"> <div> <a href="/muu/"><span class="icon-chat"></span> muu</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/A6/using-powershell-copy-to-clipboard-function-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/powershell-kopiointi-leikepoydalle-toiminnon-kayttaminen">PowerShell-kopiointi leikepöydälle -toiminnon käyttäminen</a> </h3> <div class="meta"> <div> <a href="/muut/"><span class="icon-chat"></span> Muut</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/how-to-find-what-version-of-git-you-are-running-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/kuinka-selvittaa-mita-git-versiota-kaytat">Kuinka selvittää, mitä Git-versiota käytät</a> </h3> <div class="meta"> <div> <a href="/muu/"><span class="icon-chat"></span> muu</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/DC/the-mechanics-of-nodes-and-flows-in-botpress-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/solmujen-ja-virtausten-mekaniikka-botpressissa">Solmujen ja virtausten mekaniikka Botpressissa</a> </h3> <div class="meta"> <div> <a href="/muut/"><span class="icon-chat"></span> Muut</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/A1/javascript-window-resize-event-1.gif);"></a> <div class="text"> <h3 class="heading"> <a href="/javascript-ikkunan-koon-muuttaminen-tapahtuma">JavaScript-ikkunan koon muuttaminen tapahtuma</a> </h3> <div class="meta"> <div> <a href="/muu/"><span class="icon-chat"></span> muu</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/B4/c-bool-type-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/c-bool-tyyppi">C# Bool-tyyppi</a> </h3> <div class="meta"> <div> <a href="/muut/"><span class="icon-chat"></span> Muut</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/D8/what-is-aws-certificate-manager-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/mika-on-aws-certificate-manager">Mikä on AWS Certificate Manager?</a> </h3> <div class="meta"> <div> <a href="/muu/"><span class="icon-chat"></span> muu</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/08/how-to-craft-a-golden-carrot-in-minecraft-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/kuinka-tehda-kultainen-porkkana-minecraftissa">Kuinka tehdä kultainen porkkana Minecraftissa</a> </h3> <div class="meta"> <div> <a href="/muut/"><span class="icon-chat"></span> Muut</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/32/how-to-disable-selinux-on-fedora-linux-39-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/kuinka-poistaa-selinux-kaytosta-fedora-linux-39-ssa">Kuinka poistaa SELinux käytöstä Fedora Linux 39:ssä</a> </h3> <div class="meta"> <div> <a href="/muu/"><span class="icon-chat"></span> muu</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/0B/makefile-variables-and-arguments-a-comprehensive-guide-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/makefile-muuttujat-ja-argumentit-kattava-opas">Makefile-muuttujat ja argumentit: kattava opas</a> </h3> <div class="meta"> <div> <a href="/muu/"><span class="icon-chat"></span> muu</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/5A/how-to-create-a-tarball-in-linux-1.jpg);"></a> <div class="text"> <h3 class="heading"> <a href="/tarballin-luominen-linuxissa">Tarballin luominen Linuxissa</a> </h3> <div class="meta"> <div> <a href="/muut/"><span class="icon-chat"></span> Muut</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/B7/how-to-use-chatgpt-by-openai-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/kuinka-kayttaa-openai-n-chatgpt-ta">Kuinka käyttää OpenAI:n ChatGPT:tä?</a> </h3> <div class="meta"> <div> <a href="/muut/"><span class="icon-chat"></span> Muut</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/3E/how-to-install-ansible-on-ubuntu-24-04-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/kuinka-asentaa-ansible-ubuntuun-24-04">Kuinka asentaa Ansible Ubuntuun 24.04</a> </h3> <div class="meta"> <div> <a href="/muut/"><span class="icon-chat"></span> Muut</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="/kuinka-toteuttaa-foreach-silmukka-pythonissa">Kuinka toteuttaa _ForEach_-silmukka Pythonissa</a> </h3> <div class="meta"> <div> <a href="/muut/"><span class="icon-chat"></span> Muut</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/70/setup-a-jenkins-server-using-docker-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/asenna-jenkins-palvelin-dockerin-avulla">Asenna Jenkins-palvelin Dockerin avulla</a> </h3> <div class="meta"> <div> <a href="/muut/"><span class="icon-chat"></span> Muut</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/35/why-is-docker-build-not-showing-any-output-from-commands-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/miksi-docker-build-ei-nayta-mitaan-lahtoa-komennoista">Miksi Docker Build ei näytä mitään lähtöä komennoista?</a> </h3> <div class="meta"> <div> <a href="/muut/"><span class="icon-chat"></span> Muut</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/F5/what-s-the-difference-between-and-while-declaring-a-javascript-array-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/mita-eroa-on-ja-maaritettaessa-javascript-taulukko">Mitä eroa on '{}' ja '[]' määritettäessä JavaScript-taulukko?</a> </h3> <div class="meta"> <div> <a href="/muut/"><span class="icon-chat"></span> Muut</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/32/how-to-find-eigenvalues-and-eigenvectors-in-matlab-using-eig-function-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/kuinka-loytaa-ominaisarvot-ja-ominaisvektorit-matlabissa-kayttamalla-eig-funktiota">Kuinka löytää ominaisarvot ja ominaisvektorit MATLABissa käyttämällä eig()-funktiota?</a> </h3> <div class="meta"> <div> <a href="/muut/"><span class="icon-chat"></span> Muut</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/34/sql-group-by-date-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/sql-ryhma-paivamaaran-mukaan">SQL-ryhmä päivämäärän mukaan</a> </h3> <div class="meta"> <div> <a href="/muut/"><span class="icon-chat"></span> Muut</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>