Tlačítka bootstrapu
Styly tlačítek
Bootstrap nabízí různé styly tlačítek:
Pro dosažení výše uvedených stylů tlačítek má Bootstrap následující třídy:
.btn
.btn-default
.btn-primary
.btn-success
.btn-info
.btn-warning
.btn-danger
.btn-link
Následující příklad ukazuje kód pro různé styly tlačítek:
Příklad
<button type="button" class="btn">Basic</button>
<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>
Třídy tlačítek lze použít u prvku <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 mohli odkazovat, a nechceme dostávat zprávu „404“, uvedeme v našich příkladech jako odkaz #. Měla by to být skutečná adresa URL na konkrétní stránku.
Velikosti tlačítek
Bootstrap nabízí čtyři velikosti tlačítek:
Třídy, které definují různé velikosti, jsou:
.btn-lg
.btn-sm
.btn-xs
Následující příklad ukazuje kód pro různé velikosti tlačítek:
Příklad
<button type="button" class="btn btn-primary btn-lg">Large</button>
<button type="button" class="btn btn-primary">Normal</button>
<button type="button" class="btn btn-primary btn-sm">Small</button>
<button type="button" class="btn btn-primary btn-xs">XSmall</button>
Blokovat tlačítka úrovně
Tlačítko úrovně bloku zabírá celou šířku nadřazeného prvku.
.btn-block
Chcete-li vytvořit tlačítko na úrovni bloku, přidejte třídu :
Příklad
<button type="button" class="btn btn-primary btn-block">Button 1</button>
Aktivní/deaktivovaná tlačítka
Tlačítko lze nastavit do aktivního (zobrazí se stisknutého) nebo deaktivovaného (neklikatelné) stavu:
Třída .active
způsobí, že se tlačítko zobrazí jako stisknuté, a třída
.disabled
způsobí, že tlačítko nelze kliknout:
Příklad
<button type="button" class="btn btn-primary active">Active Primary</button>
<button type="button" class="btn btn-primary disabled">Disabled Primary</button>
Kompletní odkaz na tlačítko Bootstrap
Úplnou referenci o všech třídách tlačítek naleznete v naší úplné referenční příručce tlačítek Bootstrap .