v1.6قالب مدیریتی واکنشگرا بوت‌سترپ ورژن 5
فایل راهنما -
آپدیت شده: 1400
توسط: آفرید تیم
اگر سوالی دارید که فراتر از محدوده این فایل راهنما است، لطفا به ما تیکت ارسال کنید تلاش میکنیم بهترین پشتیبانی را فراهم کنیم.
تنها نیاز است که فایل کامپایل شده و مینیمایز سی اس اس و جی اس را در ساختار اچ تی ام ال خود قرار دهید
<!-- Core CSS --> <link href="assets/css/vendor.min.css" rel="stylesheet" /> <link href="assets/css/app.min.css" rel="stylesheet" /> <!-- Core JS --> <script src="assets/js/vendor.min.js"></script> <script src="assets/js/app.min.js"></script>
یا اگر آشنایی با گالپ و اس سی اس اس دارید از آنها میتوانید برای به راه اندازی محیط توسعه وب سایت خود
استفاده کنید
gulp را در سیستم عامل خود نصب کنید ابتدا.
شما ممکن است به مستندات رسمی نیاز داشته باشید مراجعه کنید تا آشنایی لازم برای اینکه چگونه محیط توسعه را
راه اندازی کنید پیدا کنید.
مشاهده راهنما
cd /your-path-url/template_html/ npm install gulp // generate plugins command gulp plugins
مطمئن باشید آخرین ورژن از نود یعنی 6.9.x و ان پی ام 3.x.x را داشته باشید با
اجرای دستور node -v و npm -v در ترمینال یا کنسول سیستم خود. ورژن های قبلی
ناسازگاری خواهند داشت.
ساختار فایل موجود در اچ‌یودی
template/
├── dist/ // generated html / css / js files
├── assets
├── css/ // css files
├── img/ // image source files
├── js/ // javascript source files
├── plugins/ // plugins source files
└── webfonts/ // webfonts settings
├── documentation // documentation package
└── src/
├── analytics.html/ // html files
├── calendar.html // html files
└── ... // html files
ساختار فایل موجود در اچ‌یودی در صورت استتفاده از گالپ
template/
├── dist/ // generated html / css / js files
├── gulpfile.js // gulp settings
├── package.json // npm package installed
└── src/
├── html/ // html source files
├── img/ // image source files
├── js/ // javascript source files
└── scss/ // studio scss files
در زیر ساختار کلی فایل و هسته اصلی سی اس اس / جی اس برای قالب مدیریتی ادمین آماده شده است . فایل های css
/ js را در پوشه رو به رو میتوانید پیدا کنید /dist/assets/ .
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>HUD</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/vendor.min.css" rel="stylesheet" />
<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-toggle="scroll-to-top" class="btn-scroll-top fade"><i class="fa fa-arrow-up"></i></a>
</div>
<!-- BEGIN core-js -->
<script src="assets/js/vendor.min.js"></script>
<script src="assets/js/app.min.js"></script>
</body>
</html>
تمام فایل های سی اس اس مورد استفاده در اچ‌یودی به دو فایل رو به رو کامپایل شده است app.min.css و
vendor.min.css با استفاده از گالپ. اگر شما از گالپ استفاده نمیکنید, فولدر زیر را کپی
کنید /dist/assets/css و /dist/assets/webfonts به فولدر دارایی های اپلیکیشن
خودتان
vendor.min.cssapp.min.css<!-- core-css --> <link href="assets/css/vendor.min.css" rel="stylesheet" /> <link href="assets/css/app.min.css" rel="stylesheet" /> <!-- یا بدون vendor.min.css --> <link href="assets/plugins/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet" /> <link href="assets/plugins/jquery-ui-dist/jquery-ui.min.css" rel="stylesheet" /> <link href="assets/plugins/animate.css/animate.min.css" rel="stylesheet" /> <link href="assets/plugins/pace-js/themes/black/pace-theme-flash.css" rel="stylesheet" /> <link href="assets/css/app.min.css" rel="stylesheet" /> <!-- core-css required folder --> /dist/assets/css /dist/assets/webfonts
این قالب 6 کتابخانه جاوااسکریپت را در دو فایل رو به رو کامپایل کرده است app.min.js و
vendor.min.js با استفاده از گالپ.اگر از گالپ استفاده نمیکنید, فولدر رو به رو را کپی کنید
/dist/assets/js به فولدر دارایی های اپلیکیشن خودتان.
vendor.min.jsapp.min.js<!-- core-js --> <script src="assets/js/vendor.min.js"></script> <script src="assets/js/app.min.js"></script> <!-- یا بدون vendor.min.js --> <script src="assets/plugins/pace-js/pace.min.js"></script> <script src="assets/plugins/jquery/dist/jquery.min.js"></script> <script src="assets/plugins/jquery-ui-dist/jquery-ui.min.js"></script> <script src="assets/plugins/bootstrap/dist/js/bootstrap.bundle.min.js"></script> <script src="assets/plugins/jquery-slimscroll/jquery.slimscroll.min.js"></script> <script src="assets/plugins/js-cookie/src/js.cookie.js"></script> <script src="assets/js/app.min.js"></script> <!-- core-js required folder --> /dist/assets/js
سایدبار چسبیده:
<div id="app" class="app app-sidebar-collapsed"> ... </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">
© 1400 تمامی حقوق محفوظ است
</div>
</div>
پیس اودر در بالا
<body class="pace-top"> ... </body>
چینش باکس
<body class="pace-top">
<div id="app" class="app app-boxed-layout">
...
</div>
</body>
تم را به تگ رو به رو اضافه کنید <body> تا رنگ تم را بتوانید عوض کنید.
<body class="theme-red">...</body> <body class="theme-pink">...</body> <body class="theme-orange">...</body> <body class="theme-yellow">...</body> <body class="theme-lime">...</body> <body class="theme-green">...</body> <body class="theme-teal">...</body> <body class="theme-cyan">...</body> <body class="theme-blue">...</body> <body class="theme-purple">...</body> <body class="theme-indigo">...</body> <body class="theme-black">...</body>
کلاس کاور را به تگ رو به رو اضافه کنید <html> تا بتوانید کاور صفحه را تغییر دهید.
<html class="bg-cover-2"> <html class="bg-cover-3"> <html class="bg-cover-4"> <html class="bg-cover-5">
منابع استفاده شده در این قالب در این زیر لیست شده اند
پلاگین جی کوئری
تصاویر