آموزش بوت استرپ – قسمت هفتم

آموزش بوت استرپ

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

Bootstrap Buttons
Bootstrap Button Groups
Bootstrap Glyphicons

با developzoom همراه باشید.

Bootstrap Buttons:

از نظر ظاهری در بوت استرپ ۷ نوع دکمه طراحی شده:

استایل دکمه های بوت استرپ

دکمه ها در بوت استرپ

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

  • “btn-default”
  • “btn-primary”
  • “btn-success”
  • “btn-info”
  • “btn-warning”
  • “btn-danger”
  • “btn-link”

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

<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</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-link">Link</button>

کلاسهایی که در بالا ذکر شد حتما نباید با تگ button استفاده شوند بلکه شما می توانید از این کلاسها در تگ های a ,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">

اندازه دکمه ها در بوت استرپ

بوت استرپ ۴ اندازه برای دکمه های خود در نظر گرفته است
انواع دکمه در بوت استرپ
از چهار کلاس زیر می توانید برای اندازه دادن به دکمه های خود در بوت استرپ استفاده کنید:

  • “btn-lg”
  • “btn-md”
  • “btn-sm”
  • “btn-xs”

مثال استفاده از این کلاس ها را در کد زیر می توانید ببینید:

<button type="button" class="btn btn-primary btn-lg">Large</button>
<button type="button" class="btn btn-primary btn-md">Medium</button>
<button type="button" class="btn btn-primary btn-sm">Small</button>
<button type="button" class="btn btn-primary btn-xs">XSmall</button>

Block Level Buttons

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

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

فعال و غیر فعال کردن دکمه ها در بوت استرپ

شما می توانید دکمه ها را در بوت استرپ به راحتی فعال و غیرفعال کنید.
کلاس های active و disabled برای این کار در نظر گرفته شده اند. مثال:

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

Button Groups

شما در بوت استرپ می توانید چند دکمه را با هم و در یک خط در یک گروه داشته باشید:
Button Groups
برای استفاده از این خاصیت کافیست از یک 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>

نکته: شما می توانید به جای اینکه هر دکمه را به صورت جداگانه اندازه دهی نمایید(با استفاده از کلاس های اندازه که در بالا گفته شد) از کلاس
btn-group-*(به جای ستاره از کلاس های اندازه استفاده کنید) برای همه استفاده نمایید. مثال:


<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>

Vertical Button Groups

شما می توانید به صورت عمودی نیز از Button Groups استفاده کنید:
bootstrap-vertical-button-groups
برای ساختن Vertical Button Groups می توانید از کلاس 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>

Justified Button Groups

دکمه های Justified در بوت استرپ، مثال:


<div class="btn-group btn-group-justified">
  <a href="#" class="btn btn-primary">Apple</a>
  <a href="#" class="btn btn-primary">Samsung</a>
  <a href="#" class="btn btn-primary">Sony</a>
</div>

Nesting Button Groups & Dropdown Menus

Nesting Button Groups & Dropdown Menus

ساختن منو dropdown، مثال:


<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 <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>

Split Button Dropdowns

Split Button Dropdowns


<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>

Bootstrap Glyphicons

بوت استرپ دارای ۲۶۰ آیکون می باشد که به راحتی و با یک کلاس می توانید از آنها در نوشته، دکمه ها، فرم ها و… استفاده کنید. در زیر چند مثال از این آیکون ها را به شما نشان می دهیم و بعد طریقه استفاده از آنها را برایتان شرح خواهیم داد:
Bootstrap Glyphicons

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

<span class="glyphicon glyphicon-name"></span>

به جای کلمه name شما باید نام آیکون مورد نظر خودتون رو قرار بدین.
مثال کلی و کاربردی تر:



Envelope icon: <span class="glyphicon glyphicon-envelope"></span>

 


Envelope icon as a link:
  <a href="#"><span class="glyphicon glyphicon-envelope"></span></a>




Search icon: <span class="glyphicon glyphicon-search"></span>



Search icon on a button:
  <button type="button" class="btn btn-default">
    <span class="glyphicon glyphicon-search"></span> Search
  </button>




Search icon on a styled button:
  <button type="button" class="btn btn-info">
    <span class="glyphicon glyphicon-search"></span> Search
  </button>




Print icon: <span class="glyphicon glyphicon-print"></span>

 


Print icon on a styled link button:
  <a href="#" class="btn btn-success btn-lg">
    <span class="glyphicon glyphicon-print"></span> Print 
  </a>


لینک دسترسی به همه آیکون های بوت استرپ
Bootstrap Glyphicon
امیدوارم این قسمت از آموزش بوت استرپ برای کاربران عزیز مفید بوده باشه.

برچسب ها

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

0 دیدگاه در “آموزش بوت استرپ – قسمت هفتم”

پاسخ دهید

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

کد امنیتی را در کادر زیر بنویسید *