ساختار مدیریتی

This section will give you a brief description of our admin structure code.

1. Header Section : This is the default navbar section. It contains :

آ. دکمه جابجایی نوار کناری

ب. رها شدن زبان

ج. رها شدن پیام

د. رها کردن اطلاعیه ها

ه. نوار جستجو

ف. رها شدن مشخصات کاربری

توجه داشته باشید:-این دسته بندی ها توسط ما تعریف شده اند و شما می توانید طبق نیاز خود تغییر دهید :)

<!--  BEGIN NAVBAR  -->
<div class="header-container fixed-top">
    <header class="header navbar navbar-expand-sm">
        <a href="javascript:void(0);" class="sidebarCollapse" data-placement="bottom"><svg> ... </svg></a>

        <ul class="navbar-nav flex-row ml-auto">
            ..............................
        </ul>
    </header>
</div>
<!--  END NAVBAR  -->

2. بخش اصلی کانتینر: بخش اصلی کانتینر شامل بخش رویی ، نوار کناری و بخش اصلی محتوا است.

آ. کد روکش

ب. بخش نوار کناری

د. بخش محتوای اصلی

<!--  BEGIN MAIN CONTAINER  -->
<div class="main-container" id="container">
    ...........
</div>
<!-- END MAIN CONTAINER -->

3. پوشش: کد پوشش همانطور که در بالا توضیح داده شده است در قسمت اصلی کانتینر قرار داده شده است

a. Overlay تقسیم با :-.overlay وقتی نوار کناری باز است ، کلاس فعال است.

b. CS-Overlay تقسیم با :-.cs-overlay کلاس وقتی فعال است که نوار کناری کنترل باز باشد.

b. Search-Overlay تقسیم با :-.search-overlay کلاس هنگام فعال شدن جستجو فعال است.

<!--  BEGIN OVERLAY  -->
<div class="overlay"></div>
<div class="cs-overlay"></div>
<div class="search-overlay"></div>
<!-- END OVERLAY -->

4. نوار کناری : این کد نوار کناری است.

<!--  BEGIN SIDEBAR  -->
<div class="sidebar-wrapper sidebar-theme">
    <nav id="sidebar">

        =======================

        =======================

    </nav>
</div>
<!--  END SIDEBAR  -->

5. محتوای اصلی : این بخش کد اصلی محتوای است.

آ. می توانید یکdiv با .page-header کلاس را در جایی که می توانید عنوان خود را بنویسید.

ب بعد از این div می توانید دو div را با همان کلاس مشاهده کنید.row .layout-spacing. این ساختار اصلی است که در آن می توانید ابزارک ، نمودار ، جداول و غیره ایجاد کنید.

توجه داشته باشید:- از موارد فوق ب. نکته ، ما ذکر کرده بودیم دو div با همان کلاس .row .layout-spacing. این فقط برای اهداف آزمایشی است. طبق نیازهای خود می توانید یک ، دو یا چند بخش دیگر ایجاد کنید.

<!--  BEGIN CONTENT PART  -->
<div id="content" class="main-content">
    <div class="layout-px-spacing">

        <div class="row layout-top-spacing">
            <div class="col-xl-12 col-lg-12 col-md-12 col-12 layout-spacing">
                ===========================
                ===========================
            </div>

        </div>
    </div>
</div>
<!--  END CONTENT PART  -->

6. پاورقی : این کد پاورقی است. در خارج از قسمت اصلی کانتینر قرار می گیرد.

دو بخش با کلاس وجود دارد .footer-section-1 و .footer-section-2.

آ. بخش پاورقی : 1- معمولاً این بخش حاوی هیچ چیز در داخل آن نیست ، اما با توجه به نیاز شما قابل تنظیم است. این بدان معنی است که می توانید سبک CSS خود را اضافه کنید.

ب. پاورقی بخش : 2- این بخش شامل تمام جزئیات صفحه است که می توانید متناسب با نیاز خود تغییر دهید.

توجه داشته باشید:- از موارد فوق "ب" ما ذکر کرده بودیم دو div با همان کلاس.row .layout-spacing. این فقط برای اهداف آزمایشی است. طبق نیازهای خود می توانید یک ، دو یا چند بخش دیگر ایجاد کنید.

<!--  BEGIN FOOTER  -->
<div class="footer-wrapper">
    <div class="footer-section">
        <p class="">Copyright © 2019-20 <a target="_blank" href="https://designrest.com">DesignReset</a>, All rights reserved.</p>
    </div>
    <div class="footer-section">
        
    </div>
</div>
<!--  END FOOTER  -->

کد ترکیبی

حال پس از توضیحات مختصر در مورد الگوی مدیریتی ما، در زیر کد ترکیبی از قطعه های مورد بحث در بالا آورده شده است.

<!--  BEGIN NAVBAR  -->
<div class="header-container fixed-top">
    <header class="header navbar navbar-expand-sm">
        <a href="javascript:void(0);" class="sidebarCollapse" data-placement="bottom"><svg> ... </svg></a>

        <ul class="navbar-nav flex-row ml-auto">
            ..............................
        </ul>
    </header>
</div>
<!--  END NAVBAR  -->


<!--  BEGIN MAIN CONTAINER  -->
<div class="main-container" id="container">
        
    <!--  BEGIN OVERLAY  -->
    <div class="overlay"></div>
    <div class="cs-overlay"></div>
    <div class="search-overlay"></div>
    <!-- END OVERLAY -->

    <!--  BEGIN SIDEBAR  -->
    <div class="sidebar-wrapper sidebar-theme">
        
        <nav id="sidebar">

            =======================

            =======================

        </nav>
    </div>
    <!--  END SIDEBAR  -->

    <!--  BEGIN CONTENT PART  -->
    <div id="content" class="main-content">
        <div class="layout-px-spacing">

            <div class="row layout-top-spacing">
                <div class="col-xl-12 col-lg-12 col-md-12 col-12 layout-spacing">
                    ===========================
                    ===========================
                </div>

            </div>
        </div>
        <div class="footer-wrapper">
            <div class="footer-section">
                <p class="">Copyright © 2019-20 <a target="_blank" href="https://designrest.com">DesignReset</a>, All rights reserved.</p>
            </div>
            <div class="footer-section">
                
            </div>
        </div>
    </div>
    <!--  END CONTENT PART  -->
    
</div>
<!-- END MAIN CONTAINER -->