ساخت سریع و آسان برنامه های وب مدرن با
قدرتمندترین قالب مدیریت Bootstrap 5

من تمام تلاش خودم را کرده‌ام که استانداردها و ساختار مدولار را در حین توسعه قالب به خوبی حفظ کنم . بخش های بعدی فایل ها و پوشه های قالب، ساختار، ساختار فایل های html و افزونه ها را توضیح میدهم .

ساختار فایل و پوشه

	
	
   Theme Directory
	
   main-file/
	
	│
	├── BS5
	│	│			
	│	├── assets/
	│	│	│
	│	│	└── icons
	│	│	│	└── All Icon font files
	│	│	│
	│	│	└── vendor_components
	│	│	│	└── All Third party components plugins File with Sourcs
	│	│	│
	│	│	└── vendor_plugins
	│	│		└── All plugins
	│	│		
	│	├── images/
	│	│	│
	│	│	└── All Images Here
	│	│		
	│	├── main
	│	│	│
	│	│	└── main  (Light / Dark / RTL all separate folders)
	|	|		└── All HTML Files 
	|	|
	|	|	└── css
	|	|		└── All css files.
	|	|
	|	|	└── js
	|	|		└── All js Files 
	|	|
	|	|	
	|	|		
	|	|	
	│	│	
	│	└── horizontal
	│	│	└── main  (Light / Dark / RTL all separate folders)
	|	|		└── All HTML Files 
	|	|
	|	|	└── css
	|	|		└── All css files.
	|	|
	|	|	└── js
	|	|		└── All js Files 
	|	|
	|	|	
	|	|		
	|	|	
	│	│	
	│	└── front-end
	│	│	└── corenav-master  (Nav pluging file)
	|	|		└── Js & Css
	|	|
	|	|	└── css
	|	|		└── All css files.
	|	|
	|	|	└── js
	|	|		└── All js Files 
	|	|
	|	|	└── revolution-slider
	|	|		└── All Files 
	|	|
	|	|	└── Video
	|	|		└── All Video files.
	|	|	
	|	|	└──all Pages HTML file
	
	
	

برای استفاده از هرکدام از دموهای قالب اول از همه، پوشه مورد نظر خود را انتخاب کنید و آن پوشه را به همراه پوشه assets که شامل کامپوننت ها و پلاگین های ضروری است ، کپی کنید ، و به این صورت این پوشه میشود پوشه قالب مورد نظر شما که میتوتنید از آن استفاده کنید .

برای مثال : در پوشه اصلی قالب
template(دمو خود را انتخاب کنید) + assets (ضروری) + images (ضروری) = از نسخه ی نمایشی خودتون لذت ببرید.

ابتدا فونت های دلخواه فارسی که دارای پسوندهای woff و eot هستند را در پوشه fonts قرار دهید ، من در قالب فونت یکان (فونت یکان بخ) را اضافه کرده ام شما می توانید هر فونت فارسی را به همین شکل اضافه نمایید .

کد اضافه کردن فونت فارسی به css

در قسمت زیر کد اضافه کردن فونت فارسی به css ، را مشاهده می کنید ، برای تغییر دادن فونت قالب تنها کافی است نام فونت موردنظرتان را بجای yekan قرار دهید و نام فایل ها با پسوند eot و فایل های woff و آدرسشان در css را تغییر دهید.

اگر می خواهید فونت روی تمام متون اعمال شود مانند تصویر برای تگ body ، از دستور font-family آن را مشخص نمایید.

اگر بخواهید برای تگ یا بخش خاصی فونت را مشخص کنید به شکل زیر عمل نمایید. مثلا می خواهید فونت فقط روی تگ های p اعمال شود از کد زیر استفاده می کنید.

کامپوننت باکس/کارت پرکاربردترین مؤلفه در این قالب است. شما می توانید از آن برای هر چیزی از نمایش نمودار گرفته تا بلوک های متن استفاده کنید.

کد زیر در قسمت باکس/کارت تمام صفحات HTML استفاده می شود

<div class="box">
  <div class="box-header with-border">
	<h4 class="box-title"> سکاب <strong> یلصا </strong></h4>
	<ul class="box-controls pull-right">
	  <li><a class="box-btn-close" href="#"></a></li>
	  <li><a class="box-btn-slide" href="#"></a></li>
	  <li><a class="box-btn-fullscreen" href="#"></a></li>
	</ul>
  </div>

  <div class="box-body">
	 <p>هندب نتم </p>
  </div>

  <div class="box-footer">
	 <p> رتوف نتم </p>
  </div>
</div>
		

<div class="card">
  <div class="card-header">
	<h4 class="card-title"> سکاب <strong> یلصا </strong></h4>
  </div>

  <div class="card-body">
  <p>هندب نتم </p>
  </div>

  <div class="card-footer">
  <p> رتوف نتم </p>
  </div>
</div>
		

پلاگین درختی یک لیست تودرتو را به نمای درختی تبدیل می کند که در آن منوهای فرعی را می توان گسترش داد.

نحوه استفاده

این افزونه را می توان با استفاده از data-api یا jQuery فعال کرد.

Data API

<ul class="sidebar-menu" data-widget="tree">

	<li>
	  <a href="charts_chartjs.html">
		<i class="ti-stats-up"></i>
		<span>ChartJS</span>
	  </a>
	</li> 

	<li class="treeview">
	  <a href="#">
		<i class="ti-view-list"></i>
		<span>یحطس دنچ</span>
		<span class="pull-right-container">
		  <i class="fa fa-angle-right pull-right"></i>
		</span>
	  </a>
	  <ul class="treeview-menu">
		<li><a href="#">کی حطس</a></li>
		<li class="treeview">
		  <a href="#">کی حطس
			<span class="pull-right-container">
		  <i class="fa fa-angle-right pull-right"></i>
		</span>
		  </a>
		  <ul class="treeview-menu">
			<li><a href="#">ود حطس</a></li>
			<li class="treeview">
			  <a href="#">ود حطس
				<span class="pull-right-container">
		  <i class="fa fa-angle-right pull-right"></i>
		</span>
			  </a>
			  <ul class="treeview-menu">
				<li><a href="#">هس حطس</a></li>
				<li><a href="#">هس حطس</a></li>
			  </ul>
			</li>
		  </ul>
		</li>
		<li><a href="#">کی حطس</a></li>
	  </ul>
	</li> 

  </ul>
	

ما در این قالب از jQuery، Bootstrap JS Framework (در هسته آن) و برخی از پلاگین های کمکی استفاده کردیم. شما میتوانید از هر پلاگین کمکی دیگری که تمایل دارید با توجه به نیاز خود استفاده کنید. css از قبل دارای استایل تطبیقی ​​برای این پلاگین ها است، بنابراین نیازی به انجام کاری در باره این مورد نخواهید داشت.

در متن زیر توضیح داده شده اند:

• Bootstrap
• Jquery
• Font-Awesome
• ionicons
• ChartJS
• Flot
• Morris.js
• Sparkline
• Bootstrap Slider
• Ion Slider
• Date Picker
• Date Range Picker
• Color Picker
• Time Picker
• iCheck
• Input Mask
• Bootstrap WYSIHTML5
• CK Editor
• DataTables
• Full Calendar
• jQuery UI
• jQuery Knob
• jVector Map
• Slim Scroll
• Pace
• Bootstrap-timepicker
• Bootstrap Colorpicker
• Select2
• Pexels (images)
• Weather Icons
• Magnific Popup
• lightbox master
• Sweetalert
• ACE Editor
• Form Validation
• Form Wizard

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