معرفی بوت استراپ Bootstrap

در این بخش به نحوه اضافه کردن فایل های CSS و JS بوت استراپ Bootstrap به پروژه HTML خود، هم بطور مستقیم و هم به واسطه CDN آشنا می شوید و یک فایل ابتدایی را می سازید.

در انتها با نحوه اضافه کردن این فایلها به افزونه جوملایی خود با استفاده از قابلیت مدیریت دارایی ها web asset manager ی جوملا joomla آشنا می شوید.

Bootstrap یک جعبه ابزار قدرتمند و پر از ویژگی است. هر چیزی - از نمونه اولیه تا تولید - را در چند دقیقه بسازید.

شروع سریع

با گنجاندن CSS و جاوا اسکریپت آماده تولید بوت استرپ از طریق CDN بدون نیاز به مراحل ساخت، شروع کنید. آن را در عمل با این نسخه ی نمایشی Bootstrap CodePen ببینید.

یک فایل index.html جدید در ریشه پروژه خود ایجاد کنید. برچسب <meta name="viewport"> را نیز برای رفتار پاسخگوی مناسب در دستگاه های تلفن همراه اضافه کنید.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
  </body>
</html>

CSS و JS بوتاستراپ Bootstrap را اضافه کنید. تگ <link> را در <head> برای CSS ما و تگ <script> را برای بسته جاوا اسکریپت (شامل Popper برای موقعیت یابی کرکره ها، پاپاورها و نکات ابزار) قبل از بسته شدن </body> قرار دهید. درباره پیوندهای CDN ما بیشتر بیاموزید.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
  </body>
</html>

شما همچنین می توانید Popper و JS ما را جداگانه اضافه کنید. اگر قصد ندارید از فهرست‌های بازشو، پاپ‌اور یا راهنمای ابزار استفاده کنید، با در نظر نگرفتن Popper، مقداری کیلوبایت ذخیره کنید.

<script src="https://cdn.jsdelivr.net/npm/@popperjs/این آدرس ایمیل توسط spambots حفاظت می شود. برای دیدن شما نیاز به جاوا اسکریپت دارید.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.8/dist/js/bootstrap.min.js" integrity="sha384-G/EV+4j2dNv+tEPo3++6LCgdCROaejBqfUeNjuKAiuXbjrxilcCdDz6ZAVfHWe1Y" crossorigin="anonymous"></script>

صفحه سلام دنیا! را در مرورگر انتخابی خود باز کنید تا صفحه بوت استرپ خود را ببینید. اکنون می توانید با ایجاد طرح بندی خود، افزودن ده ها مؤلفه و استفاده از نمونه های رسمی ما، ساختن با بوت استرپ را آغاز کنید.

https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css

https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js

همچنین می‌توانید از CDN برای واکشی هر یک از ساخت‌های اضافی فهرست‌شده در صفحه محتوا استفاده کنید.

هنگام استفاده از پیوندهای CDN، حتماً از ویژگی integrity برای تأیید فایل ها و نسخه های صحیح استفاده کنید. این هش ها برای هر فایل و نسخه Bootstrap منحصر به فرد هستند، بنابراین وقتی به نسخه جدید به روز می کنید، مطمئن شوید که ویژگی integrity نیز به روز شده است.

ما همچنین یک ویژگی crossorigin="anonymous" را برای جلوگیری از خطاهای CORS اضافه می کنیم.

دانلود

Bootstrap را دانلود کنید تا CSS و جاوا اسکریپت کامپایل شده، کد منبع را دریافت کنید

CSS و JS کامپایل شده است

کد کامپایل شده آماده برای Bootstrap v5.3.8 را دانلود کنید تا به راحتی در پروژه خود قرار دهید، که شامل:

  • بسته های CSS کامپایل و کوچک شده (به مقایسه فایل های CSS مراجعه کنید)
  • افزونه های جاوا اسکریپت کامپایل و کوچک شده (به مقایسه فایل های JS مراجعه کنید)

این شامل اسناد، فایل‌های منبع، یا وابستگی‌های اختیاری جاوا اسکریپت مانند Popper نمی‌شود.

دانلود از گیت هاب

نحوه اضافه کردن فایل های CSS و JS بوت استراپ Bootstrap به جوملا Joomla

در جوملا برای معرفی فایل های CSS و JS از قابلیت Web Asset در جوملا استفاده می شود. از آنجا که های CSS و JS بوت استراپ Bootstrap از قبل در سورس جوملا وجود دارد شما تنها باید آنرا به فایل joomla.asset.json اضافه کنید و نیاز به ادرس دهی جداگانه نمی باشد.

این فایل های در مسیر media\vendor\bootstrap جوملا قرار دارند. اگر به media\vendor بروید فایل joomla.asset.json را باز کنید لیستی از فایل هایی که بطور پیشفرض در بسته نصبی جوملا قرار دارند تا براحتی در پروژه های تان استفاده کنید قرار دارد. تنها کافیست آنرا به عنوان dependencies در یک preset استفاده کنید:

{
        "name": "presetName",
        "type": "preset",
        "dependencies": [
          "bootstrap.css#style",
          "aseetName#style",
          "fontawesom#style",
          "bootstrap.es5#script",
          "aseetName#script"
        ]
      }

و سپس آن preset را در فایل php مورد نظر افزونه تان فراخوانی کنید:

// Enable assets
/*
$wa->useStyle('assetName')
   ->useScript('assetName');
*/
$wa->usePreset('prestName');

با اینکار اگر افزونه دیگری از بوت استراپ استفاده کرده باشد، از بارگذاری مجدد این فایل ها ممانعت می شود.

توضیحات
نوشته شده توسط: مسعود نیک صفت
دسته: آموزش بوت استراپ Bootstrap
بازدید: 21