bootstrap بوت استرپ … بهترین فریم ورک رابط کاربری رایگان طراحی وب

بوت استرپ یا Bootstrap مفهومیه که اگه شما کارهایی مربوط به وبسایت انجام میدین احتمالاً اسمش به گوشتون خورده. اما اگه هنوز نمی‌دونین که بوت استرپ چیه بهتره تو این پست همراه من باشین.

Bootstrap یه مجموعه ابزار قوی که از CSS , HTML و JavaScript است که برای ساختن صفحات وب و برنامه های وب مورد استفاده قرار میگیره. این یه پروژه منبع باز یا Open Source با میزبانی سایت GitHub است.

بوت استرپ چیست؟

Bootstrap یه چارچوب قدرتمند در فرانت اند Front End است که برای ایجاد سایت های مدرن و برنامه های وبسایت استفاده میشه. این ابزار منبع آزاد و رایگانه و تعداد زیادی قالب HTML و CSS برای عناصر UI یا رابط کاربری مثل دکمه ها و فرم ها داره! البته این ابزار از پسوندهای جاوا اسکریپت هم پشتیبانی میکنه. این ابزار برای طراحی و توسعه سایت های ریسپانسیو Responsive که با هر سایزی و برای نمایش تو دستگاه های مختلف بهینه شده گزینه عالی و عاقلانه و مقرون به صرفه‌ایه.

چرا به Bootstrap احتیاج داریم؟

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

کاربردهای بوت استرپ چیه؟

این ابزار برای ایجاد طراحی Layout هایی مثل CSS ریسپانسیو که برای مطابقت با دستگاه های مختلف طراحی شده، بسیار مناسبه. می‌تونین از این ابزار برای اطمینان از ثبات، از بین بردن مشکلات مرورگر و موارد دیگه استفاده کنین.

تم Bootstrap چیه؟

تم بوت استرپ یه بسته‌ایه که شامل HTML، CSS و کدهای JavaScript هست که برای طراحی ظاهری مورد استفاده قرار میگیره. همچنین تم های Bootstrap دارای چندین مولفه UI و چیدمان صفحه است که می‌تونه برای ایجاد سایت ها مورد استفاده قرار بگیره.

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

چرا باید بوت استرپ یاد بگیریم؟

پس از انتشار منبع باز بوت استرپ در سال ۲۰۱۱، این ابزار به شدت محبوب شد و البته این محبوبیت بدون دلیل نبود! طراحان و توسعه دهندگان وب، Bootstrap رو به بخاطر انعطاف پذیری و کاربرد راحتش دوست دارند!

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

این ابزار قابلیت توسعه گسترده‌ای رو با استفاده از جاوا اسکریپت ارائه میده و با پشتیبانی داخلی برای افزونه های jQuery و یه API برنامه ریزی شده برای جاوا اسکریپت همراه!

Bootstrap رو میشه با هر IDE یا ویرایشگر و هرن وع تکنولوژی و زبان سروری، از PHP و ASP.NET گرفته تا Ruby on Rails استفاده کرد.

با استفاده از بوت استرپ توسعه دهندگان وب می‌تونن بدون نگرانی در مورد طراحی، روی کارهای توسعه متمرکز بشن و یه سایت خوب به دست بیارن و به سرعت اجراش کنن!

شروع کار با اصول اولیه

بوت استرپ به دو شکل Precompiled و منبع کد در دسترسه. نسخه منیع کد یا Source Code این ابزار از پیش پردازنده Less CSS استفاده میکنه اما اگه شما بیشتر به Sass علاقه دارین، یه پورت رسمی Sass هم برای این ابزار در دسترسه. برای این که کار کردن با پیشوند CSS راحت‌تر باشه، Bootstrap از Autoprefixer استفاده میکنه.

نسخه کد منبع با استایل های مختلفی از کد منبع نوشته شده در Less CSS، همه جاوا اسکریپت ها و اسناد همراهه. این امر به طراحان و توسعه‌دهندگان بلند پرواز این امکان رو میده طبق خواست خودشون تمام سبک‌های ارائه شده رو تغییر بدن و نسخه بوت استرپ مورد علاقه خودشون رو بسازن.

اما اگه شما با Less CSS یا Sass آشنا نیستین و یا اصلاً علاقه‌ای به استفاده از اون‌‌‌ها و تغییر کد منبع ندارین، جای هیچ نگرانی نیست می‌تونین از همون CSS Precompiled استفاده کنین.

