استفاده از Bootstrap 5 بدون jQuery

استفاده از Bootstrap 5 بدون jQuery

 

حدود یک ماه پیش از نوشتن این مقاله خبر انتشار اولین نسخه بوت استرپ 5 آلفا به طور رسمی منتشر شده است که برخی از مهمترین تغییرات حذف jQuery به عنوان یک وابستگی ، حذف پشتیبانی از مرورگر اینترنت اکسپلورر 10 و 11 و به طور کلی بهبود علامت گذاری ها و استایل ها برای محبوب ترین چارچوب CSS در جهان بود.

اگرچه در زمان نوشتن این مقاله Bootstrap 5 هنوز فقط یک نسخه آلفا است و استفاده از Bootstrap 5 برای استفاده در نسخه اصلی سایت ها ممکن است به دلیل اشکالات پیش بینی نشده مخاطره آمیز باشد ، اما ایده خوبی است که شروع به کار با نسخه جدید این چارچوب کنید و مهمتر اینکه اگر به استفاده از jQuery عادت کرده اید این تغییر ممکن است باعث شود شما به طور پیش فرض در Bootstrap 5 از Vanilla JS (جاوا اسکریپت خالص و بدون کتابخانه) استفاده کنید.

 

در این آموزش Bootstrap 5 ما به شما نشان خواهیم داد که چگونه یک محیط کار با Sass و Gulp ایجاد کنید ، یک صفحه وبلاگ ساده ایجاد کنید و نحوه استفاده از چارچوب Bootstrap 5 را با استفاده از Vanilla JS ببینید. در زیر فهرست مطالب این مقاله را می بینید:

• ابزارهای تولید کد: تنظیم Bootstrap 5  با Sass و Gulp 4  و BrowserSync
• ایجاد یک صفحه وبلاگ ساده با علامت گذاری های جدید
• تغییر برخی از رنگ ها ، اندازه ها و فونت ها در فایل های متغیرهای جدید Sass
• کار با Vanilla JS به جای jQuery
• کاوش در API جدید Utility

 

 

تنظیم Bootstrap 5  با Sass و Gulp 4  و BrowserSync

 

اگرچه می توانید با استفاده از استایل ها و اسکریپت های CDN سریعاً از Bootstrap 5 استفاده کنید ، اما استفاده از Sass برای استفاده از همه ویژگی های نسخه جدید Bootstrap توصیه می شود.

پیش نیازها:

• Node - اطمینان حاصل کنید که Node.js را نصب کرده اید و از طریق ترمینال قابل دسترسی است
• Gulp – پس از اطمینان از نصب موفق Node ، مطمئن شوید که Gulp CLI را نیز نصب کرده اید.

بعد از نصب Node بر روی دستگاه ، برای نصب Gulp CLI به صورت گلوبال ، دستور زیر را در ترمینال خود اجرا کنید:

npm install --global gulp-cli

 

 

نصب وابستگی های از طریق NPM

 

ما می خواهیم Gulp و BrowserSync و Gulp Sass و Bootstrap 5 Alpha را به عنوان یک وابستگی از طریق NPM وارد کنیم. اما ابتدا باید با اجرای دستور زیر یک فایل محلی package.json برای این پروژه ایجاد کنیم:

npm init

پس از این دستور از شما خواسته می شود به پروژه نام ، توضیح و غیره بدهید. بجز چند مورد ، بیشتر جزئیات اختیاری است و اگر تمایلی به وارد کردن آنها ندارید می توانید فقط با زدن کلید enter از آن گذر کنید. پس از اتمام مراحل ، یک فایل جدید package.json ایجاد می شود.

 

پس از آن برای نصب وابستگی های dev (وابستگی های زمان توسعه) ، باید دستور زیر را اجرا کنید:

npm install browser-sync gulp gulp-sass --save-dev

برای نصب آخرین نسخه Bootstrap 5 حتماً دستور زیر را اجرا کنید:

npm install bootstrap --save

 

اطلاعات بیشتر در مورد نحوه نصب Bootstrap 5 را می توانید در صفحه npm آن ببینید.

 

 

ایجاد gulpfile برای کامپایل sass و ساخت سرور محلی با BrowserSync

 

اول از همه شما باید فایل محلی gulpfile.js را در پوشه اصلی پروژه خود که در آن package.json نیز قرار دارد ، ایجاد کنید. سپس کد زیر را به این فایل اضافه کنید:

