Bagaimana untuk Mencipta Navigasi Bar Sisi Tetap dalam Susun Atur Bootstrap Twitter Bendalir 2.0?

Mencipta Navigasi Bar Sisi Tetap dalam Fluid Twitter Bootstrap 2.0

Dalam susun atur Bootstrap 2.0 cecair, mengekalkan navigasi bar sisi tetap semasa menatal boleh dicapai. Begini caranya:

1. Buat Kelas Bar Sisi Tersuai:
   Tentukan kelas CSS untuk bar sisi tetap, seperti .sidebar-nav-fixed. Tetapkan sifat seperti kedudukan: tetap, atas dan lebar.
2. Buat Kelas Kandungan Offset:
   Untuk mengimbangi jidar kiri yang dicipta oleh bar sisi tetap, tambah kelas ofset kepada div kandungan. Contohnya, .row-fluid > .span-fixed-sidebar boleh mempunyai sifat margin-left yang sama dengan lebar sidebar tetap.

3. CSS yang dikemas kini:

   .sidebar-nav-fixed {
       padding: 9px 0;
       position: fixed;
       left: 20px;
       top: 60px;
       width: 250px;
   }
   
   .row-fluid > .span-fixed-sidebar {
       margin-left: 290px;
   }

4. Pengubahsuaian Responsif:
   Untuk menyesuaikan diri dengan skrin yang berbeza saiz, pertimbangkan untuk menggunakan pertanyaan media. Contohnya:

   @media (max-width: 979px) {
       .sidebar-nav-fixed {
           position: static;
           width: auto;
       }
   }

5. Kaedah Tambahan untuk Paparan Mudah Alih:
   Untuk mengekalkan bar sisi tetap sehingga ia menjadi statik untuk skrin kecil, laraskan CSS sebagai berikut:

   @media (max-width: 767px) {
       .sidebar-nav-fixed {
           position: static;
           width: auto;
       }
   }

Nota: Untuk versi Bootstrap lewat daripada 2.0.4, pertimbangkan untuk menggunakan pemalam Affix jQuery, yang menyediakan fungsi yang serupa.

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Navigasi Bar Sisi Tetap dalam Susun Atur Bootstrap Twitter Bendalir 2.0?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!