نمادها

شما اینجا هستید

آموزش Bootstrap جلسه سی و پنجم (Simple Template)

در خدمت شما هستیم با آموزش Bootstrap جلسه سی و پنجم (Simple Template)

آموزش Bootstrap جلسه سی و پنجم (Simple Template) از سری آموزش های تک قسمتی است

سلام برنامه در این آمزش نمونه قالب های مختلف را معرفی می کند

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

  • Blog: سایت هایی که ظاهر وبلاگ گونه دارند
  • Portfolio : وبسایت هایی که برای نمایش نمونه کارها استفاده می شوند
  • Webpage : صفحات وب سایت های ساده و معمولی
  • Social : وبسایت های اجتماعی مثل فیسبوک
  • Marketing : وبسایت های فروشگاهی
  • و…

در این جلسه نمونه هایی از حالت رسپانسیو سایت های بالا را به شما معرفی می کنیم

هدف از این جلسه نشان دادن استاندارد قرار گیری المان ها در وبسایت های مختلف است

 

blog

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

  1. بخش سایدبار
  2. بخش محتوای اصلی
  3. بخش فوتر

است البته میتواند شامل بخش های دیگر هم باشد اما این حالت default آن است. ما برای شما کد های یک بلاگ ساده با یک مطلب را آورده ایم :

این کد های یک قالب تک مطلبی کامل است که با خروجی گرفتن از آن میتوانید قالب را ببینید.

Portfolio 

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

  1. بخش منو بار
  2. محتوای سایت یا همان بخش معرفی و توضیحات
  3. چند بلوک برای نمایش نمونه کار ها
  4. فوتر سایت

است . برای مشاهده ی نمونه ی ساده ای از یک سایت portfolio برای شما کد های آماده یک قالب ساده نمونه کار را آورده ایم:

 

Webpage

صفحات و یا سایت های وب پیج برای سایت های معمولی و ساده استفاده میشوند تقریبا شامل بخش های بیشتری نسبت به حالت های تا الان گفته شده دارند و میتوانند شامل قسمت هایی نظیر:

  1. منو بالایی سایت یا همان منو بار
  2. سایدبار سمت راست
  3. ساید بار سمت چپ
  4. بخش محتوای الی که در وسط قرار دارد
  5. بخش انتهایی یا همان فوتر سایت

باشد این سایت ها میتوانند توسعه یافته و برای وب سایت هایی نظیر سایت های فیلم و سریال یا سایت های دانلودی استفاده شوند و یا حتی وبسایت های ساده آموزشی.

 

Social

از این نوع برای ساخت شبکه های اجتماعی استفاده میشود دوستان توجه داشته باشید که این چیدمان ها اجباری نیست و لزومی ندارد حتما شما از این چیدمان ها استفاده کنید این حالت ها پر استفاده ترین حالت ها در نوع خود هستند مواردی که برای یک شبکه اجتماعی لازم است تقریبا در این حالت فراهم شده است مواردی مثل:

  1. منو بار سایت
  2. ساید بار سمت راست
  3. ساید بار سمت چپ
  4. بخش لایک ها و سوشیال ها
  5. بخش گفت و گو های کاربران
  6. پخش پایانی یا فوتر سایت

این موارد قابل گسترش هستند و حالتی که ما برای شما کد آن را قرار میدهیم یک حالت ساده است:

Marketing  

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

  1. منو بار سایت
  2. اسلایدر محصولات
  3. بخش نمایش محصولات
  4. سایدبار
  5. بخش پایانی یا همان فوتر

البته چیدمان این المان ها کاملا اختیاری با تبعیت از ui و ux مناسب است و حالتی که ما کد های آن را برای شما قرار میدهیم ساده ترین حالت ممکن آن است:

 

می توانید دیگر قسمت ها را در لینک زیر ببینید

آموزش Bootstrap جلسه سی و چهارم (Affix)

آموزش Bootstrap جلسه پایانی (Design Template)

 

شما می توانید این آموزش را به صورت آنلاین از ویدیو زیر ببینید

 

و یا در صورت علاقه آن را در آپارات ببینید:

همچنین در صورت علاقه می توانید این آموزش را از باکس دانلود موجود در زیر همین پست دانلود نمایید
اگر این مطلب آموزنده بود به ما امتیاز دهید
1 ستاره2 ستاره3 ستاره4 ستاره5 ستاره (4 رای, میانگین: 4٫75 امتیاز از 5)
Loading...

این یک فایل mp4 تصویری است که با پلیر های ویدیویی قابل اجرا می باشد

دانلود آموزش Bootstrap جلسه سی و پنجم (Simple Template): نوع فایل:mp4 حجم فایل:28.24 مگابایت

هر پلیر اجرا کننده فایل ویدیویی

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

*

code

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