v1.0

قالب پنل مدیریتی بوت استرپ 4

فایل راهنما توسط جعفر خان

ایجاد شده: 1399/2/13
توسط: جعفر عباسی

با تشکر از شما برای خرید قالب ما. اگر سؤالی دارید که خارج از محدوده این پرونده کمک است ، لطفاً سؤال خود را به ایمیل من ارسال کنید. ایمیل را می توان از طریق نسخه بارگیری شده از اسناد دریافت کرد. خیلی ممنون!

A) نصب - بالا

هنگامی که شما فقط نیاز به وارد کردن CSS یا JS کامپایل شده در استودیو دارید ، زیر CSS و جاوا اسکریپت اصلی مورد نیاز است. 

<link href="assets/css/app.min.css" rel="stylesheet" />
<script src="assets/js/app.min.js"></script>
OR

اگر می خواهید تنظیمات پرونده های scss را پیکربندی کنید ، مراحل نصب را دنبال کنیدgulp در سیستم عامل خود.
برای نحوه تنظیم محیط توسعه می توانید به اسناد رسمی آنها مراجعه کنید.
راهنمای تنظیم 

cd /your-path-url/studio_v1.0/admin/template/
npm install 
gulp

اطمینان حاصل کنید که حداقل گره در حال اجرا هستید 6.9.x و npm 3.x.x حرکت کنید node -v و npm -v در یک پنجره ترمینال / کنسول. نسخه های قدیمی تر خطاهایی ایجاد می کنند ، اما نسخه های جدید تر خوب هستند.

B) ساختار فایل - top

نمای کلی ساختار فایل برای استودیو

template/
├── dist/             // پرونده های html / css / js تولید شده است
├── gulpfile.js       // تنظیمات gulp
├── package.json      // npm بسته نصب شده است
└── src/
    ├── html/         // فایل های منبع html
    ├── img/          // پرونده های منبع تصویر
    ├── js/           // فایلهای منبع جاوا اسکریپت
    └── scss/         // فایلهای استودیوی scss

C) ساختار HTML - بالا

در زیر ساختار کلی صفحه و فایلهای اصلی css / js مورد نیاز برای الگوی استودیوی مدیریت ارائه شده است. فایلهای css / js را می توان از طریق یافت /dist/assets/ پوشه.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>Studio</title>
  <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" 
        name="viewport" />
 
  <!-- core-css -->
  <link href="assets/css/app.min.css" rel="stylesheet" />
</head>
<body>
  <div id="app" class="app">
    <!-- app-header -->
    <header id="header" class="app-header">... </header>
    
    <!-- app-sidebar -->
    <sidebar id="sidebar" class="app-sidebar">... </sidebar>
    
    <!-- app-content -->
    <div id="content" class="app-content">...</div>
    
    <!-- btn-scroll-top -->
    <a href="#" data-click="scroll-top" class="btn-scroll-top fade"><i class="fa fa-arrow-up"></i></a>
  </div>
  
  <!-- BEGIN core-js -->
  <script src="assets/js/app.min.js"></script>
</body>
</html>

D) CSS - بالا

تمام فایلهای CSS مورد استفاده در استودیو در یک فایل واحد جمع آوری شده اند app.min.css با استفاده از خندق اگر شما استفاده نکردن از gulp, روی پوشه کپی کنید /dist/assets/css و /dist/assets/webfonts در پوشه دارایی برنامه شما.

  1. FontAwesome
  2. jQuery UI
  3. Animate.css
  4. Pace Loader
  5. Bootstrap
  6. Studio Core CSS
<!-- core-css -->
<link href="assets/css/app.min.css" rel="stylesheet" />

<!-- core-css required folder -->
/dist/assets/css
/dist/assets/webfonts

E) جاوااسکریپت - top

