میرممد

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

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

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

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


    در اين مطلب از سايت ميرممد با Button Groups در بوتسترپ نسخه چهار كار خواهيم كرد.برای استفاده از گروه دکمه ها در بوتسترپ 4 کافیه در تگ div از کلاس btn-group استفاده کنیم و در آن دکمه های خودمونو قرار بدیم.تکه کد استفاده از Button Groups در Bootstrap 4 :

    <div class="btn-group">
      <button type="button" class="btn btn-primary">دکمه یک</button>
      <button type="button" class="btn btn-primary">دکمه دو</button>
      <button type="button" class="btn btn-primary">دکمه سه</button>
    </div>

     

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

    کلاس btn-group-lg در Bootstrap 4 :

    این کلاس نسخه ی بزرگتری از btn-group درست میکند.

    <div class="btn-group btn-group-lg">
      <button type="button" class="btn btn-primary">دکمه یک</button>
      <button type="button" class="btn btn-primary">دکمه دو</button>
      <button type="button" class="btn btn-primary">دکمه سه</button>
    </div>

     

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

    کلاس btn-group-sm در Bootstrap 4 :

    این کلاس نسخه ی کوچکتری از btn-group درست میکند.

    <div class="btn-group btn-group-sm">
      <button type="button" class="btn btn-primary">دکمه یک</button>
      <button type="button" class="btn btn-primary">دکمه دو</button>
      <button type="button" class="btn btn-primary">دکمه سه</button>
    </div>

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

    کلاس btn-group-vertical در Bootstrap 4 :

    این کلاس نسخه ی عمودی از btn-group درست میکند.

    <div class="btn-group btn-group-vertical">
      <button type="button" class="btn btn-primary">دکمه یک</button>
      <button type="button" class="btn btn-primary">دکمه دو</button>
      <button type="button" class="btn btn-primary">دکمه سه</button>
    </div>

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

    ترکیبی از dropdown-menu و btn-group در Bootstrap 4 :

    <div class="btn-group">
      <button type="button" class="btn btn-primary">دکمه یک</button>
      <button type="button" class="btn btn-primary">دکمه دو</button>
      <div class="btn-group">
        <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
           دکمه سه
        </button>
        <div class="dropdown-menu">
          <a class="dropdown-item" href="#">Tablet</a>
          <a class="dropdown-item" href="#">Smartphone</a>
        </div>
      </div>
    </div>

     

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

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

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



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

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

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

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

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

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

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

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

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

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

    آموزش كار با رنگ ها در Bootstrap 4

    بازدید : 195 شنبه 28 مهر 1397 : 21:33 نظرات ()
    ارسال نظر برای این مطلب

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