var gulp        = require('gulp');
var browserSync = require('browser-sync').create();
var sass        = require('gulp-sass');

// Compile sass into CSS & auto-inject into browsers
gulp.task('sass', function() {
    return gulp.src("app/scss/*.scss")
        .pipe(sass())
        .pipe(gulp.dest("app/css"))
        .pipe(browserSync.stream());
});

// Static Server + watching scss/html files
gulp.task('serve', gulp.series('sass', function() {

    browserSync.init({
        server: "./app/"
    });

    gulp.watch("app/scss/*.scss", gulp.series('sass'));
    gulp.watch("app/*.html").on('change', browserSync.reload);
}));

gulp.task('default', gulp.series('serve'));

قسمت اول فایل مربوط به افزودن وابستگی هایی است که در مرحله قبل از طریق NPM نصب کرده اید. بعدی اولین دستور Gulp در اینجا با نام serve است که اساساً یک سرور محلی جدید مبتنی بر فایل های درون پوشه app راه اندازی می کند و هرگونه تغییر در فایل های با پسوند scss و html این پوشه را دنبال می کند (به عنوان مثال وقتی فایلی را پس از تغییر کد های داخل آن ، ذخیره می کنید ، تغییرات را در فایل های تولید شده توسط Gulp ، اعمال می کند) .

دستور دوم sass نامیده می شود که تمام فایل های با پسوند scss (فایل های Sass) را درون پوشه app/scss/ می گیرد و آنها را به یک فایل CSS کامپایل می کند. این فایل های CSS را در الگوهای HTML خود قرار خواهید داد.

سرانجام ، آخرین خط gulp.task('default', ['serve']) شما را قادر می سازد تا سرور محلی را شروع کرده و تغییرات فایل های SASS را مشاهده کنید و فقط با نوشتن gulp در خط فرمان آنها را کامپایل کنید. این همان چیزی است که “default” به آن اشاره دارد.

 

 

افزودن فایل های Sass بوت استرپ

 

در این مرحله باید یک پوشه با نام scss در داخل پوشه اصلی app ایجاد کنید و یک فایل جدید با یک نام اختیاری مثلاً clicksite.scss ایجاد کنید. پس از آن باید خط زیر را در داخل آن اضافه کنید:

@import '../../node_modules/bootstrap/scss/bootstrap.scss';

آنچه این کد انجام می دهد این است که فایل های Sass بوت استرپ را از پوشه node_modules اضافه می کند. این به شما کمک می کند تا بتوانید مقادیر متغیر های پیش فرض رنگ ، اندازه ، فاصله و غیره را بازنویسی کنید.

 

یک فایل index.html جدید در داخل پوشه app ایجاد کنید و علامت گذاری ها (تگ ها) و دکمه های زیر را به آن اضافه کنید:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Mohamadreza Clicksite</title>
        <link rel="stylesheet" href="css/clicksite.css">
    </head>
    <body>
        <button class="btn btn-primary">Primary</button>
        <button class="btn btn-secondary">Secondary</button>
        <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js" integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/" crossorigin="anonymous"></script>
    </body>
</html>

 

برای یک آزمایش کلی ، کافیست gulp را در ترمینال خود در پوشه ای که gulpfile.js در آن قرار دارد اجرا کنید (یعنی پوشه ریشه). اندکی بعد ، یک برگه جدید باید در مرورگر شما با آدرس اینترنتی http://localhost:3000 ظاهر می شود که دو دکمه با استایل زیبای پیش فرض بوت استرپ را به شما نشان می دهد.

اگر این اتفاق نیفتاد ، اطمینان حاصل کنید که همه وابستگی ها را از طریق NPM بارگیری کرده اید و ساختار پوشه ها و پرونده ها مانند آن چیزی است که در این مقاله گفته شده.

حال سعی کنید متن یکی از دکمه ها را تغییر دهید. اگر فایل را ذخیره کنید و به مرورگر خود برگردید ، می بینید که تغییرات بدون نیاز به تازه سازی (refresh) مرورگر انجام شده است. عالی! با این کار زمان زیادی صرفه جویی می کنید و دیگر نیازی به تازه سازی دستی مرورگر ندارید.

 

ایجاد یک صفحه وبلاگ ساده با علامت گذاری های جدید

 

