آموزش بوت استرپ

به روز ترین مطالب آموزشی و متدلوژی های برنامه نویسی

تازه ترين مطالب

پربازديدترين مطالب

محبوب ترين مطالب

آموزش طراحی سایت-آموزش ساخت اسلایدر در Bootstrap 4

پیمان کلانتری جمعه ۱۷ مرداد ۹۹ | ۱۱:۴۸ ۷۴ بازديد
سلام با آموزش Bootstrap 4 در خدمت شما هستیم درقسمت قبلبا مفهوم زیر آشنا شدیم
  • کار با فرم Form در Bootstrap 4
  • آموزش اعتبارسنجی فرم ها (Form Validation) در Bootstrap
  • آموزش کار با کنترل های ورود اطلاعات Input در بوت استرپ 4
 
حال با ادامه آموزش بوت استرپ 4 از دورهآموزش طراحی سایتهمراه باشید:
 
 
آموزش ساخت اسلایدر Carousel در Bootstrap 4
یک اسلایدر یا carousel در بوت استرپ 4، یک اسلاید شو برای نمایش دو یا چند عکس پشت سر هم و تکرار وار است.
نحوه ایجاد یک اسلایدر carousel در بوت استرپ 4:
در کد مثال عملی، نحوه ساخت یک اسلایدر carousel را که دارای فلش های حرکت بین عکس ها و کنترل های لازم است را آموزش داده ایم.
به کد مثال و خروجی آن دقت نمایید. در ادامه به تشریح هر بخش پرداخته ایم :
مثال 1
 
 
 
 
 
 
 
 
 
 
 
 
Los Angeles
 
 
Chicago
 
 
New York
 
 
 
 
 
 
 
 
 
 
 
 
توضیح مثال : در ادامه به تشریح و آموزش کارکرد هریک از کلاس های استفاده شده در carousel پرداخته ایم :
 
آموزش اضافه کردن عنوان (Caption) به هر عکس اسلایدر:
معمولا در زیر هر عکس یک عنوان یا Caption که در مورد اسلایدر توضیح می دهد، قرار می گیرد.
با استفاده از کلاس های carousel-caption و carousel-item در یک تگ div می توانید توضیح یا Caption برای هر اسلاید تعیین کنید، همانند مثال زیر:
مثال 2
 
  Los Angeles
  
 
    

Los Angeles

    

We had such a great time in LA!

  
 
آموزش طراحی سایتآموزش کار با کادر پیام Modal در Bootstrap 4
کامپوننت Modal در چهارچوب کاری بوت استرپ 4، یک کادر نمایش popup است که در بالای صفحه جاری ظاهر شده و نمایش داده می شود. عملکرد Modal شبیه کادر اخطار alert در جاوا اسکریپت است، ولی با ظاهری مدرن تر و زیباتر.
آموزش ساخت یک کادر نمایش Modal در بوت استرپ 4:
در کد مثال عملی زیر، نحوه ساخت یک کادر نمایش Modal در Bootstrap 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 استفاده می شود.
مثال 1
 
 
Open modal
 
 
 
 
 
 
 
 
 

Modal Heading

 
 
 
 
Modal body..
 
 
 
 
 
 
 
 
 
اضافه کردن افکت animation به کادر نمایش Modal:
می توانید افکت fade یا محو و ظاهر شدن تدریجی را با اعمال کلاس fade. به کادر نمایش Modal، بدان اضافه نمایید.
مثال: در کد مثال عملی زیر، در کادر نمایش Modal یکی با افکت fade و دیگری بدون افکت ایجاد کرده ایم که می توانید تفاوت در ظاهر شدن را مقایسه نمایید :
مثال 2
 
 
 
 
 
آموزش تعیین سایز کادر نمایش Modal در Bootstrap 4:
می توانید با تعیین کلاس modal-sm، اندازه کادر نمایش Modal را کوچک کرده و با کلاس modal-lg سایزی بسیار بزرگ برایش تعیین نمایید.
کلاس اندازه مورد نظر را بایست به عنصر با کلاس modal-dialog اضافه نمایید. در کد مثال های عملی زیر، سایز مختلف Modal را ایجاد کرده ایم :
مثال 1: حالت کوچک sm
مثال sm
 
 
مثال2: حالت بزرگ Lg
مثال lg
 
 
مثال 3: حالت بسیار بزرگ xl
مثال xl
 
 
نکته :
در حالت پیش فرض، بوت استرپ 4، کادرهای نمایش Modal را در اندازه متوسط md یا medium نمایش می دهد.
آموزش وسط نمایش دادن کادر نمایش Modal در بوت استرپ 4:
می توایند با اعمال کلاس modal-dialog-centred به کادر نمایش Modal، هم به صورت افقی و هم عمودی، آن را در وسط صفحه نمایش دهید. همانند کد مثال عملی زیر :
مثال center
 
 
ایجاد نوار اسکرول برای کادر نمایش Modal در بوت استرپ 4:
هنگامی که محتویات درون کادر Modal زیاد باشد، به طوری که در ارتفاع عنصر جا نشود، نوار اسکرول به کادر نمایش اضافه می شود. برای درک بهتر به کد مثال عملی زیر و خروجی آن دقت نمایید :
مثال scroll
 
 
در حالت قبل، برای دیدن ادامه محتویات کادر نمایش Modal صفحه رو به پایین و بالا اسکرول می شود. اما می توانید با اضافه کردن کلاس modal-dialog-scrollable به عنصر دارای کلاس modal-dialog، کاری کنید خود کادر نمایش Modal دارای نوار اسکرول شده و بدون اسکرول صفحه، مابقی محتویات آن را ببینید. همانند کد مثال عملی زیر :
مثال scroll 2
 
 
آموزش کار با عنوان راهنما tooltip در Bootstrap 4
کامپوننت عنوان راهنما یا tooltip یک کادر کوچک popup است که در هنگام عبور موس از روی یک المنت، ظاهر شده و معمولا توضیحاتی راجع به آن ارائه می دهد.
آموزش ایجاد عنوان راهنما tooltip در بوت استرپ 4:
برای ایجاد یک tooltip، خاصیت data-toggle=” tooltip” را به المنت مورد نظرتان اضافه کنید. سپس متن ی که می خواهید در tooltip نمایش داده شود را درون خاصیت title تعیین نمایید. نحوه انجام کار را در کد مثال عملی زیر نشان داده ایم :
مثال 1
Hover over me
نکته :
برای اجرای صحیح کادر عنوان tooltip در بوت استرپ 4، بایستی آن را توسط jQuery فراخوانی اولیه نمایید. به این صورت که المنت مورد نظر را انتخاب کرده و متد tooltip() را بر رویش اجرا نمایید.
کد زیر برای اجرای اولیه tooltip در Bootstrap 4 توسط jQuery بایستی به صفحه اضافه شود :
آموزش تعیین موقعیت قرارگیری tooltip در بوت استرپ 4:
به صورت پیش، کادر متن راهنما tooltip در بالای عنصر نمایش داده می شود.
اما می توانید از خاصیت data-placement برای قرارگرفتن کادر tooltip در بالا (top)، پایین (bottom)، راست (right) و چپ (left) عنصر استفاده نمایید. همانند کد مثال عملی زیر :
مثال 2
Hover
Hover
Hover
Hover
آموزش طراحی سایتادامه دارد
برچسب ها: آموزش طراحی سایت, دوره آموزش طراحی سایت, آموزش بوت استرپ, آموزش bootstrap, فیلم آموزش طراحی سایت,

