میرممد

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

سید محمد میرعالی

امیدوارم مطالب خوب و کاربردی رو بتونم در سایتم برای شما دوستان قرار بدم.

دسته بندی مطالب آمار سایت
  • کل مطالب : 13
  • کل نظرات : 0
  • افراد آنلاین : 1
  • تعداد اعضا : 0
  • آی پی امروز : 2
  • آی پی دیروز : 11
  • بازدید امروز : 57
  • باردید دیروز : 17
  • گوگل امروز : 0
  • گوگل دیروز : 0
  • بازدید هفته : 169
  • بازدید ماه : 372
  • بازدید سال : 22,881
  • بازدید کلی : 22,881
  • آموزش کار با Button در Bootstrap 4


    در اين مطلب از سايت ميرممد با Button در بوتسترپ نسخه چهار كار خواهيم كرد.دکمه ها در بوتسترپ 4 شامل رنگ بندی های زیر میباشند :

    <button type="button" class="btn">Basic</button>
    <button type="button" class="btn btn-primary">Primary</button>
    <button type="button" class="btn btn-secondary">Secondary</button>
    <button type="button" class="btn btn-success">Success</button>
    <button type="button" class="btn btn-info">Info</button>
    <button type="button" class="btn btn-warning">Warning</button>
    <button type="button" class="btn btn-danger">Danger</button>
    <button type="button" class="btn btn-dark">Dark</button>
    <button type="button" class="btn btn-light">Light</button>
    <button type="button" class="btn btn-link">Link</button>

     

    خروجی کد بالا به ترتیب :

    کلاس های دکمه ای که در بالا با رنگ سبز در کد مشخص شدند رو میتوان در المنت های a و Button و input به شکل زیر استفاده کرد :

    <a href="#" class="btn btn-info" role="button">Link Button</a>
    <button type="button" class="btn btn-info">Button</button>
    <input type="button" class="btn btn-info" value="Input Button">
    <input type="submit" class="btn btn-info" value="Submit Button">

     

    خروجی کد بالا به ترتیب :

    Link Button

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

    کلاس btn-outline-primary در بوتسترپ 4 :

    <button type="button" class="btn btn-outline-primary">Primary</button>

    خروجی کد بالا :

    کلاس btn-outline-secondary در بوتسترپ 4 :

    <button type="button" class="btn btn-outline-secondary">Primary</button>

    خروجی کد بالا :

    کلاس btn-outline-success در بوتسترپ 4 :

    <button type="button" class="btn btn-outline-success">Primary</button>

    خروجی کد بالا :

    کلاس btn-outline-info در بوتسترپ 4 :

    <button type="button" class="btn btn-outline-info">Primary</button>

    خروجی کد بالا :

    کلاس btn-outline-warning در بوتسترپ 4 :

    <button type="button" class="btn btn-outline-warning">Primary</button>

    خروجی کد بالا :

    کلاس btn-outline-danger در بوتسترپ 4 :

    <button type="button" class="btn btn-outline-danger">Primary</button>

    خروجی کد بالا :

    کلاس btn-outline-dark در بوتسترپ 4 :

    <button type="button" class="btn btn-outline-dark">Primary</button>

    خروجی کد بالا :

    کلاس btn-outline-light در بوتسترپ 4 :

    <button type="button" class="btn btn-outline-light text-dark">Primary</button>

    خروجی کد بالا :

    دکمه ها در بوتسترپ چهار دارای سه نوع سایز بزرگ معمولی و کوچیک هستند.در حالت عادی دکمه سایز معمولی هست پس دو کلاس بزرگ و کوچیک رو با هم میبینیم.

    کلاس btn-lg در بوتسترپ 4 :

    <button type="button" class="btn btn-primary btn-lg">Large</button>

    خروجی کد بالا :

    کلاس btn-sm در بوتسترپ 4 :

    <button type="button" class="btn btn-primary btn-sm">Small</button>

    خروجی کد بالا :

    برای تمام عرض کردن یک دکمه هم از کلاس زیر استفاده میکنیم :

    کلاس btn-block در بوتسترپ 4 :

    <button type="button" class="btn btn-primary btn-block">Full-Width Button</button>

    خروجی کد بالا :

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

    <button type="button" class="btn btn-primary">Primary</button>

    <button type="button" class="btn btn-primary active">Active Primary</button>
    <button type="button" class="btn btn-primary disabled">Disabled Primary</button>

    خروجی کد بالا :

    اگر سوالي داشتيد ميتونيد از بخش نظرات كه پايين هستش سوالتونو بپرسيد

    ممنون بابت وقتي كه براي خوندن مطلب گذاشتيد.



    پيشنهاد ميكنم از مطالب زير نيز استفاده كنيد :

    آموزش DocType در HTML 5

    صفحه بندی در Bootstrap 4

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

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

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

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

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

    آموزش استفاده از Tooltip در Bootstrap 4

    آموزش استفاده از تگ video در HTML5

    آموزش كار با تصاوير در Bootstrap 4

    بازدید : 601 سه شنبه 24 مهر 1397 : 16:9 نظرات ()
    ارسال نظر برای این مطلب

    نام
    ایمیل (منتشر نمی‌شود) (لازم)
    وبسایت
    :) :( ;) :D ;)) :X :? :P :* =(( :O @};- :B /:) :S
    نظر خصوصی
    مشخصات شما ذخیره شود ؟ [حذف مشخصات] [شکلک ها]
    کد امنیتیرفرش کد امنیتی