تا اینجای کار عالی بود! شما با موفقیت یک محیط کار بسیار جالب ایجاد کرده اید تا فایلهای Sass را از بوت استرپ 5 کامپایل کنید و همچنین یک سرور محلی ایجاد کردید که بلافاصله هنگام نوشتن کد تغییرات شما را به مرورگر اعمال کند.

کار بسیار زیادی برای طراحی یک صفحه که فقط دو دکمه دارد ، بود ولی نگران نباشید ، در این بخش صفحه ای با نوار ناوبری ، لیستی از کارت های وبلاگ (پست ها) و ... با جدیدترین مؤلفه های Bootstrap 5 ایجاد خواهیم کرد!

 

 

افزودن نوار ناوبری به صفحه

 

از آنجا که Bootstrap 5 دارای مستندات بسیار خوبی شامل تمام مؤلفه های آن است ، ما به سادگی نوار ناوبری را از صفحه رسمی مؤلفه نوار ناوبری دریافت کردیم. پس از حذف مقداری از عنصر این کد ، به کد زیر رسیدیم. آن را درست بعد از باز شدن برچسب body  اضافه کنید:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid">
        <a class="navbar-brand" href="#">Clicksite</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto mb-2 mb-lg-0">
            <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#">خانه</a>
            </li>
            <li class="nav-item">
            <a class="nav-link" href="#">وبلاگ</a>
            </li>
        </ul>
        <form class="d-flex">
            <input class="form-control mr-2" type="search" placeholder="Search" aria-label="Search">
            <button class="btn btn-outline-success" type="submit">جستجو</button>
        </form>
        </div>
    </div>
</nav>

 

 

محتوای اصلی ، کارت های وبلاگ و نوار کناری

 

اکنون که نوار ناوبری را در طراحی کردیم ، باید قسمت اصلی محتوای صفحه را بسازیم. اولین عنصر یک تگ خارجی است و در داخل آن دو ردیف اصلی ایجاد می کنیم: بخش کارت های وبلاگ (پست های وبلاگ) و نوار کناری. در زیر کدی می بینید که درست بعد از عنصر <nav> قرار می دهیم:

<div class="container my-5">
    <div class="row d-flex justify-content-center">
        <!-- Main row for blog posts -->
        <div class="col-12 col-lg-6">
        <div class="card">
            <img src="https://themesberg.s3.us-east-2.amazonaws.com/public/posts/bootstrap-version-5-alpha-launched.jpg" class="card-img-top" alt="...">
            <div class="card-body">
                <h5 class="card-title">Bootstrap 5 no longer requires jQuery and also drops support for IE 10 and 11</h5>
                <p class="card-text">The first alpha version of Bootstrap 5 has finally arrived with many exciting changes and updates including dropping jQuery as a dependency and support for IE 10 and 11. Read more about the changes in this article.</p>
                <a href="#" class="btn btn-primary">ادامه مطلب</a>
            </div>
            </div>
        </div>
        <!-- Sidebar (related articles, newsletter signup etc) -->
        <div class="col-12 col-lg-4">
	  <!-- Sidebar content goes here -->
        </div>
    </div>
</div>

با این تغییرات ظاهر سایت بهتر شد اما به نظر می رسد که با وجود یک کارت وبلاگ هنوز فضای خالی زیادی هست، پس باید چند مورد دیگر هم اضافه کنیم. فراموش نکنید که برای ایجاد فاصله مناسب بین کارتها ، کلاس سودمند mb-4 را به اولین کارت وبلاگ اضافه کنید.

اما چه اتفاقی می افتد اگر بیش از 10 کارت وبلاگ در یک صفحه داشته باشید؟ در یک صفحه نمی توان موارد زیادی را نشان داد زیرا زمان بارگیری صفحه بسیار زیاد می شود. به همین دلیل  به یک بخش صفحه بندی در پایین آخرین کارت وبلاگ نیاز خواهیم داشت. برای صفحه بندی ، کد زیر را اضافه کنید:

<nav aria-label="Page navigation example">
  <ul class="pagination">
    <li class="page-item"><a class="page-link" href="#">قبلی</a></li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item"><a class="page-link" href="#">بعدی</a></li>
  </ul>
</nav>

