Przyciski - instrukcja do szablonu "Ahead"

Ta instrukcja również dotyczy motywów Flow, Vogue i Pipeline!

Używaj stylizowanych przycisków Booststrap do formularzy, okien dialogowych i innych bloków.


<button type="button" class="btn btn-primary btn-lg mb-1">
 
  Large button

</button>

<button type="button" class="btn btn-primary mb-1">
 
  Base button

</button>

<button type="button" class="btn btn-primary btn-sm mb-1">
 
  Small button

</button>

<button type="button" class="btn btn-primary btn-xs mb-1">
 
  Extra Small button

</button>

W kolorze motywu projektu

Ahead only

Klasa Default umożliwia tworzenie przycisków w kolorze wybranym w ustawieniach motywu projektu.


<button class="btn btn-default mb-1">
 
  Default soft

</button>

<button class="btn btn-default-soft mb-1">
 
  Default soft

</button>

<button class="btn btn-default btn-pill mb-1">
 
  Default pill

</button>

Półprzezroczysty

Ahead only

Klasa Soft umożliwia tworzenie przycisków z półprzezroczystym kolorem tła.


        <button class="btn btn-primary-soft">Primary soft</button>
<button class="btn btn-secondary-soft">Secondary soft</button>
<button class="btn btn-success-soft">Success soft</button>
<button class="btn btn-danger-soft">Danger soft</button>
<button class="btn btn-warning-soft">Warning soft</button>
<button class="btn btn-info-soft">Info soft</button>

Zaokrąglony

Ahead only

Tworzy zaokrągloną odmianę komponentu przycisku.


        <button class="btn btn-primary btn-pill btn-lg">
  Button pill
</button>

<button class="btn btn-success btn-pill">
  Button pill
</button>

<button class="btn btn-danger btn-pill btn-sm">
  Button pill
</button>

Okrągłe przyciski

Ahead only

Użyj tej klasy .btn-rounded-cirle aby utworzyć okrągły przycisk.


<button class="btn btn-primary btn-rounded-circle btn-lg mb-1">
 
  <i class="icon icon-xxs">
  
    {call include_icon icon="feather/check"}
 
  </i>

</button>

<button class="btn btn-success-soft btn-rounded-circle mb-1">
 
  <i class="icon icon-xxxs">
  
    {call include_icon icon="feather/check"}
 
  </i>

</button>

<button class="btn btn-danger-soft btn-rounded-circle btn-sm mb-1">
 
  <i class="icon icon-xxxxs">
  
    {call include_icon icon="feather/check"}
 
  </i>

</button>

Błąd w tekście? Zaznacz ją myszką i kliknij Ctrl + F1 lub kliknij na ten blok!