مشاوره رایگان

دریافت لینک های دانلود دریافت پستی درب منزل مبلغ کل: تومان

جهت دریافت کد تخفیف به کانال تلگرام مراجعه و یا با پشتیبان آنلاین هماهنگ نمایید

بکارگیری Bootstrap 5 با Vanilla JavaScript

Bootstrap 5 یک چارچوب CSS رایگان و منبع باز برای توسعه رابط کاربری وب سایت ها به صورت responsive (واکنش گرا) و mobile-first (اول موبایل) است.

در هنگام نگارش این مقاله ، بوت استرپ 5 آلفا رسماً راه اندازی شده است. بوت استرپ در این نسخه وابستگی به jQuery را حذف کرده است ، پشتیبانی از Internet Explorer 9 و 10 را رها کرده است و به روز رسانی های عالی برای فایل های Sass ، نشانه گذاری های جدید و یک API سودمند جدید اضافه کرده است.

این آموزش به شما نحوه شروع استفاده از VanillaJS به جای jQuery هنگام ساخت وب سایت با استفاده از جدیدترین نسخه Bootstrap 5 را نشان می دهد. VanillaJS همان JavaScript ساده بدون کمک گرفتن از هیچ کتابخانه ی اضافه ای است.

شروع کار

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

اول از همه ، یک پوشه برای این پروژه بسازید و یک صفحه وب index.html با کد های زیر در داخل آن ایجاد کنید:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Clicksite(clicksite.ir@gmail.com)</title>
</head>
<body>
    
</body>
</html>

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

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

پس از آن ، قبل از پایان برچسب <body> در این فایل ، کتابخانه Popper.js و فایل اصلی جاوا اسکریپت Bootstrap را وارد کنید:

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

کنجکاوید که صفات integrity و crossorigin در کد بالا به چه معنی است؟ توضیحات اینجاست:

صفت integrity : به مرورگر اجازه می دهد تا منبع فایل را بررسی کند تا اطمینان حاصل کند که در صورت دستکاری منبع هرگز کد بارگیری نمی شود.
صفت crossorigin : هنگامی باید استفاده شود که یک درخواست با استفاده از "CORS" بارگیری می شود ، اکنون یکی از الزامات بررسی SRI هنگام بارگیری نشدن از "same-origin" است. به زبان ساده اگر اسکریپت از منبعی غیر از سایتی که این اسکریپت در آن استفاده می شود دانلود شود ، نیاز به این صفت هست. این یک ویژگی کلی در مرورگر های جدید است و برای افزایش امنیت کاربران الزامی شده است تا از بارگیری اسکریپت های ناخواسته از سایت های غیر معتبر جلوگیری شود.

عالی! اکنون ما با موفقیت جدیدترین نسخه Bootstrap را در پروژه خود گنجانده ایم. یکی از تفاوتهای بارز این است که دیگر نیازی به jQuery به عنوان یک وابستگی نداریم ، حتی اگر jQuery فشرده شده را هم در نظر بگیریم ، در پهنای باند حدود 82.54 کیلو بایت صرفه جویی می کنیم.

گذار از jQuery به Vanilla JS

قبل از شروع به کار در این بخش ، باید بدانید که استفاده از Bootstrap 5 با jQuery طبق اسناد رسمی هنوز امکان پذیر است.

در صورتی که تنها دلیل استفاده از jQuery برای انتخاب کردن اجزای صفحه (query selector) بوده است ، توصیه می شود از جاوا اسکریپت وانیلا (جاوا اسکریپت بدون هیچ کتابخانه اضافه ای) استفاده کنید زیرا می توانید همان کار را با کد زیر نیز انجام دهید.

document.querySelector('#element') // $('#element')

اولین قدم ایجاد یک فایل جاوا اسکریپت و قرار دادن آن قبل از پایان برچسب بدنه (body) اما بعد از دو مورد دیگر است که اضافه کرده ایم. در کد زیر این فایل را app.js نامیده ایم:

<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>
<script src="js/app.js"></script>

چه زمانی لازم است که از Javascript با بوت استرپ 5 استفاده کنید؟ در چارچوب بوت استرپ مولفه های خاصی وجود دارد که فقط از طریق Javascript کار می کنند ، مانند tooltip ها ، popover و toast. بعلاوه ، ممکن است بخواهید ، اجزایی مانند modal ها ، dropdown ها (کشویی) و carousel ها را بر اساس نیاز کاربر یا منطق برنامه ، در زمان اجرای برنامه تغییر دهید.

