توضیحات

طرح ثابت دارای یک نوار ناوبری، فهرست ناوبری و فوتر ثابت می باشد. تنها قسمت محتوا برای کاربر قابل اسکرول می باشد. در این صفحه می توانید آن را تجربه کنید. طرح ثابت یک رابط کاربری یکپارچه در نمایشگر های مختلف ارائه می کند.

کلاس های CSS

این جدول شامل تمامی کلاس های مرتبط با طرح ثابت می باشد.

تمامی این گزینه ها میتوانند توسط کلاس های زیر تنظیم شوند:

کلاس ها توضیحات
.navbar-sticky برای تنظیم نوار ثابت می بایست کلاس navbar-sticky را به تگ <body> اضافه کنید.
.fixed-top برای تنظیم نوار ثابت می بایست کلاس fixed-top را به تگ <nav> اضافه کنید.
.menu-fixed برای ثابت کردن فهرست ناوبری در صفحه، کلاس menu-fixed را به دربرگیرنده فهرست ناوبری اضافه کنید.
.fixed-footer برای ثابت کردن فوتر اصلی در صفحه، کلاس fixed-footer را به تگ <body> اضافه کنید.

کدهای HTML

این قسمت شامل کد های HTML برای ایجاد طرح ثابت می باشد. این کد ها نشان می دهند که برای ایجاد نوار ناوبری، فهرست ناوبری و فوتر ثابت، کلاس ها را کجا باید اضافه کنید.

قالب فرست دارای صفحات شروع آماده برای استفاده می باشد. شما می توانید این طرح را مستقیما با استفاده از صفحات شروع واقع در پوشه Theme/starter-kit استفاده کنید.

        
            <!DOCTYPE html>
              <html lang="fa">
                <head></head>
                <body class="vertical-layout vertical-menu-modern 2-columns fixed-footer navbar-sticky fixed-footer menu-expanded" data-menu="vertical-menu-modern">

                  <!-- fixed-top-->
                  <nav class="header-navbar navbar-expand-lg navbar navbar-with-menu fixed-top navbar-light navbar-shadow">
                      ...
                  </nav>

                  <!-- Begin Navigation-->
                  <div class="main-menu menu-fixed menu-light menu-accordion menu-shadow expanded">
                      ...
                  </div>
                  <!-- End Navigation-->

                  <!-- Begin Content-->
                  <div class="content app-content">
                      ......
                  </div>
                  <!-- End Content-->

                  <!-- Start Footer Light-->
                  <footer class="footer footer-light">
                      ...
                  </footer>
                  <!-- End Footer Light-->

                </body>
              </html>