Tailwind CSS Academy · Pelajaran

Rangka Papan Pemuka dan Bar Sisi

Sediakan rangka papan pemuka dua lajur dengan bar sisi tetap yang mengandungi pautan navigasi, ikon dan bahagian profil pengguna di bahagian bawah.

Pelajaran 1 daripada 413 langkah

Rangka Papan Pemuka dan Bar Sisi ialah pelajaran Tailwind CSS Academy percuma di CoddyKit. Ini ialah pelajaran 1 daripada 4. Anda boleh membaca keseluruhan pelajaran di bawah secara percuma — kemudian berlatih secara praktikal dalam pelayar menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Tailwind CSS Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Tailwind CSS Academy merangkumi sejumlah 4 pelajaran.

Gambaran Keseluruhan Susun Atur Papan Pemuka

Papan pemuka pentadbir distrukturkan dengan bar sisi kekal di sebelah kiri dan kawasan kandungan utama di sebelah kanan. Lebar bar sisi adalah tetap dan biasanya memenuhi ketinggian ruang pandang, manakala kawasan utama memenuhi ruang yang berbaki dan menatal secara berasingan. Rangka dua lajur ini menjadi asas untuk meletakkan semua widget, jadual dan carta papan pemuka.

<!-- Dashboard shell structure -->
<div class="flex h-screen overflow-hidden bg-gray-100">
  <!-- Sidebar -->
  <aside class="w-64 flex-shrink-0">
    <!-- Navigation -->
  </aside>

  <!-- Main content area -->
  <div class="flex flex-1 flex-col overflow-hidden">
    <!-- Top bar -->
    <main class="flex-1 overflow-y-auto p-6">
      <!-- Page content -->
    </main>
  </div>
</div>

Membina Rangka Bar Sisi

Bar sisi menggunakan flex h-full w-64 flex-col bg-gray-900 untuk menghasilkan panel gelap yang memenuhi ketinggian. flex-shrink-0 menghalangnya daripada mengecil apabila kandungan utama berkembang. Bahagikannya kepada tiga bahagian menggunakan susun atur lajur fleksibel: kawasan logo di bahagian atas, bahagian navigasi boleh tatal di tengah dengan flex-1 overflow-y-auto, dan kawasan profil pengguna yang dikekalkan di bahagian bawah.

<aside class="flex h-screen w-64 flex-shrink-0 flex-col bg-gray-900">
  <!-- Logo area -->
  <div class="flex h-16 items-center border-b border-gray-800 px-4">
    <div class="flex items-center gap-2 font-bold text-white">
      <div class="h-7 w-7 rounded-lg bg-blue-500"></div>
      Dashboard
    </div>
  </div>

  <!-- Scrollable navigation -->
  <nav class="flex-1 overflow-y-auto px-3 py-4">
    <!-- Navigation links -->
  </nav>

  <!-- User profile -->
  <div class="border-t border-gray-800 p-4">
    <!-- User info -->
  </div>
</aside>

Pautan Navigasi Bar Sisi

Item navigasi dalam bar sisi menggabungkan ikon dan label. Gunakan flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium sebagai gaya asas pautan. Pautan tidak aktif menggunakan text-gray-400 hover:bg-gray-800 hover:text-white transition-colors. Pautan aktif diserlahkan dengan bg-gray-800 text-white untuk menunjukkan halaman semasa.

<nav class="flex-1 space-y-1 overflow-y-auto px-3 py-4">
  <!-- Active link -->
  <a href="/dashboard"
     class="flex items-center gap-3 rounded-lg bg-gray-800 px-3 py-2
            text-sm font-medium text-white">
    <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3"/>
    </svg>
    Overview
  </a>

  <!-- Inactive link -->
  <a href="/users"
     class="flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium
            text-gray-400 transition-colors hover:bg-gray-800 hover:text-white">
    <!-- Icon + label -->
    Users
  </a>
</nav>

Kumpulan Navigasi Bar Sisi

Kumpulkan item navigasi yang berkaitan di bawah bahagian berlabel supaya lebih mudah ditemui. Tambahkan label bahagian dengan mb-2 mt-6 px-3 text-xs font-semibold uppercase tracking-widest text-gray-500 sebelum setiap kumpulan pautan. Corak ini lazim dalam papan pemuka analitik dan SaaS yang mempunyai 10 atau lebih destinasi navigasi.

<nav class="flex-1 space-y-1 overflow-y-auto px-3 py-4">
  <!-- Main group -->
  <p class="mb-2 px-3 text-xs font-semibold uppercase tracking-widest text-gray-500">
    Main
  </p>
  <a href="/dashboard" class="flex items-center gap-3 rounded-lg ...">Overview</a>
  <a href="/analytics" class="flex items-center gap-3 rounded-lg ...">Analytics</a>

  <!-- Settings group -->
  <p class="mb-2 mt-6 px-3 text-xs font-semibold uppercase tracking-widest text-gray-500">
    Settings
  </p>
  <a href="/billing" class="flex items-center gap-3 rounded-lg ...">Billing</a>
  <a href="/team" class="flex items-center gap-3 rounded-lg ...">Team</a>
