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

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

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

دکمه ها (buttons)

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

کلاس های رنگی دکمه ها

درست است دکمه ها نیز از کلاس های رنگی پشتیبانی میکنند مانند آموزش جلسه قبل که گفتیم برای ساخت کلاس های رنگی لازم است از کلاس alert به اضافه کلاس رنگی استفاده کنید که خروجی آن میشد alert-success در دکمه ها هم ما از کلاس پیش فرض btn استفاده میکنیم حال کافیست کلاس رنگی را به btn اضافه کنیم که میشود btn-success ما کلاس های رنگی مختلف را برای شما لیست میکنیم و هر کدام را توضیح میدهیم:

• btn-primary :  به کمک این کلاس میتوانید دکمه به رنگ آبی بسازید.
• btn-secondary : به کمک این کلاس دکمه به رنگ خاکستری میتوان ساخت.
• btn-success : این کلاس دکمه با رنگ سبز به شما میدهد.
• btn-info : رنگ این کلاس آبی کمرنگ است.
• btn-warning : به کمک این کلاس میتوانید دکمه با رنگ نارنجی بسازید.
• btn-danger :این کلاس رنگ قرمز به دکمه های شما میدهد.
• btn-dark : اگر میخواهید دکمه ای با رنگ تیره بسازید این کلاس مناسب است
• btn-light :اگر میخواهید دکمه با رنگ روشن و سفید بسازید از این کلاس کمک بگیرید.
• btn-link : این کلاس رنگ خاصی ندارد و برای ساخت دکمه به حالت لینک استفاده میشود.

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

<button type="button" class="btn btn-success">Success</button>

ساخت دکمه برای حالت های مختلف

گاهی اوقات شما نمیتوانید از تگ button به صورت مستقیم استفاده کنید فرض کنید لینکی دارید که میخواهید آن را تبدیل به دکمه کنید یا تگ های input دارید که قصد تبدیل آنها به دکمه را دارید. اگر شما تگ a دارید و قصد تبدیل آن به دکمه را دارید کافیست به تگ a خود کلاس btn و بعد از آن کلاس رنگی مد نظر را اضافه کنید مثلا btn-success علاوه بر این مورد باید attribute با نام role و با مقدار button را به آن اضافه کنید برای واضح شدن موضوع از کد زیر کمک بگیرید:

<a href="#" class="btn btn-success" role="button">Link Button</a>

اگر میخواهید به Input ها حالت دکمه بدهید کافیست به آن کلاس btn و بعد هم کلاس رنگی مد نظر خود را اضافه کنید در input ها نیازی به تعریف role نیست ما برای شما دو مثال میزنیم یکی Input از نوع submit و دیگری از نوع button :

<input type="button" class="btn btn-info" value="Input Button">
<input type="submit" class="btn btn-info" value="Submit Button">

کلاس های رنگی outline

در اول آموزش کلاس های رنگی را توضیح دادیم اما اگر میخواهید حالت دیگری هم داشته باشید میتوانید از این قسمت کمک بگیرید در این کلاس رنگ به border دکمه داده میشود و متن داخل آن و وقتی موس روی آن میرد دکمه رنگ border خود را میگیرد و با آن رنگ پر میشود برای این کار کافیست در کلاس های رنگی قسمت اول بین btn و کلاس رنگ مقدار Outline را اضافه کنید که به صورت btn-outline-success در می آید در این حالت Border دکمه شما و متن آن به رنگ سبز میشود و وقتی موس روی آن میرد کل دکمه با رنگ سبز پر میشود برای واضح شدن موضوع از کد زیر کمک بگیرید:

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

اندازه button ها

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

• حالت default : این حالت همین حالت پیش فرضی است که تا الان از آن استفاده کردیم و نیاز به کلاس ندارد
• btn-lg : اگر قصد ساخت دکمه با اندازه بزرگ را دارید از این کلاس استفاده کنید.
• btn-sm : اگر قصد ساخت دکمه با سایز کوچک را دارید از این کلاس استفاده کنید.

برای واضح شدن موضوع هر دو کلاس را در کد زیر برای شما آورده ایم:

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

دکمه هایی با width:100%

