بوت استرپ یک چارچوب توسعه وب رایگان و منبع باز است. بوت استرپ طراحی شده است تا با ارائه مجموعه ای از سینتکس ها برای طراحی قالب ها، روند توسعه وب سایت های واکنش گرا و با اولویت موبایل را تسهیل کند.
به عبارت دیگر، بوت استرپ به توسعه دهندگان وب کمک می کند تا وب سایت ها را سریعتر بسازند، زیرا نیازی به نگرانی در مورد دستورات و قابلیت های ابتدایی ندارند. این شامل اسکریپت های مبتنی بر HTML ،CSS و JS برای توابع و اجزای مختلف مرتبط با طراحی وب است.
این مقاله مزایای استفاده از بوت استرپ را ارائه می‌دهد و انواع مختلف فایل‌هایی که استفاده می‌کند را توضیح می‌دهد. در پایان، خواهید فهمید که آیا بوت استرپ می تواند برای گردش کار طراحی وب شما مفید باشد یا خیر.
قابلیت های اولیه بوت استرپ
هدف اولیه بوت استرپ ایجاد وب‌سایت‌های واکنش‌گرا و مبتنی بر موبایل است. بوت استرپ اطمینان حاصل می کند که تمام عناصر رابط یک وب سایت در تمام اندازه های صفحه نمایش، بهینه کار می کنند.
بوت استرپ در دو نوع موجود است: از پیش کامپایل شده و بر اساس نسخه کد منبع. توسعه دهندگان باتجربه دومی را ترجیح می دهند زیرا به آنها اجازه می دهد سبک ها را متناسب با پروژه های خود سفارشی کنند.
به عنوان مثال، نسخه “کد منبع Bootstrap” به شما امکان می دهد به پورت Sass دسترسی داشته باشید. این بدان معناست که یک فایل CSS سفارشی ایجاد می کند که بوت استرپ را وارد می کند و به شما امکان می دهد اجزاء بوت استرپ را در صورت نیاز اصلاح و گسترش دهید.
همچنین می توانید بوت استرپ را با یک مدیریت بسته نصب کنید. ابزاری که فریمورک ها، کتابخانه ها و منبع ها را مدیریت و به روز می کند.
برخی از محبوب ترین ابزارهای مدیریت بسته (package manager) شامل npm، Composer و Bower هستند. npm وابستگی های سمت سرور را مدیریت می کند، در حالی که Composer روی فرانت اند تمرکز می کند. اگر روی پروژه های مبتنی بر PHP کار می کنید، به جای آن از Bower استفاده کنید.
با توجه به محبوبیت بوت استرپ، جوامع برنامه نویسان تحت وب، بیشتر و بیشتر حول بوت استرپ ایجاد می شوند. این مکان‌های عالی برای توسعه‌دهندگان وب و طراحان وب برای به اشتراک گذاشتن دانش و بحث در مورد آخرین نسخه‌های بوت استرپ هستند.
چرا باید از بوت استرپ استفاده کرد؟
برخی از اجزای رابط بوت استرپ شامل نوارهای ناوبری و فهرست، سیستم های شبکه بندی صفحه، کارسول های تصویر و دکمه ها است.
اگر هنوز متقاعد نشده اید که آیا بوت استرپ ارزش امتحان کردن را دارد یا خیر، در اینجا مزایای استفاده از آن در مقایسه با سایر چارچوب های توسعه وب وجود دارد.
راحتی در استفاده
اول و مهمتر از همه، یادگیری Bootstrap آسان است. به دلیل محبوبیت آن، آموزش‌ها و انجمن‌های آنلاین زیادی برای کمک به شما در شروع کار در دسترس هستند.
یکی از دلایل محبوبیت بوت استرپ در بین توسعه دهندگان وب و طراحان وب این است که ساختار فایل ساده ای دارد. فایل‌های آن برای دسترسی آسان کامپایل شده‌اند و برای اصلاح آنها فقط به دانش اولیه HTML،CSS و JS نیاز است.
همچنین می توانید از تم ها برای سیستم های مدیریت محتوای محبوب به عنوان ابزار یادگیری استفاده کنید. به عنوان مثال، اکثر تم های وردپرس با استفاده از بوت استرپ توسعه یافته اند که هر توسعه دهنده وب مبتدی می تواند به آن دسترسی داشته باشد.
برای افزایش زمان بارگذاری صفحه سایت، بوت استرپ فایل های CSS و جاوا اسکریپت را کوچک می کند. علاوه بر این، بوت استرپ یکپارچگی را در سینتکس بین وب سایت ها و توسعه دهندگان حفظ می کند که برای پروژه های مبتنی بر تیم ایده آل است.
سیستم شبکه بندی واکنش گرا
Bootstrap با یک سیستم شبکه بندی (grid system) از پیش تعریف شده ارائه می شود که شما را از ایجاد یک سیستم از ابتدا نجات می دهد. سیستم گرید از ردیف ها و ستون ها تشکیل شده است که به شما امکان می دهد به جای وارد کردن مدیا کوئری (media query) در فایل CSS، یک شبکه در داخل شبکه موجود ایجاد کنید.
علاوه بر این، سیستم شبکه بوت استرپ فرآیند ورود داده ها را ساده تر می کند. این شامل تعداد زیادی مدیا کوئری است که به شما امکان می دهد نقاط شکست سفارشی هر ستون را بر اساس نیازهای پروژه وب خود تعریف کنید.
تنظیمات پیش فرض معمولا بیش از اندازه کافی هستند. پس از ایجاد یک شبکه، فقط باید محتوا را به کانتینرها اضافه کنید.
سیستم شبکه بوت استرپ دارای دو کلاس کانتینری است که هم پروژه‌های دسکتاپ و هم پروژه‌های مبتنی بر موبایل را بهتر در خود جای می‌دهد: یک ظرف ثابت (container.) و یک ظرف سیال (container-fluid.).
اولین کلاس کانتینر یک کانتینر با عرض ثابت را ارائه می دهد، در حالی که دومی یک ظرف با عرض کامل را ارائه می دهد که می تواند پروژه شما را برای تمام اندازه های صفحه تنظیم کند.
سازگاری مرورگر
دسترسی به وب سایت شما از طریق مرورگرهای مختلف به کاهش نرخ پرش (bounce rate) و رتبه بالاتر در نتایج جستجو کمک می کند. بوت استرپ این نیاز را با سازگاری با آخرین نسخه مرورگرهای محبوب برآورده می کند.
با وجود پشتیبانی نکردن از مرورگرهای کمتر شناخته شده مانند WebKit و Gecko، وب سایت های دارای بوت استرپ نیز باید به درستی در آنها کار کنند. با این حال، ممکن است محدودیت‌هایی در مورد مودال‌ها و فهرست کشویی در صفحه‌های کوچک‌تر وجود داشته باشد.
سیستم تصویر بوت استرپ
بوت استرپ نمایش و واکنش گرایی تصویر را با قوانین HTML و CSS از پیش تعریف شده خود کنترل می کند.
با افزودن کلاس img-responsive. اندازه تصاویر به طور خودکار بر اساس اندازه صفحه نمایش کاربران تغییر می کند. این به عملکرد وب سایت شما کمک می کند، زیرا کاهش اندازه تصویر بخشی از فرآیند بهینه سازی سایت است.
Bootstrap همچنین کلاس های اضافی مانند img-circle. و img-rounded. را ارائه می دهد که به تغییر شکل تصاویر کمک می کند.
مستندات و راهنمای بوت استرپ
بوت استرپ برای توسعه دهندگانی که می خواهند برای اولین بار استفاده از این فریم ورک را بیاموزند، مستندات و راهنما ارائه می دهد. در اینجا چندین موضوع وجود دارد که می توانید در صفحه مستندات بوت استرپ بیابید:
- محتوا: کد منبع بوت استرپ از پیش کامپایل شده را پوشش می دهد.
- مرورگرها و دستگاه‌ها: همه مرورگرهای وب و موبایل پشتیبانی شده و اجزای مبتنی بر تلفن همراه را فهرست می‌کند.
- جاوا اسکریپت: پلاگین های مختلف JS ساخته شده بر روی jQuery را تجزیه می کند.
- Theming: متغیرهای Sass داخلی را برای سفارشی‌سازی آسان‌تر توضیح می‌دهد.
- Tools: به شما می آموزد که چگونه از اسکریپت های npm Bootstrap برای اقدامات مختلف استفاده کنید.
- دسترسی‌پذیری: ویژگی‌ها و محدودیت‌های Bootstrap در مورد نشانه‌گذاری ساختاری، اجزاء، کنتراست رنگ، دید محتوا و افکت های انتقال را پوشش می‌دهد.
مستندات همچنین شامل نمونه‌های کد برای تمرین های اولیه است. حتی می‌توانید نمونه‌های کد پروژه‌های خود را کپی و اصلاح کنید و در زمان شما از نیاز به کدنویسی از ابتدا صرفه‌جویی کنید.
چرا نباید از بوت استرپ استفاده کنید
بوت استرپ با وجود مزایایی که دارد، محدودیت های خاصی دارد که برای انواع خاصی از پروژه ها مناسب نیست.
از آنجایی که بوت استرپ دارای سبک بصری ثابتی است، نیاز به سفارشی سازی سنگین و نادیده گرفتن استایل دارد تا یک پروژه را از پروژه دیگر متفاوت کند. در غیر این صورت، تمامی وب سایت هایی که با این فریم ورک ساخته می شوند، دارای ناوبری، ساختار و اجزای طراحی یکسانی خواهند بود که باعث می شود غیرحرفه ای به نظر برسند.
داشتن تعداد زیادی قابلیت به معنای شامل فایل های با اندازه بزرگ است. اگر مراقب نباشید، استفاده از بوت استرپ در پروژه شما می تواند زمان بارگذاری وب سایت را کاهش دهد و سرور شما را سنگین کند. برای جلوگیری از این مشکل، مطمئن شوید که فقط کلاس های مورد نیاز خود را اضافه کرده و از نسخه کوچک شده فایل ها استفاده کنید.
در حالی که بوت استرپ با آخرین نسخه مرورگرهای محبوب سازگار است، این مورد در مورد نسخه های قدیمی تر صدق نمی کند. این بدان معنی است که ظاهر وب سایت شما کاملاً به تلاش کاربران در به روز رسانی مرورگرهای خود بستگی دارد.
نکته منفی دیگر این است که سبک های بوت استرپ نسبتا حجیم هستند. این می تواند منجر به خروجی غیر ضروری HTML، هدر رفتن منابع واحد پردازش مرکزی شود.
اگرچه استفاده از آن آسان است، اما Bootstrap در ابتدا منحنی یادگیری کندی دارد. یادگیری کلاس‌ها و مؤلفه‌های موجود زمان می‌برد، که ممکن است برای کسی که دانش فنی ندارد پیچیده باشد.
3 فایل اصلی بوت استرپ
Bootstrap شامل مجموعه ای از سینتکس است که در سه فایل اصلی کامپایل شده است: Bootstrap.css، Bootstrap.js و Glyphicons . به خاطر داشته باشید که Bootstrap برای اجرای پلاگین ها و اجزای JS به یک کتابخانه JS به نام jQuery نیاز دارد.
در اینجا سه فایل فریمورک اصلی وجود دارد که رابط کاربری و عملکرد یک وب سایت را مدیریت می کنند.
Bootstrap.css
Bootstrap.css یک چارچوب CSS است که چیدمان یک وب سایت را مرتب و مدیریت می کند. در حالی که HTML با محتوا و ساختار یک صفحه وب کار می‌کند،CSS با طرح‌بندی سروکار دارد. به همین دلیل، هر دو ساختار برای انجام یک عمل خاص نیاز به همزیستی با هم دارند.
Bootstrap.css و توابع آن به توسعه‌دهندگان کمک می‌کند تا ظاهری یکنواخت در صفحاتی که نیاز دارند ایجاد کنند. در نتیجه، توسعه‌دهنده وب مجبور نیست ساعت‌ها را صرف ویرایش دستی کند.
به جای کدنویسی از ابتدا، فقط باید یک صفحه وب را به یک فایل CSS ارجاع دهید. هر گونه تغییر لازم را می توان به تنهایی در آن فایل انجام داد.
توابع CSS فقط به سبک های متن محدود نمی شوند زیرا می توانید از آنها برای قالب بندی سایر جنبه های یک وب سایت مانند جداول و طرح بندی تصویر استفاده کنید.
از آنجایی که CSS دارای اعلان ها و انتخابگرهای زیادی است، به خاطر سپردن همه آنها ممکن است کمی طول بکشد. برای سهولت فرآیند یادگیری خود، به برگه های تقلب CSS موجود مراجعه کنید.
Bootstrap.js
این فایل بخش اصلی بوت استرپ است. Bootstrap.js شامل فایل های جاوا اسکریپت است که مسئولیت تعامل وب سایت را بر عهده دارند.
برای صرفه جویی در زمان از نوشتن چندباره سینتکس جاوا اسکریپت، توسعه دهندگان تمایل دارند از jQuery استفاده کنند: یک کتابخانه جاوا اسکریپت متن باز و بین پلتفرمی (cross-platform) محبوب.
در اینجا چند نمونه از کارهایی که jQuery می تواند انجام دهد آورده شده است:
- درخواست های AJAX مانند کم کردن داده ها از مکان دیگری را به صورت پویا انجام دهید.
- ویجت ها را با استفاده از مجموعه ای از افزونه های جاوا اسکریپت ایجاد کنید.
- با استفاده از ویژگی های CSS انیمیشن های سفارشی ایجاد کنید.
- به محتوای وب سایت، پویایی اضافه کنید.
در حالی که بوت استرپ با ویژگی های CSS و عناصر HTML می تواند به خوبی کار کند، برای ایجاد یک طراحی واکنش گرا به جی کوئری نیاز دارد. در غیر این صورت، فقط می‌توانید از بخش‌های بی‌تحرک و ثابت استایل شیت استفاده کنید.
بنابراین، هر مهندس نرم‌افزار باید در مورد jQuery بیاموزد زیرا بخش اساسی توسعه وب است.
گلیفی آیکون ها (Glyphicons)
آیکون ها بخشی جدایی ناپذیر از فرانت اند یک وب سایت هستند، زیرا اغلب اقدامات و داده ها را در رابط کاربری نمایش می دهند.
بوت استرپ از آیکون هایی به نام Glyphicons استفاده می کند که شامل مجموعه Glyphicons Halflings است. اگرچه طراحی ها ساده است، اما آنها قابلیت های اساسی خود را انجام می دهند و استفاده از آنها رایگان است.
اگر می‌خواهید آیکون‌های شیک‌تری پیدا کنید، Glyphicons مجموعه‌های ممتاز مختلفی را برای سایت‌های خاص به فروش می‌رساند.
همچنین می‌توانید آیکون‌های فردی و موضوعی خاص را به صورت رایگان در وب‌سایت‌های مختلف مانند Flaticon ،GlyphSearch و Icons8 دانلود کنید.
برای تغییر اندازه Glyphicons، باید سبک پیش فرض را با ویژگی اندازه قلم CSS لغو کنید.
نحوه استفاده از بوت استرپ در توسعه وب
برای دریافت تصویر بهتر از نحوه استفاده از بوت استرپ، به مثال زیر نگاه کنید.
<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>
Save translation
برخی از خطوط را با جزئیات بیشتر توضیح خواهیم داد.
meta charset="utf-8"
مجموعه کاراکتری که برای نوشتن وب سایت استفاده می شود را بیان می کند. در این مورد، UTF-8 به یونیکد اشاره دارد.
meta http-equiv="X-UA-Compatible"
نسخه اینترنت اکسپلورر را که باید صفحه را رندر کند تعیین می کند. با استفاده از حالت Edge، تنظیم شده است که از بالاترین حالت موجود استفاده کند.
meta name="viewport"
اطمینان حاصل می کند که صفحه دارای نسبت 1:1 با اندازه نمایش است.
link href="css/bootstrap.min.css" rel="stylesheet"
اینجاست که CSS هسته بوت استرپ را اضافه می کنیم.
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"
jQuery را از طریق Google CDN بارگیری می کند. بهتر است آن را از CDN از طریق HTTP بارگیری کنید زیرا فایل ها می توانند به مدت یک سال کش (cache) شوند.
src="js/bootstrap.min.js
جاوا اسکریپت هسته بوت استرپ را اضافه می کند. این سینتکس باید زیر سینتکس jQuery باشد تا به درستی کار کند. فرآیند اضافه کردن را می توان از طریق URL گوگل یا دانلود دستی انجام داد.
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
بوت استرپ یک بسته جاوا اسکریپت را برای ساده کردن فرآیند ارائه می دهد. با این حال، bootstrap.bundle.js و bootstrap.bundle.min.js شامل Popper به جای jQuery هستند. پوپر یک موتور تعیین موقعیت برای محاسبه موقعیت عناصر است.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#">Features</a>
<a class="nav-item nav-link" href="#">Pricing</a>
<a class="nav-item nav-link disabled" href="#">Disabled</a>
</div>
</div>
</nav>
نمونه ای از نحوه استفاده از پیوندهای ناوبری نوار ناوبری Bootstrap برای ایجاد منوهای سایت ها.
نتیجه گیری
بوت استرپ یک فریم ورک فرانت اند رایگان است که امروزه در بین توسعه دهندگان، به ویژه کسانی که در دنیای طراحی وب کار می کنند، محبوب است. استفاده از آن آسان است و زمان زیادی را برای توسعه دهندگان از نوشتن کدهای HTML، CSS و جاوا اسکریپت به صورت دستی صرفه جویی می کند.
چارچوب بوت استرپ به اندازه کافی منعطف و قوی است تا تقریباً هر نیازی را برای توسعه فرانت اند وب سایت برآورده کند. بهترین ویژگی آن، قالب های طراحی است که باعث می شود صفحات وب در تمام اندازه های صفحه نمایش بهینه کار کنند.
علیرغم داشتن یک منحنی یادگیری کند، منابع زیادی برای کمک به شما برای شروع ارائه می شود. برخی از بهترین پلتفرم های یادگیری عبارتند از صفحه مستندات بوت استرپ و انجمن های IT محور مانند Stack Overflow.
امیدواریم این مقاله به این سوال که بوت استرپ چیست پاسخ داده باشد و به شما در درک مزایای استفاده از آن در توسعه وب و طراحی وب کمک کرده باشد.