</nav>

Kawasan Profil Pengguna dalam Bar Sisi

Bahagian bawah bar sisi memaparkan avatar, nama dan e-mel pengguna yang telah log masuk. Gunakan flex items-center gap-3 untuk menjajarkan avatar dan teks. Tambahkan butang ikon tetapan di hujung kanan dengan ml-auto. Balut keseluruhan bahagian dalam keadaan tuding yang sederhana: hover:bg-gray-800 rounded-lg p-2 cursor-pointer.

<div class="border-t border-gray-800 p-3">
  <div class="flex cursor-pointer items-center gap-3 rounded-lg p-2 transition hover:bg-gray-800">
    <img src="/avatar.jpg" alt="User" class="h-9 w-9 rounded-full">
    <div class="min-w-0 flex-1">
      <p class="truncate text-sm font-medium text-white">Jane Doe</p>
      <p class="truncate text-xs text-gray-400">jane@example.com</p>
    </div>
    <button class="ml-auto rounded-md p-1 text-gray-400 hover:text-white">
      <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
              d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35"/>
      </svg>
    </button>
  </div>
</div>

Pembalut Kawasan Kandungan Utama

Kawasan kandungan utama berada di sebelah kanan bar sisi. Gunakan flex flex-1 flex-col overflow-hidden supaya kawasan ini memenuhi ruang mendatar yang berbaki dan membolehkan penatalan secara berasingan. Bar atas berlabuh di bahagian atas kawasan ini, bukannya pada bar sisi, manakala kawasan penatalan utama berada di bawahnya menggunakan flex-1 overflow-y-auto.

<div class="flex flex-1 flex-col overflow-hidden">
  <!-- Top bar (sticks to top of main area) -->
  <header class="flex h-16 items-center border-b border-gray-200 bg-white px-6">
    <!-- Search, notifications, avatar -->
  </header>

  <!-- Scrollable page content -->
  <main class="flex-1 overflow-y-auto bg-gray-100 p-6">
    <!-- Dashboard widgets, tables, charts -->
  </main>
</div>

Strategi Bar Sisi Mudah Alih

Pada skrin mudah alih, bar sisi tidak boleh sentiasa kelihatan kerana akan mengambil terlalu banyak ruang. Sembunyikannya di luar skrin dengan -translate-x-full secara lalai dan luncurkannya masuk apabila menu hamburger diaktifkan dengan menogol translate-x-0. Lapiskan kandungan utama dengan latar belakang separa lutsinar bg-black/50 yang menutup bar sisi apabila diklik. Corak ini sama seperti yang digunakan dalam pelajaran bar sisi boleh lipat.

<!-- Overlay backdrop (shown when sidebar is open) -->
<div id="sidebar-backdrop"
     class="fixed inset-0 z-20 hidden bg-black/50 lg:hidden"
     onclick="closeSidebar()"></div>

<!-- Sidebar with transition -->
<aside id="sidebar"
       class="fixed inset-y-0 left-0 z-30 w-64 -translate-x-full flex-col bg-gray-900
              transition-transform duration-300 lg:relative lg:translate-x-0 lg:flex">
  <!-- ... -->
</aside>

Variasi Lebar Bar Sisi

Sesetengah papan pemuka menggunakan bar sisi runtuh yang hanya memaparkan ikon dan mengembang apabila dituding atau melalui togol. Capai kesan ini dengan peralihan CSS pada lebar bar sisi: w-16 lalai hanya memaparkan ikon, manakala w-64 yang dikembangkan memaparkan label. Gunakan transition-all duration-300 untuk peralihan. Sembunyikan label teks dalam mod runtuh menggunakan opacity-0 w-0 overflow-hidden.

<!-- Collapsible sidebar pattern -->
<aside id="sidebar"
       class="flex flex-col bg-gray-900 transition-all duration-300"
       :class="expanded ? 'w-64' : 'w-16'">
  <a href="/dashboard" class="flex items-center gap-3 rounded-lg px-3 py-2">
    <svg class="h-5 w-5 flex-shrink-0 text-gray-400"><!-- icon --></svg>
    <span :class="expanded ? 'opacity-100' : 'opacity-0 w-0 overflow-hidden'"
          class="transition-opacity duration-200 text-sm text-gray-400">
      Overview
    </span>
  </a>
</aside>

Pembahagi Bahagian Bar Sisi

