Bài đăng

Đang hiển thị bài đăng từ Tháng 6, 2025

🌟Học nhanh Tailwind CSS trong 01h⏱️

🚀 0. Chuẩn bị trước khi bắt đầu (0–2 phút) ✅ Dùng công cụ online như: Tailwind Play – viết & test code Tailwind trực tiếp Hoặc dùng VSCode + CDN nhanh: < script src = "https://cdn.tailwindcss.com" ></ script > ⏱️ 1. Hiểu triết lý và class cơ bản (2–10 phút) Nội dung Ví dụ Utility-first = mỗi class làm đúng 1 việc bg-red-500 , text-white , p-4 Cách đặt tên class = theo logic CSS text-xl , rounded , shadow-lg , w-1/2 Responsive = prefix theo kích thước sm: , md: , lg: , xl: 📌 Ví dụ: < div class = "text-center text-lg md:text-xl text-blue-600 p-4" >   Hello Tailwind! </ div > ⏱️ 2. Layout cơ bản (10–25 phút) 📦 Flex & Grid < div class = "flex justify-between items-center p-4 bg-gray-100" >   < div > Logo </ div >   < div class = "flex gap-4" >     < a href = "#" > Home </ a >     < a href = "#" ...

✅Sử dụng modal trong bootstrap 5.1x

Modal Box trong Bootstrap là một hộp thoại pop-up dùng để hiển thị thông tin, form, cảnh báo... mà không chuyển trang.  Dưới đây là hướng dẫn sử dụng, các kích thước và phân loại modal trong Bootstrap (phiên bản 5.1x) hoặc Adminlte v4 ✅ CÁCH SỬ DỤNG MODAL TRONG BOOTSTRAP 1. Cấu trúc cơ bản của modal Mở Modal Tiêu đề Modal Nội dung chính của modal ở đây. Đóng Lưu 📏 KÍCH THƯỚC MODAL Bootstrap hỗ trợ nhiều kích thước modal bằng cách thêm class vào .modal-dialog : Class thêm Kích thước Mô tả .modal-sm Nhỏ Phù hợp cho cảnh báo ngắn (mặc định) Trung bình Không thêm class .modal-lg Lớn Cho nội dung dài hơn .modal-xl Rất lớn Khi cần hiển thị nội dung rộng .modal-fullscreen Toàn màn hình Đầy m...