سلام عزیزان با آموزش جاوا اسکریپت از دوره آموزش طراحی سایت در خدمت شما دوستان هستیم

آموزش اعداد در جاوا اسکریپت

اعداد در جاوا اسکریپت

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

مثال:

var x = 34.00; // A number with decimals

var y = 34; // A number without decimals‎

اعداد بسیار کوچک یا کوچک را می توان با نماد علمی نوشت

مثال:

var x = 123e5; // 12300000

var y = 123e-5; // 0.00123‎

اعداد جاوا اسکریپت همیشه 64 بیتی و با ممیز شناور (در مبنای 10) هستند. برخلاف بسیاری از زبان های برنامه نویسی، جاوا اسکریپت انواع عددی از قبیل : integer (عدد صحیح)، short، long و floating-point تعریف نمی کند و این نوع اعداد در جاوا اسکریپت استفاده نمی شوند. در جاوا اسکریپت اعداد همیشه به صورت ممیز شناور با دو رقم اعشار (double precision floating-point number) ذخیره می شوند که در حقیقت دنبال رو استاندارد بین المللی IEEE 754 می باشد. در این نوع قالب دهی یا فرمت اعداد در 64 بیت ذخیره می گردند، به گونه ای که کسر (fraction) در بیت های 0 تا 51، نما یا توان (exponent) در بیت های 52 تا 62 و علامت (sign) در بیت 63 ذخیره می گردد.

​

دقت اعشار (precision)

اعداد صحیح integer در حداکثر 15 رقم و همیشه به صورت دقیق مطرح می شوند.

مثال:

نمونه یک

function myFunction() {

var x = 999999999999999;

var y = 9999999999999999;

document.getElementById("demo").innerHTML = x + "
" + y;

}

حداکثر تعداد اعشار، 17 رقم است، اما حساب ممیز شناور همیشه 100% دقیق نیست.

نمونه دو

function myFunction() {

var x = 0.2 + 0.1;

document.getElementById("demo").innerHTML = "0.2 + 0.1 = " + x;

}

به منظور حل مشکل بالا، انجام عمل ضرب و تقسیم کمک زیادی می کند.

مثال:

نمونه سه

function myFunction() {

var x = (0.2 * 10 + 0.1 * 10) / 10;

document.getElementById("demo").innerHTML = "0.2 + 0.1 = " + x;

}

آموزش طراحی سایت : اعداد شانزده شانزدهی (hexadecimal)

جاوا اسکریپت ثابت های عددی (اعداد ثابتی) را که با 0x شروع می شوند به عنوان اعداد در مبنای شانزده در نظر می گیرد (تفسیر می کند).

مثال:

نمونه چهار

function myFunction() {

document.getElementById("demo").innerHTML = "0xFF = " + 0xFF;

}

توجه:

