آموزش استفاده از Bootstrap 5 با Sass و Gulp 4 به همراه مثال

آموزش استفاده از Bootstrap 5 با Sass و Gulp 4 به همراه مثال

Bootstrap ، محبوب ترین چارچوب برای طراحی رابط کاربری در حال به روز رسانی به نسخه جدیدی است - Bootstrap 5. در این آموزش ، ما می آموزیم که چگونه از آخرین نسخه Bootstrap 5 با Gulp 4 و Sass برای طراحی سایت واکنش گرا و mobile-first استفاده کنیم. استایل های اولیه در mobile-first  برای سایز صفحه تلفن همراه است سپس با استفاده از media query ها ، استایل ها برای سایر دستگاه ها با سایز های مختلف تغییر داده می شود.

در این آموزش ما از JavaScript برای واکشی داده ها از خروجی JSON  سرویس Techiediaries استفاده خواهیم کرد که آخرین پست های سایت را ارسال می کند.

بوت استرپ محبوب ترین و پر کاربرد ترین چارچوب منبع باز در بین توسعه دهندگان در سراسر جهان برای ایجاد UI های واکنش گرا با HTML ، CSS و JavaScript است. در زمان نگارش این مقاله ، بوت استرپ 4 نسخه اصلی بوت استرپ است اما به زودی ما یک نسخه بوت استرپ 5 خواهیم داشت که تغییرات عمده ای را ایجاد می کند و از همه مهمتر حذف jQuery به عنوان یک وابستگی  و حذف پشتیبانی از IE 10 و 11 IE. ممکن است زمانی که شما این مقاله را می خوانید نسخه نهایی Bootstrap 5 منتشر شده باشد.

تغییرات عمده در بوت استرپ نسخه ۵ عبارتند از:

• عدم استفاده از jQuery و استفاده از جاوا اسکریپت ساده (vanilla JavaScript) بجای آن
• بازنویسی شبکه (grid) برای پشتیبانی از ستونهایی که خارج از سطرها قرار گرفته اند  و فاصله ی (gutter) واکنش گرا بین ستون ها
• تغییر اسناد (documentation) از Jekyll به Hugo
• حذف پشتیبانی از IE10 و IE11
• تغییر ابزارهای های تست از QUnit به Jasmine
• افزودن مجموعه سفارشی آیکون های SVG
• افزودن خصوصیات سفارشی CSS
• API بهبود یافته
• سیستم شبکه (grid) بهبود یافته
• اسناد سفارشی سازی بهبود یافته
• فرم های به روز شده

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

• راه اندازی محیط توسعه با Bootstrap 5 ، Sass ، Gulp 4 و BrowserSync
• ساخت صفحه وبلاگی با Bootsrap 5 و واکشی پست ها با JavaScript ،
• واکشی پست ها از طریق واکشی جاوا اسکریپت (JavaScript Fetch) و ضمیمه کردن آنها به DOM صفحه
• سفارشی کردن رنگ های بوت استرپ 5 با متغیرهای Sass
• استفاده از فایل های Sass  در Bootstrap 5
• ایجاد یک فایل پیکربندی Gulp
• نصب Bootstrap 5 ، Sass و Gulp 4
• نحوه استفاده از Bootstrap 5 با Sass ، Gulp 4 و BrowserSync

روش های مختلفی برای استفاده از بوت استرپ 5 وجود دارد از جمله وارد کردن استایل ها و اسکریپت ها از یک CDN و از طریق برچسب <link> و <script> و استفاده از Sass برای استفاده از مزایای چارچوب CSS درون بوت استرپ 5.

پیش نیازها

برای دنبال کردن این آموزش ، باید Node.js را روی دستگاه خود نصب کنید. Node.js برای ابزارهای توسعه رابط کاربری مورد استفاده ما مانند Sass و Gulp لازم است اما اگر Bootstrap 5 به شکل ساده و فقط  با استفاده از برچسب <script> و <link>  استفاده شود ، نیازی به این ابزارها نیست.

اگر Node.js را روی دستگاه خود نصب نکرده اید ، به راحتی به وب سایت رسمی Node.js بروید و فایل نصب آن را برای سیستم عامل خود بارگیری کنید.

