Cách sử dụng Điểm dừng và Truy vấn phương tiện với Clip nền trong Tailwind

Trong khi tạo các phần khác nhau trong một trang web, có thể có những trường hợp mà lập trình viên cần cắt nền hoặc sửa đổi nó để tích lũy nội dung. Phương pháp này hỗ trợ trong việc quản lý nội dung được thêm vào một cách hiệu quả cũng như tạo kiểu cho các phần trang khác nhau.

Blog này trình bày chi tiết về các khái niệm cốt lõi sau:

Làm cách nào để sử dụng/sử dụng điểm dừng và truy vấn phương tiện với Clip nền trong Tailwind?
Áp dụng Breakpoint với Background Clip trong Tailwind.
Áp dụng Truy vấn phương tiện với Clip nền trong Tailwind.

Làm cách nào để sử dụng/sử dụng điểm dừng và truy vấn phương tiện với Clip nền trong Tailwind?

Các ' bg-clip-{từ khóa} ” tiện ích được sử dụng để đặt hộp giới hạn cho nền của phần tử. Tiện ích này có thể được sử dụng với nhiều thuộc tính, chẳng hạn như “ hộp đệm ',' hộp viền ',' hộp nội dung ', Và ' hộp văn bản ”.

Ví dụ 1: Áp dụng Breakpoint với Background Clip trong Tailwind

Ví dụ này áp dụng các điểm dừng với Clip nền thông qua “ bg-clip-{từ khóa} ” tiện ích với “ md ” tức là màn hình cỡ trung bình và “ lg ” tức là các lớp màn hình có kích thước lớn:

< html >
< cái đầu >
< meta bộ ký tự = 'utf-8' >
< meta tên = 'khung nhìn' nội dung = 'width=chiều rộng thiết bị, tỷ lệ ban đầu=1' >
< kịch bản src = 'https://cdn.tailwindcss.com' >< / kịch bản >
< / cái đầu >
< thân hình >
< vùng văn bản lớp học = 'bg-clip-border p-6 bg-vàng-500 viền-4 viền-đỏ-500 viền-gạch ngang md:bg-clip-text lg:bg-clip-padding' > Đây là CSS Tailwind < / vùng văn bản >
< / thân hình >
< / html >

Theo những dòng mã này:

