بوت استرپ چیست؟ مقاله امروز، درباره بوت استرپ (Bootstrap) است؛ یک ابزار کاربردی برای طراحان! با یک سوال شروع میکنیم. شما هم مثل همه کاربران شکل و شمایل وبسایت را معیار قضاوت قرار میدهید؟ مثلا تا حالا اتفاق افتاده است که بین انتخاب چند طراحی وبسایت مردد شوید و در آخر یکی از آنها با ظاهر جذاب و اصولیاش اعتمادتان را جلب کند؟ بله! ظاهر یا همان UI سایت، به همین اندازه مهم است و حتی میتواند فروش شما را متحول کند. بوت استرپ یکی از ابزارهای محبوب و کاربردی است که به برنامهنویسان و طراحان Front-End کمک میکند تا صفحاتی جذابتر طراحی کنند.
در این مقاله بهطور مفصل با مفهوم بوت استرپ چیست، آشنا میشوید. ابتدا درباره یک سری مفاهیم پایه ساختار سایت (HTML، CSS و …) صحبت میکنیم؛ سپس روی پاسخ به سوال بوت استرپ چیست و توضیح کاربردهای آن تمرکز میکنیم.
سروکله Bootstrap از کجا پیدا شد؟
سالها پیش طراحان وبسایت توییتر ابزاری ساختند که به کمک آن فرآیند طراحی و ریسپانسیو کردن سایت توییتر را سادهتر کنند. آنها اسم ابزارشان را بوتاسترپ گذاشتند و از آن تنها برای سایت خودشان استفاده میکردند؛ تا اینکه در سال ۲۰۱۱ تصمیم گرفتند آن را به صورت متن باز (Open Source) در اختیار همگان قرار دهند.
رفته رفته از بوت استرپ استقبال شد، تا آن جایی که در اوایل سال ۲۰۱۲ به محبوبترین پروژه گیتهاب (Github) تبدیل شده بود.
Bootstrap هدف خود (تسریع در طراحی و ریسپانسیو کردن وبسایت) را ثابت نگه داشت و طی سالهای متمادی کاملتر و گستردهتر شد. نسخههای متعددی از این قابلیت در اختیار کاربران قرار گرفته است که آخرین آنها نسخههای 5 است.
با استفاده از بوتاسترپ، طراح سایت دیگر نیازی به تعریف CSS های مختلف برای صفحات مختلف با طول و عرضهای مختلف ندارد و این یعنی صفحه جویی زمانی و افزایش دقت!
حالا یک تعریف خلاصه از بوت استرپ چیست، داشته باشیم:
بوت استرپ چیست؟
به زبان ساده، بوت استرپ مجموعه بزرگی از تکه کدهای تطبیقپذیر و قابل استفاده در طراحی است که به زبانهای HTML، CSS و جاوا اسکریپت نوشته شدهاند.
به نوعی میتوان Bootstrap را نوعی فریمورک CSS معرفی کرد، هرچند که در دل این ابزار از جاوا اسکریپت نیز استفاده شده است. خود وبسایت رسمی بوت استرپ هم آن را اینگونه تعریف کرده است:
«محبوبترین فریمورک HTML ، CSS و JS برای توسعه پروژههای ریسپانسیو روی وب»
خب؛ در ادامه میخواهیم وارد جزئیات و کاربردهای بوت استرپ شویم. اما قبل از آن، مرور کوتاهی داریم بر چند اصطلاح. اگر با این اصطلاحات آشنایی دارید، باکس زیر را رد کنید و یک راست بروید سراغ بخش دلایل استفاده از بوت استرپ چیست.
نگاهی به ساختار سایت
بهطور کلی ظاهر یک وبسایت از ترکیب کدهای HTML و CSS و همچنین JavaScript ساخته میشود. اگر وبسایت را به یک انسان تشبیه کنیم، استخوانبندی انسان معادل با HTML، شکل و شمایلش برابر با CSS و پویایی و تحرکش شبیه به JavaScript است.
بوت استرپ را میتوان یک فریمورک کوچک برای طراحی رابطهای کاربری به حساب آورد. البته، این قابلیت در حد و اندازه فریم ورکهایی مانند React در دنیای وب نیست. با این حال، قابلیتهای خوبی در دل این فریمورک گنجانده شده است تا توسعهدهندگان از آن در پروژههای خود استفاده کنند. باید به این موضوع نیز اشاره کنیم که محبوبیت بوت استرپ در حد فریم ورکهایی مانند Tailwind نیست و به دلیل وجود بعضی از مشکلات، خیلی از برنامهنویسان از Bootstrap در پروژههای خود استفاده نمیکنند.
این قابلیت به خوبی و به سرعت با فریم ورکهای ابرقدرت وب ترکیب میشود و از آن میتوان در کنار PHP، ریاکت، داتنت و … استفاده کنید. قابلیت طراحی ریسپانسیو با Bootstrap یکی از بهترین ویژگیهای آن است و همین مزیت آن را تبدیل به یکی از محبوبترین فریم ورکهای CSS در دنیای وب کرده است.
حالا بیایید تک به تک با این 3 جزء آشنا شویم.
نقش HTML در نمایش یک وب سایت
کدهای HTML ساختار یا بدنه اصلی یک سایت را تشکیل میدهند و نمایش یک صفحهی اینترنتی بدون کدهای HTML شدنی نیست.
نقش CSS در نمایش یک وب سایت
اگر HTML، را اسکلت در نظر بگیریم، CSS پوست این اسکلت است.
به نوعی با CSS میتوان مشخص کرد که هر کدام از اجزای سایت چه شکلی بوده و در کجا قرار گرفته باشد. در تصویر زیر وبسایت ایرانسرور را هنگامی که از HTML و CSS استفاده کرده ببینید.
نقش جاوا اسکریپت (JavaScript) در نمایش یک وب سایت
صفحاتی که تنها با HTML و CSS طراحی شده باشند، ثابت (Static) هستند. یعنی تمام المانها طبق کدهای HTML و CSS، شرایط تعریف شده مختص به خود را دارند و بعد از Load شدن تغییر نمیکنند. با جاوا اسکریپت میتوان اجزای وبسایت را پویا کرد. به عنوان مثال نمایش یک تایمر معکوس، نمایش یا حذف بعضی از المانها در اثر کلیک بر روی المانی دیگر (به عنوان مثال نمایش نتیجه استعلام آزاد بودن یک دامنه در صفحهی ثبت دامنه در ایرانسرور).
طراحی ریسپانسیو (Responsive) یعنی چه؟
طراحی ریسپانسیو یا واکنشگرا، یعنی وبسایت شما در هر دستگاهی (انواع موبایل، تبلت و لپتاپ) متناسب با اندازه و رزولوشن صفحه نمایش همان دستگاه ظاهر شود.
حالا برگردیم سر موضوع اصلی: دلایل به کار بردن بوت استرپ چیست؟!
دلایل استفاده از بوت استرپ چیست؟
مهمترین دلیل توسعهدهندگان برای به کار بردن فریم ورکها صرفهجویی زمانی و قابلیتهای اضافی است که یک فریمورک معتبر در اختیارشان قرار میدهد. بوت استرپ نیز در این مورد خوب عمل میکند و با استفاده از آن میتوانید یک وبسایت مدرن را از صفر طراحی کرده و روی پلتفرمهایی مانند وردپرس پیادهسازی کنید.
مزایای استفاده از بوت استرپ چیست؟
در این بخش با بهترین مزایای این فریمورک قدرتمند آشنا میشویم:
-
نصب آسان
نصب بوت استرپ شاید 3 دقیقه از شما زمان بگیرد و این کار بسیار آسان است. شما میتوانید از رابط وب برای افزودن این قابلیت به برنامهتان استفاده کنید یا حتی امکان این وجود دارد که به صورت لوکال آن را در برنامه اضافه کنید. در حالت کلی، بوت استرپ در مقایسه با قابلیتهایی مانند Tailwind و MUI دارای نصب آسانتری است.
-
امکان شخصی سازی
این قابلیت به شما امکان شخصی سازیهای متعدد را نیز میدهد. امکان استفاده از تمهای پیشفرض وجود دارد و در کنار آن میتوانید تنظیمات موردنیاز را هم در آینده روی برنامه اعمال کنید. درست است که قدرت Pure CSS در این مورد از همه فریم ورکها بیشتر است، اما همچنان امکانات شخصیسازی در بوت استرپ در اختیار توسعهدهندگان خواهد بود.
-
صرفه جویی در زمان
با استفاده از بوتاسترپ دیگر نیازی به صرف ساعتها زمان برای کدهای CSS خود نداریم و میتوانیم از زمان خود برای توسعه سایر بخشهای وبسایت استفاده کنیم.
-
طراحی ریسپانسیو
با بوتاسترپ امکان طراحی اختصاصی برای ۴ مدل صفحه میسر است:
- صفحات خیلی کوچک (مثل تلفنهای همراه)
- صفحات کوچک (مثل تبلتها)
- صفحات متوسط (مثل سیستمهای خانگی)
- صفحات بزرگ (صفحه نمایشهای عریض)
همچنین برای تصاویر وبسایت خود نیز میتوانیم حساب ویژهای روی بوت استرپ باز کنیم، زیرا بوتاسترپ قدرت تجزیه تحلیل اندازه صفحه بازدیدکننده وبسایت و نمایش تصویر متناسب با آن را دارد.
-
متن باز (Open Source) بودن
ممکن است فایل بیش از ۱۰۰ کیلوبایتی Bootstrap بر روی سرعت لود وبسایت تاثیر منفی بگذارد! هرچند که این سایز در مقایسه با حجم یک عکس یا ویدیو کم به نظر میرسد، اما برای یک فایل CSS کمی زیاد است. یکی از دلایل جذاب بودن بوتاسترپ این است که میتوان آن را طبق میل و نیاز خود شخصیسازی کرده و دقیقا متناسب با نیاز خود آن را بهینه کرد.
این ویژگی جذاب بوتاسترپ مدیون متن باز بودن آن است.
-
پشتیبانی از جاوا اسکریپت
شاید فکر کنید بوتاسترپ تنها در مورد CSS دست در دست ما خواهد گذاشت، اما باید بدانید که در مورد جاوا اسکریپت نیز حرفهایی برای گفتن دارد.
با ۱۲ افزونهی jQuery موجود در بوتاسترپ، با دستی بازتر میتوانیم پویایی مد نظرمان را پیادهسازی کنیم. یکی از مثالهای آن کنترل نوار بار (Navigation Bar) حین اسکرول وبسایت است.
-
مستندات جامع و کامل
بوتاسترپ برای هر امکانی که در آن تعبیه شده، مستندسازی کرده است. این به آن معنی است که آن قابلیت یا ابزار را توضیح داده و برایش مثال هم آورده است.
با مستندات بوتاسترپ، تازهکارترین طراحان نیز امکان استفاده از آن را خواهند داشت، زیرا تنها کافی است کدهای آن را کپی کرده و سپس ویرایش کنند.
-
وسیع بودن جامعه استفاده کنندگان
طراحان زیادی از سراسر دنیا از بوتاسترپ استفاده میکنند. این موضوع باعث ایجاد جامعه بزرگی از طراحان شده است که در گیتهاب، Stack OverFlow، وبلاگ و حتی صفحه توییتر بوتاسترپ با هم در تعامل بوده و در کنار به اشتراکگذاری پروژههای خود، مشکلات یکدیگر را نیز حل کنند.
-
سازگاری با تمام مرورگرهای جدید
بوت استرپ با تمام مرورگرهای معروف و به روز دنیا سازگار است، پس هیچ نگرانی در مورد عدم سازگاری آن با مرورگری خاص و عدم کارکرد صحیح آن نخواهیم داشت.
-
المان های آماده
علاوه بر سپردن واکنشگرایی (ریسپانسیو بودن) وبسایت به بوت استرپ، میتوان روی آن برای استفاده از المانهای آماده با طرحهای از پیش تعریف شده نیز حساب کرد.
به عنوان مثال در این لینک میتوانید دکمههای (Button) از پیش تعریف شده در بوت استرپ را مشاهده نمایید.
معایب استفاده از بوت استرپ چیست؟
آیا استفاده از بوتاسترپ، سراسر سود است؟
قطعا خیر! با توضیحات اخیر شاید به این نتیجه رسیده باشید که بوتاسترپ یک پروژه کاملا مفید است. اما اگر عادلانه نگاه کنیم، نقاط ضعفی در آن نیز خواهیم یافت.
در ادامه به جواب سوال “معایب استفاده از بوت استرپ چیست”، خواهید رسید:
-
سینتکس آن گیج کننده است
در ابتدای استفاده از بوتاسترپ، ممکن است کمی سردرگم شویم.
به عنوان مثال، بوتاسترپ از یک سیستم ۱۲ ستونی استفاده میکند. برای تعریف المانی که یک سوم از صفحه را اشغال کرده است، باید از کلاس col-md-4 استفاده کنیم. عدد ۴ ممکن است این برداشت را برای ما داشته باشد که المان ما یک چهارم از صفحه را اشغال خواهد کرد، در حالی که با توجه به نسبت ۴ به ۱۲، یک سوم از عرض صفحه اشغال خواهد شد. 🤷♂️
-
فایل های آن حجیم است
همانطور که قبلتر ذکر شد، بوتاسترپ شامل فایلهای حجیمی است که ممکن است باعث کند شدن وبسایتتان شود. اگر طراح تازهکاری باشید، ممکن است در تشخیص علت کندی ناشی از سنگینی بوتاسترپ و رفع آن دچار مشکل شوید.
هرچند ابزاری برای تشخیص کدهای غیر ضروری و غیرقابلاستفاده و حذف آنها وجود دارد؛ اما پیشنهاد میشود راه خود را انتخاب کرده و طبق نیاز خود از قطعه کدهای مرتبط استفاده کنید. البته هر چقدر تسلط بیشتری بر CSS و JavaScript داشته باشید، در تشخیص کدهای مورد نیاز خود مهارت بیشتری خواهید داشت.
-
طراح را از یادگیری اصلِ کد محروم میکند
همانگونه که استفاده از Node.js قبل از JavaScript ممکن است شما را از فهم اصل جاوا اسکریپت محروم کند، استفاده از بوتاسترپ نیز شما را از درک اصل CSS دور خواهد کرد. همیشه به خاطر داشته باشید که بوتاسترپ ابزاری برای تسریع کار شماست، نه توقف یادگیری شما! پس همواره در نظر داشته باشید که در کنار یادگیری و درک اصل CSS / JavaScript، از بوتاسترپ تنها برای تسریع کار خود استفاده کنید.
-
پشتیبانی محدود از مرورگرهای قدیمی
درست است که بوت استرپ از مرورگرهای مدرن و به روز به خوبی پشتیبانی میکند، اما همچنان در مورد مرورگرهای قدیمی مشکلاتی را دارد. البته، این موضوع در مورد بسیاری از قابلیتهای وب وجود دارد و بهترین کار این است که کاربر را تشویق به آپدیت کردن نرم افزارهای خود کنیم.
-
امکان سنگین شدن به دلیل اسکریپت های جاوا اسکریپت
اگر به دنبال جواب این سوال هستید که معایب بوت استرپ چیست، بهتر است در اینجا به یک عیب بزرگ این قابلیت اشاره کنیم. به صورت ذاتی، بوت استرپ از پلاگینهای جاوا اسکریپت استفاده میکند تا قابلیتهای تعاملی بیشتری را به صفحات وب شما اضافه کند. برای مثال، تصور کنید که با نصب بوت استرپ Modalها و Tooltipها با استفاده از ویژگیهای JS ساخته شدهاند.
این پلاگینهای جاوا اسکریپت بسیار کاربردی هستند اما امکان سنگین کردن صفحات وب شما را دارند و در بسیاری از مواقع ممکن است این سنگینی برایتان گران تمام شود. همچنین، وابسته کردن بخشهای جاوا اسکریپت به بوت استرپ، امکان شخصی سازیهای بیشتر و استفاده از سایر فریم ورکها را نیز دشوارتر خواهد کرد.
حالا که به جواب سوال معایب و مزایای بوت استرپ چیست رسیدیم، بیایید نحوه نصب آن را یاد بگیریم.
با هاست وردپرس ایرانسرور، سرعت فوقالعاده و امنیت پولادین را تجربه کنید.
چطور Bootstrap را به وردپرس اضافه کنیم؟
برای استفاده از بوت استرپ در وردپرس ابتدا باید آن را از وبسایت رسمی Bootstrap دانلود کنید. فایل دانلود شده، بهصورت فشرده است و باید آن را از حالت فشرده خارج کنید. سپس برای بارگذاری فایلها روی هاست، میتوانید از FTP Client استفاده کنید.
فقط دقت کنید که باید اول دنبال پوشه wp-content بگردید و بعد داخل همین پوشه، پوشه themes را باز کنید. اینجا جایی است که باید فایلهای Bootstrap را بارگذاری کنید. فقط قبل از انجام آن یک پوشه با نام bootstrap-theme ایجاد کنید و داخل همین پوشه عملیات بارگذاری را شروع کنید.
توجه: مطمئن شوید که فایلهای بوت استرپ شامل style.css ،index.php ،header.php و footer.php باشند.
👈 حالا فایل style.css را در پوشه Bootstrap باز کنید و اطلاعات موردنیاز را ویرایش کنید تا با سایت شما مطابقت داشته باشد:
|
/* Theme Name: MyBootstrapTheme Author: YourBusinessName Description: ThemeDescription Version: 1.0 Theme URI: yourwebsite.com */ |
بعد از اینکه کارتان تمام شد، تمام تغییرات را ذخیره کنید و به حساب کاربری وردپرستان بروید. الان باید بتوانید در بخش Themes (زیر بخش Appearance)، قالب را ببینید و آن را با بوت استرپ شخصیسازی کنید.
بیشتر بخوانید: وردپرس چیست؟ چه مزایا و معایبی دارد؟ هر آنچه که در شروع کار باید بدانید!
نحوه استفاده از bootstrap در توسعه وب
در این قسمت قصد داریم تا با چند مثال عملی شما را با قابلیتهای بوت استرپ آشنا کنیم. شاید در قدمهای ابتدایی در استفاده از این قابلیت کمی سردرگم شوید، اما با کسب تجربه در کوتاهترین زمان ممکن میتوانید آن را به پروژه خود اضافه کرده و از بخشهای مختلف آن استفاده کنید.
-
کاربرد بوت استرپ چیست: تولید باکس ها
در مثال زیر، 4 باکس توسط کدهای HTML تولید خواهد شد که به صورت رنگی استایلدهی شدهاند. با استفاده از ویژگی link ابتدا فایل مربوط به بوت استرپ به پروژه اضافه میشود. در نهایت، نیاز است تا با ویژگی script سایر قابلیتهای موردنیاز نیز به صفحه افزوده شود.
|
<!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8″> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <title>Colorful Boxes with Bootstrap</title> <!– Bootstrap CSS –> <link href=”https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css” rel=”stylesheet”> <!– Bootstrap JS and dependencies –> <script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js”></script> <script src=”https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js”></script> <script src=”https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js”></script> <style> .box { padding: 20px; color: white; text-align: center; margin: 10px 0; } .box-red { background-color: #e74c3c; } .box-green { background-color: #2ecc71; } .box-blue { background-color: #3498db; } .box-yellow { background-color: #f1c40f; } </style> </head> <body> <div class=”container”> <div class=”row”> <div class=”col-md-3″> <div class=”box box-red”>Red Box</div> </div> <div class=”col-md-3″> <div class=”box box-green”>Green Box</div> </div> <div class=”col-md-3″> <div class=”box box-blue”>Blue Box</div> </div> <div class=”col-md-3″> <div class=”box box-yellow”>Yellow Box</div> </div> </div> </div> </body> </html> |
در نهایت با اجرای این کد در مرورگر خود، خروجی زیر را در اختیار دارید. دقت داشته باشید که باکسها به صورت ریسپانسیو توسط بوت استرپ تولید شده است:
-
کاربرد بوت استرپ چیست: افکت ها
امکان افزودن افکتهای مختلف با استایلدهی به باکسها نیز فراهم است. در مثال زیر، میتوان پس از ایجاد باکسهای موردنیاز، از استایلها برای افکت Hover استفاده کرد:
|
<!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8″> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <title>Blue Themed Boxes with Hover Effect</title> <!– Bootstrap CSS –> <link href=”https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css” rel=”stylesheet”> <!– Bootstrap JS and dependencies –> <script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js”></script> <script src=”https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js”></script> <script src=”https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js”></script>
<style> .box { padding: 20px; color: white; text-align: center; margin: 20px 0; border-radius: 8px; transition: background-color 0.3s, box-shadow 0.3s; } .box-light-blue { background-color: #5bc0de; } .box-dark-blue { background-color: #0275d8; } .box-light-blue:hover { background-color: #31b0d5; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); } .box-dark-blue:hover { background-color: #025aa5; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); } </style> </head> <body> <div class=”container”> <div class=”row justify-content-center”> <div class=”col-md-5″> <div class=”box box-light-blue”>Light Blue Box</div> </div> </div> <div class=”row justify-content-center”> <div class=”col-md-5″> <div class=”box box-dark-blue”>Dark Blue Box</div> </div> </div> </div> </body> </html> |
با اجرای کد در مرورگر، خروجی زیر را مشاهده خواهید کرد. با بردن موس روی هر یک از باکسها میتوانید افکت Hover را مشاهده کنید:
بوت استرپ چیست: حرف آخر
در این مطلب سعی کردیم تا به سوال بوت استرپ چیست جواب دهیم و شما را با مفاهیم آن آشنا کنیم. بوت استرپ تنها گزینه طراحی ریسپانسیو سایت وردپرسی نیست؛ اما قطعا از بهترین گزینهها است! چون اجتماع بزرگی دارد و پشتیبانی خوبی از آن میشود. همچنین شما میتوانید در کنار انعطافپذیری بالای وردپرس، از امکانات خوب مانند grid system، استایلهای مختلف برای HTML، پشتیبانی از پلاگینهای جاوا اسکریپت و … استفاده کنید. اگر شما هم از این ترکیب برنده استفاده میکنید، حتما نظرتان را به ما بگویید. مثل همیشه پاسخگوی سوالات شما هستیم.
سوالات متداول
- در پروژههای جاوا اسکریپت و HTML روشهای افزودن بوت استرپ چیست؟
با استفاده از روشهای مختلف میتوان این قابلیت را به پروژه اضافه کرد که در دسترسترین آنها استفاده از ویژگی link و script در کد HTML است.
- مزیت مهم استفاده از بوت استرپ چیست؟
با استفاده از این فریمورک میتوان صفحات HTML را به صورت سریع و آسان تنظیم و مدیریت کرد. این فریمورک یک سیستم بینظیر برای Grid در اختیارتان قرار میدهد که کاملا ریسپانسیو است.