در این آموزش همچنین شما باید دانش اولیه ای در مورد HTML و CSS نیز داشته باشید.

نصب Bootstrap 5 ، Sass و Gulp 4

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

$ npm install --global gulp-cli

با دستور بالا Gulp CLI بصورت global (در دسترس برای همه پروژه ها) بر روی دستگاه شما نصب می شود.

بعد ، باید Gulp Sass ، BrowserSync ، Gulp و Bootstrap 5 را با استفاده از NPM نصب کنیم.

از طریق اجرای دستور های زیر در ترمینال پوشه ای برای پروژه خود می سازید به این پوشه می روید و سپس یک فایل package.json برای این پروژه می سازید:

$ mkdir bootstrap5demo && cd bootstrap5demo 
$ npm init 

برخی از جزئیات مانند نام و توضیحات پروژه از شما درخواست می شود. هرچه صلاح دیدید برای آنها وارد کنید.

پس از آن ، یک فایل package.json در داخل پوشه پروژه خود خواهید داشت:

{
  "name": "bs5demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

سپس برای نصب Gulp 4 و Gulp Sass و BrowserSync دستور زیر را اجرا کنید:

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

هنگام نگارش این آموزش ، این نسخه ها نصب می شوند:

• gulp-sass@4.1.0
• gulp@4.0.2
• browser-sync@2.26.12

احتمالاً در زمانی که شما این مقاله را می خوانید نسخه های جدیدتری منتشر شده است.

بعد ، دستور زیر را برای نصب Bootstrap 5 اجرا کنید:

$ npm install bootstrap
$ npm install popper.js

در زمان نگارش این مقاله نسخه بوت استرپ و پوپر به صورت زیر است:

• bootstrap@5.0.0-alpha1
• popper.js@1.16.1

احتمالاً در زمانی که شما این مقاله را می خوانید نسخه های جدیدتری منتشر شده است.

فایل package.json ما باید به صورت زیر باشد:

{
  "name": "bs5demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "browser-sync": "^2.26.12",
    "gulp": "^4.0.2",
    "gulp-sass": "^4.1.0"
  },
  "dependencies": {
    "bootstrap": "^5.0.0-alpha1",
    "popper.js": "^1.16.1"
  }
}

Popper.js وابستگی Bootstrap 5 است.

ایجاد یک فایل پیکربندی Gulp

یک فایل gulpfile.js در ریشه پوشه پروژه خود ایجاد کنید و کد زیر را اضافه کنید:

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

gulp.task('sass', ()  => {
    return gulp.src("./sass/*.scss")
        .pipe(sass())
        .pipe(gulp.dest("dist/"))
        .pipe(browserSync.stream());
});