Đầu tiên, chỉ định đường dẫn CDN để sử dụng các chức năng của Tailwind.
Sau đó, tạo phần tử “” bao gồm “ <strong> bg-clip-{từ khóa}</strong> ” tiện ích được đặt thành “viền” trên màn hình cỡ nhỏ và được đặt thành “ <strong> bg-clip-văn bản</strong> ' Và ' <strong> bg-clip-đệm</strong> ” tiện ích trên màn hình cỡ vừa và lớn thông qua “ <strong> md</strong> ' Và ' <strong> lg</strong> ” các lớp tương ứng.</li> </ul> <p> <strong> Ghi chú:</strong> Việc chỉ định tiện ích đơn giản cũng giống như chỉ định nó trong phần “ <strong> sm</strong> ' lớp học.</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> đầu ra</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> Kết quả này biểu thị rằng khi mở rộng kích thước màn hình, nền sẽ được cắt bớt tương ứng.</p> <h2 id="c"> <strong> Ví dụ 2: Áp dụng Media Queries với Background Clip trong Tailwind</strong> </h2> <p> Phần trình diễn mã sau đây áp dụng Truy vấn phương tiện với “Clip nền” thông qua “ <strong> @phương tiện truyền thông</strong> ” quy tắc và tham số được chỉ định:</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"> cái đầu</span></a> > <br> < <a href="http://december.com/html/4/element/meta.html"><span class="kw2"> meta</span></a> <span class="kw3"> bộ ký tự</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"> tên</span><span class="sy0"> =</span><span class="st0"> 'khung nhìn'</span> <span class="kw3"> nội dung</span><span class="sy0"> =</span><span class="st0"> 'width=chiều rộng thiết bị, tỷ lệ ban đầu=1'</span> > <br> < <a href="http://december.com/html/4/element/script.html"><span class="kw2"> kịch bản</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ịch bản</span></a> > <br> <<span class="sy0"> /</span> <a href="http://december.com/html/4/element/head.html"><span class="kw2"> cái đầu</span></a> > <br> < <a href="http://december.com/html/4/element/body.html"><span class="kw2"> thân hình</span></a> > <br> < <a href="http://december.com/html/4/element/textarea.html"><span class="kw2"> vùng văn bản</span></a> <span class="kw3"> lớp học</span><span class="sy0"> =</span><span class="st0"> 'p-6 bg-vàng-500 viền-4 viền-đỏ-500 viền-gạch ngang'</span> <span class="kw3"> nhận dạng</span><span class="sy0"> =</span><span class="st0"> 'nhiệt độ'</span> >Đây là CSS Tailwind<<span class="sy0"> /</span> <a href="http://december.com/html/4/element/textarea.html"><span class="kw2"> vùng văn bản</span></a> > <br> <<span class="sy0"> /</span> <a href="http://december.com/html/4/element/body.html"><span class="kw2"> thân hình</span></a> > <br> < <a href="http://december.com/html/4/element/style.html"><span class="kw2"> phong cách</span></a> <span class="kw3"> kiểu</span><span class="sy0"> =</span><span class="st0"> 'văn bản/css'</span> > <br> #nhiệt độ<span class="br0"> {</span> <br> clip nền: hộp viền; <br> <span class="br0"> }</span> <br> @<span class="kw3"> phương tiện truyền thông</span> <span class="br0"> (</span> tối đa-<span class="kw3"> chiều rộng</span> :500px<span class="br0"> )</span><span class="br0"> {</span> <br> #nhiệt độ<span class="br0"> {</span> <br> clip nền: hộp đệm; <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"> phong cách</span></a> > <br> <<span class="sy0"> /</span> <a href="http://december.com/html/4/element/html.html"><span class="kw2"> html</span></a> ><p> Trong đoạn mã này:</p> <ul> <li> Lặp lại các phương pháp kết hợp đường dẫn CDN của Tailwind và tạo phần tử “<textarea>”.</li> <li> Bây giờ, trong mã CSS, hãy chỉ định mặc định “ <strong> clip nền</strong> ” tài sản như một “ <strong> hộp viền</strong> ”.</li> <li> Sau đó, thực hiện “ <strong> @phương tiện truyền thông</strong> ” quy tắc với tham số đã cho sao cho miễn là chiều rộng của màn hình bằng “500” pixel thì “ <strong> clip nền</strong> ” thuộc tính được đặt thành “ <strong> hộp đệm</strong> ”.</li> </ul> <p> <strong> đầu ra</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ừ kết quả này, có thể xác minh rằng Background Clip được chuyển đổi phù hợp với độ rộng đã thay đổi của màn hình.</p> <h2> <strong> Phần kết luận</strong> </h2> <p> Clip nền có thể được sử dụng với Điểm dừng Tailwind và Truy vấn phương tiện thông qua “ <strong> bg-clip-{từ khóa}</strong> ” tiện ích với “ <strong> md</strong> ' hoặc ' <strong> lg</strong> ” các lớp hoặc thông qua “ <strong> @phương tiện truyền thông</strong> ' luật lệ. Từ khóa có thể được đặt thành “hộp đệm”, “hộp viền”, “hộp nội dung”, “hộp văn bản” và hơn thế nữa. Trong hướng dẫn này, chúng tôi đã trình bày cách sử dụng Điểm dừng và Truy vấn phương tiện với Clip nền trong 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="/khac/" class="tag-cloud-link">Khác</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">Thể LoạI</h3> <ul class="categories"> <li> <a href="/raspberry-pi/">Raspberry Pi</a> </li><li> <a href="/ethernet/">Ethernet</a> </li><li> <a href="/other/">Khác</a> </li><li> <a href="/nano/">Nano</a> </li><li> <a href="/zoom/">Phóng</a> </li><li> <a href="/cinnamon/">Quế</a> </li><li> <a href="/reviews/">Đánh Giá</a> </li><li> <a href="/zorinos/">Zorinos</a> </li><li> <a href="/radio/">Đài</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/">Nén</a> </li><li> <a href="/laravel/">Laravel</a> </li><li> <a href="/aircrack/">Máy Bay</a> </li><li> <a href="/office-productivity-software/">Phần Mềm Năng Suất Văn Phòng</a> </li><li> <a href="/boot/">Khởi Động</a> </li><li> <a href="/system-calls/">Cuộc Gọi Hệ Thống</a> </li><li> <a href="/sysctl/">Sysctl</a> </li><li> <a href="/networking/">Mạng Lưới</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/">Người Đóng Tàu</a> </li><li> <a href="/firewall/">Bức Tường Lửa</a> </li><li> <a href="/wireshark/">Wirehark</a> </li><li> <a href="/synology/">Synology</a> </li><li> <a href="/pdf/">Pdf</a> </li><li> <a href="/ethereum/">Ethereum</a> </li><li> <a href="/parrot-os/">Hệ Điều Hành Parrot</a> </li><li> <a href="/sublime/">Cao Siêu</a> </li><li> <a href="/selinux/">Selinux</a> </li><li> <a href="/hyper-v/">Siêu V</a> </li><li> <a href="/phone/">Điện Thoại</a> </li><li> <a href="/kodi/">Mã Số</a> </li><li> <a href="/gnome/">Gnome</a> </li><li> <a href="/manjaro/">Tinh Vi</a> </li><li> <a href="/mouse/">Chuột</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/">Viên Thuốc</a> </li><li> <a href="/pycharm/">Pycharm</a> </li><li> <a href="/curl/">Xoăn</a> </li><li> <a href="/kde/">Ở Đâu</a> </li><li> <a href="/gcc/">Gcc</a> </li><li> <a href="/fonts/">Phông Chữ</a> </li><li> <a href="/ssl/">Ssl</a> </li><li> <a href="/nvidia/">Nvidia</a> </li><li> <a href="/images/">Hình Ảnh</a> </li><li> <a href="/usb/">Usb</a> </li><li> <a href="/squid/">Mực Ống</a> </li><li> <a href="/mate/">Bạn</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/">Bàn Phím</a> </li><li> <a href="/inkscape/">Inkscape</a> </li><li> <a href="/encryption/">Mã Hóa</a> </li><li> <a href="/fedora/">Mũ Phớt</a> </li><li> <a href="/owncloud/">Owncloud</a> </li><li> <a href="/scanner/">Máy Quét</a> </li><li> <a href="/atom/">Nguyên Tử</a> </li><li> <a href="/red-hat/">Mũ Đỏ</a> </li><li> <a href="/teamviewer/">Teamviewer</a> </li><li> <a href="/skype/">Ứng Dụng Trò Chuyện</a> </li><li> <a href="/vpn/">Vpn</a> </li><li> <a href="/xfce/">Xfce</a> </li><li> <a href="/jupyter-notebook/">Máy Tính Xách Tay 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/">Trình Phát Phương Tiện</a> </li><li> <a href="/posix/">Posix</a> </li><li> <a href="/steam/">Hơi Nước</a> </li><li> <a href="/jenkins/">Jenkins</a> </li><li> <a href="/power/">Sức Mạnh</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/">Nắm Chặt</a> </li><li> <a href="/gentoo/">Gentoo</a> </li><li> <a href="/odyssey/">Odyssey</a> </li><li> <a href="/audio/">Âm Thanh</a> </li><li> <a href="/cpu/">Cpu</a> </li><li> <a href="/tensorflow/">Dòng Chảy Căng Thẳng</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/">Các Cửa Sổ</a> </li><li> <a href="/microsoft-edge/">Microsoft Edge (Kế Thừa)</a> </li><li> <a href="/internet-explorer/">Trình Duyệt Web Ie</a> </li><li> <a href="/office/">Văn Phòng</a> </li><li> <a href="/khac/">Khác</a> </li><li> <a href="/ung-dung-tro-chuyen/">Ứng dụng trò chuyện</a> </li><li> <a href="/webcam/">webcam</a> </li><li> <a href="/trinh-phat-phuong-tien/">trình phát phương tiện</a> </li><li> <a href="/cpanel/">cPanel</a> </li><li> <a href="/haproxy/">haproxy</a> </li><li> <a href="/than-lun/">thần lùn</a> </li><li> <a href="/khoi-dong/">khởi động</a> </li><li> <a href="/sieu-pham/">siêu phàm</a> </li><li> <a href="/removal-guides/">Hướng Dẫn Loại Bỏ</a> </li><li> <a href="/ubuntu-24-04-cat/">Ubuntu 24.04</a> </li><li> <a href="/dam-may-tiep-theo/">đám mây tiếp theo</a> </li><li> <a href="/duc-hanh/">Đức hạnh</a> </li><li> <a href="/thong-qua-usb/">thông qua usb</a> </li><li> <a href="/mu-phot/">mũ phớt</a> </li><li> <a href="/khoi-dong-an-toan/">#khởi động an toàn</a> </li><li> <a href="/thong-qua-thiet-bi/">thông qua thiết bị</a> </li><li> <a href="/sdn/">SDN</a> </li> </ul> </div> <div class="sidebar-box ftco-animate"> <h3 class="sidebar-heading">Bài ViếT Phổ BiếN</h3> <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="/lam-cach-nao-de-sao-chep-cam-ket-gan-day-nhat-tu-gitlab">Làm cách nào để sao chép Cam kết gần đây nhất từ GitLab?</a> </h3> <div class="meta"> <div> <a href="/khac/"><span class="icon-chat"></span> Khác</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/74/how-to-get-the-boxing-gloves-ingredient-in-roblox-wacky-wizards-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/cach-lay-thanh-phan-gang-tay-dam-boc-trong-roblox-wacky-wizards">Cách lấy thành phần găng tay đấm bốc trong Roblox Wacky Wizards</a> </h3> <div class="meta"> <div> <a href="/khac/"><span class="icon-chat"></span> Khác</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/CB/how-to-check-for-ports-in-use-in-windows-11-1.jpg);"></a> <div class="text"> <h3 class="heading"> <a href="/lam-cach-nao-de-kiem-tra-cac-cong-dang-duoc-su-dung-trong-windows-11">Làm cách nào để kiểm tra các cổng đang được sử dụng trong Windows 11?</a> </h3> <div class="meta"> <div> <a href="/khac/"><span class="icon-chat"></span> Khác</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/B2/how-to-import-dump-into-mysql-workbench-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/lam-cach-nao-de-nhap-ket-xuat-vao-mysql-workbench">Làm cách nào để nhập kết xuất vào MySQL Workbench?</a> </h3> <div class="meta"> <div> <a href="/khac/"><span class="icon-chat"></span> Khác</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/E9/how-to-draw-a-checkmark-tick-using-css-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/cach-ve-dau-kiem-danh-dau-bang-css">Cách vẽ dấu kiểm/đánh dấu bằng CSS</a> </h3> <div class="meta"> <div> <a href="/khac/"><span class="icon-chat"></span> Khác</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-remove-commas-from-string-in-javascript-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/cach-xoa-dau-phay-khoi-chuoi-trong-javascript">Cách xóa dấu phẩy khỏi chuỗi trong JavaScript</a> </h3> <div class="meta"> <div> <a href="/khac/"><span class="icon-chat"></span> Khác</a> </div> </div> </div> </div><div class="block-21 mb-4 d-flex"> <a class="blog-img mr-4" style="background-image: url(https://softoban.com/img/other/42/what-is-scrollleft-method-in-jquery-1.gif);"></a> <div class="text"> <h3 class="heading"> <a href="/phuong-thuc-scrollleft-trong-jquery-la-gi">Phương thức scrollLeft() trong jQuery là gì</a> </h3> <div class="meta"> <div> <a href="/khac/"><span class="icon-chat"></span> Khác</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-write-and-use-less-than-symbol-in-latex-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/cach-viet-va-su-dung-it-hon-ky-hieu-trong-latex">Cách viết và sử dụng ít hơn ký hiệu trong LaTeX</a> </h3> <div class="meta"> <div> <a href="/khac/"><span class="icon-chat"></span> Khác</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/git-stash-command-in-git-explained-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/git-stash-lenh-trong-git-giai-thich">git-stash Lệnh trong Git | Giải thích</a> </h3> <div class="meta"> <div> <a href="/khac/"><span class="icon-chat"></span> Khác</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="/ban-do-so-voi-doi-tuong-trong-javascript">Bản đồ so với đối tượng trong JavaScript</a> </h3> <div class="meta"> <div> <a href="/khac/"><span class="icon-chat"></span> Khác</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/67/how-to-use-upper-bound-function-in-c-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/cach-su-dung-ham-upper-bound-trong-c">Cách sử dụng hàm Upper_bound() trong C++</a> </h3> <div class="meta"> <div> <a href="/khac/"><span class="icon-chat"></span> Khác</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-install-msonline-via-powershell-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/cach-cai-dat-msonline-qua-powershell">Cách cài đặt MSOnline qua PowerShell</a> </h3> <div class="meta"> <div> <a href="/khac/"><span class="icon-chat"></span> Khác</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/5E/what-is-the-difference-between-string-slice-and-string-substring-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/su-khac-biet-giua-string-slice-va-string-substring-la-gi">Sự khác biệt giữa String.slice và String.substring là gì?</a> </h3> <div class="meta"> <div> <a href="/khac/"><span class="icon-chat"></span> Khác</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/18/windows-7-lets-you-change-logon-background-image-winhelponline.png);"></a> <div class="text"> <h3 class="heading"> <a href="/windows-7-lets-you-change-logon-background-image-winhelponline">Windows 7 Cho phép bạn thay đổi hình nền đăng nhập - Winhelponline</a> </h3> <div class="meta"> <div> <a href="/windows/"><span class="icon-chat"></span> Các Cửa Sổ</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/98/how-to-configure-automated-security-updates-on-debian-11-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/cach-dinh-cau-hinh-cap-nhat-bao-mat-tu-dong-tren-debian-11">Cách định cấu hình cập nhật bảo mật tự động trên Debian 11</a> </h3> <div class="meta"> <div> <a href="/khac/"><span class="icon-chat"></span> Khác</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-use-voice-chat-on-roblox-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/cach-su-dung-tro-chuyen-thoai-tren-roblox">Cách sử dụng Trò chuyện thoại trên Roblox</a> </h3> <div class="meta"> <div> <a href="/khac/"><span class="icon-chat"></span> Khác</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/41/how-does-readline-clearscreendown-work-in-node-js-1.gif);"></a> <div class="text"> <h3 class="heading"> <a href="/readline-clearscreendown-hoat-dong-nhu-the-nao-trong-node-js">Readline “clearScreenDown()” hoạt động như thế nào trong Node.js?</a> </h3> <div class="meta"> <div> <a href="/khac/"><span class="icon-chat"></span> Khác</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/learn-how-powershell-cmdletbinding-enhances-functions-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/tim-hieu-cach-powershell-cmdletbinding-tang-cuong-chuc-nang">Tìm hiểu cách PowerShell CmdletBinding tăng cường chức năng</a> </h3> <div class="meta"> <div> <a href="/khac/"><span class="icon-chat"></span> Khác</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/D1/how-to-get-slimeballs-in-minecraft-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/cach-lay-slimeball-trong-minecraft">Cách lấy Slimeball trong Minecraft</a> </h3> <div class="meta"> <div> <a href="/khac/"><span class="icon-chat"></span> Khác</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/A3/how-to-clear-arduino-serial-buffer-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/cach-xoa-bo-dem-noi-tiep-arduino">Cách xóa bộ đệm nối tiếp Arduino</a> </h3> <div class="meta"> <div> <a href="/khac/"><span class="icon-chat"></span> Khác</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>