Gunakan my-4 border-t border-gray-800 untuk menambah pembahagi mendatar antara kumpulan navigasi dalam bar sisi. Ini menghasilkan pemisah yang lebih kemas berbanding hanya menggunakan jarak. Pastikan pembahagi nipis dan gelap supaya sebati dengan latar bar sisi sambil masih memberikan struktur visual. Elakkan penggunaan pembahagi secara berlebihan — dua atau tiga bagi setiap bar sisi biasanya mencukupi.

<nav class="flex-1 space-y-1 overflow-y-auto px-3 py-4">
  <!-- Main group -->
  <a href="/" class="...">Overview</a>
  <a href="/analytics" class="...">Analytics</a>
  <a href="/reports" class="...">Reports</a>

  <!-- Divider -->
  <div class="my-4 border-t border-gray-800"></div>

  <!-- Settings group -->
  <a href="/billing" class="...">Billing</a>
  <a href="/api" class="...">API Keys</a>
</nav>

Lencana Pemberitahuan pada Item Navigasi

Sesetengah pautan bar sisi memerlukan lencana pemberitahuan untuk menunjukkan item yang belum dibaca atau tindakan yang belum selesai. Tambahkan lencana kecil berbentuk pil yang dijajarkan ke sebelah kanan pautan menggunakan ml-auto. Gayakannya sebagai bulatan kecil: ml-auto flex h-5 w-5 items-center justify-center rounded-full bg-blue-500 text-xs text-white untuk memaparkan bilangan, atau gunakan titik yang lebih kecil sebagai penunjuk belum dibaca yang ringkas.

<a href="/messages"
   class="flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium
          text-gray-400 transition hover:bg-gray-800 hover:text-white">
  <svg class="h-5 w-5"><!-- message icon --></svg>
  Messages
  <!-- Badge -->
  <span class="ml-auto flex h-5 min-w-[20px] items-center justify-center
               rounded-full bg-blue-500 px-1 text-xs font-semibold text-white">
    3
  </span>
</a>

Tema Bar Sisi Gelap dan Cerah

Walaupun bar sisi gelap merupakan pilihan tradisional, bar sisi cerah (bg-white border-r border-gray-200) dengan teks gelap semakin popular kerana memberikan penampilan yang lebih kemas dan moden. Pilihan bergantung pada jenama anda. Bar sisi gelap menghasilkan kontras visual yang kuat dan memisahkan navigasi daripada kandungan dengan jelas. Bar sisi cerah terasa lebih lapang dan serasi dengan kawasan kandungan utama berwarna putih.

<!-- Dark sidebar -->
<aside class="w-64 bg-gray-900 text-gray-400">
  <!-- Links: text-gray-400 hover:bg-gray-800 hover:text-white -->
  <!-- Active: bg-gray-800 text-white -->
</aside>

<!-- Light sidebar -->
<aside class="w-64 border-r border-gray-200 bg-white text-gray-600">
  <!-- Links: text-gray-600 hover:bg-gray-50 hover:text-gray-900 -->
  <!-- Active: bg-blue-50 text-blue-700 -->
</aside>

Semakan Pantas

Uji pemahaman anda tentang konsep Penguasaan Tailwind CSS daripada pelajaran ini.

Jawab dalam pelajaran interaktif

Ringkasan Pelajaran

Dalam pelajaran ini, anda telah mempelajari: membina rangka papan pemuka dua lajur dengan bar sisi tetap dan kawasan utama fleksibel, menstrukturkan navigasi bar sisi dengan kumpulan, keadaan aktif dan lencana pemberitahuan, serta mengendalikan bar sisi mudah alih dengan terjemahan ke luar skrin dan latar tindanan. Seterusnya, kita akan membina bar atas dan navigasi jejak.

Percuma untuk bermula

Pelajari HTML dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus: 30
Pelajaran: 120

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Rangka Papan Pemuka dan Bar Sisi” percuma?

Ya — teks penuh “Rangka Papan Pemuka dan Bar Sisi” boleh dibaca secara percuma di web ini. Untuk berlatih secara interaktif menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7, serta membuka kunci baki kursus Tailwind CSS Academy, tingkat taraf kepada CoddyKit PRO. Kursus Tailwind CSS Academy merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Rangka Papan Pemuka dan Bar Sisi”?

Sediakan rangka papan pemuka dua lajur dengan bar sisi tetap yang mengandungi pautan navigasi, ikon dan bahagian profil pengguna di bahagian bawah. Anda berlatih Tailwind CSS Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan Tailwind CSS Academy?

Tiada pengalaman terdahulu diperlukan. Pembelajaran Tailwind CSS Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 1 daripada 4.

Berapa lamakah pelajaran “Rangka Papan Pemuka dan Bar Sisi” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran Tailwind CSS Academy ini?

Ya. Setiap pelajaran Tailwind CSS Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

← Kembali ke Tailwind CSS Academy