اکنون که به سمت چپ صفحه پرداختیم ، خالی بودن نوار کناری خیلی بیشتر به چشم می آید. بیایید بخشی را برای ثبت نام در خبرنامه اضافه کنیم زیرا امروزه داشتن یک خبرنامه همراه با یک وبلاگ بسیار معمول است. کد زیر را در نوار کناری اضافه کنید:

<div class="card" >
    <div class="card-body">
        <h5>مشترک خبرنامه هفتگی ما شوید</h5>
        <form action="#">
            <div class="input-group my-3">
                <span class="input-group-text" id="email-at">@</span>
                <input type="email" class="form-control" placeholder="Email" aria-label="Email" aria-describedby="email-at" required>
            </div>
            <button type="submit" class="btn btn-block btn-primary">مشترک شدن</button>
        </form>
    </div>
</div>

البته این فقط یک گزینه برای اضافه کردن به نوار کناری است ، اما شما همچنین می توانید مقالات مرتبط ، رسانه های اجتماعی یا سایر بخش های پست ویژه را نیز اضافه کنید.

 

 

سفارشی سازی پروژه با متغیرهای Sass در Bootstrap

 

تا اینجا ظاهر سایت بسیار خوب به نظر می رسد ، اما این فقط استایل ها و رنگ های پیش فرض Bootstrap است. حالا آن را کمی منحصر به فرد تر می کنیم! این جایی است که Sass با ساده سازی عملیات سفارشی سازی از طریق متغیرهای Bootstrap 5 قدرت واقعی خود را نشان می دهد. می خواهیم رنگ اصلی را به رنگ مورد علاقه خود تغییر دهیم.

اول از همه شما باید یک فایل جدید برای متغیر ها با نام variables.scss_ در داخل پوشه scss ایجاد کنید و این فایل را در فایل clicksite.scss (این فایل را در مرحله قبل به پروژه اضافه کردیم) به این صورت وارد کنید:

@import 'variables';

@import '../../node_modules/bootstrap/scss/bootstrap.scss';

داخل فایل variables.scss فقط متغیر زیر را اضافه کنید که رنگ متغیر پیش فرض primary$ را که به طور پیش فرض آبی است را تغییر می دهد:

$primary: #e06b54;

این فقط یک متغیر است! اما چگونه می توانید از نام سایر متغیرها که فونت ، اندازه ، فاصله  ها و غیره را تغییر می دهند ، مطلع شوید؟ ساده است! فقط داخل پوشه Bootstrap  (که در پوشه node_modules  قرار دارد) ، فایل variables.scss_ را جستجو کنید.

این آدرس کامل این فایل است:

node_modules/bootstrap/scss/_variables.scss

می توانید هر متغیری را از آنجا انتخاب کنید و آن را در فایل محلی variables.scss_ تغییر دهید و این باعث تغییر استایل در پروژه شما می شود.

 

 

کار با Vanilla JS به جای jQuery

 

اگرچه طبق اسناد رسمی همچنان قادر خواهید بود از jQuery با Bootstrap 5 استفاده کنید ، اما ما در واقع استفاده از Vanilla JS را توصیه می کنیم زیرا با اضافه نکردن وابستگی دیگری و سریعتر و کم حجم تر ساختن پروژه ، در زمان بارگیری صرفه جویی خواهید کرد. document.querySelector به جای انتخابگر محبوب $ در jQuery بسیار خوب عمل خواهد کرد.

ما برخی از موارد استفاده از Vanilla JS در  Bootstrap 5 را برای عناصری مانند راهنما های روی صفحه (tooltip) و کادر های محاوره ای مقید (modal) مرور خواهیم کرد.

 

 

استفاده از Tooltip در Bootstrap 5 با کمک Vanilla JS

 

برای کسانی که می خواهند به انجمن بپیوندند ، کارت دیگری با پیوندهای رسانه های اجتماعی به نوار کناری اضافه می کنیم. از کد زیر استفاده می کنیم و tooltip را نیز هنگام قرارگیری نشانگر موس روی دکمه ها نمایش می دهیم.

<div class="card mb-4">
    <div class="card-body">
        <h5>ما را در شبکه های اجتماعی دنبال کنید</h5>
        <a href="https://www.facebook.com/themesberg/" class="btn btn-secondary mr-2" data-toggle="tooltip" data-placement="top" title="ما را در فیسبوک لایک کنید">
            فیسبوک
        </a>
        <a href="https://twitter.com/themesberg" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="ما را در توییتر دنبال کنید">
            توییتر
        </a>
    </div>