راه اندازی tooltip ها از طریق Vanilla JavaScript

با اینکه tooltip ها بسیار مفیدند ، اما در بوت استرپ کار نمی کنند مگر اینکه از طریق جاوا اسکریپت راه اندازی شوند. ابتدا با ایجاد یک عنصر tooltip در داخل فایل index.html شروع می کنیم:

<button id="tooltip" type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
    Tooltip on top
</button>

قرار گرفتن نشانگر موس در بالای دکمه به تنهایی tooltip را نشان نمی دهد ، زیرا به طور پیش فرض این یک ویژگی انتخابی در بوت استرپ است و باید به صورت دستی با استفاده از JavaScript راه اندازی شود. اگر می خواهید این کار را با jQuery انجام دهید ، کد آن به صورت زیر است:

$('#tooltip').tooltip();

در صورت استفاده از Vanilla JS بجای jQuery باید کد زیر را برای راه اندازی tooltip استفاده کنید:

// Clicksite(clicksite.ir@gmail.com)

var tooltipElement = document.getElementById('tooltip');
var tooltip = new bootstrap.Tooltip(tooltipElement);

کاری که کد بالا انجام می دهد این است که ، عنصر با شناسه منحصر به فرد "tooltip" را انتخاب می کند و یک شی Tooltip ایجاد می کند.

اگر می خواهید همه tooltip ها را فعال کنید می توانید از کد زیر استفاده کنید:

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

اتفاقی که در اینجا می افتد این است که ما همه عناصری را که دارای ویژگی و مقدار "data-toggle = "tooltip هستند انتخاب می کنیم و برای هر کدام ، یک شی tooltip مقدار دهی می کنیم. همچنین آنها را در یک متغیر tooltipList ذخیره می کنیم.

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

در اینجا مثالی در مورد چگونگی نمایش یا پنهان کردن آن از طریق متد ها آورده شده است:

var showTooltip = true;
if (showTooltip) {
    tooltip.show();
} else {
    tooltip.hide();
}

تغییر قابلیت مشاهده عناصر با متدهای collapse

ویژگی collapse در Bootstrap یکی دیگر از روش های مفید برای نشان دادن و پنهان کردن عناصر از طریق ویژگی های داده (data) در نشان گذاری های html یا JavaScript است.

در اینجا مثالی از چگونگی نمایش یا پنهان کردن کارت هنگام کلیک روی دکمه خاصی آورده شده است. ابتدا نشان گذاری های HTML را ایجاد می کنیم:

<button id="toggleCardButton" type="button" class="btn btn-primary mb-2">Toggle Card</button>
    <div id="card" class="card collapse show" style="width: 18rem;">
        <img src="https://dev-to-uploads.s3.amazonaws.com/i/rphqzfoh2cbz3zj8m8t1.png" class="card-img-top" alt="...">
        <div class="card-body">
            <h5 class="card-title">Freecodecamp.org</h5>
            <p class="card-text">Awesome resource to learn programming from.</p>
            <a href="#" class="btn btn-primary">Learn coding for free</a>
        </div>
    </div>

بنابراین ما یک دکمه با آیدی toggleCardButton و یک کارت با آیدی card ایجاد کردیم. کد جاوا اسکریپت را با انتخاب این دو عنصر شروع کنیم:

var toggleButton = document.getElementById('toggleCardButton');
var card = document.getElementById('card');

سپس باید با استفاده از عنصر کارت تازه انتخاب شده ، یک شی جمع شونده ایجاد کنیم:

var collapsableCard = new bootstrap.Collapse(card, {toggle: false});

کاری که toggle:false انجام می دهد این است که عنصر را پس از ایجاد شی قابل مشاهده نگه می دارد. در صورت عدم وجود آن ، به طور پیش فرض کارت پنهان می شود.

اکنون باید یک شنونده رویداد کلیک را برای دکمه اضافه کنیم:

// Clicksite(clicksite.ir@gmail.com)

toggleButton.addEventListener('click', function () {
    // کاری که می خواهید هنگام کلیک دکمه انجام شود
});

و در انتها باید با استفاده از شی collapsable که قبلاً مقدار دهی کرده بودیم ، حالت نمایش کارت را تغییر دهیم:

toggleButton.addEventListener('click', function () {
    collapsableCard.toggle();
});

حالا هر وقت روی دکمه کلیک شود کارت نشان داده یا پنهان می شود. مطمئناً همه این کارها می تواند با استفاده از ویژگی های داده (data) نیز در بوت استرپ انجام شود ، اما ممکن است بخواهید قابلیت مشاهده عناصر خاصی را براساس یک فراخوانی API یا بر اساس یک منطق خاص دیگر در برنامه خود تغییر دهید.

