نحوه استفاده Bootstrap

نحوه استفاده Bootstrap


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

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

Bootstrap مجموعه ای از ابزارها و المان های وب می باشد که شما می توانید

از آن برای ایجاد یک صفحه وب استفاده کنید ،

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

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

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

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

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

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

و در سال 2011 آن را به صورت متن باز و رایگان منتشر کرد ، امروزه bootstrap یکی از محبوبترین پروژه ها در میان طراحان وب می باشد.

نحوه استفاده Bootstrap

نحوه استفاده Bootstrap

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

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

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

و ظاهر زیبای خود را حفظ می کند.

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

 

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

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

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

bootstrap در دروپال :

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

:راه اول : مراجعه به سایت بالا و دانلود bootstrap ،

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

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

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

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

 همچنین برای استفاده در دروپال هم باید تغییراتی در برخی از فایل های قالبتون ایجاد کنید

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

 

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

 

راه دوم :

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

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

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

نحوه استفاده 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 :

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

 

آموزش دروپال

دیدگاهتان را بنویسید

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