سلام برنامه | HiProgram

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

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

دکمه های گروهی (button Groups)

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

برای ساخت دکمه های گروهی باز هم به سراغ کلاس های بوت استرپ میرویم و از آنها کمک میگیریم برای ساخت یک دکمه گروهی ساده نیاز است که شما از کلاس btn-group در قالب یک div استفاده کنید یعنی ابتدا یک div تعریف کنید دکمه های خود را به روش جلسه قبل بسازید و داخل این div با کلاس btn-group قرار دهید به این صورت دکمه ها به هم میچسبند و ظاهر یک منو ساده را به خود میگیرند. برای واضح شدن موضوع میتوانید از کد زیر کمک بگیرید:

<div class="btn-group">
  <button type="button" class="btn btn-primary">Apple</button>
  <button type="button" class="btn btn-primary">Samsung</button>
  <button type="button" class="btn btn-primary">Sony</button>
</div>

اندازه دکمه های گروهی

بوت استرپ برای اینکه بتواند سلیقه های مختلف را پوشش بدهد برای دکمه های گروهی ۳ سایز در نظر گرفته است که کافیست شما از کلاس های آن استفاده کنید و سایز دکمه های خود را به سادگی به صورت گروهی تغییر دهید توجه کنید چون از دکمه های گروهی استفاده میکنید باید این کلاس را به div که ساخته اید بدهید ما این ۳ اندازه را برای شما لیست میکنیم و هر کدام را توضیح میدهیم:

• حالت پیشفرض : در حالت عادی اگر هیچ کلاسی تعریف نشود اندازه متوسط در نظر گرفته میشود.
• کلاس btn-group-lg : به کمک این کلاس میتوانید سایز دکمه ها را بزرگ کنید.
• کلاس btn-group-sm : به کمک این کلاس میتوانید سایز کوچک از دکمه ها داشته باشید.

برای مشخص شدن موضوع ما از هر ۳ حالت برای شما در پایان این مقاله نمونه کدی آماده کرده ایم.

دکمه های گروهی عمودی

تا به اینجای کار هرچه آموزش داده ایم درباره منو ها و دکمه های افقی بود اما بوت استرپ برای ساخت دکمه های عمودی نیز کلاس خاصی دارد کافیست در div خود جای کلاس btn-group از کلاس btn-group-vertical استفاده کنید و به همین راحتی دکمه های گروهی خود را از حالت افقی به حالت عمودی تبدیل کنید توجه کنید که هر ۲ کلاس را در کنار هم قرار ندهید اگر قصد ساخت منو عمودی دارید تنها باید کلاس btn-group-vertical را استفاده کنید برای واضح شدن موضوع از کد زیر کمک بگیرید:

<div class="btn-group-vertical">
  <button type="button" class="btn btn-primary">Apple</button>
  <button type="button" class="btn btn-primary">Samsung</button>
  <button type="button" class="btn btn-primary">Sony</button>
</div>

ساخت منو باز شو (dropdown)

درست است شما به کمک بوت استرپ و دکمه های گروهی میتوانید منو های بازشو بسازید برای اینکار مشابه روش های قبل منو گروهی خود را ایجاد میکنید. برای آن دکمه که میخواهید زیر منو داشته باشد یک div دیگر مشابه div اول با کلاس btn-group میسازید. سپس به دکمه ،که یک کلاس btn و یک کلاس رنگی دارد کلاس dropdown-toggle را نیز اضافه میکنید علاوه بر این مورد نیاز است که یک attribute با نام data-toggle با مقدار dropdown نیز با آن اضافه کنید تا اینجای کار به خود دکمه امکان باز شدن را داده اید حال نوبت ساخت زیر منو ها است .

