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

• آموزش کار با نشان برجسته Badges در Bootstrap 4
• آموزش نمایش متن در Progress Bar بوت استرپ 4

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

آموزش ایجاد چرخنده Spiner در Bootstrap 4

برای ایجاد یک شکلک چرخنده (Spiner) یا آیکون لود (loader) در بوت استرپ 4، از یک المنت با کلاس spinner-border، استفاده کنید.

مثال: در کد مثال زیر، به وسیله یک تگ

1

1مثال 2

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1مثال 4

1div class="spinner-border spinner-border-sm">

1

سایز پیش فرض Spinner یا چرخنده در بوت استرپ 4، بزرگ یا lg است.

آموزش ساخت دکمه با چرخنده های متحرک در بوت استرپ 4:

می توانید یک المنت با کلاس .spinner-border یا .spinner-grow را درون یک دکمه یا button قرار داده و آن را به یک دکمه لود تبدیل کنید. در این حالت می توانید برای دکمه متن نیز تعیین کرده یا خالی بگذارید.

مثال: در کد مثال عملی زیر، نحوه ایجاد انواع دکمه با چرخنده های متحرک در Bootstrap 4 را نشان داده ایم:

مثال 5

1

1  

1

1 

1

1  

1  Loading..

1

1 

1

1  

1  Loading..

1

1 

1

1  

1  Loading..

1

آموزش صفحه بندی Pagination در Bootstrap 4

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

برای ایجاد یک صفحه بندی Pagination ساده در صفحات وب سایت تان با ستتفاده از بوت استرپ 4، ابتدا یک تگ

با کلاس Pagination. ایجاد نمایید. سپس به هر یک از
• درون لیست، کلاس .page-item داده و برای لینک ها هم (تگ یا دکمه)، کلاس .page-link تعیین کنید.

  در کد مثال عملی زیر، نحوه ایجاد یک صفحه بندی Pagination کامل در Bootstrap 4 را نشان داده ایم:

  مثال 1

  1
  

  1  
  Previous
  

  1  
  1

  1  
  2

  1  
  3

  1  
  Next

  1

آموزش فعال کردن شماره صفحه جاری (Active State) در Pagination:

در صورت اعمال کلاس .active به یکی از آیتم های

لیست

در صفحه بندی Bootstrap 4، شماره آن صفحه (که صفحه جاری خواهد بود) به صورت رنگی و توپر نشان داده می شود :



مثال : در کد مثال زیر، صفحه 2 را با استفاده از کلاس .active، به عنوان صفحه جاری نشان داده ایم :

مثال 2

1

1  
Previous

1  
1

1  
2

1  
3

1  
Next

1

آموزش غیر فعال کردن لینک یک صفحه در صفحه بندی Pagination:

در صورت اعمال کلاس .disabled به لینک یک صفحه در صفحه بندی Bootstrap 4، لینک آن صفحه به صورت غیر فعال نشان داده شده و کاربر نمی تواند بر رویش کلیک نماید :

مثال : در کد مثال زیر، با استفاده از کلاس .disabled، لینک صفحه قبل (Previous) را غیر فعال کرده ایم:

مثال 3

1

1  
Previous

1  
1

1  
2

1  
3

1  
Next

1

آموزش تعیین سایز دکمه های صفحه بندی Pagination:

اندازه دکمه ها که در مثال های صفحه بندی Pagination Bootstrap 4، تاکنون در این درس مشاهده کردید، سایز متوسط یا پیش فرض بوت استرپ 4 است.

می توانید سایز بزرگ تر یا کوچک تر از حالت پیش فرض نیز برای دکمه ها تعیین کنید :

با اعمال کلاس .pagination-lg به تگ مادر صفحه بندی (

)، دکمه ها به صورت بزرگ تر و با کلاس .pagination-sm، دکمه های به صورت کوچکتر نشان داده خواهند شد :

مثال 4

1
Large:

1 

1   
Previous

1   
1

1   
2

1   
3

1   
Next

1 

1 

1 
Default:

1 

1   
Previous

1   
1

1   
2

1   
3

1   
Next

1 

1 

1 
Small:

1 

1   
Previous

1   
1

1   
2

1   
3

1   
Next

1 

آموزش تعیین جهت قرارگیری صفحه بندی Pagination Alignment:

به صورت پیش فرض در بوت استرپ 4، دکمه های صفحه بندی Pagination از سمت چپ تراز می شوند اما از کلاس های ویژه utility در Bootstrap 4 برای وسط چین یا راست چین کردن آن ها می توانید استفاده کنید :

مثال: در کد مثال عملی زیر، از کلاس ویژه کاربردی بوت استرپ 4 (utility Classess) استفاده کرده و جهت چینش در منوی صفحه بندی دوم و سوم را به دلخواه تغییر داده ایم :

1مثال 5

1

1

1  
...

1

1 

1

1

1  
...

1

1 

1

1

1  
...

1

راهنمایی :

در بخش آموزش کلاس های کاربردی بوت استرپ 4 به آموزش کار با Bootstrap Utility Class پرداخته شده است.

آموزش ایجاد صفحه بندی خطی Breadcrumb Pagination:

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

مثال : برای ایجاد یک منوی خطی Breadcrumb در بوت استرپ 4، بایستی کلاس .breadcrumb را به تگ

بدهید، پس برای هریک از آیتم های
• لیست
  ، کلاس .breadcrumb-item را تعیین کنید :

  مثال 6

  1
  

  1  
  Photos

  1  
  Summer 2017

  1  
  Italy

  1  
  Rome

  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