آموزش طراحی سایت-کار با منوی کرکره ای Dropdown در بوت استرپ 4

پیمان کلانتری دوشنبه ۰۲ تیر ۹۹ | ۱۲:۴۴ ۷۸ بازديد

سلام با آموزش 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 header 1

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

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

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

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

مثال 4

1Active
1Disabled

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

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

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

1مثال 5
1
Dropright button
1
Link 1 Link 2 Link 3
1
1 
1
Dropright button
1
Link 1 Link 2 Link 3
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
 
1
1
1
 
1
1Sony
1
1
 
1Tablet
1Smartphone
1
1
1

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

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

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

مثال 10

1
 
1
1
1
 
1
1Sony
1
1
 
1Tablet
1Smartphone
1
1
1

 

برچسب ها: آموزش طراحی سایت, دوره آموزش طراحی سایت, آموزش بوت استرپ, فیلم آموزش طراحی سایت, آموزش برنامه نویسی, آموزش طراحی سایت pdf,

آموزش طراحی سایت- ایجاد Spiner و صفحه بندی در بوت استرپ 4

پیمان کلانتری چهارشنبه ۲۸ خرداد ۹۹ | ۱۴:۱۳ ۷۱ بازديد

 

 

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

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

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

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

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

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

با کلاس .spinner-boarder، یک چرخنده در حال لود ایجاد کرده ایم:

مثال 1

1

نکته :

رنگ پیش فرض چرخنده (Spiner) در بوت استرپ 4، مشکی (Black) است.

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

با استفاده از کلاس های رنگی متنی ویژه بوت استرپ 4 (سری- text)، همانند کد مثال عملی زیر، می توانید چرخنده Spiner با رنگ های مختلف و مفهومی ایجاد کنید :

1مثال 2
1
1
1
1
1
1
1
1
1

آموزش ساخت چرخنده های بزرگ شونده Growing Spinner:

اگر از کلاس .spinner-grow به جای .spinner-border استفاده کنید، چرخنده یا Spiner ایجاد شده، به جای چرخیدن، از سایز کوچک شروع شده و بزرگ می شود. در کد مثال عملی زیر، نحوه استفاده از این کلاس و خروجی آن را نشان داده ایم:

مثال 3

1
1
1
1
1
1
1
1
1

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

با استفاده از کلاس های .spinner-borde-sm یا .spinner-grow-sm می توانید چرخنده هایی با سایز کوچک ایجاد نمایید.
در کد مثال عملی زیر، نحوه استفاده از کلاس های فوق و خروجی آن را در عمل نشان داده ایم:

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، ابتدا یک تگ

