Bootstrap 4 tlačítka
Styly tlačítek
Bootstrap 4 nabízí různé styly tlačítek:
Příklad
<button type="button" class="btn">Basic</button>
<button type="button" class="btn btn-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>
Třídy tlačítek lze použít na prvcích <a>, <button>, nebo
:<input>
Příklad
<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">
Proč dáváme # do atributu href odkazu?
Protože nemáme žádnou stránku, na kterou bychom odkazovali, a nechceme dostávat zprávu „404“, vložili jsme jako odkaz #. V reálném životě by to samozřejmě měla být skutečná adresa URL na stránku „Vyhledat“.
Obrys tlačítka
Bootstrap 4 nabízí osm tlačítek s obrysem/ohraničením:
Příklad
<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>
Velikosti tlačítek
Použijte .btn-lgtřídu pro velká tlačítka nebo .btn-smtřídu pro malá tlačítka:
Příklad
<button type="button" class="btn btn-primary btn-lg">Large</button>
<button type="button" class="btn btn-primary">Default</button>
<button type="button" class="btn btn-primary btn-sm">Small</button>
Blokovat tlačítka úrovně
Přidáním třídy .btn-blockvytvoříte tlačítko na úrovni bloku, které bude pokrývat celou šířku nadřazeného prvku.
Příklad
<button type="button" class="btn btn-primary btn-block">Full-Width
Button</button>
Aktivní/deaktivovaná tlačítka
Tlačítko lze nastavit do aktivního (zobrazí se stisknutého) nebo deaktivovaného (neklikatelné) stavu:
Třída .activezpůsobí, že se tlačítko zobrazí jako stisknuté, a disabledatribut způsobí, že na tlačítko nelze kliknout. Všimněte si, že prvky <a> nepodporují atribut disabled, a proto musí používat .disabledtřídu, aby vizuálně vypadaly jako zakázané.
Příklad
<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>
Spinner Buttons
K tlačítku můžete také přidat "spinnery", o kterých se dozvíte více v našem BS4 Spinner Tutorial :
Příklad
<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>