🧾 Mẫu giao diện HTML full (AdminLTE + Bootstrap)

Dưới đây là mẫu giao diện responsive hoàn chỉnh dùng AdminLTE v3 với:

  • Sidebar ẩn/hiện theo thiết bị 📱💻

  • Navbar trên cùng

  • Nội dung chính chia 2 cột trên desktop, 1 cột trên mobile

  • Footer đơn giản

🧾 Mẫu giao diện HTML full (AdminLTE + Bootstrap)



<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>AdminLTE Responsive Layout</title>

  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.min.css" />
  <!-- AdminLTE CSS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/admin-lte@3.2/dist/css/adminlte.min.css" />
</head>
<body class="hold-transition sidebar-mini layout-fixed">
<div class="wrapper">
  <!-- Navbar -->
  <nav class="main-header navbar navbar-expand navbar-white navbar-light">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" data-widget="pushmenu" href="#"><i class="fas fa-bars"></i></a>
      </li>
      <li class="nav-item d-none d-sm-inline-block">
        <a href="#" class="nav-link">Trang chủ</a>
      </li>
    </ul>
  </nav>

  <!-- Sidebar -->
  <aside class="main-sidebar sidebar-dark-primary elevation-4">
    <a href="#" class="brand-link">
      <span class="brand-text font-weight-light">AdminLTE</span>
    </a>

    <div class="sidebar">
      <nav class="mt-2">
        <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview">
          <li class="nav-item">
            <a href="#" class="nav-link active">
              <i class="nav-icon fas fa-tachometer-alt"></i>
              <p> Dashboard </p>
            </a>
          </li>
        </ul>
      </nav>
    </div>
  </aside>

  <!-- Content Wrapper -->
  <div class="content-wrapper">
    <section class="content pt-3">
      <div class="container-fluid">
        <div class="row">
          <div class="col-12 col-md-8">
            <div class="card">
              <div class="card-header">
                <h3 class="card-title">📊 Nội dung chính</h3>
              </div>
              <div class="card-body">
                Đây là phần nội dung chính (cột chiếm 2/3 trên desktop, full trên mobile).
              </div>
            </div>
          </div>
          <div class="col-12 col-md-4">
            <div class="card bg-light">
              <div class="card-header">
                <h3 class="card-title">📌 Thông tin phụ</h3>
              </div>
              <div class="card-body">
                Sidebar phụ hiển thị bên phải trên màn hình lớn, xuống dưới trên mobile.
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>

  <!-- Footer -->
  <footer class="main-footer text-center">
    <strong>© 2025 Tiến sĩ M</strong> – Responsive Admin Template
  </footer>
</div>

<!-- JS Scripts -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/admin-lte@3.2/dist/js/adminlte.min.js"></script>
</body>
</html>

💡 Ghi chú:

  • col-12 giúp hiển thị full chiều ngang trên mobile.

  • col-md-8 và col-md-4 sẽ chia 2 cột khi kích thước ≥ 768px.

  • Sidebar sẽ tự ẩn/hiện khi nhấn icon menu (hamburger).

  • Có thể thêm nhiều card, bảng hoặc biểu đồ vào vùng card-body.

🎁 Mở rộng:

  • Template có biểu đồ ChartJS.

  • Bảng responsive dữ liệu.

  • Form nhập liệu có validate.

🧩🌐 Made by AI // Built with AdminLTE 🛠 + Bootstrap 💙

Google Account Video Purchases 230/2 Hai Bà Trưng, Phường Tân Định, Quận 1, Hồ Chí Minh, Việt Nam

Nhận xét

Đăng nhận xét

Bài đăng phổ biến từ blog này

🌈 Tự Động Highlight Code Trong Blogger

Phần style pre code { white-space: pre-wrap; word-break: break-word; } .code-wrapper { position: relative; } .copy-button { position: absolute; top: 8px; right: 8px; background: #444; color: #fff; border: none; font-size: 0.75rem; padding: 4px 8px; border-radius: 6px; cursor: pointer; opacity: 0.7; z-index: 9; } .copy-button:hover { opacity: 1; } Chèn trước thẻ đóng head Code nhiều dòng hay 01 dòng xài giống nhau: const msg = "Xin chào Tiến sĩ M!"; console.log(msg); Code 01 dòng: document.querySelector() Thẻ nào quá phức tạp thì xài như sau: < pre class = "language-js" data-keep-markup >   < code >     Nội dung...   </ code > </ pre > Chèn trước thẻ đóng body < b : if cond = ...
Đọc thêm

🧭CRUD CHUẨN LARAVEL

Errors log: Cài  Laravel  trên host nhưng k phù hợp  php  version Dùng lệnh  artisan  trong  Terminal  nhưng chưa đứng trong thư mục chứa source  Laravel Lỗi  ABCController not found  khi chạy artisan -> do thiếu khai báo namespace ở đầu file web.php Dưới đây là 👉 LỘ TRÌNH 3 NGÀY – CRUD CHUẨN LARAVEL Thiết kế cho người đã có nền tảng lập trình , học để làm thật , không lan man. 🧭 MỤC TIÊU SAU 3 NGÀY ✔ Hiểu chuẩn luồng Laravel ✔ Tự tay xây CRUD hoàn chỉnh ✔ Code đọc được – mở rộng được – không bừa ✔ Sẵn sàng làm app nội bộ / dashboard / CMS 📅 NGÀY 1 – NỀN TẢNG & CRUD CƠ BẢN (80%) ⏱️ ~2–3 giờ 🎯 Mục tiêu ngày 1 Hiểu luồng MVC Làm CRUD chạy được Không cần đẹp – chỉ cần đúng 🧩 1️⃣ Tạo project CRUD mẫu Ví dụ: Post (id, title, content, status) php artisan make:model Post -mcr ➡️ Tạo: Model: app/Models/Post.php Migration Controller resource 🧱 2️⃣ Migration – Tạo bảng Gõ đoạn code sau để tạo bảng trong file databa...
Đọc thêm

🚀01 giờ học cách sử dụng Developer Console

Nếu chỉ có 1 giờ để học cách sử dụng Developer Console (trong Chrome, Edge, Brave...), thì đây là lộ trình cấp tốc và thực chiến, đủ để: ✅ Kiểm tra lỗi ✅ Thử nghiệm code JavaScript ✅ Lấy dữ liệu từ DOM ✅ Giả lập thay đổi giao diện 🚀 LỘ TRÌNH 1 GIỜ SỬ DỤNG CONSOLE 🧱 BƯỚC 1: MỞ CONSOLE (1 phút) Cách mở nhanh : Chuột phải → Inspect → Chọn tab Console Hoặc dùng phím tắt: Windows/Linux : Ctrl + Shift + I rồi Ctrl + ~ macOS : Cmd + Option + I 🔍 BƯỚC 2: ĐỌC & GHI LOG (5 phút) Hành động Câu lệnh Ghi log ra console console.log("Hello, Tiến sĩ M!"); Cảnh báo console.warn("Cẩn thận!") Báo lỗi console.error("Đây là lỗi") In ra object/table console.table(document.links) 👉 Mẹo : Dùng console.clear() để xóa màn hình console. 🌐 BƯỚC 3: TRUY CẬP DOM & LẤY DỮ LIỆU (10 phút) Mục tiêu Câu lệnh Lấy 1 phần tử document.querySelector('h1') Lấy nhiều phần tử document.querySelector...
Đọc thêm