بعد از بسته شدن تگ button یک div با کلاس dropdown-menu میسازید که بشود قاب زیر منو ما سپس گزینه های منو را با تگ a داخل آن میسازیم و به هرکدام از تگ های a کلاس dropdown-item را میدهیم به همین راحتی شما منویی با قابلیت زیر منو ساخته اید برای واضح شدن موضوع میتوانید از کد زیر کمک بگیرید:

<div class="btn-group">
  <button type="button" class="btn btn-primary">Apple</button>
  <button type="button" class="btn btn-primary">Samsung</button>
  <div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
       Sony
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Tablet</a>
      <a class="dropdown-item" href="#">Smartphone</a>
    </div>
  </div>
</div>

ساخت زیر منو split

split به حالتی گفته میشود که زیر منو جدا از دکمه باز میشود یعنی هم خود دکمه قابلیت کلیک دارد هم زیر منو باز میشود در اصل زیر منو با فلش کنار نوشته باز میشود. برای ساخت این منو مشابه روش قبل عمل میکنیم. با این تفاوت که برای فلش هم یک button مجزا تعریف میکنیم و در کنار کلاس های btn و کلاس رنگی و کلاس dropdown-toggle کلاس جدید dropdown-toggle-split را نیز اضافه میکنیم توجه کنید که attribute با نام data-toggle و مقدار dropdown را فراموش نکنید.

الباقی کار مشابه روش قبل است.برای واضح شدن از کد زیر کمک بگیرید:

<div class="btn-group">
  <button type="button" class="btn btn-primary">Sony</button>
  <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
    <span class="caret"></span>
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Tablet</a>
    <a class="dropdown-item" href="#">Smartphone</a>
  </div>
</div>

زیر منو برای دکمه های عمودی

بالاتر درباره ساخت دکمه های گروهی عمودی صحبت کردیم اما برای ساخت زیر منو برای این دکمه ها کاملا مشابه منو های افقی عمل میکنیم یعنی دکمه ای که قرار است زیر منو داشته باشد را در کنار کلاس های btn و کلاس رنگی آن کلاس dropdown-toggle و attribute آن را اضافه میکنیم و بعد از بسته شدن تگ button یک div با کلاس dropdown-menu میسازیم و داخل آن تگ های a با کلاس dropdown-item قرار میدهیم به همین راحتی برای واضح شدن موضوع از کد زیر کمک بگیرید:

<div class="btn-group-vertical">
  <button type="button" class="btn btn-primary">Apple</button>
  <button type="button" class="btn btn-primary">Samsung</button>
  <div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
       Sony
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Tablet</a>
      <a class="dropdown-item" href="#">Smartphone</a>
    </div>
  </div>
</div>

ساخت دکمه های گروهی کنار هم

اگر قصد دارید دکمه های گروهی مجزایی با تعداد مختلف کنار هم داشته باشید به راحتی میتوانید این کار را انجام دهید کافیست هر چند تا دکمه که میخواهید در یک گروه باشند را در یک div با کلاس btn-group قرار دهید و تعداد دیگر که میخواهید جدا از این دکمه ها باشند را در گروه دیگری به همین راحتی میتوانید چند دسته دکمه گروهی را در کنار همدیگر داشته باشید.

برای شما کدی شامل کد آموزش را آماده کرده ایم:

<!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/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Button Group</h2>
  <p>The .btn-group class creates a button group:</p>
  <div class="btn-group">
    <button type="button" class="btn btn-danger">Apple</button>
    <button type="button" class="btn btn-primary">Samsung</button>
    <button type="button" class="btn btn-primary">Sony</button>
  </div>
