علیرضا تحریری
علیرضا تحریری
خواندن ۴ دقیقه·۱ ماه پیش

آموزش اضافه کردن Bootstrap در HTML (گام به گام)

آموزش اضافه کردن Bootstrap در HTML (گام به گام)
آموزش اضافه کردن Bootstrap در HTML (گام به گام)

بوتاسترپ (Bootstrap) یکی از محبوبترین فریمورکهای HTML، CSS و JavaScript است که به توسعهدهندگان کمک میکند طراحی وبسایتها را سریعتر و سادهتر انجام دهند. احتمالاً این سؤال برای شما پیش آمده که چگونه میتوان بوتاسترپ را به HTML اضافه کرد. در این مقاله، روشهای مختلفی را بررسی میکنیم که به شما امکان میدهد به سادگی بوتاسترپ را به پروژه HTML خود لینک کنید یا ادغام نمایید، بسته به اینکه چگونه قصد دارید از آن در وبسایت خود استفاده کنید.

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

آخرین نسخه بوتاسترپ، Bootstrap 5 است. مراحلی که برای اضافه کردن بوتاسترپ به HTML باید دنبال کنید، بسته به نسخهای که قصد استفاده از آن را دارید، کمی متفاوت است. برای شروع کار با بوتاسترپ، نیاز به دانش پایهای در HTML، CSS و JavaScript دارید. میتوانید یکی از سه روش زیر را برای افزودن بوتاسترپ به HTML انتخاب کنید.

روش اول: استفاده از شبکه توزیع محتوا (CDN) بوتاسترپ

استفاده از CDN بوتاسترپ یک روش عالی برای راهاندازی سریع و کارآمد محتوای وبسایت شما به کاربران بر اساس موقعیت جغرافیایی آنها است و همچنین باعث بهبود عملکرد سرور وبسایت شما میشود. برای لینک کردن بوتاسترپ به HTML با استفاده از این روش:

اضافه کردن Bootstrap 4 CDN در HTML

برای CSS:

لینک زیر را کپی کرده و داخل تگ <head> فایل HTML مورد نظر خود قرار دهید:

<link rel=&quotstylesheet&quot href=&quothttps://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css&quot rel=&quotnofollow&quot integrity=&quotsha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm&quot crossorigin=&quotanonymous&quot>

برای /p>

لینکهای زیر را در قسمت پایین تگ <body> فایل HTML مورد نظر خود قرار دهید:

<script src=&quothttps://code.jquery.com/jquery-3.2.1.slim.min.js&quot integrity=&quotsha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN&quot crossorigin=&quotanonymous&quot>

<script src=&quothttps://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js&quot integrity=&quotsha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q&quot crossorigin=&quotanonymous&quot>

<script src=&quothttps://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js&quot integrity=&quotsha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl&quot crossorigin=&quotanonymous&quot>

نکته:

عملکرد برخی از اجزای JavaScript مانند تبها و منوهای کشویی به کتابخانههای Popper.js و jQuery وابسته است. بنابراین، قبل از بارگذاری فایل JavaScript بوتاسترپ (bootstrap.min.js)، ابتدا باید CDNهای jQuery و Popper را بارگذاری کنید.

اضافه کردن Bootstrap 5 CDN در HTML

با توجه به اینکه جاوا اسکریپت به تنهایی قادر به ارائه همان عملکرد است، Bootstrap 5 از jQuery بینیاز شده است. برای اضافه کردن CDN بوتاسترپ 5 به HTML، مراحل زیر را دنبال کنید.

برای CSS:

لینک زیر را کپی کرده و داخل تگ <head> فایل HTML مورد نظر خود قرار دهید:

<link rel=”stylesheet” href=”https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css”rel=”nofollow” integrity=”sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I” crossorigin=”anonymous”>

برای JS:

لینکهای زیر را در قسمت پایین تگ <body> فایل HTML مورد نظر خود قرار دهید:

<script src=”https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js” integrity=”sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo” crossorigin=”anonymous”>