gulp.task('start', gulp.series('sass', function() {

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

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

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

در کد بالا ما با وارد کردن وابستگی های gulp-sass ، gulp و browser-sync با استفاده از متد require از Node شروع می کنیم ، سپس اولین کار (task) از Gulp به نام sass را ایجاد می کنیم که هر فایل Sass داخل پوشه sass را به یک فایل CSS تبدیل می کند. برای استایل دهی به سایت بعداً این فایل های تولیدی CSS را به صفحه سایت اضافه می کنیم.

بعد ، ما یک کار دیگری از Gulp به نام start را تعریف می کنیم که به سادگی یک سرور توسعه محلی راه اندازی می کند و هر گونه تغییر در پوشه پروژه ما را مشاهده می کند. اگر تغییری ایجاد شود ، وظیفه sass که در بالا توضیح داده شد دوباره اجرا می شود یعنی فایل های CSS پاک شده و با کد جدید ما به روز رسانی می شود.

سرانجام ، ما با استفاده از gulp.task('default', ['start']) این امکان را می دهیم که  وظیفه پیش فرض را شروع کنید که سرور توسعه محلی را شروع می کند و هنگام ایجاد تغییرات ، فایل های Sass را کامپایل می کند.

استفاده از فایل های Sass  در Bootstrap 5

به ترمینال خود بروید و یک پوشه sass در پوشه پروژه خود اضافه کنید ، سپس یک فایل به نام styles.scss در این پوشه ایجاد کنید:

$ mkdir sass && cd sass
$ touch styles.scss

بعد ، فایل sass/styles.scss را باز کنید و خط زیر را برای وارد کردن پرونده های Sass  از Bootstrap 5  که در پوشه node_modules قرار دارند، اضافه کنید:

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

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

بعد ، یک فایل index.html را داخل پوشه پروژه خود اضافه کنید و کد HTML زیر را اضافه کنید:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Bootstrap 5 with Sass Tutorial</title>
        <link rel="stylesheet" href="dist/styles.css">
    </head>
    <body>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <div class="container-fluid">
            <a class="navbar-brand" href="#">Bootstrap 5 tutorial</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="#">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Blog</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">Search</button>
                </form>
            </div>
        </div>
    </nav>

    <div class="container-fluid">
        <div class="row d-flex justify-content-center">
            <div class="col-12 col-lg-6" id="postsDiv">

            </div>
            <div class="col-12 col-lg-4">
                <div class="card">
                    <div class="card-body">
                        <h5>Newsletter</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">Subscribe</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>


        <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>

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

واکشی پست ها با جاوا اسکریپت و ضمیمه کردن آنها به DOM

در مرحله بعدی ، باید برخی از کدهای JavaScript را برای واکشی پست ها اضافه کنیم ، آنها را درون یک کارت Bootstrap 5 بپیچیم ، سپس در داخل ظرف <div> با آیدی postsDiv ضمیمه کنیم:

<script>
        let posts;
        document.body.onload = async (e) =>{
            console.log("document loaded!");
            posts = await fetch("https://www.techiediaries.com/api/feed.json").then(function(response) {
                return response.json();
            });
            posts.forEach(element => {
                let child = document.createElement('div');
                child.classList.add('mt-1');
                ['card'].forEach((v)=>{
                    child.classList.add(v);
                })


                child.innerHTML = `
                <div class="card-body">
                    <h2 class="card-title">${element.title}</h2>
                    <p class="card-text">${element.excerpt}</p>
                    <div class="card-footer">
                        <a href="${element.url}" class="card-link">Read</a>
                        <a href="#" class="card-link">Save to read offline</a>
                    </div>

                </div>
                `

                document.getElementById("postsDiv").appendChild(child);
            });

        }


        </script>

ما از Fetch API برای واکشی داده ها از سرویس JSON استفاده می کنیم و سپس پست ها را پیمایش می کنیم ، هر پست را در یک کارت Bootstrap 5 می پیچیم و عنصر را به محتوای خود درون <div> اضافه می کنیم.

سفارشی کردن رنگ های تم 5 Bootstrap با متغیرهای Sass

Sass شما را قادر می سازد تا به راحتی از طریق متغیرهای Bootstrap 5 ظاهر تم خود را شخصی سازی کنید.

برای شخصی سازی رنگهای پیش فرض قالب ، فایل styles.scss را باز کرده و به صورت زیر آن را به روزرسانی کنید:

$primary: #3ec89d;
$secondary: #3ab7ff;
$success: #65ff9f;
$info: #7164ff;
$warning: #ff9f65;
$danger: #ff457b;
$dark: #18181d; 

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

اینها فقط برخی از متغیرها هستند اما ما می توانیم متغیرهای دیگری را که مسئول فونت ، اندازه و فاصله و غیره هستند ، قرار دهیم. به سادگی به پرونده variables.scss_ داخل پوشه node_modules/bootstrap بروید و تمامی متغیرهایی را که می توانید سفارشی کنید پیدا می کنید.

نتیجه

Bootstrap یک چارچوب محبوب و متن باز است که اجزای از پیش ساخته شده را فراهم می کند و به طراحان وب و توسعه دهندگان از هر سطح مهارتی اجازه می دهد تا به سرعت واسط های کاربر واکنش گرا و mobile-first را ایجاد کنند. آخرین نسخه Bootstrap که نسخه ۵ آن است تغییرات جدید زیادی از جمله حذف jQuery به عنوان وابستگی را به همراه دارد. در این مقاله ، نحوه استفاده از Bootstrap 5 و Gulp 4 برای ساختن یک صفحه وبلاگ واکنش گرا و پیکربندی و شخصی سازی تم ها با استفاده از متغیرهای Sass را مشاهده کردید.