معرفی و راه اندازی Bootstrap 5 در PNLdev.com

بوت استرپ چیست و نحوه ی راه اندازی؟

بوت استرپ (Bootstrap) یک کتابخانه متن باز است که توسط برنامه نویس ها برای طراحی و توسعه وب‌ سایت‌ و برنامه ‌های وب به‌ کار می‌رود.

بوت استرپ از مجموعه ای از قالب های از پیش طراحی شده و استایل‌های CSS برای تنظیم ظاهر وب ‌سایت استفاده می‌کند.

با استفاده از بوت استرپ میتوانیم وب سایت را در کمترین زمان بدون نیاز به یک خط CSS و بسیار حرفه ای بسازیم و برای صرفه جویی در زمان و سهولت کار بسیار کاربردی است.

در ادامه نحوه ی راه اندازی بوت استرپ را بررسی خواهیم کرد

راه اندازی Bootstrap:

برای راه اندازی Bootstrap، در قدم اول Visual Studio Code یا هر برنامه ی دیگری که استفاده میکنید را باز میکنیم.

سپس کد زیر را به تگ <head> خود اضافه میکنیم‌:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

 
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

همچنین کد زیر را به انتهای تگ <body> اضافه میکنیم:

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>

 
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>

تمام، با موفقیت Bootstrap راه اندازی شده است

در نمونه ی زیر مثال اجرایی را مشاهده میکنید:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap 5</title>

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    
</head>
<body>
    <h1>Bootstrap 5 Tutorial on PNLdev.com</h1>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>

</body>
</html>

​x
 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap 5</title>
​
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    
</head>
<body>
    <h1>Bootstrap 5 Tutorial on PNLdev.com</h1>
​
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
​
</body>
</html>

چگونه متوجه بشیم که به درستی Bootstrap را اجرا کرده ایم؟

بعد از اجرای کد در صفحه ی وبسایت کلیک راست میکنیم و روی گزینه ی Inspect کلیک میکنیم، سپس به تب Sources میرویم و درصورت مشاهده ی (cdn.jsdelivr.net) یعنی موفق شده اید.

نمونه کد های بیشتر

نمونه کد

نمونه کد bootstrap

<div class="container-fluid p-5 bg-success text-white text-center">
  <h1>Free BS5 Tutorial On PNLdev.com</h1>
  <p>You can customize everything</p> 
</div>

 
<div class="container-fluid p-5 bg-success text-white text-center">
  <h1>Free BS5 Tutorial On PNLdev.com</h1>
  <p>You can customize everything</p> 
</div>

آزمایشگاه

توسعه دهندگان

آریامهر ایران مدار