نتیجه

تبریک ! اگر این آموزش را تا اینجا دنبال کرده باشید ، اکنون می توانید بدون نیاز به jQuery در پروژه خود ، از محبوب ترین چارچوب CSS یعنی بوت استرپ استفاده کنید. با این کار می توانید حداکثر 85 کیلوبایت داده ذخیره و وب سایت خود را سریعتر کنید!

پکیج های آموزشی جدید

آموزش طراحی وب با ASP.NET Core MVC (تحت پروژه سایت اشتراک فیلم)

فصلِ: 5 , تعداد قسمت ها: 176 , سطح: صفر تا صد

موضوعات: آموزش ASP.NET آموزش ASP.NET MVC آموزش Bootstrap آموزش Ajax آموزش JQUERY

این فصل در یک نگاه:

در این فصل پس از بررسی سیستم مسیریابی و طراحی صفحه نمایش ویدیو ها، به سراغ پنل کاربری خواهیم رفت و مباحث Model Binding و…

توجه: این دوره آموزشی به صورت پیوسته بر اساس آخرین نسخه ی ASP.NET Core بروزرسانی خواهد شد. آموزش صفر تا صد طراحی سایت اشتراک ویدیو مشابه آپارات با استفاده از ASP.NET CORE MVC 3.0 و V…

دانلود و ادامه توضیحات

ساخت پروژه دیوار بصورت دو سکویی با ASP.NET Core و Xamarin

فصلِ: 5 , تعداد قسمت ها: 135 , سطح: صفر تا صد

موضوعات: آموزش ASP.NET آموزش HTML5 آموزش CSS آموزش JQUERY آموزش ASP.NET MVC آموزش Bootstrap

این فصل در یک نگاه:

…

توضیحات کلی مجموعه: در این مجموعه آموزشی، با استفاده از جدیدترین تکنولوژی ها و ابزار های مایکروسافت (دات نت)، به یک پروژه جذاب مدیریت آگهی مشابه دیوار می پردازیم. این آموزش در دو بخش کلی و…

دانلود و ادامه توضیحات

آموزش صفر تا صد بوت استرپ

فصلِ: 2 , تعداد قسمت ها: 13 , سطح: صفر تا صد

موضوعات: آموزش Bootstrap

این فصل در یک نگاه:

مباحث ریسپانسیو سازی شامل نقاط شکست مختلف - گرید سیستم - فلکس باکس - …

توجه : این دوره هیچ پیش نیازی ندارد و تمام مطالب از صفر آموزش داده شده است. از این رو شما برای شروع این دوره به هیچ مقدمه یا دوره دیگری نیاز ندارید. ویژگی های دوره آموزش بوت استرپ ۵ : - آم…

دانلود و ادامه توضیحات

دوره اموزش فریم ورک بوت استرپ

فصلِ: 6 , تعداد قسمت ها: 23 , سطح: صفر تا صد

موضوعات: آموزش Bootstrap

این فصل در یک نگاه:

فصل ششم: پروژهپروژه ا : ساخت یک قالب واکنشگرای گروه موسیقیپروژه 2 : ساخت قالب واکنشگرای سایت 5040…

سرفصل دوره آموزش فریم ورک بوت استرپ فصل اول : معرفی بوت استرپ طراحی واکنشگرا ( Responsive Design ) چیست ؟ با مفهوم طراحی واکنشگرا آشنا خواهید شد و تفاوت بین سایت واکنشگرا و سایت نسخه ی …

دانلود و ادامه توضیحات

آموزش طراحی وبسایت و اپلیکیشن اندروید ورزش3 (Varzesh3)

فصلِ: 4 , تعداد قسمت ها: 78 , سطح: متوسط

موضوعات: آموزش ASP.NET آموزش ASP.NET MVC آموزش JQUERY آموزش HTML5 آموزش Ajax آموزش Bootstrap آموزش JAVASCRIPT

این فصل در یک نگاه:

…

در این دوره آموزشی، وبسایت ورزش3 را با استفاده از ASP.NET Core پیاده سازی می کنیم و همچنین اپ اندروید آن را هم با Xamarin متصل به سرور سایت طراحی و در نهایت نحوه انتشار آن در مارکت هایی مثل …

دانلود و ادامه توضیحات

پکیج آموزش پروژه محور PHP ساخت سایت نیازمندی ها مشابه شیپور

