Como usar pontos de interrupção e consultas de mídia com clipe de fundo no Tailwind

Como Usar Pontos De Interrupcao E Consultas De Midia Com Clipe De Fundo No Tailwind

Ao criar diferentes seções em uma página da web, pode haver cenários em que o programador precise recortar o plano de fundo ou modificá-lo para acumular o conteúdo. Esta metodologia auxilia no gerenciamento eficaz do conteúdo anexado, bem como no estilo de diferentes seções da página.

Este blog elabora os seguintes conceitos básicos:

Como usar/utilizar pontos de interrupção e consultas de mídia com clipe de fundo no Tailwind?
Aplicando pontos de interrupção com clipe de fundo no Tailwind.
Aplicando consultas de mídia com clipe de fundo no Tailwind.

Como usar/utilizar pontos de interrupção e consultas de mídia com clipe de fundo no Tailwind?

O ' bg-clip-{palavra-chave} ”O utilitário é usado para definir a caixa delimitadora do plano de fundo do elemento. Este utilitário pode ser usado com múltiplas propriedades, como “ caixa de preenchimento ',' caixa de fronteira ',' caixa de conteúdo ', e ' caixa de texto ”.

Exemplo 1: Aplicação de pontos de interrupção com clipe de fundo no Tailwind

Este exemplo aplica os pontos de interrupção com o clipe de fundo por meio do “ bg-clip-{palavra-chave} ”utilitário com“ médico ”ou seja, telas de tamanho médio e“ LG ”ou seja, classes de tela de grande porte:

< HTML >
< cabeça >
< meta conjunto de caracteres = 'utf-8' >
< meta nome = 'janela de exibição' contente = 'largura=largura do dispositivo, escala inicial=1' >
< roteiro fonte = 'https://cdn.tailwindcss.com' >< / roteiro >
< / cabeça >
< corpo >
< área de texto aula = 'bg-clip-border p-6 bg-yellow-500 border-4 border-red-500 border-dashed md:bg-clip-text lg:bg-clip-padding' > Este é Tailwind CSS < / área de texto >
< / corpo >
< / HTML >

De acordo com estas linhas de código:

