پیام محمدی مدیر سامانه

چیدمان

ساختار کلی چیدمان از دو ستون تشکیل می‌شود. ستون نخست، منوی کناری و ستون دوم محتوای سایت است که باقیمانده‌ی پهنای برگه را می‌گیرد. کد پایه‌ای چیدمان برگه‌ها در اینجا قابل تماشا است.

Source code 
                            
                                <div class="app">
                              <div class="app-body">
                                <div class="app-sidebar">
                                  <!-- Header -->
                                  <!-- Navigation -->
                                  <!-- Footer -->
                                </div>
                                <div class="app-content">
                                  <!-- Content -->
                                </div>
                              </div>
                            </div>

منوی کناری

منوی کناری، ستون سمت راست از چیدمان قالب است و دارای سربرگ(header)، ناوبری و پابرگ(footer) می‌باشد. این قالب حداکثر، دو رده از منوهای تو در تو در ناوبری منوی کنار را پشتیبانی می‌کند.

سربرگ

سربرگ منوی کنار در جایگان نخست می‌آید و شامل داده‌هایی مانند شمایل نمایه و نام می‌باشد.

‍Source code

ناوبری

نخستین لایه از ناوبری منوی کناری با بهره‌گیری از کلاس .sidebar-nav-link تعریف می‌شود و کاربر را به برگه‌ی موردنظرش هدایت می‌کند. همچنین می‌توانید با بهره‌گیری از کلاس .sidebar-nav-btn به منوی کناری دکمه افزوده کنید. لایه‌ی دوم از ناوبری منوی کناری با بهره‌گیری از کلاس .sidebar-nav-group و گشودن گروهی از لینک‌های مرتبط پیاده‌سازی می‌شود. ویژگی data-parent منوی آکاردئونی را تنظیم می‌کند. (برای جزئیات بیشتر به مستندات بوتسترپ نگاه کنید.)

Source code

پابرگ

پابرگ منوی کناری شامل دسته‌ای از دکمه‌ها مانند یک تولبار کوچک است.

Source code

محتوا

محتوا در ستون سمت چپی چیدمان قالب قرار میگیرد و شامل محتوای برگه‌ای که کاربر به آن هدایت شده، می‌باشد. محتوای برگه می‌تواند شامل بخش‌ها و کامپوننت‌های بوتسترپ مانند ناوبری، مسیر جاری و هرآنچه که شما نیاز داشته باشید، باشد.

Source code 
                            
                                <nav class="navbar navbar-expand navbar-light bg-white">
                                  <div class="navbar-brand">Admin 4B</div>
                                </nav>
                                <nav aria-label="breadcrumb">
                                  <ol class="breadcrumb">
                                    <li class="breadcrumb-item">Home</li>
                                    <li class="breadcrumb-item active" aria-current="page">Library</li>
                                  </ol>
                                </nav>
                                <div class="container-fluid">
                                  Hello World!
                                </div>

واکنشگرا

این قالب از نقاط شکست بوتسترپ برای تعریف کمینه‌ی پهنای منوی کناری بهره جسته است. در این حالت است که از ویژگی‌های پنهان شده‌ی data-toggle="sidebar" و data-dismiss="sidebar" می‌توان بهره‌گرفت تا به ترتیب، منوی کناری را باز یا بسته نمود.

Source code

نمونه

نمونه‌ی کاملی از راه‌اندازی منوی کناری را در اینجا می‌توانید ببینید.

Source code 
<div class="app">
  <div class="app-body">
    <div class="app-sidebar">
      <button type="button" class="btn btn-sidebar" data-dismiss="sidebar">
        <span class="x"></span>
      </button>
      <div class="sidebar-header">
        <img src="john-doe.png" class="user-photo">
        <p class="username">John Doe</p>
      </div>
      <div id="sidebar-nav" class="sidebar-nav" data-children=".sidebar-nav-group">
        <div class="sidebar-nav-btn">
          <a href="page.html" class="btn btn-block btn-outline-light">
            Button link
          </a>
        </div>
        <a href="page.html" class="sidebar-nav-link">
          Go to page
        </a>
        <div class="sidebar-nav-group">
          <a href="#first-group" class="sidebar-nav-link collapsed" data-toggle="collapse" data-parent="#sidebar-nav">
            Open first group
          </a>
          <div id="first-group" class="sidebar-nav-group collapse">
            <a href="page.html" class="sidebar-nav-link">
              Fisrt group page 1
            </a>
            <a href="page.html" class="sidebar-nav-link">
              Fisrt group page 2
            </a>
          </div>
        </div>
        <div class="sidebar-nav-group">
          <a href="#second-group" class="sidebar-nav-link collapsed" data-toggle="collapse" data-parent="#sidebar-nav">
            Open second group
          </a>
          <div id="second-group" class="sidebar-nav-group collapse">
            <a href="page.html" class="sidebar-nav-link">
              Second group page 1
            </a>
            <a href="page.html" class="sidebar-nav-link">
              Second group page 2
            </a>
          </div>
        </div>
      </div>
      <div class="sidebar-footer">
        <a href="#" data-toggle="tooltip" title="GitHub">
          <i class="fa fa-github"></i>
        </a>
        <a href="#" data-toggle="tooltip" title="Settings">
          <i class="fa fa-cog"></i>
        </a>
        <a href="#" data-toggle="tooltip" title="Logout">
          <i class="fa fa-power-off"></i>
        </a>
      </div>
    </div>
    <div class="app-content">
      <nav class="navbar navbar-expand navbar-light bg-white">
        <button type="button" class="btn btn-sidebar" data-toggle="sidebar">
          <i class="fa fa-bars"></i>
        </button>
        <div class="navbar-brand">Admin 4B</div>
      </nav>
      <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
          <li class="breadcrumb-item">Home</li>
          <li class="breadcrumb-item active" aria-current="page">Library</li>
        </ol>
      </nav>
      <div class="container-fluid">
        Hello World!
      </div>
    </div>
  </div>
</div>

در ادامه:

قالبدهی و شخصی‌سازی ناوبری منوی کناری