آموزش فعال کردن شماره صفحه جاری (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 را به تگ

      بدهید، پس برای هریک از آیتم های
    • لیست
    • برچسب ها: آموزش طراحی سایت, دوره آموزش طراحی سایت, طراحی سایت, آموزش بوت استرپ, آموزش bootstrap,

    آموزش طراحی سایت-کار با نشان برجسته و نوار پیشرفت در بوت استرپ

    پیمان کلانتری چهارشنبه ۲۸ خرداد ۹۹ | ۱۴:۰۹ ۷۵ بازديد


    سلام با آموزش 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

    آموزش تنظیم ارتفاع Progress Bar در Bootstrap 4:

    ارتفاع نوار پیشرفت یا Progress Bar به صورت پیش فرض در بوت استرپ 4 ، مقدار 16 پیکسل است. می توانید از خاصیت ارتفاع CSS height برای تغییر آن به میزان دلخواه استفاده کنید. فقط توجه داشته باشید که مقدار خاصیت ارتفاع (height) در عنصر دربرگیرنده یا Container و عنصر یا عناصر فرزند، بایستی به یک اندازه باشد.

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

    مثال 2

    1
    1
     
    1

    آموزش نمایش متن در Progress Bar بوت استرپ 4 :

    می توانید با قرار دادن متن درون عنصر فرزند آیتم نوار پیشرفت در Bootstrap 4 میزان پیشرفت کار را به صورت متنی نیز نشان دهید.

    دقت نمایید که این متن را می توانید با استفاده از جاوا اسکریپت یا jQuery به صورت داینامیک نیز تغییر دهید.

    مثال: در کد مثال عملی زیر، با قرار دادن عدد 70% درون تگ

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

    مثال 3

    1
    1  
    70%
    1

    آموزش ایجاد نوار پیشرفت رنگی در Bootstrap 4:

    در Bootstrap 4 به صورت پیش فرض رنگ نوار پیشرفت آبی (کلاس primary) است. می توانید از کلاس های متنی رنگی بوت استرپ 4 ، که در بخش های گذشته آموزش دادیم، برای تعیین رنگ دلخواه Progress Bar استفاده کنید.

    مثال: در کد مثال عملی زیر، با استفاده از کلاس های متنی رنگی Bootstrap 4 رنگ پس زمینه (برای مثال .bg-success برای رنگ سبز)، نوار پیمایش ها را تغییر داده ایم:

    مثال 4

    1
    1
    1  
    1
    1 
    1
    1
    1  
    1
    1 
    1
    1
    1  
    1
    1 
    1
    1
    1   
    1
    1 
    1
    1
    1  
    1
    1 
    1
    1
    1  
    1
    1 
    1
    1
    1  
    1
    1 
    1
    1
    1  
    1
    1 
    1
    1
    1  
    1

    ایجاد نوار پیشرفت راه راه Striped Progress Bar در بوت استرپ 4 :

    از کلاس ویژه .progress-bar-striped می توانید جهت راه راه کردن بخش رنگی نوار پیشرفت در Bootstrap 4 استفاده کنید:

    مثال 5

    1
    1  
    1

    نکته :

    کلاس .progress-bar-striped بایستی به عنصر یا عناصر فرزند نوار پیشرفت بوت استرپ 4 ، اضافه شوند نه عنصر مادر یا Container.

    آموزش ایجاد نوار پیشرفت متحرک Animated Progress Bar:

    در صورت اضافه کردن کلاس .progress-bar-animated به عنصر سازنده نوار پیشرفت و استفاده همزمان از کلاس .progress-bar-strped، خط های راه راه قسمت پر شده در نوار پیشرفت، حالت متحرک و پویا پیدا می کنند. برای درک بهتر مثال عملی زیر را مشاهده کنید :

    مثال 6

    1

    آموزش ایجاد نوار پیمایش چندگانه Multiple Progress Bar:

    می توانید با قرار دادن چندین المنت با کلاس .progress-bar درون یک المنت مادر با کلاس .progress که هر کدام از عناصر فرزند درصدی بین 0 تا 100 دارند، یک نوار پیمایش چندگانه و با رنگ های مختلف (با استفاده از کلاس های رنگی متنی ویژه Bootstrap 4)، همانند عکس زیر ایجاد نمایید :

    مثال 7

    1
    1  
    1    Free Space
    1  
    1  
    1    Warning
    1  
    1  
    1    Danger
    1  
    1

     

    برچسب ها: آموزش طراحی سایت, آموزش بوت استرپ, فیلم آموزش طراحی سایت, طراحی سایت, آموزش برنامه نویسی,

    آموزش Bootstrap-کار با List Group در بوت استرپ 4

    پیمان کلانتری دوشنبه ۰۹ دی ۹۸ | ۱۲:۴۶ ۱۰۵ بازديد
    سلام با آموزش Bootstrap 4 در خدمت شما هستیم در قسمت قبل صفحه بندی Pagination و ایجاد چرخنده Sppiner در Bootstrap4 آشنا شدیم.
    حال با ادامه آموزش بوت استرپ 4 همراه باشید:
    آموزش کار با لیست گروهی List Group در بوت استرپ 4
    ساده ترین نوع لیست گروهی یک لیست بدون نشانه و ترتیب (Unordered list) با یک یا چندین آیتم درون آن است، همانند عکس زیر:

     

     

     

     
    برای ایجاد یک لیست گروهی ساده در بوت استرپ 4، از یک تگ
      با کلاس list-group، استفاده می شود که هر آیتم درون آن با یک تگ
    • با کلاس list-group-item، تعیین خواهد شد، همانند کد مثال عملی زیر:
    مثال
    1
    • First item
    • Second item
    • Third item
      •  
      آموزش فعال کردن یک آیتم در لیست Active Item:
      اگر به یکی از آیتم های
    • درون یک لیست بوت استرپ 4، کلاس .active بدهید، آن آیتم به صورت فعال با پس زمینه رنگی (به صورت پیش فرض) و متمایز از بقیه نشان داده خواهد شد.

      •  

       

       

       
      مثال: در کد مثال زیر، یک لیست گروهی در Bootstrap 4 ایجاد کرده ایم که آیتم اول آن به صورت فعال درآمده است :
      مثال2
       
      • Active item
      • Second item
      • Third item
        •  
        آموزش ایجاد لیست با آیتم های لینک در Bootstrap 4:
        برای ایجاد یک لیست گروهی با آیتم های لینک، از یک تگ
        مثال 3
         
        First item
        Second item
        Third item
         
        آموزش ایجاد یک آیتم غیر فعال (Disabled) در لیست Bootstrap 4:
        برای تعیین یک آیتم در لیست به صورت غیر فعال (Disabled) بایستی کلاس .disabled را به عنصر اضافه کنید. در این حالت، رنگ نوشته آیتم به صورت خاکستری و کم رنگ در می آید و غیر فعال خواهد بود. همچنین در لیست های لینکی، قابلیت hover آن ها نیز از بین می رود.

         

         

         

         
        مثال: در مثال زیر، یک لیست در بوت استرپ 4، ایجاد کرده ایم که آیتم اول و دوم آن، غیر فعال است.
        مثال 4
         
        Disabled item
        Disabled item
        Third item
         
        آموزش حذف خطوط حاشیه (border) لیست در بوت استرپ 4:
        در صورت استفاده از کلاس .list-group-flush در عنصر مادر لیست تگ
          ، خطوط حاشیه یا Border دور لیست حذف شده و دیگر نوشته های آن گرد نیز نخواهد بود، همانند کد عملی مثال زیر :

         

         

         

        مثال 5
         
        • First item
        • Second item
        • Third item
        • Fourth item
          •  
          آموزش ایجاد لیست افقی Horizontal List در بوت استرپ 4:
          دوره آموزش BootStrap 4
           
          اگر می خواهید آیتم های لیست در بوت استرپ 4، به صورت افقی یا Horizontal به جای عمودی Vertical (در کنار هم به جای قرار گرفتن بر روی هم) نمایش داده شوند، کلاس .list-group-horizontal را به عنصر مادر لیست (تگ
            یا
            با کلاس list-group)، اضافه نمایید، همانند کد مثال عملی زیر:

           

           

           

          مثال 6
           
          • First item
          • Second item
          • Third item
          • Fourth item
            •  
            آموزش استفاده از کلاس های رنگی متنی در لیست بوت استرپ 4:
            از کلاس های متنی رنگی ویژه بوت استرپ 4، یا کلاس های Contextual Classes که در بخش های قبل معرفی کردیم، برای تعیین رنگ پس زمینه آیتم های لیست استفاده نمایید. این رنگ ها مفهومی هستند و هریک پیام خاصی مثل موفقیت یا خطر را به کاربر نشان می دهد:

             

             

             

            مثال: کلاس های رنگی متنی ویژه بوت استرپ 4، عبارتند از .list-group-item-success, list-group-item-secondary, list-group-item-info, list-group-item-warning, .list-group-item-danger, .list-group-item-primary, list-group-item-dark و list-group-item-light، که از هریک از آن ها در لیست زیر برای تعیین رنگ یک آیتم لیست، استفاده کرده ایم :
            مثال 7
             
            • Success item
            • Secondary item
            • Info item
            • Warning item
            • Danger item
            • Primary item
            • Dark item
            • Light item
              •  
              آموزش ایجاد لیست لینک دار رنگی در Bootstrap 4:
              همانند مثال بخش های قبلی، می توانید از کلاس های رنگی ویژه بوت استرپ 4 در لیست های لینک دار هم استفاده کنید، با این تفاوت که در لیست های لینک دار از تگ های
              مثال: به کد مثال عملی زیر دقت کنید و خروجی را مشاهده نمایید :
               
              Action item
              Success item
              Secondary item
              Info item
              Warning item
              Danger item
              Primary item
              Dark item
              Light item
               
              آموزش ایجاد لیست های گروهی نشان دار Badges List در Bootstrap 4:
              می توانید با ترکیب کلاس badge و چند کلاس کمکی دیگر در بوت استرپ 4، لیست هایی دارای نشانه های عمودی یا متنی (Badge List) ایجاد نمایید، همانند عکس زیر:

               

               

               

              مثال: در کد مثال عملی زیر یک لیست نشان دار یا Badge List ایجاد کرده ایم. روال کار همانند یک لیست ساده بوت استرپ 4 است. با این تفاوت که برای اضافه کردن Badge یک تگ مثل با کلاس .badge و یکسری کلاس کمکی دیگر، درون هر آیتم لیست قرار داده ایم:
              مثال 9
               
              • Inbox
                12
              • Ads
                50
              • Junk
                99
                 
                نکته :
                می توانید اعداد درون Badge را به صورت ایستاتیک تعریف کرده یا با استفاده از jQuery و Ajax آن را به صورت دینامیک نیز تغییر دهید.
                آموزش بوت استرپ 4 ادامه دارد
                برچسب ها: آموزش طراحی سایت, دوره آموزش BootStrap 4, آموزش bootstrap 4, آموزش بوت استرپ, کتاب آموزش بوت استرپ, فیلم آموزش بوت استرپ, فیلم آموزش bootstrap 4, دانلود آموزش bootstrap 4,

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

                پیمان کلانتری جمعه ۰۶ دی ۹۸ | ۱۳:۲۳ ۹۳ بازديد
                سلام با آموزش Bootstrap 4 در خدمت شما هستیم در قسمت قبل کار با نوار پیشرفت در Bootstrap4 آشنا شدیم.
                حال با ادامه آموزش بوت استرپ 4 همراه باشید:
                آموزش ایجاد چرخنده Sppiner در Bootstrap 4:
                برای ایجاد یک شکلک چرخنده (Sppiner) یا آیکون لود (loader) در بوت استرپ 4، از یک المنت با کلاس spinner-border، استفاده کنید.
                مثال: در کد مثال زیر، به وسیله یک تگ
                با کلاس .spinner-boarder، یک چرخنده در حال لود ایجاد کرده ایم:
                دوره آموزش BootStrap 4
                 
                مثال 1
                نکته :
                رنگ پیش فرض چرخنده (Spiner) در بوت استرپ 4، مشکی (Black) است.
                آموزش ساخت چرخنده Spiner رنگی در بوت استرپ 4:
                با استفاده از کلاس های رنگی متنی ویژه بوت استرپ 4 (سری- text)، همانند کد مثال عملی زیر، می توانید چرخنده Spiner با رنگ های مختلف و مفهومی ایجاد کنید :
                آموزش ساخت چرخنده های بزرگ شونده Growing Spinner:
                اگر از کلاس .spinner-grow به جای .spinner-border استفاده کنید، چرخنده یا Spiner ایجاد شده، به جای چرخیدن، از سایز کوچک شروع شده و بزرگ می شود. در کد مثال عملی زیر، نحوه استفاده از این کلاس و خروجی آن را نشان داده ایم:
                مثال 3
                آموزش ساخت دکمه با چرخنده های متحرک در بوت استرپ 4:
                می توانید یک المنت با کلاس .spinner-border یا .spinner-grow را درون یک دکمه یا button قرار داده و آن را به یک دکمه لود تبدیل کنید. در این حالت می توانید برای دکمه متن نیز تعیین کرده یا خالی بگذارید.
                مثال: در کد مثال عملی زیر، نحوه ایجاد انواع دکمه با چرخنده های متحرک در Bootstrap 4 را نشان داده ایم:
                مثال 5
                 
                Loading..
                 
                Loading..
                 
                Loading..
                آموزش صفحه بندی Pagination در Bootstrap 4:
                اگر سایتی دارید که دارای تعدادی زیادی صفحه است، حتما نیاز پیدا خواهید کرد صفحه بندی یا Pagination ی همانند زیر را برای پیمایش صفحات سایت ایجاد نمایید :

                 

                 

                 

                برای ایجاد یک صفحه بندی Pagination ساده در صفحات وب سایت تان با ستتفاده از بوت استرپ 4، ابتدا یک تگ
                در کد مثال عملی زیر، نحوه ایجاد یک صفحه بندی Pagination کامل در Bootstrap 4 را نشان داده ایم:
                مثال 1
                • Previous
                • 1
                • 2
                • 3
                • Next
                  • دوره آموزش BootStrap 4
                  آموزش فعال کردن شماره صفحه جاری (Active State) در Pagination:
                  در صورت اعمال کلاس .active به یکی از آیتم های
                • لیست
                    در صفحه بندی Bootstrap 4، شماره آن صفحه (که صفحه جاری خواهد بود) به صورت رنگی و توپر نشان داده می شود :

                  •  

                   

                   

                  مثال : در کد مثال زیر، صفحه 2 را با استفاده از کلاس .active، به عنوان صفحه جاری نشان داده ایم :
                  مثال 2
                  • Previous
                  • 1
                  • 2
                  • 3
                  • Next
                    • آموزش غیر فعال کردن لینک یک صفحه در صفحه بندی Pagination:
                    در صورت اعمال کلاس .disabled به لینک یک صفحه در صفحه بندی Bootstrap 4، لینک آن صفحه به صورت غیر فعال نشان داده شده و کاربر نمی تواند بر رویش کلیک نماید :

                     

                     

                     

                     
                    مثال : در کد مثال زیر، با استفاده از کلاس .disabled، لینک صفحه قبل (Previous) را غیر فعال کرده ایم:
                    مثال 3
                    • Previous
                    • 1
                    • 2
                    • 3
                    • Next
                      • آموزش تعیین سایز دکمه های صفحه بندی Pagination:
                      اندازه دکمه ها که در مثال های صفحه بندی Pagination Bootstrap 4، تاکنون در این درس مشاهده کردید، سایز متوسط یا پیش فرض بوت استرپ 4 است.
                      می توانید سایز بزرگ تر یا کوچک تر از حالت پیش فرض نیز برای دکمه ها تعیین کنید :

                       

                       

                       

                      با اعمال کلاس .pagination-lg به تگ مادر صفحه بندی (
                        )، دکمه ها به صورت بزرگ تر و با کلاس .pagination-sm، دکمه های به صورت کوچکتر نشان داده خواهند شد :
                      مثال 4

                      Large:

                      • Previous
                      • 1
                      • 2
                      • 3
                      • Next
                        •  

                        Default:

                        • Previous
                        • 1
                        • 2
                        • 3
                        • Next
                          •  

                          Small:

                          • Previous
                          • 1
                          • 2
                          • 3
                          • Next
                            • آموزش تعیین جهت قرارگیری صفحه بندی Pagination Alignment:
                            به صورت پیش فرض در بوت استرپ 4، دکمه های صفحه بندی Pagination از سمت چپ تراز می شوند اما از کلاس های ویژه utility در Bootstrap 4 برای وسط چین یا راست چین کردن آن ها می توانید استفاده کنید :

                             

                             

                             

                            مثال: در کد مثال عملی زیر، از کلاس ویژه کاربردی بوت استرپ 4 (utility Classess) استفاده کرده و جهت چینش در منوی صفحه بندی دوم و سوم را به دلخواه تغییر داده ایم :
                            مثال 5
                            • ...
                              •  
                              • ...
                                •  
                                • ...
                                  • راهنمایی :
                                  در بخش آموزش کلاس های کاربردی بوت استرپ 4 به آموزش کار با Bootstrap Utility Class پرداخته شده است.
                                  آموزش ایجاد صفحه بندی خطی Breadcrumb Pagination:
                                  مدل دیگه ای از صفحه بندی و ایجاد منوی صفحات در Bootstrap 4، منوی خطی یا نوار پیمایش افقی (به انگلیسی Breadcrumb) است. در این مدل منو، کل مسیر طی شد تا صفحه جاری نمایش داده می شود :

                                   

                                   

                                   

                                  مثال : برای ایجاد یک منوی خطی Breadcrumb در بوت استرپ 4، بایستی کلاس .breadcrumb را به تگ
                                    بدهید، پس برای هریک از آیتم های
                                  • لیست
                                      ، کلاس .breadcrumb-item را تعیین کنید :
                                  مثال 6
                                  • Photos
                                  • Summer 2017
                                  • Italy
                                  • Rome
                                    • دوره آموزش بوت استرپ 4 ادامه دارد
                                    برچسب ها: آموزش طراحی سایت, دوره آموزش BootStrap 4, آموزش bootstrap 4, آموزش بوت استرپ, کتاب آموزش بوت استرپ, فیلم آموزش بوت استرپ, فیلم آموزش bootstrap 4, دانلود آموزش bootstrap 4,

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

                                    پیمان کلانتری جمعه ۰۶ دی ۹۸ | ۱۰:۵۷ ۱۰۶ بازديد
                                    سلام با آموزش Bootstrap 4 در خدمت شما هستیم در قسمت قبل گروه بندی دکمه ها Button و کار با نشان برجسته Badges در Bootstrap4 آشنا شدیم.
                                    حال با ادامه آموزش بوت استرپ 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 ، ایجاد کرده ایم:
                                    دوره آموزش BootStrap 4
                                     
                                    مثال 1
                                    آموزش تنظیم ارتفاع Progress Bar در Bootstrap 4:

                                     

                                     

                                     

                                    ارتفاع نوار پیشرفت یا Progress Bar به صورت پیش فرض در بوت استرپ 4 ، مقدار 16 پیکسل است. می توانید از خاصیت ارتفاع CSS height برای تغییر آن به میزان دلخواه استفاده کنید. فقط توجه داشته باشید که مقدار خاصیت ارتفاع (height) در عنصر دربرگیرنده یا Container و عنصر یا عناصر فرزند، بایستی به یک اندازه باشد.
                                    مثال عملی: در کد مثال عملی زیر، یک نوار پیشرفت Progress Bar با ارتفاع 20 پیکسل را ایجاد کرده ایم:
                                    مثال 2
                                    آموزش نمایش متن در Progress Bar بوت استرپ 4 :

                                     

                                     

                                     

                                    می توانید با قرار دادن متن درون عنصر فرزند آیتم نوار پیشرفت در Bootstrap 4 میزان پیشرفت کار را به صورت متنی نیز نشان دهید.
                                    دقت نمایید که این متن را می توانید با استفاده از جاوا اسکریپت یا jQuery به صورت داینامیک نیز تغییر دهید.
                                    مثال: در کد مثال عملی زیر، با قرار دادن عدد 70% درون تگ
                                    عنصر فرزند نوار پیشرفت، میزان حجم جلورفت کار را به صورت متنی نیز نشان داده ایم:
                                    مثال 3
                                     
                                    70%
                                    آموزش ایجاد نوار پیشرفت رنگی در Bootstrap 4:

                                     

                                     

                                     

                                    در Bootstrap 4 به صورت پیش فرض رنگ نوار پیشرفت آبی (کلاس primary) است. می توانید از کلاس های متنی رنگی بوت استرپ 4 ، که در بخش های گذشته آموزش دادیم، برای تعیین رنگ دلخواه Progress Bar استفاده کنید.
                                    مثال: در کد مثال عملی زیر، با استفاده از کلاس های متنی رنگی Bootstrap 4 رنگ پس زمینه (برای مثال .bg-success برای رنگ سبز)، نوار پیمایش ها را تغییر داده ایم:
                                    مثال 4
                                     
                                     
                                     
                                     
                                     
                                     
                                     
                                     
                                     
                                    ایجاد نوار پیشرفت راه راه Striped Progress Bar در بوت استرپ 4 :

                                     

                                     

                                     

                                    از کلاس ویژه .progress-bar-striped می توانید جهت راه راه کردن بخش رنگی نوار پیشرفت در Bootstrap 4 استفاده کنید:
                                    مثال 5
                                     
                                    نکته :
                                    کلاس .progress-bar-striped بایستی به عنصر یا عناصر فرزند نوار پیشرفت بوت استرپ 4 ، اضافه شوند نه عنصر مادر یا Container.
                                    آموزش bootstrap 4
                                     
                                    آموزش ایجاد نوار پیشرفت متحرک Animated Progress Bar:
                                    در صورت اضافه کردن کلاس .progress-bar-animated به عنصر سازنده نوار پیشرفت و استفاده همزمان از کلاس .progress-bar-strped، خط های راه راه قسمت پر شده در نوار پیشرفت، حالت متحرک و پویا پیدا می کنند. برای درک بهتر مثال عملی زیر را مشاهده کنید :
                                    مثال 6
                                    آموزش ایجاد نوار پیمایش چندگانه Multiple Progress Bar:
                                    می توانید با قرار دادن چندین المنت با کلاس .progress-bar درون یک المنت مادر با کلاس .progress که هر کدام از عناصر فرزند درصدی بین 0 تا 100 دارند، یک نوار پیمایش چندگانه و با رنگ های مختلف (با استفاده از کلاس های رنگی متنی ویژه Bootstrap 4)، همانند عکس زیر ایجاد نمایید :

                                     

                                     

                                     

                                    Free Space
                                    Warning
                                    Danger
                                    آموزش بوت استرپ ادامه دارد
                                    برچسب ها: دوره آموزش BootStrap 4, آموزش bootstrap 4, آموزش بوت استرپ, کتاب آموزش بوت استرپ, آموزش طراحی سایت, فیلم آموزش bootstrap 4, دانلود آموزش bootstrap 4,

                                    آموزش Bootstrap -کار با دکمه Button در Bootstrap 4

                                    پیمان کلانتری چهارشنبه ۰۴ دی ۹۸ | ۱۳:۰۳ ۸۵ بازديد
                                    سلام با

                                    آموزش Bootstrap 4

                                    در خدمت شما هستیم در قسمت قبل با کار با عکس و تصویر , jumbotron و کار با کادر هشدار Alert Box در Bootstrap4 آشنا شدیم.
                                    آموزش کار با دکمه Button در Bootstrap 4:
                                    چهارچوب کاری بوت استرپ 4، چندین استایل و رنگ مختلف دکمه دارد که از هر کدام می توانید برای منظور خاصی استفاده کنید.مثلا یک دکمه برای عملیات تأیید مناسب است و دکمه دیگر برای اعلام خطر به کاربر. در شکل زیر، انواع مختلف دکمه های Bootstrap 4 با ظاهرهای گوناگون را نشان داده ایم:
                                     
                                    مثال: در کد مثال عملی زیر، نحوه ایجاد انواع مختلف دکمه های (Button) بوت استرپ 4 به همراه خروجی آن را نشان داده ایم:
                                    مثال:
                                    کلاس های ویژه دکمه (Button) در بوت استرپ را می توانید به تگ های لینک ، دکمه
                                    مثال 2
                                    Link Button
                                    راهنمایی : چرا در خاصیت آدرس برخی لینک ها (href) مقدار # قرار می دهیم؟
                                    چنانچه برای یک لینک آدرس مشخصی وجود ندارد و نمی خواهید کاربر با کلیک بر روی آن، خطای یافت نشدن صفحه (Error 404) را مشاهده نماید، می توانید یک کاراکتر # را در خاصیت آدرس یا href لینک قرار دهید. در مدل های طراحی حرفه ای تر، بهتر است اینگونه لینک ها را به صفحه جستو سایت، هدایت نمایید.
                                    آموزش ایجاد دکمه های بی رنگ outline Button در Bootstrap 4:
                                    دوره آموزش BootStrap 4
                                     
                                    علاوه بر دکمه های رنگی که در بخش قبل اشاره کردیم، بوت استرپ 4 ، هشت مدل دکمه بدون رنگ با خطوط حاشیه و نوشته رنگی را نیز معرفی کرده است، که در شکل زیر مشاهده می کنید:
                                     
                                    مثال: در کد مثال عملی زیر، نحوه ایجاد دکمه های بی رنگ (outline Button) در بوت استرپ را نشان داده ایم:
                                    مثال 3
                                    آموزش تعیین سایز دکمه Button در Bootstrap 4:
                                    با استفاده از 3 کلاس .btn-lg(دکمه بزرگ)، .btn(اندازه عادی) و btn-sm(دکمه کوچک)، می توانید سایز دکمه ها در Bootstrap 4 را تعیین نمایید، همانند شکل زیر:
                                     
                                    کد مثال عملی زیر، نحوه استفاده از کلاس های مختلف اندازه دکمه بوت استرپ را نشان داده است :
                                    مثال 4
                                    آموزش ایجاد دکمه تمام عرض در بوت استرپ:
                                    در صورت اضافه کردن کلاس .btn-block، دکمه به صورت تمام عرض نشان داده شده و کل عرض عنصر دربرگیرنده خود یا صفحه را اشغال می کند. طرز استفاده از این کلاس و خروجی آن را در کد مثال عملی زیر نشان داده ایم:
                                     
                                    آموزش ایجاد دکمه فعال/غیر فعال در بوت استرپ 4 :
                                    در Bootstrap 4 می توانید یک دکمه را به حالت فعال (انگار که کلیک شده) و یا غیر فعال (غیر قابل کلیک کردن) در بیاورید، همانند دو دکمه زیر :
                                     
                                    مثال 6
                                    Disabled Link
                                    کلاس .active، دکمه مورد نظر را به صورت فعال (انگار که کلیک شده است) نشان داده و کلاس .disabled آن را غیر فعال می کند به طوری که کاربر نمی تواند روی آن کلیک نماید. دقت داشته باشید که تگ از خاصیت disabled در HTML پشتیبانی نمی کند بنابراین استفاده از کلاس disabled. در آن، فقط لینک را به صورت ظاهری غیر فعال نشان داده و در عمل، قابل کلیک کردن خواهد بود.
                                    آموزش ایجاد دکمه های چرخنده (spinrer Button) در Bootstrap 4:
                                    در بوت استرپ 4 ، می توانید آیکون های چرخنده (Spinrer) را به یک دکمه اضافه کنید، برای دریافت اطلاعات بیشتر به بخش کار با چرخنده در Bootstrap 4 بروید. شکل زیر، انواع دکمه های Bootstrap 4 را با دکمه چرخنده نشان می دهد :
                                     
                                    در کد مثال عملی زیر، نحوه استفاده از کلاس چرخنده Spinrer در یک دکمه بوت استرپ و خروجی آن را نشان داده ایم:
                                    مثال 7
                                    Loading..
                                    Loading..
                                    Loading..
                                     
                                    دوره آموزش BootStrap 4 ادامه دارد
                                     
                                     
                                    برچسب ها: دوره آموزش BootStrap 4, آموزش bootstrap 4, آموزش بوت استرپ, کتاب آموزش بوت استرپ, فیلم آموزش بوت استرپ, آموزش طراحی سایت, دانلود آموزش bootstrap 4, کتاب آموزش bootstrap 4,

                                    آموزش Bootstrap -عکس و تصویر در Bootstrap 4

                                    پیمان کلانتری سه شنبه ۰۳ دی ۹۸ | ۱۱:۵۹ ۱۰۶ بازديد

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

                                    عکس و تصویر در Bootstrap 4 به 3 حالت کلی زیر نشان داده می شود :

                                    • عکس با گوشه های گرد
                                    • عکس کاملا گرد
                                    • عکس با حالت نمایش کوچک thumbnail

                                     

                                     

                                    آموزش ایجاد تصویر با گوشه های گرد در Bootstrap 4 :

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

                                    انواع نمایش عکس در بوت استرپ 4

                                     


                                    آموزش نمایش عکس به صورت گرد در Bootstrap 4:

                                    کلاس rounded-circle در Bootstrap 4 باعث می شود تا عکس در تصویر (تگ  ) به صورت تمام گرد و دایره نمایش داده شود. همانند کد مثال عملی زیر:

                                    مثال حالت Circle

                                     

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

                                    به کار بردن کلاس .img-thumbnail در تگ ، باعث می شود تا عکس به صورت پیش نمایش، کوچکتر و بند انگشتی همراه با خطوط حاشیه ای باریک نمایش داده شود. همانند کد مثال عملی زیر:

                                    مثال حالت Thumbnail

                                    Cinque Terre
                                     

                                    دوره آموزش BootStrap 4

                                    آموزش تنظیم موقعیت قرارگیری عکس در Bootstrap 4:

                                    به وسیله کلاس .float-right می توانید عکس را راست چین کرده و با کلاس .float-left، تصویر را در صفحه چپ چین کنید.
                                    در کد مثال عملی زیر، عکس اول را راست چین و عکس دوم را چپ چین کرده ایم :

                                    مثال تراز کردن عکس در بوت استرپ

                                    از طرف دیگر، با به کار بردن کلاس های .mx-auto (معادل حالت margin:auto) و کلاس .d-block معادل (خاصیت display : block) در Bootstrap 4، می توان یک عکس را در وسط صفحه یا عنصر مادر قرار داد، همانند کد مثال عملی زیر:

                                    مثال حالت Center

                                     

                                    عکس ها دارای سایزهای مختلفی هستند و صفحه نمایش ها هم عرض و طول های گوناگونی دارند. عکس های واکنش گرا یا Responsive Image به طور خودکار اندازه خود را برای بهترین حالت نمایش در صفحه، بزرگ و کوچک کرده و تنظیم می کنند.
                                    با اضافه کردن کلاس .img-fluid در Bootstrap به تگ ، یک عکس را واکنش گرا می کنید. عکس هدف اندازه خود را بر حسب اندازه عنصر دربرگیرنده اش تنظیم کرده و نمایش می دهد.
                                    به کار بردن کلاس .img-fluid برای یک عکس، خواص max-width:100% و height:auto را به آن می دهد.
                                    در کد مثال عملی زیر، از کلاس .img-fluid برای Responsive کردن عکس استفاده کرده ایم. همانطور که در خروجی مشاهده می کنید، با بزرگ و کوچک کردن صفحه، عکس نیز تغییر کرده و بزرگ و کوچک می شود.

                                    مثال ریسپانسیو کردن عکس

                                    Chania
                                     

                                    آموزش کار با jumbotron در Bootstrap 4

                                    یک jumbotron در Bootstrap 4، یک جعبه بزرگ خاکستری رنگ ایجاد می کند که می توانید برای نمایش اطلاعات مهم و جلب توجه کاربر به نوشته، از آن استفاده کنید.
                                    jumbotron در Bootstrap 4، معمولا عرض کل عنصر دربرگیرنده خود را اشغال می کند، پس زمینه ای خاکستری داشته و نوشته های آن گرد است.

                                    نکته :

                                    درون یک jumbotron می توانید تقریبا هر تگ معتبر HTML ای قرار داده و از المنت های Bootstrap با کلاس مختلف نیز استفاده کنید.

                                    برای ایجاد یک jumbotron بایستی از تگ

                                    با کلاس .jumbotron استفاده نمایید، همانند کد مثال عملی زیر:

                                    مثال jumbotron


                                    Bootstrap Tutorial



                                    Bootstrap is the most popular HTML, CSS...



                                    Bootstrap Tutorial

                                     
                                     

                                    Bootstrap is the most popular HTML, CSS...

                                    آموزش ایجاد یک jumbotron تمام عرض در Bootstrap 4:

                                    اگر می خواهید jumbotron ایجاد شده، تمامی عرض صفحه یا عنصر مادر خود را اشغال کرده و در گوشه های آن گرد نباشد، بایستی از کلاس .jumbotron-fluid با یک عنصر داخلی (مثل تگ) با کلاس .container یا .container-fluid استفاده نمایید. همانند کد مثال عملی زیر:

                                    مثال jumbotron تمام عرض

                                     
                                     

                                    Bootstrap Tutorial

                                     

                                    Bootstrap is the most popular HTML, CSS...


                                    آموزش کار با کادر هشدار Alert Box در Bootstrap4:

                                    چهارچوب کاری بوت استرپ4، روش بسیار ساده ای برای ایجاد کادر هشدار یا Alert Box فراهم کرده است.
                                    کادر هشدار Alert توسط یک تگ

                                    با کلاس .alert ایجاد می شود و از کلاس های متنی کمکی می توانید برای تعیین رنگ نوشته و پس زمینه آن نیز استفاده کنید. این کلاس ها عبارتند از .alert-success، .alert-info، .alert-warning، .alert-danger، .alert-primary، .alert-secondary، .alert-light و .alert-dark که هر کدام مفهوم خاصی را به کاربر نشان می دهند.
                                    در مثال های عملی زیر، انواع کادرهای هشدار با رنگ های مختلف به همراه توضیح و کاربرد هر کدام را نشان داده ایم:

                                     

                                     

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

                                    اطلاع Info : کادر هشدار نشان دهنده یک عمل عادی یا اطلاعات کم اهمیت تر است.

                                    اخطار Warning : کادر هشدار اعلام می کند یک اتفاق به ظاهر خطرناک افتاده و نیازمند توجه کاربر است.

                                    خطر Danger : این کادر بیان گر عمل منفی یا انجام یک عملیات خطرناک است.

                                    مهم Primary : کادر هشدار نشان دهنده یک عمل مهم و قابل توجه است.

                                    رده 2 secondary : در این حالت کادر هشدار اعلام می کند یک عمل با درجه اهمیت کمتر رخ داده است.

                                    تیره Dark : یک کادر هشدار با پس زمینه خاکستری یا تیره نشان داده می شود.

                                    مثال عملی: در کد زیر، یک کادر هشدار را با کلاس های .alert و .alert-success ایجاد کرده و خروجی آن را نشان داده ایم:

                                    مثال 1

                                    Success! You should read this message.
                                     
                                    Success! You should read this message.

                                    آموزش ایجاد لینک Link درون کادر هشدار بوت استرپ 4 :

                                    می توانید درون کادر هشداری که در Bootstrap 4 ایجاد کرده ایم، یک تگ لینک یا با کلاس .alert-link قرار دهید. برنامه لینک را به صورت توپر و با رنگی مشابه رنگ نوشته کادر هشدار نشان می دهد.
                                    در مثال های زیر، انواع حالت لینک در کادرهای هشدار را نشان داده ایم:

                                     

                                     

                                    مثال عملی: کد مثال زیر نحوه قرار دادن یک لینک یا تگ را درون یک کادر هشدار نشان داده است:

                                    مثال 2

                                     
                                    ×Success! Indicates a successful or positive action.

                                    آموزش ایجاد کادر هشدار با قابلیت بسته شدن در Bootstrap 4:

                                    برای این که کادر هشدار ایجاد شده، قابلیت بسته شدن داشته باشد، بایستی کلاس .alert-dismissible را به تگ Alert Box اضافه کنید.
                                    سپس یک لینک یا دکمه (Button) که می خواهید با کلیک بر روی آن، کادر هشدار بسته شده را با کلاس class=”close” و خاصیت data-dismiss=”alert” درون عنصر اصلی کادر هشدار قرار می دهید، همانند کد مثال عملی زیر:

                                    مثال 3

                                    div class="alert alert-success alert-dismissible">
                                      
                                      Success! Indicates a successful or positive action.
                                     
                                     
                                    1Success! Indicates a successful or positive action.
                                     

                                    موجودیت × یا (x) یک HTML Entity یا خاصیت ذاتی HTML است که بیشتر به جای حرف X برای ایجاد یک آیکون یا دکمه بستن، از آن استفاده می شود.

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

                                    با اضافه کردن کلاس های .fade و .show کادر هشدار با جلوه نمایشی و به صورت محو شدن یا ظاهر شدن تدریجی، نمایش داده می شود. نحوه استفاده از این دو کلاس و خروجی آن در مثال زیر نشان داده شده است:

                                    مثال 4

                                     

                                    برای دریافت اطلاعات بیشتر راجع به کادرهای هشدار در بوت استرپ 4 ، به مرجع آموزش کادر هشدار Alert Box در Bootstrap 4 بروید.

                                     

                                     

                                    آموزش bootstrap 4 ادامه دارد



                                    برچسب ها: دوره آموزش BootStrap 4, آموزش bootstrap 4, آموزش بوت استرپ, کتاب آموزش بوت استرپ, آموزش طراحی سایت, فیلم آموزش bootstrap 4, دانلود آموزش bootstrap 4, کتاب آموزش bootstrap 4,

                                    آموزش bootstrap 4 -آموزش کار با جدول

                                    پیمان کلانتری دوشنبه ۰۲ دی ۹۸ | ۱۶:۲۷ ۱۱۰ بازديد
                                    آموزش کار با جدول
                                     
                                     
                                     
                                    سلام با آموزش BootStrap 4 قسمت چهارم در خدمت شما هستیم .در قسمت قبل با آموزش رنگ در بوت استرپ آشنا شدیم.
                                    آموزش کار با جدول (Table) در Bootstrap4:
                                    آموزش ساخت جدول ساده در Bootstrap4:
                                    یک جدول ساده در Bootstrap 4 دارای حاشیه درونی کم و جداکننده های افقی است. کلاس .table، استایل ساده ای همانند خروجی زیر را به جدول ها می دهد :
                                    مثال آموزش ساخت جدول ساده:

                                    Basic Table

                                     

                                    The .table class adds basic styling (light padding and horizontal dividers) to a table:

                                     
                                    Firstname Lastname Email
                                    John Doe john@example.com
                                    Mary Moe mary@example.com
                                    July Dooley july@example.com
                                    آموزش ساخت ردیف های راه راه در جدول Bootstrap 4 :
                                    دوره آموزش BootStrap 4
                                    با اضافه کردن کلاس .table-striped به جدول در Bootstrap 4 ، ردیف های جدول به صورت یک در میان رنگی و سفید (راه راه) می شود. در کد مثال عملی زیر، نحوه استفاده از کلاس .table-striped به صورت عملی نشان داده شده است :
                                    مثال جدول Striped در بوت استرپ

                                    Striped Rows

                                     

                                    The .table-striped class adds zebra-stripes to a table:

                                     
                                    Firstname Lastname Email
                                    John Doe john@example.com
                                    Mary Moe mary@example.com
                                    July Dooley july@example.com
                                    آموزش ساخت جدول با خطوط حاشیه در Bootstrap 4 :
                                    با اضافه کردن کلاس .table-bordered به جدول، خطوط حاشیه به دور کل جدول اضافه می شود. در مثال زیر، نحوه استفاده از این کلاس در عمل نشان داده شده است:
                                    مثال جدول با خطوط حاشیه در بوت استرپ

                                    Bordered Table

                                    The .table-bordered class adds borders on all sides of the table and the cells:

                                    Firstname Lastname Email
                                    John Doe john@example.com
                                    Mary Moe mary@example.com
                                    July Dooley july@example.com
                                    آموزش ساخت ردیف های hover در جدول:
                                    دوره آموزش BootStrap 4
                                    در صورت استفاده از کلاس .table-hover در یک جدول Bootstrap 4 ، در صورت عبور موس (hover) از روی هر ردیف جدول، رنگ پس زمینه آن به خاکستری تغییر می کند، هماننند کد مثال عملی زیر :
                                    مثال جدول hover در بوت استرپ

                                    Hover Rows

                                     

                                    The .table-hover class enables a hover state (grey background on mouse over) on table rows:

                                     
                                    Firstname Lastname Email
                                    John Doe john@example.com
                                    Mary Moe mary@example.com
                                    July Dooley july@example.com
                                    آموزش ساخت جدول سیاه و تیره در Bootstrap 4 :
                                    با اضافه کردن کلاس .table-dark به جدول در Bootstrap 4، جدول با پس زمینه تیره، نوشته سفید و خطوط حاشیه روشن به صورت زیر نمایش داده خواهد شد :
                                    مثال جدول دو رنگ در بوت استرپ

                                    Black/Dark Table

                                    The .table-dark class adds a black background to the table:

                                    Firstname Lastname Email
                                    John Doe john@example.com
                                    Mary Moe mary@example.com
                                    July Dooley july@example.com
                                    آموزش ساخت جدول تیره و راه راه در Bootstrap 4:
                                    در صورت استفاده همزمان از کلاس های .table-darkو .table-striped، جدول با پس زمینه تیره، نوشته سفید و ردیف های یک در میان روشن تر و تیره تر، به صورت راه راه همانند کد زیر، نشان داده می شود :
                                    مثال جدول تیره و راه راه در بوت استرپ

                                    Dark Striped Table

                                     

                                    Combine .table-dark and .table-striped to create a dark, striped table:

                                     
                                    Firstname Lastname Email
                                    John Doe john@example.com
                                    Mary Moe mary@example.com
                                    July Dooley july@example.com
                                    آموزش ساخت جدول تیره با قابلیت hover:
                                    در صورت استفاده همزمان از کلاس های .table-hover و .table-dark جدول به صورت تیره نشان داده شده ولی در هنگام عبور موس از روی هر ردیف، رنگ ردیف کلی روشن تر می شود. همانند کد مثال عملی زیر:
                                    مثال جدول تیره hover در bootstrap


                                    Hoverable Dark Table


                                    The .table-hover class adds a hover effect (grey background color) on table rows:



























                                    Firstname Lastname Email
                                    John Doe john@example.com
                                    Mary Moe mary@example.com
                                    July Dooley july@example.com

                                    آموزش ساخت جدول بدون خطوط در Bootstrap 4 :
                                    اضافه کردن کلاس .table-bordeless، باعث از بین رفتن خطوط درونی و خطوط حاشیه در جدول شده و به صورت ساده نشان داده خواهد شد. همانند کد مثال عملی زیر:
                                    مثال جدول بدون خطوط حاشیه در بوت استرپ

                                    Borderless Table

                                    The .table-borderless class removes borders from the table:

                                    Firstname Lastname Email
                                    John Doe john@example.com
                                    Mary Moe mary@example.com
                                    July Dooley july@example.com
                                    آموزش بوت استرپ ادامه دارد
                                    برچسب ها: دوره آموزش BootStrap 4, آموزش bootstrap 4, آموزش بوت استرپ, کتاب آموزش بوت استرپ, فیلم آموزش بوت استرپ, آموزش طراحی سایت, فیلم آموزش bootstrap 4,

                                    پربحث ترين مطالب

                                    آخرين نظرات

                                    درباره من

                                    آموزشگاه تحلیل داده ارایه دهنده به روز ترین مطالب آموزشی و متدلوژی های برنامه نویسی است که در این زمینه بی رقیب است
                                    جمعه ۲۱ اردیبهشت ۰۳

                                    موضوعات

                                    نويسندگان

                                    آرشيو

                                    برچسب ها

                                    خلاصه آمار

                                    • مجموع نمایش‌ ۲۰,۳۳۳
                                    • مجموع بازدید ۱۳,۰۵۲
                                    • بازدید امروز ۳۶
                                    • بازدید دیروز ۱۴
                                    • مجموع مطالب ۹۴
                                    • مجموع نظرات ۲۱
                                    • افراد آنلاین ۱

                                    من در شبكه هاي اجتماعي

                                    پيوندها

                                    فارسي بلاگ : رسـانه وبلاگ نويسان حرفـه اي