bootstrap چیست؟ چگونه در دروپال از bootstrap استفاده کنم؟

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

تاریخچه ایجاد bootstrap :

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

Bootstrap چه امکاناتی دارد؟

این framework با تمامی مرورگرهای استاندارد ، حتی نسخه های پایین مرورگر اینترنت اکسپلور مانند اینترنت اکسپلور 8 هم سازگاری دارد و ظاهر زیبای خود را حفط می کند. از نسخه دوم bootstrap طراحی واکنشگرا هم به این framework اضافه شد که موجب نمایش مناسب و قابل قبول در تلفن های هوشمند و تبلت ها گردید.

Bootstrap تصمیم دارد که طراحان وب را ترغیب به استفاده از طرح های آماده و استاندارد نماید ، بنابراین دستورات css و jquery را برای شما فراهم کرده است تا بتوانید با استفاده از دستورات پیشفرض و رعایت اصول متناسب با bootstrap زمان طراحی یک سایت را تا 80 درصد کاهش دهید.

برای دانلود bootstrap می تونید از طریق لینک زیر این کارو انجام بدید
http://getbootstrap.com/

bootstrap در دروپال :

برای اینکه از bootsrap در دروپال استفاده کنید 2 راه وجود داره :
راه اول : مراجعه به سایت بالا و دانلود bootstrap ، شما کافیست فایل های css و jquery رو به قالب خودتون اضافه کنید و از آنها در طراحی قالب بهره ببرید ، یعنی از المان های bootstrap در قالبتون استفاده کنید ، برای اینکه با این المان ها و نحوه کار آنها آشنا شوید بهتر هست داکیومنت های این framwork رو به دقت مطالعه کنید. همچنین برای استفاده در دروپال هم باید تغییراتی در برخی از فایل های قالبتون ایجاد کنید مثل فایل html.tpl.php که باید کد زیر رو در قسمت head اضافه کنید تا سایت در دستگاه های مختلف واکنش پذیر باشد.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

راه دوم : استفاده از قالب bootstrap drupal که در سایت رسمی دروپال موجود هست ، این روش خیلی بهتر از روش بالا هست  چون در این قالب سعی شده که المان های دروپال به المان های bootstrap تبدیل شوند ، بنابراین شما نیازی به کدنویسی اضافه ندارید و لازم به تغییر در فایل های قالب ندارید.

 

حتما بخوانید : در این مقاله روش ایجاد یک ساب تم bootstrap را به صورت کامل توضیح دادم.

اما برای استفاده از این قالب حتما توجه داشته باشید که باید افزونه jquery update رو باید نصب کنید و در پیکربندی این افزونه  با توجه به نسخه قالب مثلا اگر از bootstrap 3 استفاده می کنید باید نسخه jquery update رو به 1.9  ارتقا بدید و در صورتی که از نسخه bootstrap 2 استفاده می کنید باید نسخه jquery update بیشتر از 1.7  باشد.

افزونه هایی مفید برای bootstrap در دروپال :

Views Boostrap :  یک افزونه عالی برای استفاده در ویوز ، شما در با کمک این افزونه از قالب های واکنش پذیر در ویوز بهره خواهید برد مثل bootstrap grid و... ، البته به نسخه bootstrap هم توجه داشته باشید و بر اساس اون یکی از نسخه های این افزونه رو دانلود کنید.

TB Mega Menu : افزونه ایی برای خلق منوهایی فوقالعاده ، کار با این افزونه خیلی راحت هست و از اونجایی که از ساختار bootstrap در طراحی اون استفاده شده ، استفاده از این افزونه رو بهتون پیشنهاد می کنم.

Panels Bootstrap Layouts : اگر از پنل در سایتون استفاده میکنید این افزونه رو فراموش نکنید.

Bootstrap Tour : برای ایجاد یک راهنمای چند مرحله ایی توی سایت ، می تونید از این افزونه کمک بگیرید

Font Awesome Icons : از بین فونت آیکون های موجود در وب طرفداران بیشتری دارد .

Display Suite Bootstrap Layouts : با اضافه شدن این افزونه می تونید از قالب های bootstrap در افزونه display suite بهره مند شوید.

Bootstrap Carousel : با کمک این افزونه می تونید یک اسلایدشو داشته باشید.

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

 

admin
جواد اصغری هستم مدیر سایت مرکز دروپال ایران ، یک طراح که از سال 89 با دروپال کار می کنم به گرافیک علاقه خاصی دارم و سعی می کنم کارهام در این چهارچوب قرار بگیرن
تصویر مصطفی حاجتمند
مصطفی حاجتمند
د., 05/26/2014 - 23:32

تو ایام امتحانا چه حالی میده وقتی یه همچین مطلبی تو مرکز دروپال ابران می خونی :) مث همیشه عالی بود ...


تصویر mehrdadsh
mehrdadsh
چهارشنبه, 02/17/2016 - 15:38