فایل های بوت استرپ

به طور کلی سه تا فایل می‌تونن داخل بوت استرپ جا بگیرن:

• Bootstrap.CSS فریم وروک CSS
• Bootstarp.js  فریم وورک جاوا اسکریپت و جیکوئری
• Glyphicons فونت‌ها

jQuery از کتابخانه جاوا اسکریپت استفاده میکنه و در واقع کاربردش شبیه فایل‌های فلشی هست که قبلاً  استفاده میشدن.

ساختار فایل

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

            <?php bootstrap/ ├── css/ │ ├── bootstrap.css │ ├── bootstrap.css.map │ ├── bootstrap.min.css │ ├── bootstrap-theme.css │ ├── bootstrap-theme.css.map │ └── bootstrap-theme.min.css ├── js/ │ ├── bootstrap.js │ └── bootstrap.min.js └── fonts/ ├── glyphicons-halflings-regular.eot ├── glyphicons-halflings-regular.svg ├── glyphicons-halflings-regular.ttf ├── glyphicons-halflings-regular.woff └── glyphicons-halflings-regular.woff2
                            

ساختار بوت استرپ خیلی ساده و توضیحیه که البته شامل فایل‌های Precompiled که استفاده سریع در هر پروژه وب رو امکان پذیر میکنه، هم هست! علاوه بر این، فایل‌های CSS و JS کامپایل و مینیمال شده، شامل فونت‌هایی از Glyphicons و تم‌های شروع اختیاری بوت استرپ نیز میشن!

این ساختار رو میشه به راحتی با ساختار پرونده Bootstrap ،دقیقاً همونطوری که از بایگانی زیپ خارج میشن، در ساختار فایل پروژه خودتون قرار بدین یا اگه دوباره مرتب کردن اون‌ها و قرار دادنشون تو هر مکانی که دوست دارین، بیشتر برای فایل‌های شما مناسبه همین کار رو انجام بدین. فقط مطمئن بشین که فایل Glyphicons fonts تو همون پرونده CSS است.

الگوی اولیه HTML

یه الگوی اولیه HTML بوت استرپ باید شبیه زیر باشه:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap Template</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

این که هر HTML رو با یه اظهارنامه از HTML 5 Doctype شروع کنین خیلی مهمه چون که مرورگرها متوجه هستن که باید منتظر چه سندی باشن.

<head>
  ...
  <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <![endif]-->
</head>

هد Head شامل سه تا برچسب مهم Meta ست که باید اول از همه مشخص بشن و هر تگ اضافی دیگه‌ای باید بعد از این سه تا قرار بگیره. اگه می‌خواین مرورگرهای قدیمی‌تری مثل IE8 رو ساپورت کنین، می‌تونین HTML 5 shim رو تو هد قرار بدین، این کار استفاده از عناصر HTML5 رو تو مرورگرهای قدیمی‌تر و Respond.js در ورژن قدیمی اینترنت اکسپلورر، ممکن میکنه.

البته خیلی هم ایراد نداره اگه فقط دلتون بخواد که مرورگرهای مدرن رو هدف قرار بدین! چون تعداد افرادی که از مرورگرهای قدیمی استفاده می کننف زیاد نیست.

فایل‌های جاوا اسکریپت به انتهای بادی Body این الگو اضافه شدن تا به صفحه وب اجازه بدن بارگیری قابل توجهی رو قبل از اجرای JavaScript انجام بده. jQuery برای پلاگین های بوت استرپ مورد نیازه و باید قبل از bootstrap.js بارگیری بشه. اگه از ویژگی‌های تعاملی بوت استرپ استفاده نمیکنید، میتونین این فایل‌ها رو از منبع حذف کنین.

این حداقل چیزیه که برای به دست آوردن و اجرای طرح اولیه بوت استرپ لازمه! اگه شما یه توسعه دهنده سایت هستین احتمالاً می‌خواین به مثال‌های پیشرفته‌تری در صفحه نمونه Bootstrap نگاهی بندازین. اگه یه طراح هستین یا فقط به دنبال الهام گرفتن هسین، Bootstrap Expo سایت هایی رو به شما نشون میده که با استفاده از بوت استرپ ساخته شدن. همون طوری که بعداً خواهیک دید هر قسمت از Bootstrap را می‌تونیم به راحتی داخل CSS تنظیم کنیم اما اگه این اون چیزی نیست که می‌خواین و دنبال موارد بهتر و متفاوت‌تری هستین، می‌تونین از منابعی مثل Bootswatch و WrapBoostrap استفاده کنین.