</div>

اما tooltip ها کار نمی کنند! چرا؟ زیرا نیاز به راه اندازی اولیه از طریق Javascript دارند. در اینجا نحوه انجام این کار برای هر tooltip  در صفحه را از طریق Vanilla JS می بینید:

var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
  return new bootstrap.Tooltip(tooltipTriggerEl)
})

ما یک فایل clicksite.js در پوشه js ایجاد کردیم و کد را در آنجا اضافه کردیم. حتماً این فایل را در index.html خود نیز قرار دهید. کد بالا تمام عناصر موجود در صفحه را که دارای ویژگی ”data-toggle = ”tooltip هستند می گیرد و سپس تک تک آنها را مقدار دهی اولیه می کند. همچنین لیست کاملی از عناصر موجود در متغیر tooltipList را خواهید داشت.

 

 

نمایش دیالوگ های Bootstrap با Vanilla JS

 

به منظور نمایش نحوه استفاده از دیالوگ (modal) ها با Bootstrap 5 ، امکان ثبت نام در سایت را ایجاد می کنیم. اولین کار این است که بعد از عنصر جستجو در نوار ناوبری ، یک دکمه اضافه کنید:

<button class="btn btn-primary" id="registerAccountButton">عضویت</button>

قبل از شروع تگ های script در انتهای تگ body  ، کد زیر را اضافه کنید:

<div class="modal" tabindex="-1" id="registerAccountModal">
    <div class="modal-dialog">
    <form action="#" class="modal-content">
        <div class="modal-header">
        <h5 class="modal-title">عضویت</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
        </div>
        <div class="modal-body">
        <div class="mb-3">
            <label for="email" class="form-label">آدرس ایمیل</label>
            <input type="email" class="form-control" id="email" placeholder="name@example.com" required>
        </div>
        <div class="mb-3">
            <label for="password" class="form-label">رمز عبور</label>
            <input type="password" class="form-control" id="password" required>
        </div>
        <div class="mb-3">
            <label for="confirmPassword" class="form-label">تکرار رمز عبور</label>
            <input type="password" class="form-control" id="confirmPassword" required>
        </div>
        </div>
        <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">بستن</button>
        <button type="submit" class="btn btn-primary">ذخیره تغییرات</button>
        </div>
    </form>
    </div>
</div>

 

پس از افزودن کد فوق ، هنگام فشار دادن دکمه عضویت، باید دیالوگ را نمایش دهید. کد زیر را به فایل clicksite.js اضافه کنید:

var registerAccountButton = document.getElementById('registerAccountButton');
var registerAccountModal = new bootstrap.Modal(document.getElementById('registerAccountModal'), {
    keyboard: false
})
registerAccountButton.addEventListener('click', function () {
    registerAccountModal.toggle();
})

کد بالا دکمه و modal  (دیالوگ) را انتخاب می کند ، یک شی modal  ایجاد می کند و پس از فشار دادن دکمه ، حالت modal  تغییر می یابد.

مطمئناً همه این کارها را می توانید از طریق ویژگی های data در فایل html هم انجام دهید ، اما به روش فوق شما modal را به عنوان یک شی در کد Javascript خود خواهید داشت و دستکاری آن درون برنامه بسیار راحت تر است.

 

 

بررسی API جدید Utility

 

API جدید Utility  به عنوان پاسخی به استفاده فزاینده از روش Utility First در توسعه سمت کاربر (front-end) بخصوص بدلیل محبوبیت زیاد Tailwind CSS است.

Utility-first ایده کلاسهای CSS را برعکس می کند و از کلاسها برای تعریف مؤلفه های مختلف استفاده نمی کند ، بلکه  جعبه ابزاری از کلاسهای مختلف کمکی (Utility ها) به ما ارائه می دهد که می توانیم آنها را با هم ترکیب کنیم و یک مؤلفه  HTML را با ترکیب این کلاسها استایل بدهیم. هر کلاس یک ظاهر خاص ایجاد می کند ، مثلاً یک کلاس متن را به رنگ آبی در می آورد، کلاس دیگر رنگ زمینه را سبز می کند و ... . با ترکیب این کلاس ها یک ظاهر خاص ایجاد می شود.

