برای استفاده از بوت استرپ در PHP، شما باید چند مرحله را طی کنید:
• ابتدا باید فایل های بوت استرپ را از وبسایت رسمی آن دانلود کنید. شما میتوانید نسخه کامپایل شده یا نسخه منبع را دانلود کنید. نسخه کامپایل شده شامل فایل های CSS و جاوا اسکریپت آماده استفاده است. نسخه منبع شامل فایل های Sass و جاوا اسکریپت قابل تغییر است.
• سپس باید فایل های بوت استرپ را در پوشه پروژه PHP خود کپی کنید. معمولاً این پوشه در مسیر C:\xampp\htdocs قرار دارد. شما میتوانید یک پوشه با نام bootstrap در این مسیر ایجاد کنید و فایل های بوت استرپ را در آن قرار دهید.
• سپس باید فایل های بوت استرپ را در صفحات PHP خود لینک کنید. برای این کار، شما باید تگ های link و script را در قسمت head یا body صفحات خود قرار دهید. مثلاً، برای لینک کردن فایل bootstrap.min.css، شما میتوانید این تگ را در قسمت head قرار دهید:
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
• به همین ترتیب، برای لینک کردن فایل bootstrap.bundle.min.js، شما میتوانید این تگ را در قسمت body قبل از بستن آن قرار دهید:
<script src="bootstrap/js/bootstrap.bundle.min.js"></script>
• در نهایت، شما میتوانید با استفاده از کلاسها و المان های بوت استرپ، صفحات PHP خود را طراحی کنید. شما میتوانید از سامانه گرید، ناوبار، فرم، دکمه، جدول، کارت و ... استفاده کنید. برای مثال، برای ساخت یک ناوبار ساده با لینک های خانه، درباره و تماس، شما میتوانید این کد را در قسمت body صفحات خود قرار دهید:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Bootstrap</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</div>
</nav>