هیچگاه یک عدد را با صفر مقدم ننویسید (مانند این مثال 07(.

بعضی از ویرایش های جاوا اسکریپت یک عدد را در صورتی که با صفر مقدم نوشته شوند، به صورت octal / هشت هشتی تفسیر می کند. به صورت پیش فرض، جاوا اسکریپت اعداد را به صورت اعشاری و در مبنای 10 نمایش می دهد، اما شما می توانید با استفاده از تابع toString() اعداد را به صورت مبنای 16، مبنای 8 یا مبنای 2 (دودئی) (به عنوان خروجی) نمایش دهید.

مثال:

نمونه پنج

function myFunction() {

var myNumber = 128;

document.getElementById("demo").innerHTML = "128 = " +

myNumber + " Decimal, " +

myNumber.toString(16) + " Hexadecimal, " +

myNumber.toString(8) + " Octal, " +

myNumber.toString(2) + " Binary."

}

Infinity (مقدار بی نهایت)

چنانچه عددی را که بزرگتر از بیشینه ی حد ممکن اعداد در جاوا اسکریپت است محاسبه کنید، مقدار infinity برگردانده می شود.

مثال:

نمونه شش

function myFunction() {

var myNumber = 2;

var txt = "";

while (myNumber != Infinity) {

myNumber = myNumber * myNumber;

txt = txt + myNumber + "
";

}

document.getElementById("demo").innerHTML = txt;

}

در صورت تقسیم عددی بر 0 نیز مقدار بی نهایت برگردانده می شود.

مثال:

نمونه هفت

function myFunction() {

var x = 2 / 0;

var y = -2 / 0;

document.getElementById("demo").innerHTML = x + "
" + y;

}

توضیح : infinity یک عدد است : typeOf infinity یک عدد برمی گرداند.

مثال:

نمونه هشت

function myFunction() {

document.getElementById("demo").innerHTML = typeof Infinity;

}

عبارت NaN- عبارت رزرو شده ی Not a Number

عبارت NaN یک کلمه ی رزرو شده (reserved word) است که بیان می کند یک مقدار از نوع عدد نیست. چنانچه سعی کنید با رشته ی غیر عددی عملیات محسابه ی انجام دهید، جاوا اسکریپت عبارت رزرو شده ی Not a Number را بر می گرداند.

نمونه نه

document.getElementById("demo").innerHTML = 100 / "Apple"

اما چنانچه رشته دربردارنده ی یک مقدار عددی باشد، نتیجه نیز یک عدد خواهد بود.

مثال:

نمونه ده

document.getElementById("demo").innerHTML = 100 / "10";

می توانید از تابع سراسری (global function) isNaN() برای کشف این مسئله که آیا مقدار یک عدد است یا خیر استفاده کنید.

مثال:

نمونه یازده

var x = 100 / "Apple";

document.getElementById("demo").innerHTML = isNaN(x);

اگر در محاسبات ریاضی از NaN استفاده کنید، نتیجه نیز NaN خواهد بود.

مثال:

نمونه دوازده

var x = NaN;

var y = 5;

document.getElementById("demo").innerHTML = x + y;

نمونه سیزده

var x = NaN;

var y = "5";

document.getElementById("demo").innerHTML = x + y;

دستور NaN یک عدد است : typeOf NaN عدد بازمی گرداند.

مثال:

نمونه چهارده

document.getElementById("demo").innerHTML = typeof NaN;

اعداد می توانند شی باشند. به طور معمول اعداد مقادیر اولیه ی هستند که از literal ها ایجاد می گردند.

var x = 123‎

اما اعداد را می توان با استفاده از کلیدواژه ی new به عنوان شی (object) تعریف کرد، بدین ترتیب

var y = new Number(123)‎

مثال:

نمونه پانزده

document.getElementById("demo").innerHTML = typeof x + "
" + typeof y;

از ایجاد شی number خودداری کنید، زیرا که سرعت اجرا را کاهش داده و عوارض جانبی فراوانی را منجر می شوند. عملگر == برای اعدادی بکار می رود که از لحاظ مقدار برابر باشند.

مثال:

نمونه شانزده

var x = 500; // x is a number

var y = new Number(500); // y is an object

document.getElementById("demo").innerHTML = (x == y);

توجه داشته باشید که در صورت استفاده از عملگر === دیگر اعداد با مقدار یکسان مساوی یا برابر محسوب نمی شوند زیرا که این عملگر انتظار دارد اعداد هم از نظر نوع و هم از نظر مقدار با هم برابر باشند.

نمونه هفده

var x = 500; // x is a number

var y = new Number(500); // y is an object

document.getElementById("demo").innerHTML = (x === y);

بخاطر داشته باشید که مقایسه ی اشی با هم امکان پذیر نمی باشد.

مثال:

نمونه هجده

var x = 500; // x is a number

var y = new Number(500); // y is an object

document.getElementById("demo").innerHTML = (x === y);

خواص (properties) و متدهای مربوط به اعداد در جاوا اسکریپت

مقادیر اولیه ی مثل 3.14 یا 2014، نمی توانند متد یا خاصیت داشته باشند (زیرا که در اصل این ها شی نیستند که بتوانند خاصیت یا متد داشته باشند). اما در رابطه با جاوا اسکریپت این امر صادق نیست. به این خاطر که زبان بیان شده هنگام اجرای متدها و خصوصیت ها با مقادیر اولیه به مثابه ی شی برخورد می کند. از این رو مقادیر اولیه همچنان قادر هستند در زبان جاوا اسکریپت متد و خاصیت داشته باشند.

​

مثال:

نمونه نوزده

document.getElementById("demo").innerHTML = Number.MAX_VALUE;

خاصیت های مربوط به اعداد در جاوا اسکریپت متعلق به دبرگیرنده یا wrapper شی number هستند که خود Number نامیده می شوند. دسترسی به خاصیت های نام برده تنها از این طریق ممکن می باشد.

Number.MAX_VALUE‎

استفاده از myNumber.MAX_VALUE در جایی که myNumber یک متغیر، عبارت یا مقدار است، باعث برگردانده شدن undefined می شود.

مثال:

نمونه بیست

var x = 6;

document.getElementById("demo").innerHTML = x.MAX_VALUE;

آموزش طراحی سایت ادامه دارد

با آموزش جدید Jquery از دوره آموزش طراحی سایت همراه ما باشید.

آموزش افزونه sliderbars.js در JQuery

اسلاید Slidebars یک افزونه jQuery برای اجرای سریع و سبک منوها و نوارهای باریک افقی و عمودی در وب سایت شما است. Slidebars 2 پر از ویژگی های جذاب میباشد. تعداد نامحدودی از اسلایدها - دیگر فقط یک سمت چپ ، یک راست وجود ندارد.

اسلایدهای بالا و پایین.

آموزش طراحی سایت : رویدادها - نمایش اسلایدها رویدادهایی را نشان می دهد که نشان دهنده رفتار آن است.

• سبک انیمیشن شیفت جدید.

• مدت زمان بهبود انیمیشن.

• سبک های چاپ

• سبک وزن تنها 1.69kb gzipped

جهت استفاده از این افزونه لازم است ، ابتدا فایلهای cssو js لازم را در پروژه اضافه میکنیم.

< link href="css/slidebars.css" rel="stylesheet" >

< script src="js/jquery.js" >< /script >

< script src="js/slidebars.js" >< /script >

در بخش body صفحه Html ، صفحه به دو بخش محتوای اصلی و منو تقسیم میکنیم و محتوا دلخواه در آنها قرار میدهیم

< div canvas="container" >

< h1 >welcome to my website< /h1 >

< p > introduction of slidebars.js< /p >

< p >

< button class="js-open-left-slidebar" >open left< /button >

< button class="js-close-left-slidebar" >CLOSE left< /button >

< button class="js-toggle-left-slidebar" >toggle left< /button >

< /p >

< /div >

< div off-canvas="slidebar-1 left shift" >

< p >menu left< /p >

< /div >

جهت و مدل باز و بسته شدن منو ، با استفاده از پارامتر off-canvas مشخص میشود برای فراخوانی افزونه روی این بخش ، قطعه کد جیکوئری زیر را مینویسیم

$ (document).ready(function(){

var controller = new slidebars();

controller.init();

بعد از ایجاد یک نمونه جدید از شی ، برای رویداد کلیک روی دکمه ی منو ، متد باز کردن منو را اجرا میکنیم.

$ ('.js-open-left-slidebar').on('click',function (event) {

event.stopPropagation();

controller.open('slidebar-1');

})

با کلیک روی دکمه با کلاس مشخص ، متد بستن منو را فراخوانی میکنیم.

$('.js-close-left-slidebar').on('click',function (event) {

event.stopPropagation();

controller.close('slidebar-1');

})

متد toggle ، دو متد close و open را با یکدیگر اجرا میکند

$('.js-toggle-left-slidebar').on('click',function (event) {

event.stopPropagation();

controller.toggle('slidebar-1');

})

//event

رویدادها:

رویدادهای ایجاد نمونه جدید، اعمال css روی منو که شامل shift و overlay ،push و reveal میباشد. مدل رفتاری منو در زمان باز و بسته شدن را نشان میدهد. رویداد باز و بسته شدن منو نیز از رویدادهای این افزونه میباشد.

$ ( controller.events ).on( 'init', function () {

console.log( 'Init event' );

} );

$ (controller.events).on('css',function () {

console.log('css')

})

$ (controller.events).on('exit',function () {

console.log('exit')

})

$ (controller.events).on('opening',function (event,id) {

console.log('opening'+id);

})

$ (controller.events).on('opened',function (event,id) {

console.log('opened'+id);

})

$ (controller.events).on('closing',function (event,id) {

console.log('closing'+id);

})

$ (controller.events).on('closed',function (event,id) {

console.log('closed'+id);

})

آموزش طراحی سایت : آموزش کار با افزونه Alertify

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

آدرس صفحه وبی که میخواهید نمایش دهید را Paste کنید

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

​

در ادامه قطعه کدهای استفاده از این پلاگین را به ازای هشدارهای متفاوت مرورگرها مشاهده میکنیم

نمایش پیام و یا هشدار:

if(!alertify.myAlert){

//define a new dialog

alertify.dialog('myAlert',function(){

return{

main:function(message){

this.message = message;

},

setup:function(){

return {

buttons:[{text: "cool!", key:27/*Esc*/}],

focus: { element:0 }

};

},

prepare:function(){

this.setContent(this.message);

}

}});

}

//launch it.

alertify.myAlert("Browser dialogs made easy!");

آموزش راه اندازی پلاگین alertify

.alert("This is an alert dialog.", function(){

alertify.message('OK');

});

دریافت تاییدیه از کاربر

alertify.confirm("This is a confirm dialog.",

function(){

alertify.success('Ok');

},

function(){

alertify.error('Cancel');

});

Run Example Documentation

دریافت ورودی از کاربر

alertify.prompt("This is a prompt dialog.", "Default value",

function(evt, value ){

alertify.success('Ok: ' + value);

},

function(){

alertify.error('Cancel');

})

نمایش پیام موفقیت آمیز

// success notification

// Shorthand for:

// alertify.notify( message, 'success', [wait, callback]);

alertify.success('Success message');

نمایش پیام خطا

// error notification

// Shorthand for:

// alertify.notify( message, 'error', [wait, callback]);

alertify.error('Error message');

نمایش هشدار

// alertify.notify( message, 'warning', [wait, callback]);

alertify.warning('Warning message');

Run Example Documentation

نمایش هشدار به کاربر

// default notification

// Shorthand for:

// alertify.notify( message, [type, wait, callback]);

alertify.message('Normal message');

Run Example Documentation

آموزش طراحی سایت ادامه دارد

• کار با فرم Form در Bootstrap 4
• آموزش اعتبارسنجی فرم ها (Form Validation) در Bootstrap
• آموزش کار با کنترل های ورود اطلاعات Input در بوت استرپ 4

  

• برای فراخوانی و اجرای کادر نمایش Modal معمولا از یک دکمه button یا تگ link استفاده می شود که با کلیک بر روی آن، کادر ظاهر می شود. این المنت بایستی درای خاصیت data-toggle برابر modal بوده و مقدار خاصیت data-target آن نیز برابر با id المنت Modal تنظیم شود.
• کادر نمایش Modal در یک تگ یا عنصر دربرگیرنده (مثل تگ div) با کلاس modal قرار گرفته و بدنه اصلی آن را نیز 2 تگ با کلاس های modal-dialog و modal-content تعیین می کنند.
• یک کادر نمایش Modal می تواند دارای 3 بخش اصلی هدر، بدنه و فوتر باشد که به ترتیب با المنت هایی با کلاس modal-header با modal-body و modal-footer تعریف می شوند.
• برای تعیین عنوان کادر نمایش Modal از یک عنصر با کلاس modal-tittle استفاده می شود.

سلام با آموزش Bootstrap 4 در خدمت شما هستیم در قسمت قبل با مفاهیم زیر آشنا شدیم

• آموزش کار با لیست گروهی List Group
• آموزش کار با کارت Card در Bootstrap 4
• حال با ادامه آموزش بوت استرپ 4 از دوره آموزش طراحی سایت همراه باشید:

آموزش کار با منوی کرکره ای Dropdown در Bootstrap4

آموزش ساخت منوی کرکره ای ساده Dropdown Basic:

دراپ Dropdown یک منوی کرکره ای، قابل کلیک و باز شونده است که به شما امکان می دهد تا یک مقدار را از لیستی از مقادیر از پیش تعریف شده، انتخاب نمایید. همانند شکل زیر:

 برای قابل کلیک شدن و باز کردن منوی Dropdown، از یک دکمه Button یا لینک با کلاس drop-down-toggle که دارای خاصیت data-toggle=”Dropdown” است، استفاده می شود.

سپس کلاس dropdown-menu. را به یک المنت div اضافه کرده تا منوی اصلی Dropdown ساخته شود. بعد به هر آیتم درون لیست Dropdown که می توانند لینک یا دکمه Button باشند، کلاس dropdown-item. داده می شود.

آموزش طراحی سایت استفاده کننده از جدا کننده Divider در DropDown:

از یک المنت با کلاس dropdown-divider. برای جدا کردن لینک های درون منوی Dropdown با یک خط افقی ضخیم استفاده می شود، همانند کد مثال عملی زیر :

مثال 2

آموزش ایجاد سر عنوان (Header) برای Dropdown:

از یک المنت با کلاس dropdown-header. برای ایجاد سر عنوان (Header) در منوی Dropdown استفاده می شود، همانند کد مثال عملی زیر:

مثال 3

آموزش ایجاد آیتم های فعال/غیر فعال در Dropdown:

اگر به یک آیتم در منوی dropdown کلاس active. اضافه کنید، آن آیتم به صورت فعال (با پس زمینه آبی) نمایش داده می شود.

چنانچه کلاس disabled. را به یک آیتم در منوی dropdown بدهید، آن آیتم به صورت غیر فعال در می آید (رنگ نوشته خاکستری کم رنگ شده و دیگر قابل کلیک شدن نیست).

مثال: در کد مثال عملی زیر، یک عضو منوی DropDown را فعال و عضو دیگر را غیر فعال کرده ایم:

مثال 4

1Active

1Disabled

آموزش تعیین جهت باز شدن Dropdown در بوت استرپ 4:

در بوت استرپ 4، می توان کاری کرد که منوی Dropdown به جای باز شدن به سمت پایین، به سمت چپ یا راست باز شود.

در صورت اضافه کردن کلاس dropright.، منوی Dropdown به سمت راست باز شده و با کلاس dropleft. به سمت چپ باز می شود. دقت نمایید علامت فلش یا arrow به صورت اتوماتیک به منو اضافه می شود. به مثال های عملی زیر دقت نمایید :

1مثال 5

1

1

1

1 

1

1

1

آموزش راست چین کردن منو Dropdown در Bootstrap 4:

در منوی کرکره ای Dropdown عریض تر، می توان کاری کرد که منوی آن از سمت راست باز شود.

برای راست چین کردن منوی Dropdown، بایستی همانند کد مثال عملی زیر، کلاس dropdown-menu-right. را به المنت با کلاس dropdown-menu. (عنصر دربرگیرنده منو)، اضافه نمایید :

مثال 6

1

1

آموزش باز کردن منو Dropdown رو به بالا در Bootstrap 4:

چنانچه بخواهید منوی Dropdown به جای رو به پایین باز شدن، رو به بالا باز شود، کلاس المنت اصلی Dropdown را از dropdown و dropup. تغییر دهید، همانند کد مثال عملی زیر:

مثال 7

1

1

آموزش تعیین Text برای آیتم DropDown در بوت استرپ 4:

در صورت استفاده از کلاس dropdown-item-text. در یک المنت مثل span یا P در یک آیتم منوی Dropdown، متن آن آیتم به صورت ساده و غیر قابل کلیک شدن در می آید.

اما اگر کلاس فوق را در یک المنت لینک یا Button دکمه برای یک آیتم منو به کار ببرید، آن آیتم به صورت لینک در خواهد آمد.

مثال عملی : در کد مثال عملی زیر، با استفاده از کلاس dropdown-item-text، متن آیتم سوم منوی Dropdown را به صورت لینک و متن آیتم چهارم را به صورت ساده و غیر قابل کلیک کردن، درآورده ایم :

مثال 8

1

1Link 1

1Link 2

1Text Link

1Just Text

1

آموزش استفاده از Dropdown در یک گروه دکمه Button:

می توانید از یک Dropdown در یک گروه از دکمه های بوت استرپ4، که در درس های قبلی اموزش دادیم، نیز استفاده کنید.

مثال عملی : در کد مثال عملی زیر، دکمه سوم در مجموعه گروه دکمه ها Buttons را به صورت یک dropdown تعریف کرده ایم:

1مثال 9

1

1Apple

1Samsung

1

1

1Sony

1

1

1Tablet

1Smartphone

1

1

1

آموزش طراحی سایت استفاده از Dropdown در یک گروه دکمه به صورت عمودی :

مجموعه دکمه های موجود در گروه دکمه مثال قبل را به صورت عمودی یا vertical هم می توان نشان داده و از یک یا چند Dropdown، به عنوان دکمه درونش استفاده کرد.

مثال عملی: کد مثال قبل را در این بخش بازنویسی کرده و جهت عمودی نشان داده شدن گروه دکمه ها، به جای کلاس btn-group. از کلاس btn-group-vertical.، استفاده کرده ایم :

مثال 10

1

1Apple

1Samsung

1

1

1Sony

1

1

1Tablet

1Smartphone

1

1

1

سلام با آموزش Bootstrap 4 در خدمت شما هستیم در قسمت قبل با کار با لیست گروهی List Group در Bootstrap4 آشنا شدیم.

حال با ادامه آموزش بوت استرپ 4 از دوره آموزش طراحی سایت همراه باشید:

آموزش کار با نشان برجسته Badges در Bootstrap 4

از امکان برجسته یا به انگلیسی Badges در بوت استرپ 4، می توان برای اضافه کردن اطلاعات بیشتر به یک محتوا استفاده کرد.

برای مثال می توانید از یک عنصر با کلاس .badges به همراه یک عنصر دیگر که دارای کلاس های رنگی متنی (مثلا کلاس .badges-secondary) است مثل یک المنت برای ایجاد یک نشان مستطیل رنگی، استفاده کنید.

توجه داشته باشید که چنانچه عنصر badge درون یک عنصر مادر یا parent باشد، اندازه خود را بر حسب بزرگی یا کوچکی آن ، تنظیم می کند.

مثال عملی: در کد مثال عملی زیر، نحوه ایجاد یک عنصر badge را درون تگ های عنوان

تا

نشان داده ایم:

مثال 1

1
Example heading New

1
Example heading New

1
Example heading New

1
Example heading New

1
Example heading New

1
Example heading New

آموزش استفاده از کلاس های متنی رنگی برای badge:

می توانید از کلاس های متنی رنگی پیش فرض بوت استرپ 4 ، که در بخش های قبلی آن ها را آموزش دادیم، برای تعیین رنگ عنصر badge استفاده نمایید.

مثال عملی : در کد مثال عملی زیر، انواع badge های رنگی را به وسیله کلاس های متنی رنگی Bootstrap 4 استفاده کرده ایم:

مثال 2

1Primary

1Secondary

1Success

1Danger

1Warning

1Info

1Light

1Dark

آموزش طراحی سایت ساخت نشانه های گرد (Pill Badges) در بوت استرپ 4 :

از کلاس .badges-pill می توانید برای گرد کردن گوشه های عنصر badge در Bootstrap 4 استفاده کنید.

مثال: در کد مثال عملی زیر، نحوه استفاده از کلاس .badge-pill و ساخت Pill Badge را نشان داده ایم :

مثال 3

1Primary

1Secondary

1Success

1Danger

1Warning

1Info

1Light

1Dark

آموزش استفاده از Badge درون یک عنصر دیگر :

در کد مثال عملی زیر، از یک عنصر Badge در یک دکمه استفاده کرده ایم:

مثال 4

1
Messages 4

آموزش کار با نوار پیشرفت Progress Bar در Bootstrap 4

از نوار پیشرفت یا Progress Bar می توان برای نشان دادن میزان پیشرفت یک عملیات یا حجم انجام شده یک پروسه توسط کاربر، استفاده کرد.

برای ایجاد یک نوار پیشرفت یا Progress Bar در Bootstrap 4، کلاس .progress را به عنصر مادر یا Container و کلاس .progress-bar را به عنصر یا عناصر فرزند آن، اعمال کنید.

همچنین از خاصیت width نوار پیشرفت، از که 0 تا 100 درصد تعیین می شود، می توانید برای نمایش میزان کار، استفاده کنید.

نکته :

توجه داشته باشید که خاصیت width در نوار پیشرفت Bootstrap 4 را هم می توانید به صورت ثابت یا دستی و هم به صورت خودکار و لحظه ای تنظیم نمایید.

مثال: در کد مثال عملی زیر، یک نوار پیشرفت یا Progress Bar ساده با حجم 70 درصد پیشرفت را در بوت استرپ 4 ، ایجاد کرده ایم:

مثال 1

1

1  

1