Primeiro, especifique o caminho CDN para usar as funcionalidades do Tailwind.
Em seguida, faça um elemento “” compreendendo o “ <strong> bg-clip-{palavra-chave}</strong> ”Utilitário tal que seja definido como “borda” em telas de tamanho pequeno e definido como “ <strong> bg-clip-texto</strong> ' e ' <strong> preenchimento de clipe bg</strong> ”Utilitários nas telas de médio e grande porte através do“ <strong> médico</strong> ' e ' <strong> LG</strong> ”classes, respectivamente.</li> </ul> <p> <strong> Observação:</strong> Especificar o utilitário é simplesmente o mesmo que especificá-lo no “ <strong> sm</strong> ' aula.</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> Saída</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> Este resultado significa que ao expandir o tamanho da tela, o fundo é cortado de acordo.</p> <h2 id="c"> <strong> Exemplo 2: aplicação de consultas de mídia com clipe de fundo no Tailwind</strong> </h2> <p> A demonstração de código a seguir aplica as Media Queries com “Background Clip” por meio do “ <strong> @meios de comunicação</strong> ”regra e o parâmetro especificado:</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"> cabeça</span></a> > <br> < <a href="http://december.com/html/4/element/meta.html"><span class="kw2"> meta</span></a> <span class="kw3"> conjunto de caracteres</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"> nome</span><span class="sy0"> =</span><span class="st0"> 'janela de exibição'</span> <span class="kw3"> contente</span><span class="sy0"> =</span><span class="st0"> 'largura=largura do dispositivo, escala inicial=1'</span> > <br> < <a href="http://december.com/html/4/element/script.html"><span class="kw2"> roteiro</span></a> <span class="kw3"> fonte</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"> roteiro</span></a> > <br> <<span class="sy0"> /</span> <a href="http://december.com/html/4/element/head.html"><span class="kw2"> cabeça</span></a> > <br> < <a href="http://december.com/html/4/element/body.html"><span class="kw2"> corpo</span></a> > <br> < <a href="http://december.com/html/4/element/textarea.html"><span class="kw2"> área de texto</span></a> <span class="kw3"> aula</span><span class="sy0"> =</span><span class="st0"> 'p-6 bg-yellow-500 border-4 border-red-500 border-tracejado'</span> <span class="kw3"> eu ia</span><span class="sy0"> =</span><span class="st0"> 'temperatura'</span> >Este é o Tailwind CSS<<span class="sy0"> /</span> <a href="http://december.com/html/4/element/textarea.html"><span class="kw2"> área de texto</span></a> > <br> <<span class="sy0"> /</span> <a href="http://december.com/html/4/element/body.html"><span class="kw2"> corpo</span></a> > <br> < <a href="http://december.com/html/4/element/style.html"><span class="kw2"> estilo</span></a> <span class="kw3"> tipo</span><span class="sy0"> =</span><span class="st0"> 'texto/css'</span> > <br> #temp<span class="br0"> {</span> <br> clipe de fundo: caixa de borda; <br> <span class="br0"> }</span> <br> @<span class="kw3"> meios de comunicação</span> <span class="br0"> (</span> máximo-<span class="kw3"> largura</span> :500px<span class="br0"> )</span><span class="br0"> {</span> <br> #temp<span class="br0"> {</span> <br> clipe de fundo: caixa de preenchimento; <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"> estilo</span></a> > <br> <<span class="sy0"> /</span> <a href="http://december.com/html/4/element/html.html"><span class="kw2"> HTML</span></a> ><p> Neste trecho de código:</p> <ul> <li> Repita as metodologias para incorporar o caminho CDN do Tailwind e criar o elemento “<textarea>”.</li> <li> Agora, no código CSS, especifique o padrão “ <strong> clipe de fundo</strong> ”propriedade como um“ <strong> caixa de fronteira</strong> ”.</li> <li> Depois disso, implemente o “ <strong> @meios de comunicação</strong> ”Regra com o parâmetro fornecido, de modo que, desde que a largura da tela seja igual a “500” pixels, o “ <strong> clipe de fundo</strong> ”propriedade está definida como“ <strong> caixa de preenchimento</strong> ”.</li> </ul> <p> <strong> Saída</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> A partir deste resultado, pode-se verificar que a transição do clipe de fundo ocorre de acordo com a largura alterada da tela.</p> <h2> <strong> Conclusão</strong> </h2> <p> O clipe de fundo pode ser usado com pontos de interrupção do Tailwind e consultas de mídia por meio do “ <strong> bg-clip-{palavra-chave}</strong> ”utilitário com“ <strong> médico</strong> ' ou ' <strong> LG</strong> ”aulas, ou através do“ <strong> @meios de comunicação</strong> ' regra. A palavra-chave pode ser definida como “caixa de preenchimento”, “caixa de borda”, “caixa de conteúdo”, “caixa de texto” e muito mais. Neste guia, demonstramos o uso de pontos de interrupção e consultas de mídia com clipe de fundo no 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="/outro/" class="tag-cloud-link">Outro</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">Categoria</h3> <ul class="categories"> <li> <a href="/raspberry-pi/">Raspberry Pi</a> </li><li> <a href="/ethernet/">Ethernet</a> </li><li> <a href="/other/">De Outros</a> </li><li> <a href="/nano/">Nano</a> </li><li> <a href="/zoom/">Ampliação</a> </li><li> <a href="/cinnamon/">Canela</a> </li><li> <a href="/reviews/">Avaliações</a> </li><li> <a href="/zorinos/">Zorinos</a> </li><li> <a href="/radio/">Rádio</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/">Compressão</a> </li><li> <a href="/laravel/">Laravel</a> </li><li> <a href="/aircrack/">Aircrack</a> </li><li> <a href="/office-productivity-software/">Software De Produtividade De Escritório</a> </li><li> <a href="/boot/">Bota</a> </li><li> <a href="/system-calls/">Chamadas De Sistema</a> </li><li> <a href="/sysctl/">Sysctl</a> </li><li> <a href="/networking/">Networking</a> </li><li> <a href="/gpu/">Gpu</a> </li><li> <a href="/gimp/">Gimp</a> </li><li> <a href="/plex/">Plex</a> </li><li> <a href="/uefi/">Uefi</a> </li><li> <a href="/docker/">Docker</a> </li><li> <a href="/firewall/">Firewall</a> </li><li> <a href="/wireshark/">Wirehark</a> </li><li> <a href="/synology/">Sinologia</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/">Sublime</a> </li><li> <a href="/selinux/">Selinux</a> </li><li> <a href="/hyper-v/">Hiper-V</a> </li><li> <a href="/phone/">Telefone</a> </li><li> <a href="/kodi/">Código</a> </li><li> <a href="/gnome/">Gnomo</a> </li><li> <a href="/manjaro/">Delicadeza</a> </li><li> <a href="/mouse/">Mouse</a> </li><li> <a href="/nmap/">Nmap</a> </li><li> <a href="/metasploit/">Metasploit</a> </li><li> <a href="/torrent/">Torrente</a> </li><li> <a href="/tablet/">Tábua</a> </li><li> <a href="/pycharm/">Pycharm</a> </li><li> <a href="/curl/">Ondulação</a> </li><li> <a href="/kde/">Onde</a> </li><li> <a href="/gcc/">Gcc</a> </li><li> <a href="/fonts/">Fontes</a> </li><li> <a href="/ssl/">Ssl</a> </li><li> <a href="/nvidia/">Nvidia</a> </li><li> <a href="/images/">Imagens</a> </li><li> <a href="/usb/">Usb</a> </li><li> <a href="/squid/">Lula</a> </li><li> <a href="/mate/">Amigo</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/">Teclado</a> </li><li> <a href="/inkscape/">Inkscape</a> </li><li> <a href="/encryption/">Criptografia</a> </li><li> <a href="/fedora/">Fedora</a> </li><li> <a href="/owncloud/">Owncloud</a> </li><li> <a href="/scanner/">Scanner</a> </li><li> <a href="/atom/">Átomo</a> </li><li> <a href="/red-hat/">Chapéu Vermelho</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/">Notebook Jupyter</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/">Players De Mídia</a> </li><li> <a href="/posix/">Posix</a> </li><li> <a href="/steam/">Vapor</a> </li><li> <a href="/jenkins/">Jenkins</a> </li><li> <a href="/power/">Potência</a> </li><li> <a href="/oracle-linux/">Oracle Linux</a> </li><li> <a href="/netstat/">Netstat</a> </li><li> <a href="/kvm/">Sqm</a> </li><li> <a href="/bluetooth/">Bluetooth</a> </li><li> <a href="/ssd/">Ssd</a> </li><li> <a href="/grep/">Pegada</a> </li><li> <a href="/gentoo/">Gentoo</a> </li><li> <a href="/odyssey/">Odisséia</a> </li><li> <a href="/audio/">Áudio</a> </li><li> <a href="/cpu/">Cpu</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/">Janelas</a> </li><li> <a href="/microsoft-edge/">Microsoft Edge (Legado)</a> </li><li> <a href="/internet-explorer/">Internet Explorer</a> </li><li> <a href="/office/">Escritório</a> </li><li> <a href="/outro/">Outro</a> </li><li> <a href="/webcam/">Webcam</a> </li><li> <a href="/players-de-midia/">players de mídia</a> </li><li> <a href="/cpanel/">cPanel</a> </li><li> <a href="/haproxy/">haproxy</a> </li><li> <a href="/de-outros/">De outros</a> </li><li> <a href="/gnomo/">gnomo</a> </li><li> <a href="/bota/">bota</a> </li><li> <a href="/ubuntu-24-04-cat/">Ubuntu 24.04</a> </li><li> <a href="/proxima-nuvem/">próxima nuvem</a> </li><li> <a href="/virtude/">virtude</a> </li><li> <a href="/passagem-usb/">passagem USB</a> </li><li> <a href="/modo-de-seguranca/">#modo de segurança</a> </li><li> <a href="/passagem-de-dispositivo/">passagem de dispositivo</a> </li><li> <a href="/sdn/">SDN</a> </li><li> <a href="/instalacao-do-driver/">instalação do driver</a> </li> </ul> </div> <div class="sidebar-box ftco-animate"> <h3 class="sidebar-heading">Publicações Populares</h3> <div class="block-21 mb-4 d-flex"> <a class="blog-img mr-4" style="background-image: url(https://softoban.com/img/other/5D/how-to-change-the-brightness-of-flashlight-on-iphone-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/como-alterar-o-brilho-da-lanterna-no-iphone">Como alterar o brilho da lanterna no iPhone</a> </h3> <div class="meta"> <div> <a href="/outro/"><span class="icon-chat"></span> Outro</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/B8/event-loop-in-node-js-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/loop-de-eventos-no-no-js">loop de eventos no nó js</a> </h3> <div class="meta"> <div> <a href="/outro/"><span class="icon-chat"></span> Outro</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/4D/how-to-integrate-a-function-in-matlab-using-int-function-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/como-integrar-uma-funcao-no-matlab-usando-a-funcao-int">Como integrar uma função no MATLAB usando a função Int()</a> </h3> <div class="meta"> <div> <a href="/outro/"><span class="icon-chat"></span> Outro</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/99/how-to-use-isblank-function-in-c-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/como-usar-a-funcao-isblank-em-c">Como usar a função isblank() em C++</a> </h3> <div class="meta"> <div> <a href="/outro/"><span class="icon-chat"></span> Outro</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/C0/what-is-memset-in-c-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/o-que-e-memset-em-c">O que é memset() em C++</a> </h3> <div class="meta"> <div> <a href="/outro/"><span class="icon-chat"></span> Outro</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/04/fix-the-disc-image-file-is-corrupted-error-in-windows-10-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/correcao-o-arquivo-de-imagem-do-disco-esta-corrompido-erro-no-windows-10">Correção: O arquivo de imagem do disco está corrompido Erro no Windows 10</a> </h3> <div class="meta"> <div> <a href="/outro/"><span class="icon-chat"></span> Outro</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/1A/c-cpp-stringbuilder-examples-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/exemplos-de-stringbuilder-c-cpp">Exemplos de StringBuilder C++ (Cpp)</a> </h3> <div class="meta"> <div> <a href="/outro/"><span class="icon-chat"></span> Outro</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/28/how-to-install-go-on-ubuntu-24-04-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/como-instalar-o-go-no-ubuntu-24-04">Como instalar o Go no Ubuntu 24.04</a> </h3> <div class="meta"> <div> <a href="/outro/"><span class="icon-chat"></span> Outro</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/AA/how-to-know-windows-10-version-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/como-saber-a-versao-do-windows-10">Como saber a versão do Windows 10</a> </h3> <div class="meta"> <div> <a href="/outro/"><span class="icon-chat"></span> Outro</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/62/github-repository-templates-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/modelos-de-repositorio-do-github">Modelos de repositório do GitHub</a> </h3> <div class="meta"> <div> <a href="/outro/"><span class="icon-chat"></span> Outro</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/93/recording-changes-to-the-repository-in-git-explained-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/gravando-alteracoes-no-repositorio-no-git-explicado">Gravando Alterações no Repositório no Git | explicado</a> </h3> <div class="meta"> <div> <a href="/outro/"><span class="icon-chat"></span> Outro</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/D9/how-to-install-virtio-drivers-and-qemu-guest-agent-on-windows-10-11-proxmox-ve-virtual-machines-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/como-instalar-drivers-virtio-e-agente-convidado-qemu-em-maquinas-virtuais-proxmox-ve-windows-10-11">Como instalar drivers VirtIO e agente convidado QEMU em máquinas virtuais Proxmox VE Windows 10/11</a> </h3> <div class="meta"> <div> <a href="/outro/"><span class="icon-chat"></span> Outro</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/62/what-is-chap-and-how-does-it-work-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/o-que-e-chap-e-como-funciona">O que é CHAP e como funciona?</a> </h3> <div class="meta"> <div> <a href="/outro/"><span class="icon-chat"></span> Outro</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-setup-linux-dash-on-raspberry-pi-for-server-monitoring-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/como-configurar-o-linux-dash-no-raspberry-pi-para-monitoramento-de-servidor">Como configurar o Linux Dash no Raspberry Pi para monitoramento de servidor</a> </h3> <div class="meta"> <div> <a href="/outro/"><span class="icon-chat"></span> Outro</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/how-to-install-cmake-on-fedora-linux-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/como-instalar-o-cmake-no-fedora-linux">Como instalar o CMake no Fedora Linux</a> </h3> <div class="meta"> <div> <a href="/outro/"><span class="icon-chat"></span> Outro</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/51/how-to-handle-contenteditable-change-events-in-javascript-1.gif);"></a> <div class="text"> <h3 class="heading"> <a href="/como-lidar-com-eventos-de-alteracao-de-conteudo-editavel-em-javascript">Como lidar com eventos de alteração de conteúdo editável em JavaScript</a> </h3> <div class="meta"> <div> <a href="/outro/"><span class="icon-chat"></span> Outro</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/25/how-to-create-multiple-networkmanager-connection-profiles-for-the-same-network-interface-on-linux-and-switch-between-them-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/como-criar-varios-perfis-de-conexao-do-networkmanager-para-a-mesma-interface-de-rede-no-linux-e-alternar-entre-eles">Como criar vários perfis de conexão do NetworkManager para a mesma interface de rede no Linux e alternar entre eles</a> </h3> <div class="meta"> <div> <a href="/outro/"><span class="icon-chat"></span> Outro</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="/fazendo-um-retorno-de-script-bash-com-diferentes-codigos-de-retorno-na-saida">Fazendo um retorno de script Bash com diferentes códigos de retorno na saída</a> </h3> <div class="meta"> <div> <a href="/outro/"><span class="icon-chat"></span> Outro</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/15/find-an-element-in-dom-based-on-an-attribute-value-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/encontre-um-elemento-no-dom-com-base-em-um-valor-de-atributo">Encontre um elemento no DOM com base em um valor de atributo</a> </h3> <div class="meta"> <div> <a href="/outro/"><span class="icon-chat"></span> Outro</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/map-vs-object-in-javascript-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/mapa-vs-objeto-em-javascript">Mapa vs Objeto em JavaScript</a> </h3> <div class="meta"> <div> <a href="/outro/"><span class="icon-chat"></span> Outro</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>