شروع کار با بوت استرپ

تاریخ انتشار : ۳۰ تیر ۱۳۹۷
زمان مطالعه : 4 دقیقه
بازدید : 732 نفر

معرفی فریمورک بوت استرپ

اگر نمیدانید بوت استرپ چیست و چه کاربردی در طراحی سایت دارد اصلا نگران نباشید … !

شما با استفاده از بوت استرپ میتوانید یک وبسایت کاملا استاندارد ، ریسپانسیو و با دیزاین ایده آل و کاملا کاربرپسند طراحی کنید. اگر به HTML و CSS تسلط نسبی داشته باشید با اصطلاح کلاس Class حتما برخورد کرده اید . بوت استرپ با در اختیار گذاشتن کلاس های مختلف شما را در طراحی یک صفحه استاندارد و بدون خطا کمک خواهد کرد.

میزان زمانی که صرف خواهید کرد تا یک صفحه را با CSS شخصی طراحی و پیاده سازی کنید ، به نسبت خیلی بیشتر از طراحی صفحه به کمک بوت استرپ خواهد بود. پس با کمک بوت استرپ میتوانید به پروژه خود سرعت بخشید و زمان کمتری را برای پیاده سازی صرف کنید.

طراحی وبسایت توسط بوت استرپ کاملا ساده بوده و در عین حال از گرافیک و UX بسیار خوب برخوردار بوده و از نظر سئو سایت طبق بررسی های انجام شده بسیار مفید واقع شده است.

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

البته لازم به ذکر است که بوت استرپ برای شخصی سازی نیاز به استفاده از CSS بصورت دستی نیز دارد و شما باید برای پیاده سازی طرح مورد نظر کمی در کدهای نوشته شده دست ببرید .

برای شروع کافیست فایل های css و js های موردنیاز برای اجرا و راه اندازی بوت استرپ را در فایل های اصلی خود قرار دهید :

  • فایل های استایل (CSS Stylesheet) : کافیست چندخط کد زیر را درون تگ <head> قرار دهید.

See the Pen Bootstrap CSS by Avrinet (@avrinet) on CodePen.

  • فایل های جاوا (JavaScript and jQuery) : کافیست چندخط کد زیر را قبل از بسته شدن تگ </body> قرار دهید..

See the Pen Bootstrap JS by Avrinet (@avrinet) on CodePen.

معرفی اجزای بوت استرپ

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

در ادامه با ما همراه باشید تا نگاهی جزئی به اجزای آن بیاندازیم :

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

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

مسیر فایل (مسیر سایت) : در بعضی سایت ها حتما با بخش ٬شما اینجا هستید .. ٬ روبرو شدید . این بخش ها را میتوانید با breadcrumb بوت استرپ پیاده سازی کنید.

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

کارت باکس : گاهی نیاز دارید تا مطالب سایت را بهمراه عکس و دکمه ادامه مطلب راه اندازی کنید . میتوانید از کارت در این زمینه کمک بگیرید.

اسلایدر : به سادگی بدون هیچ کد اضافه ای میتوانید برای وبسایت خود به شکل های مختلف اسلایدر طراحی و راه اندازی کنید.

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

لیست بازشونده : لیست های متریال با ظاهری زیبا و کاربردی

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

لیست های نمایشی : نوعی لیست جایگزین جدول که خود میتواند شامل متن شمارنده و … شود. از دموی بوت استرپ برای درک بهتر موضوع کمک بگیرید.

پاپ آپ : برای ساخت پاپ آپ برای وبسایت خود میتوانید از مودال بوت استرپ استفاده کنید.

منوی های اصلی سایت : یکی از قدرت های اصلی بوت استرپ در ساخت منوهای کاملا حرفه ای با طراحی کاملا استاندارد و

صفحه بندی مطالب : برای ایجاد شماره بندی برای صفحات مختلف سایت استفاده میشود.

نمودار : برای نمایش میزان فعالیت و رشد کسب و کار و میزان قدرت ارائه شده توسط کاربر استفاده میشود.

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

بوت استرپ

در مطالب بعدی بصورت جداگانه تمامی اجزای بوت استرپ را به شما آموزش خواهیم داد.

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

تماس

021 65870052