قالب‌های بوت استرپ و مولفه‌های UI

Bootstrap با الگوهای اولیه HTML و CSS همراهه که شامل مولفه‌های زیادی از UI میشن، این مولفه‌ها عبارتند از: تایپوگرافی، جدول‌ها، فرم‌ها، دکمه‌ها، گروه‌های ورودی، صفحه بندی، برچسب‌ها، هشدارها، ماژول‌ها، آکاردئون‌ها، زبانه و خیلی از موارد دیگه!

خیلی از این موارد از افزونه های جاوا اسکریپت و جیکوئری استفاده میکنن.

این قالب‌های بوت استرپ به صورت کلاس‌های CSS در دسترس هستن و می‌تونین برای دستیابی به جلوه‌های مختلف اون‌ها رو داخل HTML خودتون اعمال کنین.  این کار استفاده از بوت استرپ رو خیلی راحت میکنه. با استفاده از اسم‌های معنایی برای هر کلاس مثل: هشدار، موفقیت، اطلاعات و غیره این مولفه‌ها به راحتی قابل استفاده مجدد و قابل گسترش هستند!

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

مزایای Bootstrap

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

ریسپانسیو بودن: با استفاده از این ابزار می‌تونین خیلی راحت طرح‌های ریسپانسیو Responsive آماده کنین. این ویژگی بوت استرپ صفحات وب رو به صورت کاملاً مناسبی در دستگاه‌های مختلف با صفحه نمایش‌های بزرگ یا کوچیک بدون هیچ تغییر و باگی ظاهر میکنه.

تدوام در طراحی: همه اجزای بوت استرپ ، قالب‌های طراحی و سبک کار رو از طریق یه کتابخونه مرکزی به اشتراک میذارن به طوری که طرح‌ها و صفحه بندی‌های وب در طول توسعه کار دائماً پیشرفت میکنن.

سادگی ابزار: استفاده از این ابزار بسیار راحته و هرکسی با یه دانش اولیه از CSS و HTML میتونه با این ابزار کار کنه و اون ور گسترش بده.

سازگاری با انواع مرورگرها: بوت استریپ با مرورگرهای جدیدی که به وجود اومدن و همچنین مرورگرهای قدیمی سازگاری داره؛ مثل فایرفاکس، کروم، سافاری و اینترنت اکسپلور و اپرا.

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

سازگاری با انواع فریم ورک‌ها: این ابزار به خوبی با فریم ورک‌های دیگه مثل jQuery, angular, React و غیره هماهنگ و سازگاره.

تم آماده: اگه خودتون آماده سفارشی سازی ندارین می‌تونین از تم‌های آماده این ابزار استفاده کنین!

پشتیبانی وسیع: تعداد زیادی از کدنویسان در داخل و خارج از کشور بوت استرپ رو پشتیبانی میکنن و اگه تو هر مرحله از کار مشکلی پیش اومد می‌تونین روی کمک اون‌ها حساب کنین!

معایب Bootstrap

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

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

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

HTML شلوغ: نام کلاس‌های بوت استرپ باعث میشه کدهای HTML خیلی شلوغ و نامرتب به نظر برسند که این موضوع ممکنه خاطر کدنویسای عزیز سایت رو مکدر کنه!

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

پس بهتره که از این ابزار تا حدی به صورت شخصی سازی شده استفاده کرد! و اگه حس می‌کنین که ترجیح میدین خودتون کدهاتون رو بنویسین و اصلاً از این ابزار خوشتون نمیاد ازش استفاده نکنین 🙂

پشتیبانی و رفع اشکال

معمولاً هر سایتی که ساخته میشه (چه با استفاده از روش‌های طراحی سایت رایگان چه با استفاده از کد نویسی و روش‌های پرهزینه) باید با همه مرورگرها Compatible یا سازگار باشه، از این رو بوت استرپ ها دارای انجمن‌های منبع باز و دستوراتی هستند که شما دیگه لازم نیست نگران همچین مسئله‌ای باشین. علاوه بر این امروزه تعداد افرادی که با این فریم ورک آشنا هستن خیلی خیلی بیشتر از گذشته شده و اگه مشکل یا ایرادی دارین میتونین از گروه‌های تخصصی که برای پشتیبانی به وجود اومدن سوال کنین.

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