سلام
از سایت دروپال پوسته bootstarp3 دانلود و نصب کردم ، ماژول jquery update هم نصب کردم و از پیکربندی روی 1.9 قر ار دادم.
ولی وقتی پوسته رو ست و فعال میکنم ارور میدهبه این شکل
http://drupalcenter.ir/comment/reply/1652
ممنون میشم راهنمایی کنید.


تصویر mehrdadsh
mehrdadsh
چهارشنبه, 02/17/2016 - 15:39

لینک بالا اشتباه شد
این لینک درسته
http://uupload.ir/files/mudh_aaa.jpg
ارور به این شکله


تصویر mehrdadsh
mehrdadsh
چهارشنبه, 02/17/2016 - 16:18

یه سوال دیگه
شما در دروپال پوستتونو از چه طریقی درست کردید؟


تصویر ساسی
ساسی (تایید نشده)
س., 04/12/2016 - 02:06

با سلام و تشکر از مطلب بسیار عالی خیلی بهم کمک کرد واقعا میگم دستتون درد نکنه دوستان.
یه سوال داشتم فرق بین cdn و less در استارتر کیت بوتسترپ 3 در چیه و کدام رو باید انتخاب کرد ؟ تاثیر رو سرعت یا حجم داره ایا ؟یکم توضیح بدین ممنون میشم


تصویر admin
admin
س., 04/12/2016 - 19:42

سلام دوست عزیز

خواهش می کنم ، زمانی که از روش cdn استفاده می کنید شما نیازی نداریدجی کوئری و سی اس اس bootstrap رو فراخوانی کنید و این دو از یک سایت فراخونی می شود که این در عین سهولت باعث کند شدن سایت شما می شود ، اما در روش less شما باید سی اس اس و جی کوئری رو خودتون فراخوانی کنید تا قالب به درستی کار کند... ، به نظرم less گزینه بهتری باشد


تصویر ساسی
ساسی (تایید نشده)
د., 04/18/2016 - 01:06

بسیار ممنون از راهنمایی های ناب و خوبتون
و اینکه برای اینکار فقط از پوشه less یک ساب تم درس کنم حله ؟ یا باید کارهایی دیگه رو انجام بدم ؟
ممنونم مثل همیشه راهنمایی کنید دوست جان


تصویر ساسی
ساسی (تایید نشده)
د., 04/18/2016 - 01:10

اگر جسارتی نیست روش تبدیل cdn به less قدم به قدم توضیح بدین دوستان
چون من از راه cdn رفتم و ساب تم درس کردم


تصویر ساسی
ساسی (تایید نشده)
ی., 04/24/2016 - 14:10

با سلام دوست عزیزم سوال قبلیمو که جواب ندادی گفتم یه سوال جدید بکنم.
پایین سایت خودتون قسمت جديدترين محصولات از چه ماژولی بهره بردید؟ خیلی مدته میخوام یه گالری نمونه کارهامو درست کنم ولی متاسفانه همیچین افکت زومی روی عکس پیدا نمی کنم وهمیشه با opacity مجبور میشم کار میکنم :-))
اگر راهنمایی کنید ممنون میشوم


از افزونه خاصی استفاده نشده ، همون ویوز هست که با css روش کار کردیم ، البته باید views.tpl نوشتن هم بلد باشین


مرکز دروپال ايران

راه های ارتباط با ما

آدرس : دفتر شهریار : شهرک وائین ، بعثت 5 نبش سپیدار 10 پلاک 26

تلفن : 09370977406 - 09384363798

ایمیل : drupalcenter.ir@gmail.com

ارتباط با مدیر سایت از طریق تلگرام

logo-samandehi

مرکز دروپال ایران بزرگترین وب سایت  آموزش دروپال در کشور ، در مهر ماه سال 1388 به طور رسمی فعالیت خود را در زمینه وب و دنیای دیجیتال آغاز کرده است. مجموعه مرکز دروپال ایران شامل « آموزش های تصویری » ، « معرفی جدیدترین ماژول ها » ، « ترجمه مقالات دروپالی روز دنیا » ، « طراحی قالب دروپال» و « خبرهای دنیای دروپال» می باشد.این مجموعه به همراه گروه فنی خود و به  پشتوانه کاربران فعال و متعهد ، با  در نظر داشتن چشم اندازی برای آینده نزدیک ، قصد دارد تا به معرفی و آموزش  هرچه بیشتر و بهتر هسته قدرتمند و دوست داشتنی دروپال ،  به روش های مختلف در زمینه های گوناگون بپردازد تا در کنار کاربران خود به موفقیت های هرروز خود بیفزاید. در همین راستا قصد داریم تا بصورت تخصصی و حرفه ای مباحث مختلف دروپال را با کوچک ترین جزئیات و تکنیک ها به دروپال کاران و کسانی که قصد دارند طراحی وب سایت ،پورتال و سیستم های هوشمند را آغاز کنند ، آموزش دهیم.گستردگی مطالب ، تنوع در آموزش ها ، نگاه تخصصی و همگام بودن با کاربران در آموزش عوامل متمایز کردن مرکز دروپال ایران با سایر آموزش دهندگان می باشد.
دروپال برای انجام طراحی های شگفت انگیز !  Drupal Builds something amazing