پرش به مطلب اصلی

ساختار کلی قالب

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

ساختار صفحه​

html
<!-- Preloader will be added here-->
<div id="page">
  <!-- Header Bar will be added here -->
  <!-- Footer Bar will be added here -->
  <div class="page-content header-clear-VALUE">
    <!-- Add your Canvas Elements - meanign - Components and Page Elements Here-->
  </div>
  <!-- Off Canvas Elements Here -->
</div>

این ساختار اصلی قالب است. بنابراین پیروی از این ساختار برای عملکرد بهتر قالب ضروری است، بخصوص که قالب از بسیاری از المان خارج از صفحه برای ایجاد یک تجربه کاربری زیبا استفاده میکند.

خط 1 – المان لودر صفحه است. تنها المانی است که خارج از محتوای صفحه خواهد بود <div id="page">
خط 2 – تگ اصلی صفحه است. همه المان های خود را داخل این تگ نگه دارید.
خط 3 – مکان قرار گیری هدر.
خط 4 – مکان قرار گیری فوتر.
خط 5 – محتوای صفحه است. همه المان های درون صفحه ای را شامل میشود(همه المان ها، بجز چند مورد که در زیر توضیح داده شده است)
خط 7 – اتمام محتوای صفحه.
خط 8 – جایی است که المان های خارج از صفحه را در آن قرار داده شده است (منوها، مدال ها، اسنک بارها).
خط 9 – اتمام تگ اصلی صفحه، از این قسمت به بعد لطفاً محتوای بیشتری اضافه نکنید.

نکته

کلاس page-content از بالای صفحه شروع میشود، بنابراین وقتی محتوایی را در آن اضافه میکنید ممکن است توسط هدر پنهان شود. برای حل این مشکل، بسته به نیازتان، کلاس header-clear / header-clear-small / header-clear-medium / header-clear-large را به جای header-clear-VALUE به محتوای صفحه اضافه کنید.

المان های درون صفحه ای چیست؟(تگ page-content)​

صفحه مکانی در نظر گرفته میشود که در آن همه المانی را که در صفحه میبینید که فقط هنگام اسکرول حرکت نمیکنند.
هر چیزی که در کلاس page-content میبینید یک عنصر درون صفحه ای در نظر گرفته میشود.
این المان ها همیشه داخل صفحه قابل مشاهده هستند، و حرکت نمیکنند به جز زمانی که در حال پیمایش صفحه هستید.

المان های خارج از بوم چیست؟ (ناحیه بین page-content و صفحه)​

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

  • Header Bar
  • Footer Bar
  • Action Sheets
  • Action Modals
  • Sidebar Menus
  • Toasts
  • Snackbars

خطر

این عناصر را در کلاس page-content قرار ندهید. انجام این کار منجر به مشکلات z-index میشود، به این معنی که آنها به درستی نشان داده نمیشوند.

body​

تگ body برای کنترل تم صفحه و همچنین رنگ هایلایت و پس زمینه استفاده میشود.

html
<body class="theme-light"></body>

برای حالت تاریک از theme-dark، برای حالت روشن از theme-light و برای تشخیص خودکار تنظیمات دستگاه خود از detect-theme استفاده کنید. اگر این قابلیت توسط دستگاه شما پشتیبانی نشود، صفحه به طور خودکار روی theme-light تنظیم میشود. اکثر دستگاه‌های مدرن اکنون از تشخیص خودکار تم پشتیبانی میکنند و میتوانید این مورد را در صفحه component-auto-dark.html بررسی کنید.

هدر قالب به گونه ای طراحی شده است که استفاده از آن بسیار آسان است و انعطاف پذیر است. با این گفته، هدر در حال حاضر از چند سبک پشتیبانی میکند که در زیر توضیح داده میشود و میتوان آنها را در صفحه component-headers.html مشاهده و استفاده کرد.

html
<div class="header header-fixed header-logo-left">
    <a href="index.html" class="header-title">AppKit Mobile</a>
    <a href="#" class="header-icon header-icon-1"><i class="fas fa-envelope"></i><span class="badge bg-green1-dark">5</span></a>
    <a href="#" class="header-icon header-icon-2"><i class="fas fa-bars"></i></a>
    <a href="#" class="header-icon header-icon-3"><i class="fas fa-heart color-red2-light"></i></a>
    <a href="#" class="header-icon header-icon-4"><i class="fas fa-share-alt"></i></a>
</div>

خط 1: کلاس wrapping اصلی است. این شامل کلاس header، برای تعریف عنصر و header-fixed است، که باعث میشود هدر در بالای صفحه ثابت بماند و همچنین، کلاسی که برای تعیین استایل استفاده میشود. میتوانید از هر یک از کلاس های زیر استفاده کنید.

  • header-logo-left - لوگوی سمت چپ با 4 آیکون در سمت راست
  • header-logo-right - لوگوی سمت راست با 4 آیکون در سمت چپ
  • header-logo-center - لوگوی وسط با 2 آیکون در راست و 2 آیکون در چپ
  • header-logo-app - یک آیکون در سمت چپ، لوگو و 3 آیکون در سمت راست.

خط 2: لوگوی هدر است. میتواند یک تصویر یا یک متن باشد. با تنظیم کلاس header-title روی header-logo میتوانید لوگو را به عنوان تصویر انتخاب کنید. تصویر لوگو را میتوان با جستجوی "header-logo" در فایل اصلی css پیدا کرد و آن را با تصویر خود جایگزین کرد.

خطوط 3،4،5،6 آیکون های هدر هستند. با استفاده از header-icon-1 تا 4، شماره گذاری میشوند و میتوانید موقعیت آنها را بر اساس این عدد تغییر دهید.

منوی فوتر چیزی است که به قالب جان بخشیده است. برای مشاهده تمام نوارهای فوتر موجود، صفحه component-footers.html را بررسی کنید، جایی که میتوانید آنها را مستقیماً در صفحات خود کپی و پیست کنید.

html
<div id="footer-bar" class="footer-bar-1">
    <a href="#"><i class="fa fa-home"></i><span>Home</span></a>
    <a href="#" class="active-nav"><i class="fa fa-star"></i><span>Features</span></a>
    <a href="#"><i class="fa fa-heart"></i><span>Pages</span></a>
    <a href="#"><i class="fa fa-search"></i><span>Search</span></a>
    <a href="#"><i class="fa fa-cog"></i><span>Settings</span></a>
</div>

منوی فوتر قالب محدود به تعداد آیتم های شما در آن نیست. فوتر با استفاده از Flexbox ساخته شده است، بنابراین به طور خودکار همه موارد را به تنهایی محاسبه و تراز میکند. با این حال توجه داشته باشید که دستگاه هایی با صفحه نمایش کوچک وجود دارند، بنابراین استفاده از بیش از 5 آیکون توصیه نمیشود. در داخل id نوار فوتر، لینک ها و آیکون های FontAwesome 6 خواهید داشت. در صورت نیاز آنها را ویرایش یا تغییر دهید. برای هایلایت یا فعال کردن صفحه کافی است active-nav را به منوی فوتری که میخواهید اضافه کنید.

نتیجه گیری​

ساختار صفحه با استفاده از صفحه starter.html که در قالب موجود است، تا حد امکان ساده در نظر گرفته شده است، عناصر فوق را در داخل آن خواهید یافت و میتوانید بلافاصله شروع به قرار دادن محتوای خود در داخل کلاس page-content کنید.

آخرین به روز رسانی در تاریخ