۱۰۴۲آیا شما یک توسعه دهنده front-end هستید که از نوشتن syntax های CSS بارها و بارها خسته شده اید؟ این نشانه شما برای شروع استفاده از بوت استرپ – Bootstrap است! این مقاله مزایای استفاده از چارچوب وب و روش جاسازی صحیح آن را در پروژه شما پوشش می دهد.
بوت استرپ – Bootstrap چیست ؟
شما احتمالاً با عملکرد چارچوب ها ( framework ) آشنا هستید. مجموعه syntax های مخصوص کار آنها به توسعه دهندگان این امکان را می دهد که وب سایت ها را خیلی سریعتر بسازند زیرا نیازی به نگرانی در مورد دستورات و توابع اساسی ندارند.
حتی در این صورت، به دلیل استفاده گسترده از کتابخانه ها که خواستار تغییر بودند، عدم ثبات وجود داشت. بوت استرپ – Bootstrap به این مورد پاسخ داد.
این چارچوب متن باز در ابتدا توسط Mark Otto و Jacob Thornton برای توسعه سریعتر و آسانتر front-end ساخته شد.
این شامل انواع الگو های طراحی مبتنی بر HTML و CSS برای عملکرد ها و اجزای مختلف مانند ناوبری ( navigation )، سیستم شبکه ( grid system )، چرخ فلک تصویر ( image carousels ) و دکمه ها ( buttons ) است.
در حالی که بوت استرپ – Bootstrap باعث می شود زمان برنامه نویس از مدیریت مداوم الگو ها صرفه جویی شود، اما هدف اصلی آن ایجاد سایت های ریسپانسیو است. این به رابط کاربری وب سایت اجازه می دهد تا در همه اندازه صفحه نمایش، چه در تلفن های دارای صفحه نمایش کوچک و چه روی دسکتاپ های صفحه نمایش بزرگ، بهینه کار کند.
بنابراین، توسعه دهندگان نیازی به ایجاد سایت های خاص برای انواع دستگاه و محدود کردن مخاطبان خود ندارند.
۳ فایل اصلی بوت استرپ – Bootstrap
از آنجا که Bootstrap از مجموعه ای از syntax ها تشکیل شده است که عملکرد های خاصی را انجام می دهند، فقط منطقی است که این فریمور انواع مختلف فایل را در خود داشته باشد. در اینجا سه فایل اصلی وجود دارد که رابط کاربری و عملکرد یک وب سایت را مدیریت می کنند.
Bootstrap.css
Bootstrap.css یک فریمور CSS است که چیدمان وب سایت را مرتب و مدیریت می کند. در حالی که HTML محتوای و ساختار یک صفحه وب را مدیریت می کند، CSS با طرح بندی سایت سروکار دارد. به همین دلیل، هر دو ساختار برای انجام عملی خاص نیاز به همزیستی دارند.
CSS به دلیل عملکردی که دارد به شما امکان می دهد در هر تعداد صفحه وب که دوست دارید ظاهری یکنواخت ایجاد کنید. فقط برای تغییر عرض حاشیه، از ساعتها ویرایش دستی خداحافظی کنید.
با استفاده از CSS ، تنها کاری که باید انجام دهید این است که صفحات وب را به پرونده CSS ارجاع دهید. هرگونه تغییر لازم را می توان تنها در آن پرونده انجام داد.
توابع CSS فقط به سبک متن محدود نمی شوند زیرا می توانند برای قالب بندی سایر جنبه های صفحه وب مانند جداول و طرح های تصویر مورد استفاده قرار گیرند.
Bootstrap.js
این فایل قسمت اصلی بوت استرپ – Bootstrap است. این پرونده شامل پرونده های JavaScript است که مسئولیت تعامل وب سایت را بر عهده دارند.
برای صرفه جویی در وقت از نوشتن syntax های جاوا اسکریپت به دفعات، توسعه دهندگان تمایل به استفاده از jQuery دارند. این یک کتابخانه محبوب جاوا اسکریپت متن باز و متفرقه است که به شما امکان می دهد عملکردهای مختلفی را به یک وب سایت اضافه کنید.
در اینجا چند نمونه از آنچه jQuery می تواند انجام دهد وجود دارد :
- درخواست های Ajax را مانند کسر داده ها ( subtracting data ) از مکان دیگر به صورت پویا انجام دهید.
- با استفاده از مجموعه افزونه های JavaScript ابزارک ( widgets ) ایجاد کنید.
- با استفاده از ویژگی های CSS انیمیشن های سفارشی ایجاد کنید.
- پویایی را به محتوای وب سایت اضافه کنید.
اگرچه یک بوت استرپ با ویژگی های CSS و عناصر HTML می تواند عملکرد خوبی داشته باشد، اما برای ایجاد یک طراحی رسپانسیو به jQuery نیاز دارد. در غیر این صورت، فقط می توانید از قسمت های استاتیک CSS استفاده کنید.
Glyphicons
نمادها یا ایکون ها بخشی جدایی ناپذیر از front-end یک وب سایت هستند. آنها اغلب با عملکردها و داده های خاصی در رابط کاربر مرتبط هستند. Bootstrap از Glyphicons برای برآوردن این نیاز استفاده می کند.
بوت استرپ – Bootstrap شامل مجموعه ای از Glyphicons Halflings است که برای استفاده رایگان قفل آن باز شده است. نسخه رایگان ظاهری استاندارد و معمولی دارد اما برای عملکردهای اساسی مناسب است.
اگر می خواهید آیکون های شیک تری پیدا کنید، Glyphicons مجموعه های مختلفی را به فروش می رساند که بدون شک در وب سایت های خاص ظاهر بهتری دارند.
همچنین می توانید آیکون های اختصاصی و خاص تم را به صورت رایگان در وب سایت های مختلف مانند Flaticon ، GlyphSearch و Icons8 بارگیری کنید.
برخی از آیکون ها می توانند تحت تأثیر CSS قرار بگیرند تا ظاهر خود را تغییر دهند در حالی که برخی دیگر دارای نمادهای پیش فرض هستند. از نماد هایی که متناسب با نیاز سایت شما هستند استفاده کنید.
نحوه استفاده از بوت استرپ – Bootstrap
برای داشتن تصویر بهتر از نحوه استفاده از بوت استرپ ، به مثال زیر نگاهی بیندازید.
<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 101 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.3/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html>
رمزگذاری نویسه برای سند HTML در این حالت، UTF-8 به یونیکد اشاره دارد.
meta charset="utf-8"
مجموعه کاراکتری را که برای نوشتن وب سایت استفاده می شود، بیان می کند.
meta http-equiv="X-UA-Compatible"
نسخه Internet Explorer را تعیین می کند که باید صفحه را ارائه دهد. با استفاده از حالت Edge ، تنظیم شده است که از بالاترین حالت موجود استفاده کند.
meta name="viewport"
اطمینان حاصل می کند که صفحه دارای نسبت ۱: ۱ با اندازه نمای نمایش است.
link href="css/bootstrap.min.css" rel="stylesheet"
این بخشی است که هسته Bootstrap را اضافه می کنیم.
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"
jQuery را از طریق Google CDN بارگیری می کند. بهتر است آن را از طریق CDN یا از طریق CDTP بارگیری کنید زیرا پرونده ها می توانند به مدت یک سال پنهان شوند.
src="js/bootstrap.min.js
JavaScript هسته Bootstrap را اضافه می کند. این syntax برای عملکرد صحیح باید همیشه زیر syntax jQuery باشد. روند افزودن را می توان از طریق Google به صورت دستی انجام داد.