مقدمه ای بر Bootstrap ، معایب و مزایا

بخش: توسعه وب 77 بار مشاهده شده جمعه ۸ دی ۹۶ 0 نظر ارسال شده
مقدمه ای بر Bootstrap ، معایب و مزایا

معرفی Bootstrap

Bootstrap محبوب ترین فریم ورک html، css و javascript است که برای ساخت وب سایت های واکنش گرا مورد استفاده قرار میگیرد.

این ابزار متن باز که توسط توئیتر توسعه یافته کار ساده سازی و سرعت بخشیدن به طراحی سمت کاربر وب سایت را برعهده دارد. bootstrap به شدت مورد علاقه ی طراحان وب قرار گرفته و یادگیری آن برای افرادی که قصد حضور در این زمینه را دارند ضروی به نظر میرسد.

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

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

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

از رقبای bootstrap میتوان Uikit, Foundation, Semantic UI,Bulma را نام برد.

bootstrap site

 

اجزای بوت استرپ :

پس از دانلود بوت استرپ3 (حین نگارش این مقاله بوت استرپ 4 نیز در حالت آزمایشی قابل دانلود است) با سه پوشه مواجه خواهید شد:

  • css شامل فریم ورک CSS
  • js شامل فریم ورک JAVASCRIPTوJQUERY
  • fonts فونت های شامل آیکون های مورد استفاده

با قرار دادن این فایل ها در پوشه ی اصلی پروژه ی و وارد کردن آنها در فایلHTML  خود با استفاده از کدهای زیر میتوانید از بوت استرپ استفاده کنید:

<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/bootstrap.min.js"></script>

 

البته برای عملکرد صحیح Bootstrap باید jQuery را هم به پروژه ی خود اضافه کنید.

 

مزایای اصلی Bootstrap

یک وب سایت برای همه ی دستگاه ها

bootstrap با استفاده از مدیا کوئری های css  به سادگی واکنشگرایی و قابلیت استفاده در گوشی های موبایل و تبلت ها را به وب سایت شما اضافه میکند. با استفاده از سیستم grid  در bootstrap صرفه جویی زیادی در زمان ساخت پروژه صورت میگیرد. در این سیستم عرض صفحه نمایش به 12 بخش ستون تقسیم میگردد و دستگاهها بر اساس تعداد پیکسل های عرض صفحه نمایش به 4 گروه تقسیم میشوند.

  • (≥1200px) lg
  • (≥992px) md
  • (≥768px) sm
  • (<768px) xs

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

 
<div class="col-md-8"> </div>
<div class="col-sm-4"> </div>
​
  

ابزار آماده

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

  • Navbar : منوی اصلی که در بالای سایت قرار میگیرد و به صورت واکنشگرا در تبلت و موبایل به منوی همبرگری تبدیل میشود.
  • Dropdowns : منوهای قابل کلیک برای نمایش لیستی از آیتمها
  • Input groups : برای ساخت انواع فرم ها با ویژگی های مختلف
  • Glyphicons : بیش از 250 آیکون با فرمت فونت
  • Breadcrumbs: برای نمایش محل صفحه در حال نمایش در سایت
  • Jumbotron : ابزاری برای ساخت ابتدای صفحه ی فرود برای سایت
  • Badges : برای نمایش مواردی مانند تعداد پیامهای خوانده نشده

 

همچنین چندین پلاگین پرکاربرد جاوااسکریپت از جمله:

  • Modal : برای نمایش پیام روی صفحه نمایش
  • Scrollspy: تعیین محل پیمایش متن و استفاده از آن
  • Tab : استفاده از زبانه هایی برای نمایش متن
  • Carousel: ابزاری برای ساخت اسلاید شو

 

پیش پردازندههای  less و sass

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

bootstrap structure

 

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

حجم زیاد

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

به روزرسانی دشوار

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

کاهش خوانایی کد

یکی از مشکلات اساسی bootstrap این است که در نهایت تمام المانهای DOM  که با کلاسهای مختلف پر شده اند و باعث میشوند که محتوا و طراحی ظاهری دیگر از یکدیگر جدا نباشند. این امر باعث سختی در تغییر و توسعه ی آینده میشود که یکی از ویژگیهای اساسی یک طراحی خوب به شمار میرود.

شباهت وب سایتهای ساخته شده با بوت استرپ

بوت استرپ یک ابزار بسیار محبوب است که اکثر طراحان وب از آن استفاده میکنند که میتواند باعث شود نتیجه ی کار شما و دیگران شباهت زیادی بهم داشته و از جذابیت و خاص بودن طراحی شما کاسته شود.

شما چه نظر و یا سوالی درباره این نوشته دارید؟

پرســیدن سؤال جدید

سؤال های تخصصی خود را از ما بپرسید

دنبال کردن تلگرام کانال سافت اسکیل

https://telegram.me/softskill_ir

عملیات کاربران

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد

کلیک کنید و سوالات خود را از ما بپرسید
لطفا فرم سوال را پر کنید

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

لطفا چند لحظه منتظر بمانید ...