این API جدید Utility در واقع راهی برای ایجاد آسان کلاسهای جدید سفارشی برای تغییر ویژگی هایی مانند کدری ، عرض ، رنگ ها ، اندازه ها ، فاصله ها یا هر چیز دیگری است. آنچه واقعاً جالب است این است که پارامترهایی را می گیرد و به طور خودکار کلاس های CSS را برای شما ایجاد می کند. کافی است یک فایل به نام utilities.scss_ در داخل پوشه scss ایجاد کنید ، آن را در فایل clicksite.scss وارد کنید و کد زیر را اضافه کنید:

$utilities: (
  "opacity": (
    property: opacity,
    values: (
      0: 0,
      25: .25,
      50: .5,
      100: 1,
    )
  )
 );

خروجی به صورت زیر است:

.opacity-0 {
    opacity: 0;
}
.opacity-25 {
    opacity: .25;
}
.opacity-75 {
    opacity: .75;
}
.opacity-100 {
    opacity: 1;
}

 

بیایید یک قدم به عقب برگردیم و ببینیم چه اتفاقی افتاده است. اول از همه ، قسمت "opacity" نامی را که قسمت اول کلاس خواهد داشت تنظیم می کند (کلاسی با نام "name-value" ایجاد می شود). سپس باید ویژگی واقعی را برای کلاس تنظیم کنید (در این حالت opacity است ، اما می تواند box-shadow ، width، height و غیره باشد) و سپس مقادیر واقعی.

در این حالت چهار مقدار از 0 تا 100 برای opacity اضافه کردیم. توجه داشته باشید که قسمت اول (یعنی کلید که سمت چپ علامت : قرار دارد) همان چیزی است که در نام کلاس استفاده خواهد شد و مقدار (که سمت راست علامت : قرار دارد) همان مقدار واقعی استفاده شده برای opacity خواهد بود.

در اینجا یک کار جالب دیگر که می توانید انجام دهید این است که ریسپانسیو را اضافه کنید: مقدار true را برای responsive به کد اضافه کنید و این باعث می شود ، کلاس ریسپانسیو (sm ، md ، lg) را برای همه کلاسهای utility ایجاد کند:

$utilities: (
  "opacity": (
    property: opacity,
    responsive: true,
    values: (
      0: 0,
      25: .25,
      50: .5,
      100: 1,
    )
  )
 );

 خروجی به صورت زیر است:

.opacity-0 {
    opacity: 0;
}
.opacity-25 {
    opacity: .25;
}
.opacity-75 {
    opacity: .75;
}
.opacity-100 {
    opacity: 1;
}
@media (min-width: 576px) {
    .opacity-sm-0 {
        opacity: 0;
    }
    .opacity-sm-25 {
        opacity: .25;
    }
    .opacity-sm-75 {
        opacity: .75;
    }
    .opacity-sm-100 {
        opacity: 1;
    }
}
@media (min-width: 768px) {
    .opacity-md-0 {
        opacity: 0;
    }
    .opacity-md-25 {
        opacity: .25;
    }
    .opacity-md-75 {
        opacity: .75;
    }
    .opacity-md-100 {
        opacity: 1;
    }
}
@media (min-width: 992px) {
    .opacity-lg-0 {
        opacity: 0;
    }
    .opacity-lg-25 {
        opacity: .25;
    }
    .opacity-lg-75 {
        opacity: .75;
    }
    .opacity-lg-100 {
        opacity: 1;
    }
}
@media (min-width: 1200px) {
    .opacity-xl-0 {
        opacity: 0;
    }
    .opacity-xl-25 {
        opacity: .25;
    }
    .opacity-xl-75 {
        opacity: .75;
    }
    .opacity-xl-100 {
        opacity: 1;
    }
}

 

اینها فقط چند نمونه از کاربردهای Utility API است که می تواند در هنگام کد نویسی رابط های کاربری کار شما را راحت تر کند. توضیحات رسمی Utility API را می توانید در اینجا ببینید.

 

در این مقاله شما یاد گرفتید که چگونه با استفاده از Gulp 4 ، Sass و BrowserSync یک محیط برای طراحی سایت با Bootstrap 5 راه اندازی کنید ، یک صفحه وبلاگ ایجاد کردید ، موارد استفاده از vanilla JS (جاوا اسکریپت بدون کتابخانه کمکی) را با بوت استرپ 5 آموختید و با Utility API جدید آشنا شدید.