نمادها

شما اینجا هستید

آموزش Bootstrap جلسه دوازدهم(Group Button)

در خدمت شما هستیم با آموزش Bootstrap جلسه دوازدهم(Group Button)

آموزش Bootstrap جلسه دوازدهم(Group Button) از سری آموزش های تک قسمتی است

سلام برنامه در این جلسه درباره Group کردن دکمه ها بحث می کند

دکمه های گروهی چه فایده ای دارند؟ به کمک این دکمه ها می توانید منو طراحی کنید

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

در حالت عادی مرزی بین دکمه هایی که در کنار هم قرار دارند وجود دارد که وقتی آن ها را گروه می کنیم آن مرز حذف میشود

به واسطه دکمه های گروهی میتوانید لیستی از دکمه ها را نیز بسازید.

 

آموزش Group Button

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

از دکمه های گروهی میتوانید استفاده های زیادی بکنید مثل ساخت منو البته به شرطی که زیر منو لازم نباشد.
خوبی این نوع دکمه ها این است که میتوانید با col ها که جلسات ابتدایی معرفی کردیم آنها را رسپانسیو کنید.

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

  • btn-group : با این کلاس میتوانید دکمه های گروهی را ایجاد کنید.
  • btn-danger و btn-primary : این کلاس ها که در جلسه قبل هم گفته شد برای رنگ دادن به دکمه ها استفاده میشوند.
  • btn-group-lg : این کلاس مشابه col ها دارای حالات lg ، md ، sm ،xs است که سایز های مختلف ایجاد میکند.
  • btn-group-vertical : این کلاس برای شما دکمه های موی میسازد.
  • btn-group-justified : این کلاس دکمه ها را justify میکند و یک خط را با آن پر میکند.

اگر بخواهید با این روش زیر منو بسازید مثال زیر مورد مناسبی است که این کار را برای شما میکند.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Split Buttons</h2>
  <div class="btn-group">
    <button type="button" class="btn btn-primary">Sony</button>
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu">
      <li><a href="#">Tablet</a></li>
      <li><a href="#">Smartphone</a></li>
    </ul>
  </div>
</div>

</body>
</html>

اگر کد بالا را خروجی بگیرید و استفاده کنید دکمه ای با زیر منو میبینید.

می توانید دیگر قسمت ها را در لینک زیر ببینید

آموزش Bootstrap جلسه یازدهم (Button)

آموزش Bootstrap جلسه سیزدهم(Glyphicons)

 

شما می توانید این آموزش را به صورت آنلاین از ویدیو زیر ببینید

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

میانگین امتیاز / 5. تعداد آرا:

اولین کسی باشید که رای میدهید


این یک فایل mp4 تصویری است که با پلیر های ویدیویی قابل اجرا می باشد

دانلود آموزش Bootstrap جلسه دوازدهم(Group Button): نوع فایل:mp4 حجم فایل:39.18 مگابایت

هر پلیر اجرا کننده فایل ویدیویی

2 دیدگاه برای “آموزش Bootstrap جلسه دوازدهم (Group Button)”

  1. kamal tohidi گفت:

    مثل همیشه عالی ممنون .تونستم باهاش منو بسازم

  2. میثم گفت:

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

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

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