فصلِ: 4 , تعداد قسمت ها: 240 , سطح: صفر تا صد

موضوعات: آموزش PHP آموزش Bootstrap آموزش CSS آموزش JQUERY آموزش HTML آموزش PHP MVC آموزش Ajax آموزش HTML5

این فصل در یک نگاه:

طراحی پنل مدیریت(دسته بندی)- دسته بندی یا category - نمایش دسته های فرعی در view با ورود به یکی از دسته های اصلی و آشن…

توضیحات کلی مجموعه: این مجموعه توسط فریمورک محبوب و دوست داشتنی bootstrap و به صورت تضمینی و صفر تا صد جهت یادگیری کارآموزان عزیز ارائه گردیده و دوستانی که این دوره را به طور کامل و دقیق…

دانلود و ادامه توضیحات

آموزش api نویسی

فصلِ: 5 , تعداد قسمت ها: 201 , سطح: صفر تا صد

موضوعات: آموزش HTML5 آموزش CSS آموزش JAVASCRIPT آموزش JQUERY آموزش PHP آموزش PHP MVC آموزش Ajax آموزش Bootstrap آموزش برنامه نویسی آندروید

این فصل در یک نگاه:

ایجاد پروژه آژانس مسافرتی.....…

فصل اول: آشنایی با مبانی برنامه نویسی اندروید آشنایی با معماری برنامه های اندرویدی ساخت شبیه ساز جهت تست پروژه اندروید آشنایی با دستور Toast و حلقه for در برنامه های اندروی…

دانلود و ادامه توضیحات

وبینار آموزش تکنیکهای ایمیل مارکتینگ | روشهای تبدیل بازدیدکننده به مشتری

فصلِ: 1 , تعداد قسمت ها: 2 , سطح: متوسط

موضوعات: آموزش HTML5 آموزش CSS آموزش JAVASCRIPT آموزش PHP آموزش Ajax آموزش Bootstrap آموزش Laravel آموزش PHP MVC آموزش ایمیل مارکتینگ آموزش وردپرس

این فصل در یک نگاه:

بهترین و پر بازده ترین روش تبدیل بازدیدکننده سایت به مشتری تبلیغات هدفمند و برند سازی هوشمندانه با ایمیل می باشد. ایمیل…

وبینار(سمینار آنلاین) آموزش تکنیک های ایمیل مارکتینگ اگر تا انتها این متن را مطالعه کنید نظر شما در مورد ایمیل مارکتینگ 180 درجه عوض می شود!! بر هیچکس پوشیده نیست که از سال 1972 که ای…

دانلود و ادامه توضیحات

آموزش تصویری لاراول - پروژه محور و کاربردی

فصلِ: 4 , تعداد قسمت ها: 368 , سطح: صفر تا صد

موضوعات: آموزش HTML5 آموزش CSS آموزش JAVASCRIPT آموزش PHP آموزش PHP MVC آموزش Ajax آموزش HTML آموزش ساخت فروشگاه اینترنتی آموزش Bootstrap آموزش Laravel

این فصل در یک نگاه:

مباحث تکمیلی فریم ورک لاراول…

فصل اول :آموزش مقدماتی فریم ورک لاراول معرفی فریم ورک لاراول و پیشنیازهای انجام کار انجام کانفیگ های اولیه برای نصب و راه اندازی فریم ورک معرفی روش های نصب پروژه لاراولی از طریق سایت گی…

دانلود و ادامه توضیحات

پکیج پروژه محور ساخت سایت مشابه آپارات با فریم ورک های react.js و laravel

فصلِ: 1 , تعداد قسمت ها: 155 , سطح: صفر تا صد

موضوعات: آموزش HTML5 آموزش CSS آموزش JAVASCRIPT آموزش JQUERY آموزش PHP آموزش PHP MVC آموزش Ajax آموزش HTML آموزش NodeJs آموزش Bootstrap آموزش Laravel آموزش Symphony

این فصل در یک نگاه:

مباحث مقدماتی فریم ورک react.js…

توضیحات کلی مجموعه: فصل اول : آشنایی با مباحث مقدماتی فریم ورک react.js نصب و راه اندازی node.js و کلیه پیش نیازهای لازم نصب فریم ورک react روی لوکال و انجام تست های لازم آغاز آشنایی …

دانلود و ادامه توضیحات

طراحی و برنامه نویسی وب

برنامه نویسی موبایل

برنامه نویسی ویندوز

سایر

بکارگیری Bootstrap 5 با Vanilla JavaScript