</div>
----------------------------------------------------------------------------
<div class="container">
  <h2>Button Groups Sizes</h2>
  <p>Add class .btn-group-* to size all buttons in a button group.</p>
  <h3>Large Buttons:</h3>
  <div class="btn-group btn-group-lg">
    <button type="button" class="btn btn-primary">Apple</button>
    <button type="button" class="btn btn-primary">Samsung</button>
    <button type="button" class="btn btn-primary">Sony</button>
  </div>
  <h3>Default Buttons:</h3>
  <div class="btn-group">
    <button type="button" class="btn btn-primary">Apple</button>
    <button type="button" class="btn btn-primary">Samsung</button>
    <button type="button" class="btn btn-primary">Sony</button>
  </div>
  <h3>Small Buttons:</h3>
  <div class="btn-group btn-group-sm">
    <button type="button" class="btn btn-primary">Apple</button>
    <button type="button" class="btn btn-primary">Samsung</button>
    <button type="button" class="btn btn-primary">Sony</button>
  </div>
</div>

----------------------------------------------------------------------------
<div class="container">
  <h2>Vertical Button Group</h2>
  <p>Use the .btn-group-vertical class to create a vertical button group:</p>
  <div class="btn-group-vertical">
    <button type="button" class="btn btn-primary">Apple</button>
    <button type="button" class="btn btn-primary">Samsung</button>
    <button type="button" class="btn btn-primary">Sony</button>
  </div>
</div>
----------------------------------------------------------------------------

<div class="container">
  <h2>Nesting Button Groups</h2>
  <p>Nest button groups to create dropdown menus:</p>
  <div class="btn-group">
    <button type="button" class="btn btn-primary">Apple</button>
	
	<div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Samsung</button>
	<div class="dropdown-menu">
	<a href="#" class="dropdown-item">sony</a>
	<a href="#" class="dropdown-item" >sony1</a>
	<a href="#" class="dropdown-item" >sony2</a>
	</div>
	</div>
    <div class="btn-group">
      <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
      Sony
      </button>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#">Tablet</a>
        <a class="dropdown-item" href="#">Smartphone</a>
      </div>
    </div>
  </div>
</div>
----------------------------------------------------------------------------

<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-danger">samsung</button>
	<button type="button" class="btn btn-danger dropdown-toggle drapdown-toggle-split" data-toggle="dropdown">
	</button>
	<div class="dropdown-menu">
	 <a href="#" class="dropdown-item" >samsung1</a>
	 <a href="#" class="dropdown-item" >samsung2</a>
	 <a href="#" class="dropdown-item" >samsung3</a>
	</div>
	
    <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
      <span class="caret"></span>
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Tablet</a>
      <a class="dropdown-item" href="#">Smartphone</a>
    </div>
  </div>
</div>

----------------------------------------------------------------------------

<div class="container">
  <h2>Vertical Button Group with Dropdown</h2>
  <div class="btn-group-vertical">
    <button type="button" class="btn btn-primary">Apple</button>
    <button type="button" class="btn btn-primary">Samsung</button>
    <div class="btn-group">
      <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
        Sony
      </button>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#">Tablet</a>
        <a class="dropdown-item" href="#">Smartphone</a>
      </div>
    </div>
  </div>
</div>
----------------------------------------------------------------------------

<div class="container">
  <h2>Button Group</h2>
  <p>Button groups are "inline" by default, which makes them appear side by side when you have multiple groups:</p>
  <div class="btn-group">
    <button type="button" class="btn btn-primary">Apple</button>
    <button type="button" class="btn btn-primary">Samsung</button>
    <button type="button" class="btn btn-primary">Sony</button>
  </div>
  <div class="btn-group">
    <button type="button" class="btn btn-primary">BMW</button>
    <button type="button" class="btn btn-primary">Mercedes</button>
    <button type="button" class="btn btn-primary">Volvo</button>
  </div>
  <div class="btn-group">
  <button type="button" class="btn btn-success">apple</button>
  <button type="button" class="btn btn-success">apple1</button>
  <button type="button" class="btn btn-danger">apple2</button>
  <button type="button" class="btn btn-success">apple3</button>
  </div>
</div>
<br>
</body>
</html>

امیدواریم که این جلسه از آموزش نیز برای شما مفید بوده باشد.

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

آموزش Bootstrap 4 جلسه نهم (button)

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

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

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