<script src=”https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js” integrity=”sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/” crossorigin=”anonymous”>

توجه داشته باشید که باید Popper.js را قبل از Bootstrap.js فراخوانی کنید.

روش دوم: دانلود فایلها و استفاده از آنها به صورت محلی (local) روی کامپیوتر

روش دیگری برای افزودن بوتاسترپ به HTML این است که فایلها را مستقیماً در پوشه پروژه HTML خود دانلود کنید. میتوانید فایلها را از طریق لینکهای زیر دانلود کنید:

پس از دانلود فایلهای مربوط به نسخه مورد نظر بوتاسترپ:

برای CSS:
یک لینک به فایل bootstrap.min.css در قسمت <head> فایل HTML خود اضافه کنید. با این کار، میتوانید از بخشهای CSS بوتاسترپ بر اساس نیاز خود استفاده کنید.

برای JS:

یک لینک به فایل bootstrap.min.js را قبل از پایان قسمت <body> فایل HTML خود اضافه کنید. این کار امکان استفاده از بخشهای جاوااسکریپت بوتاسترپ را فراهم میکند.

نکته:

فایلهای jquery.min.js و popper.min.js باید قبل از بارگذاری bootstrap.min.js اضافه شوند، حتی اگر فایلها را به صورت محلی دانلود کرده باشید.

روش سوم: استفاده از package manager برای افزودن Bootstrap به HTML

سامانه مدیریت بسته (package manager) مثل npm و yarn میتوانند یک روش کارآمد دیگر برای افزودن Bootstrap به HTML بهصورت ساده و سریع باشند. از آنجا که npm محبوبترین package manager است، مثال زیر نشان میدهد چگونه میتوان Bootstrap را نصب کرده و به هر پروژهای اضافه کرد.

برای انجام این کار، یکی از دستورات زیر را در پوشه پروژه خود وارد کنید. (این در صورتی کار میکند که npm در پروژه شما از قبل نصب شده باشد):

برای Bootstap 4:

npm install bootstrap

برای Bootstrap 5:

npm install bootstrap@next

اکنون کپی از نسخه موردنظر از Bootstrap در پوشهی node_modules پروژه شما دانلود میشود.

بعد از نصب نسخه موردنظر Bootstrap:

برای CSS:

فایل bootstrap.min.css را در بخش <head> فایل HTML خود وارد کنید تا بتوانید از اجزای CSS مربوط به Bootstrap استفاده کنید.

برای JS:

فایل bootstrap.min.js را قبل از انتهای بخش <body> فایل HTML خود قرار دهید تا بتوانید از اجزای جاوااسکریپت Bootstrap استفاده کنید.

توجه داشته باشید که فایلهای jquery.min.js و popper.min.js باید قبل از بارگذاری فایل bootstrap.min.js فراخوانی شود.

استفاده از Bootstrap در HTML:

پس از ادغام CSS نسخههای Bootstrap 4 یا 5 با HTML، میتوانید بهسادگی از کلاسهای Bootstrap استفاده کرده و فایلهای HTML خود را به شکلی که میخواهید استایلدهی کنید. برای آشنایی با کلاسهایی که میتوانید استفاده کنید و عملکرد هرکدام، به مستندات Bootstrap نسخه موردنظر خود مراجعه کنید. به همین صورت، بعد از ادغام جاوااسکریپت Bootstrap با HTML، میتوانید از اجزای JS مربوطه با استفاده از data attributes مستقیم در نشانهگذاری HTML یا با استفاده از jQuery بهره ببرید. همچنین برای درک نحوه عملکرد این اجزا و ویژگیهایی که ارائه میدهند، به مستندات Bootstrap مراجعه کنید.

منبع: وبسایت میموک

bootstrap
علیرضا تحریری
علیرضا تحریری
سلام علیرضا تحریری هستم برنامه نویس بک اند که با فریم های Laravel،‌ Livewire، Lumen، Tailwind CSS، Alpine JS و ... کد مینویسم.
شاید از این پست‌ها خوشتان بیاید