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;
   }

   Salin selepas log masuk

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;
       }
   }

   Salin selepas log masuk

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;
       }
   }

   Salin selepas log masuk

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!