آموزش نصب بوت استرپ 4

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

اولین موضوع برای استفاده بوت استرپ این است که آن را از کجا تهیه کنیم و چگونه آن را نصب و به پروژه ی خود اضافه کنیم. در این آموزش به این سوالات پاسخ می دهیم.

وب سایت رسمی بوت استرپ به آدرس getbootstrap.com قابل دسترسی است. همه چیز درباره ی بوت استرپ شامل مستندات نصب، راهنمای استفاده از کدهای آن، دانلود بوت استرپ، نمونه ها و مثال های متنوع در این وب سایت موجود است.

چندین روش مختلف برای دانلود و نصب بوت استرپ وجود دارد:

1- روش اول - دانلود مستقیم

ساده ترین روشی که تقریبا در همه ی محیط ها می توان از آن استفاده کرد دانلود مستقیم آن از سایت getbootstrap.com است.

• روی گزینه ی دانلود کلیک کرده و منتظر بمانید تا فایل فشرده بوت استرپ در فرمت zip دانلودشود.
• فایل را از حالت فشرده خارج کنید. ساختار فایل ها درون پوشه ی بوت استرپ به صورت زیر می باشد.

• از میان فایل های بالا فایل bootstrap.css یا bootstrap.min.css را که در پوشه css هستند را در پوشه ی css پروژه ی خود کپی کنید.
• فایل bootstrap.js یا bootstrap.min.js را که در پوشه ی js هستند را در پوشه ی js یا پوشه جاوا اسکریپت پروژه ی خود کپی کنید.

تا اینجا کار دانلود به پایان رسیده. فایل صفحه ی html خود را مثلا index.html بازکرده و فایل های bootstrap.css یا bootstrap.min.css و jquery.js و bootstrap.js یا bootstrap.min.js را به فایل خود لینک کنید.

دقت کنید برخی کامپوننت های بوت استرپ نیازی به bootstrap.js ندارند اما در صورت اضافه کردن آن لازم است کتابخانه jquery را نیز دانلود کرده و حتما قبل از bootstrap.js درفایل خود لینک کنید. البته برخی کامپوننت ها هم به popper.js نیاز دارند. پس یک صفحه ی html که بخواهد از بوت استرپ استفاده کند باید ساختاری شبیه تصویر زیر داشته باشد.

2- روش دوم - استفاده از npm

درصورتی که از نرم افزارهای طراحی (IDE) مانند vscode استفاده می کنید می توانید از npm برای دانلود بوت استرپ استفاده کنید. کافی است دستور زیر را در ترمینال تایپ کرده و اجرا کنید.

$ npm install bootstrap

npm یک نرم افزار مدیریت بسته های نرم افزاری یا package manager است که به شما کمک می کند پکیج های مختلف را به پروژه ی خود اضافه کنید. در وب سایت npm هزاران پکیج نرم افزاری جاوا اسکریپتی مانند bootstrap، jquery، angular، react و ... قراردارند.

برای استفاده از npm لازم است node.js را روی سیستم خود نصب کنید. برای دانلود و نصب آن می توانید به این لینک مراجعه کنید .

پس از نصب آن اگر در command line یا ترمینال vscode دستور npm-v را بزنید نسخه نصب شده node.js را به شما نمایش می دهد و این یعنی همه چیز درست است. حالا می توانید از npm برای نصب بوت استرپ یا هر کتابخانه جاوا اسکریپتی دیگر استفاده کنید. فقط حتما در پوشه ی پروژه خود باشید تا فایل های دانلود شده در پوشه ی شما دانلود شوند.

3- روش سوم - استفاده از yarn

yarn نیز مانند npm یک نرم افزار مدیریت بسته های نرم افزاری است که اگر آن را روی سیستم خود نصب کنید می توانید با اجرای دستور زیر در ترمینال vscode یا خط فرمان command line بوت استرپ را در پروژه ی خود دانلود کنید.

$ yarn add bootstrap

برای نصب yarn به این سایت مراجعه کنید.

4- روش چهارم - NuGet

اگر یک توسعه دهنده دات نت هستید می توانید از NuGet برای نصب و مدیریت بوت استرپ استفاده کنید.

PM> Install-Package bootstrap

البته package manager های دیگری برای  نصب بوت استرپ وجود دارد که با مراجعه به سایت getbootstrap.com می توانید آن را مشاهده کنید.