این قالب 7 کتابخانه جاوا اسکریپت را در یک پرونده واحد تالیف می کند app.min.js با استفاده از خندق اگر از خندق استفاده نمی کنید ، پوشه را کپی کنید /dist/assets/js در پوشه دارایی برنامه شما.

  1. سرعت لودر
  2. jQuery
  3. jQuery UI
  4. بوت استرپ
  5. Slimscroll
  6. کوکی های جاوااسکریپت
  7. استودیو Core Javascript
<!-- core-js -->
<script src="assets/js/app.min.js"></script>

<!-- core-js required folder -->
/dist/assets/js

F) تنظیم صفحه - بالا

نوار کناری کوچک شد:

<div id="app" class="app app-sidebar-minified">
  ...
</div>

تمام قد:

<div id="app" class="app app-content-full-height">
  ...
  <div id="content" class="app-content" data-scrollbar="true" data-height="100%" 
       data-skip-mobile="true">
     ...
  </div>
</div>

تمام عرض:

<div id="app" class="app app-content-full-width">
  ...
</div>

فوتر ثابت:

<div id="app" class="app app-footer-fixed">
  ...
  <div id="footer" class="app-footer">
    © 2020 seanTheme All Right Reserved
  </div>
</div>

طرح جعبه ای

<body class="app-with-bg">
  <div id="app" class="app app-boxed-layout">
    ...
  </div>
</body>

G) منابع - بالا

من از تصاویر ، نمادها یا پرونده های دیگر به عنوان لیست استفاده کرده ام.

افزونه های جی کوئری

  1. animate.css: https://daneden.github.io/animate.css/
  2. ApexCharts: https://apexcharts.com/
  3. بارگذاری پرونده jQuery: https://blueimp.github.io/jQuery-File-Upload/
  4. Bootstrap: http://getbootstrap.com/
  5. Bootstrap Colorpicker: https://github.com/farbelous/bootstrap-colorpicker/
  6. Bootstrap Datepicker: https://uxsolutions.github.io/bootstrap-datepicker/
  7. Bootstrap Daterangepicker: http://www.daterangepicker.com/
  8. Bootstrap Select: https://developer.snapappointments.com/bootstrap-select/examples/
  9. Bootstrap Slider: https://www.eyecon.ro/bootstrap-slider/
  10. Bootstrap Tagsinput: http://bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples/
  11. Bootstrap Timepicker: http://jdewit.github.io/bootstrap-timepicker/
  12. Bootstrap Table: https://bootstrap-table.com/
  13. Bootstrap 3 Typeahead: https://github.com/bassjobsen/Bootstrap-3-Typeahead/
  14. Bootstrap 4 custom file input: https://github.com/Johann-S/bs-custom-file-input
  15. Chart.js: https://chartjs.org
  16. DataTables: https://datatables.net/
  17. FontAwesome: https://fontawesome.com/
  18. Fullcalendar: https://fullcalendar.io/
  19. jQuery: https://jquery.com/
  20. jQuery Slimscroll: http://rocha.la/jQuery-slimScroll
  21. jQuery UI: https://jqueryui.com/
  22. jquery.maskedinput: https://github.com/excellalabs/jquery.maskedinput
  23. Javascript Cookie: https://github.com/js-cookie/js-cookie
  24. jVectormap: http://jvectormap.com/
  25. kbw-countdown: https://github.com/kbwood/countdown
  26. moment: http://momentjs.com/
  27. Pace: https://github.com/HubSpot/pace
  28. PhotoSwipe: https://photoswipe.com/
  29. Popper.js: https://popper.js.org/
  30. jQuery Password Strength: https://github.com/ablanco/jquery.pwstrength.bootstrap
  31. Summernote: https://github.com/summernote/summernote

تصاویر

  1. Unsplash: https://unsplash.com/
  2. Freepik: https://www.freepik.com/

آیکن ها

  1. Flaticon: https://www.flaticon.com/

H) گزارش تغییرات - بالا

ورژن 1.0 – اردیبهشت 1399
  • انتشار اولیه