نحوه استفاده از Bootstrap در Drupal

نحوه استفاده از Bootstrap در Drupal

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

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

ما در این مقاله شما رو با این فریم ورکآشنا می کنیم نحوه استفاده از Bootstrap در Drupal مورد بررسی قرار می دهیم

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

 توسط مارک اتو و جاکوب تورنتون درجهت ایجاد یک چارچوب ظاهری مشخص و یکسان در ابزارهای توییتر طراحی شد.

قبل از شروع این پروژه نمونه های زیادی با همین رویکرد ایجاد شده بود

که همگی با سرنوشتی مشابه و عدم استقبال طراحان وب دنیا مواجه شده بودند.

به دلیل وجود مشکلات اساسی در نمونه های دیگر،

سازنده اصلی توییتر یا همان مارک اتو تصمیم به ساخت یک سیستم داخلی و قدرتمند برای خود با نام Botstrap گرفت .

و در سال 2011 آن را به صورت متن باز و رایگان منتشر کرد ،

امروزه botstrap یکی از محبوبترین پروژه ها در میان طراحان وب می باشد.

Bootstrap در Drupal drupal-bootstrap-web-design

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

این framework با تمامی مرورگرهای استاندارد ،

حتی نسخه های پایین مرورگر اینترنت اکسپلور مانند اینترنت اکسپلور 8 هم سازگاری دارد و ظاهر زیبای خود را حفظ می کند.

از نسخه دوم bootstrap طراحی واکنشگرا هم به این framework اضافه شد

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

Botstrap تصمیم دارد که طراحان وب را ترغیب به استفاده از طرح های آماده و استاندارد نماید ،

بنابراین دستورات css و jquery را برای شما فراهم کرده است

تا بتوانید با استفاده از دستورات پیشفرض و رعایت اصول متناسب با botstrap زمان طراحی یک سایت را تا 80 درصد کاهش دهید.

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

bootstrap در دروپال :

برای اینکه از botsrap در دروپال استفاده کنید 2 راه وجود داره :

راه اول :

مراجعه به سایت بالا و دانلود bootstrap ، شما کافیست فایل های css و jquery رو به قالب خودتون اضافه کنیدمی توانید

فایل css را در مسیر / sites/all/themes/name-theme/css آپلود کنید

و همچنین فایل jquery خود را در مسیر sites/all/themes/name-theme/jsآپلود کنید ،و این گونه از botstrap در قالبمون استفاده میکنیم

همچنین برای استفاده در دروپال هم باید تغییراتی در برخی از فایل های قالبتون ایجاد کنید مثل فایل html.tpl.php که باید کد زیر رو در قسمت head اضافه کنید

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

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

راه دوم :

استفاده از قالب bootstrap drupal که در سایت رسمی دروپال موجود هست ،

این روش خیلی بهتر از روش بالا هست چون در این قالب سعی شده که المان های دروپال به المان های bootstrap تبدیل شوند ،

بنابراین شما نیازی به کدنویسی اضافه ندارید و لازم به تغییر در فایل های قالب ندارید.

Bootstrap در Drupal drupal-bootstrap-web-design1

اما برای استفاده از این قالب حتما توجه داشته باشید که باید افزونه jquery update رو باید نصب کنید

و در پیکربندی این افزونه با توجه به نسخه قالب مثلا اگر از bootstrap 3 استفاده می کنید

باید نسخه jquery update رو به 1.9 ارتقا بدید و در صورتی که از نسخه bootstrap 2 استفاده می کنید باید نسخه jquery update بیشتر از 1.7 باشد.

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

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

البته به نسخه botstrap هم توجه داشته باشید و بر اساس یکی از نسخه های این افزونه رو دانلود کنید.

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

استفاده از این افزونه رو بهتون پیشنهاد می کنم.

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

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

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

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

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

Leave a Reply
logo-samandehi
بارگذاری...