راه‌اندازی و استفاده از بوت استرپ بسیار ساده است. در آموزش نصب بوت استرپ 5، نحوه دانلود و نصب آن را را توضیح می‌دهیم. همچنین با ساختار فایل‌های بوت استرپ آشنا می‌شویم و یک نمونه ساده از نحوه استفاده آن را بررسی می‌کنیم.
برای راه‌اندازی محیط بوت استرپ ۵.۳ دو روش اصلی وجود دارد:
-
استفاده از فایل‌های آماده (Compiled CSS and JS)
-
استفاده از فایل‌های منبع (Source Files)
در ادامه، هر کدام از این روش‌ها را به‌صورت جداگانه بررسی می‌کنیم:
فایل‌های آماده (Compiled CSS and JS)
شما می‌توانید نسخه کامپایل‌شده و آماده بوت استرپ ۵.۳.۰ را از سایت رسمی دانلود کنید.
پس از دانلود، پوشه فشرده‌شده را از حالت زیپ خارج کنید. ساختار پوشه به صورت زیر خواهد بود:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
bootstrap/ css/ bootstrap-grid.css bootstrap-grid.css.map bootstrap-grid.min.css bootstrap-grid.min.css.map bootstrap-grid.rtl.css bootstrap-grid.rtl.css.map bootstrap-grid.rtl.min.css bootstrap-grid.rtl.min.css.map bootstrap-reboot.css bootstrap-reboot.css.map bootstrap-reboot.min.css bootstrap-reboot.min.css.map bootstrap-reboot.rtl.css bootstrap-reboot.rtl.css.map bootstrap-reboot.rtl.min.css bootstrap-reboot.rtl.min.css.map bootstrap-utilities.css bootstrap-utilities.css.map bootstrap-utilities.min.css bootstrap-utilities.min.css.map bootstrap-utilities.rtl.css bootstrap-utilities.rtl.css.map bootstrap-utilities.rtl.min.css bootstrap-utilities.rtl.min.css.map bootstrap.css bootstrap.css.map bootstrap.min.css bootstrap.min.css.map bootstrap.rtl.css bootstrap.rtl.css.map bootstrap.rtl.min.css bootstrap.rtl.min.css.map js/ bootstrap.bundle.js bootstrap.bundle.js.map bootstrap.bundle.min.js bootstrap.bundle.min.js.map bootstrap.esm.js bootstrap.esm.js.map bootstrap.esm.min.js bootstrap.esm.min.js.map bootstrap.js bootstrap.js.map bootstrap.min.js bootstrap.min.js.map |
-
فایل‌های CSS فشرده و آماده: شامل فایل‌های استایل از پیش آماده و بهینه‌شده است.
-
افزونه‌های جاوا اسکریپت فشرده‌شده: شامل پلاگین‌های جاوا اسکریپتی است که کامپایل و فشرده شده‌اند.
توجه داشته باشید که در این نسخه، مستندات، کد منبع و وابستگی‌های اضافی مانند Popper گنجانده نشده‌اند.
فایل‌های منبع (Source Files)
در صورتی که قصد سفارشی‌سازی عمیق‌تر دارید، می‌توانید فایل‌های منبع بوت استرپ را از سایت رسمی یا مخزن گیت‌هاب دریافت کنید. پس از دانلود، نسخه کامل بوت استرپ ۵.۳.۰ در اختیار شما قرار می‌گیرد.
این نسخه شامل فایل‌های Sass، جاوا اسکریپت و مستندات است. برای استفاده از این فایل‌ها، باید ابزارهای توسعه مانند:
-
کامپایلر Sass برای تبدیل فایل‌های Sass به CSS
-
ابزار Autoprefixer برای افزودن پیشوندهای مرورگر به CSS
را در سیستم خود نصب و استفاده کنید.
استفاده از CDN از طریق jsDelivr در بوت استرپ
بوت استرپ یک نسخه آنلاین و آماده به‌کار از طریق شبکه توزیع محتوا (CDN) ارائه می‌دهد. با استفاده از CDN، نیازی به نصب فایل‌ها در سیستم خود ندارید. تنها کافی است لینک‌های CSS و JS را از وب‌سایت رسمی یا سرویس jsDelivr کپی کرده و در پروژه خود قرار دهید.
تنها شرط استفاده از CDN این است که سیستم شما به اینترنت متصل باشد. به‌عنوان مثال، برای بارگذاری CSS از طریق CDN می‌توانید از لینک زیر استفاده کنید:
|
1 2 |
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script> |
|
1 2 |
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js" integrity="sha384-fbbOQedDUMZZ5KreZpsbe1LCZPVmfTnH7ois6mU1QK+m14rQ1l2bGBq41eYeM/fS" crossorigin="anonymous"></script> |
نصب بوت استرپ با استفاده از پکیج منیجرها
علاوه‌بر دانلود مستقیم یا استفاده از CDN، می‌توانید بوت استرپ را از طریق پکیج منیجرهای مختلف در سیستم محلی خود نصب و مدیریت کنید. در ادامه، نحوه نصب بوت استرپ ۵.۳.۰ با استفاده از معروف‌ترین پکیج منیجرها آورده شده است:
| پکیج منیجر | توضیحات | دستور نصب |
|---|---|---|
| npm | نصب بوت استرپ در اپلیکیشن‌های Node.js با استفاده از npm | npm install bootstrap@5.3.0 |
| yarn | نصب بوت استرپ با استفاده از Yarn | yarn add bootstrap@5.3.0 |
| RubyGems | نصب در پروژه‌های Ruby با Bundler (توصیه‌شده) یا به‌صورت مستقیم | gem 'bootstrap', '~> 5.3.0' یا gem install bootstrap -v 5.3.0 |
| Composer | مدیریت فایل‌های Sass و JS بوت استرپ با Composer در پروژه‌های PHP | composer require twbs/bootstrap:5.3.0 |
| NuGet | مخصوص توسعه‌دهندگان .NET برای مدیریت CSS، Sass و JS | Install-Package bootstrap و Install-Package bootstrap.sass در PowerShell |
قالب HTML پایه با بوت استرپ 5.3
در ادامه یک قالب ساده HTML را مشاهده می‌کنید که فایل‌های مورد نیاز بوت استرپ (CSS و JS) از طریق CDN بارگذاری شده‌اند. این قالب، پایه‌ای برای ایجاد صفحات وب با استفاده از بوت استرپ است:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!doctype html> <html lang="fa"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>نمونه قالب بوت استرپ</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous"> </head> <body> <h1>سلام بوت استرپ!</h1> <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script> </body> </html> |
در کد بالا:
-
از فایل
bootstrap.min.cssبرای استایل‌دهی استفاده شده است. -
فایل‌های
popper.min.jsوbootstrap.bundle.min.jsنیز برای عملکرد صحیح اجزای تعاملی مانند مودال‌ها و تول‌تیپ‌ها اضافه شده‌اند.
راستی! برای دریافت مطالب جدید در کانال تلگرام یا پیج اینستاگرام سورس باران عضو شوید.
- انتشار: ۲۲ اردیبهشت ۱۴۰۴
دسته بندی موضوعات
- آموزش ارز دیجیتال
- آموزش برنامه نویسی
- آموزش متنی برنامه نویسی
- اطلاعیه و سایر مطالب
- پروژه برنامه نویسی
- دوره های تخصصی برنامه نویسی
- رپورتاژ
- فیلم های آموزشی
- ++C
- ADO.NET
- Adobe Flash
- Ajax
- AngularJS
- apache
- ARM
- Asp.Net
- ASP.NET MVC
- AVR
- Bootstrap
- CCNA
- CCNP
- CMD
- CSS
- Dreameaver
- EntityFramework
- HTML
- IOS
- jquery
- Linq
- Mysql
- Oracle
- PHP
- PHPMyAdmin
- Rational Rose
- silver light
- SQL Server
- Stimulsoft Reports
- Telerik
- UML
- VB.NET&VB6
- WPF
- Xml
- آموزش های پروژه محور
- اتوکد
- الگوریتم تقریبی
- امنیت
- اندروید
- اندروید استودیو
- بک ترک
- بیسیک فور اندروید
- پایتون
- جاوا
- جاوا اسکریپت
- جوملا
- دلفی
- دوره آموزش Go
- دوره های رایگان پیشنهادی
- زامارین
- سئو
- ساخت CMS
- سی شارپ
- شبکه و مجازی سازی
- طراحی الگوریتم
- طراحی بازی
- طراحی وب
- فتوشاپ
- فریم ورک codeigniter
- فلاتر
- کانستراکت
- کریستال ریپورت
- لاراول
- معماری کامپیوتر
- مهندسی اینترنت
- هوش مصنوعی
- یونیتی
- کتاب های آموزشی
- Android
- ASP.NET
- AVR
- LINQ
- php
- Workflow
- اچ تی ام ال
- بانک اطلاعاتی
- برنامه نویسی سوکت
- برنامه نویسی موبایل
- پاسکال
- پایان نامه
- پایتون
- جاوا
- جاوا اسکریپت
- جی کوئری
- داده کاوی
- دلفی
- رباتیک
- سئو
- سایر کتاب ها
- سخت افزار
- سی اس اس
- سی پلاس پلاس
- سی شارپ
- طراحی الگوریتم
- فتوشاپ
- مقاله
- مهندسی نرم افزار
- هک و امنیت
- هوش مصنوعی
- ویژوال بیسیک
- نرم افزار و ابزار برنامه نویسی
- وردپرس