اگر میخواهید دکمه هایی تمام عرض بسازید که در تمام دستگاه ها به خوبی کار کند بوت استرپ برای شما کلاس آن را به وجود آورده و کافیست شما از آن در کد خود استفاده کنید برای این کار کافیست در کنار کلاس btn که ثابت است و کلاس رنگی که بعد آن می آید به عنوان کلاس سوم btn-block را تعریف کنید تا دکمه شما تمام عرض شود برای واضح شدن موضوع میتوانید از کد زیر کمک بگیرید:

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

دکمه های فعال و غیر فعال

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

• دکمه فعال : برای این حالت کافیست به کلاس های قبلی کلاس active اضافه شود
• دکمه غیر فعال : خارج از کلاس کنار تگ button نوشته شود disabled
• لینک به صورت دکمه غیر فعال : به کلاس های مربوط به لینک که بالا توضیح دادیم کلاس disabled اضافه شود.

برای واضح بودن موضوع از کد زیر کمک بگیرید:

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

دکمه های انیمیشنی

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

<button class="btn btn-primary">
    <span class="spinner-border spinner-border-sm"></span>
  </button>

  <button class="btn btn-primary">
    <span class="spinner-border spinner-border-sm"></span>
    Loading..
  </button>
  
  <button class="btn btn-primary" disabled>
    <span class="spinner-border spinner-border-sm"></span>
    Loading..
  </button>
  
  <button class="btn btn-primary" disabled>
    <span class="spinner-grow spinner-grow-sm"></span>
    Loading..
  </button>

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

<!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 Styles</h2>
  <button type="button" class="btn">Basic</button>
  <button type="button" class="btn btn-outline-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>      
</div>
------------------------------------------------------------------
<div class="container">
  <h2>Button Elements</h2>
  <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">
</div>

------------------------------------------------------------------
<div class="container">
  <h2>Button Outline</h2>
  <button type="button" class="btn btn-outline-primary">Primary</button>
  <button type="button" class="btn btn-outline-secondary">Secondary</button>
  <button type="button" class="btn btn-outline-success">Success</button>
  <button type="button" class="btn btn-outline-info">Info</button>
  <button type="button" class="btn btn-outline-warning">Warning</button>
  <button type="button" class="btn btn-outline-danger">Danger</button>
  <button type="button" class="btn btn-outline-dark">Dark</button>
  <button type="button" class="btn btn-outline-light text-dark">Light</button>
</div>
------------------------------------------------------------------
<div class="container">
  <h2>Button Sizes</h2>
  <button type="button" class="btn btn-primary btn-lg">Large</button>
  <button type="button" class="btn btn-primary btn-md">Default</button>    
  <button type="button" class="btn btn-primary btn-sm">Small</button>
</div>
------------------------------------------------------------------
<div class="container">
  <h2>Block Level Buttons</h2>
  <button type="button" class="btn btn-primary btn-block">Button 1</button>
  <button type="button" class="btn btn-success btn-block">Button 2</button>
  <br>
  
  <h2>Large Block Level Buttons</h2>
  <button type="button" class="btn btn-primary btn-lg btn-block">Button 1</button>
  <button type="button" class="btn btn-success btn-lg btn-block">Button 2</button>
  <br>
  
  <h2>Small Block Level Buttons</h2>
  <button type="button" class="btn btn-primary btn-sm btn-block">Button 1</button>
  <button type="button" class="btn btn-success btn-sm btn-block">Button 2</button>
</div>
------------------------------------------------------------------
<div class="container">
  <h2>Button States</h2>
  <button type="button" class="btn btn-primary">Primary Button</button>
  <button type="button" class="btn btn-primary active">Active Primary</button>
  <button type="button" class="btn btn-primary" disabled>Disabled Primary</button>
  <a href="#" class="btn btn-primary disabled">Disabled Link</a>
</div>

------------------------------------------------------------------
<div class="container">
  <h2>Spinner Buttons</h2>
  <p>Add spinners to buttons:</p>
                                        
  <button class="btn btn-primary">
    <span class="spinner-border spinner-border-sm"></span>
  </button>

  <button class="btn btn-primary">
    <span class="spinner-border spinner-border-sm"></span>
    Loading..
  </button>
  
  <button class="btn btn-primary" disabled>
    <span class="spinner-border spinner-border-sm"></span>
    Loading..
  </button>
  
  <button class="btn btn-outline-primary" disabled>
    <span class="spinner-grow spinner-grow-sm text-danger"></span>
    Loading..
  </button>
</div>
</body>
</html>

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

آموزش Bootstrap 4 جلسه هشتم (alert)

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

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

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