Tlačítka bootstrapu | Vysvětleno

Tento článek vás poučí:

• Jak vyrobit tlačítka v Bootstrapu?
• Jak vytvořit tlačítka osnovy v Bootstrapu?
• Jak upravit velikost tlačítka Bootstrap?
• Jak vytvořit tlačítko na úrovni bloku v Bootstrapu?
• Jak vytvořit tlačítka aktivního stavu v Bootstrapu?
• Jak vytvořit tlačítka zakázaných stavů v Bootstrapu?

Jak vyrobit tlačítka v Bootstrapu?

Bootstrap' btn Třída ” se používá k vytváření tlačítek. Chcete-li přidat stylová tlačítka, můžete použít „ btn “třída s třídou barev, např. btn-úspěch ” pro vytvoření zeleného tlačítka.

V HTML, „ “, “ ', a ' ” tagy s typem “ knoflík “ se používají k vytváření tlačítek. ' btn ” má předdefinovaný styl, který přidává základní styl k prvkům tlačítka.

• Přidat “ ' a ' 'prvky a přiřadit jim' btn ' a ' btn-primární ' třídy.
• Poté přidejte „ ” tag s typem “ knoflík “. Přiřaďte tomu „ btn ' a ' btn-úspěch ” pro úpravu prvních dvou tlačítek jako modré a třetího jako zelené:

Výstup

Jak vytvořit tlačítka osnovy v Bootstrapu?

Chcete-li přidat obrysy tlačítek, použijte Bootstrap “ btn-outline-* ” se používá třída. Ve své syntaxi,“ * “ zde představuje barvu obrysu. Například, ' btn-outline-danger “ umístí červený obrys, “ btn-outline-primary “ nastaví modrý obrys a další.

Analyzujte níže uvedený kód:

Lze pozorovat, že „ další tlačítko “ má modrý obrys, “ zrušení 'tlačítko s červeným obrysem a ' Úspěch Tlačítko “ má styl se zeleným obrysem:

Jak upravit velikost tlačítka Bootstrap?

Některé třídy Bootstrap se používají k úpravě velikosti tlačítek, například:

• “ btn-lg ” se použije k vytvoření velkého tlačítka. Tato třída může zvětšit velikost písma a výplň.
• “ btn-md ” vytvoří středně velké tlačítko.
• “ btn-sm “ vytvoří malé tlačítko.

Příklad

Nyní vytvoříme tři tlačítka s různými velikostmi a srozumitelnými názvy:

Výstup

Jak vytvořit tlačítko na úrovni bloku v Bootstrapu?

Tlačítka na úrovni bloku jsou ta, která drží velikost v plné šířce. Chcete-li vytvořit tlačítka na úrovni bloku, „ btn-blok ” třída se používá následovně

Výstup

Jak vytvořit tlačítka aktivního stavu v Bootstrapu?

Tlačítka aktivního stavu odkazují na tlačítka, která jsou aktuálně aktivní. Tato tlačítka jsou o něco tmavší než obvykle. K vytvoření takových tlačítek použijte Bootstrap “ aktivní ” třída se používá.

Příklad

Níže uvedený kód vytváří dvě tlačítka. První je v normálním stavu, zatímco druhý je aplikován pomocí „ aktivní “třída:

Výstup

Jak vytvořit tlačítka zakázaných stavů v Bootstrapu?

Tlačítka stavu deaktivace odkazují na tlačítka, na která nelze kliknout a nelze je použít. V Bootstrapu je „ zakázáno Třída ” se používá k vytvoření tlačítka stavu deaktivace. ' zakázáno K tomuto účelu lze také použít atribut ”.

Příklad

Podívejte se na níže uvedený příklad:

• První tlačítko není ve vypnutém stavu.
• Druhý využívá „ zakázáno ” pro vytvoření tlačítka stavu deaktivace.
• Třetí používá „ zakázáno ' atribut:

Výstup

Probrali jsme různé aspekty související s tlačítky Bootstrap a jejich stylingem v CSS.

Závěr

' btn Třída ” se používá k vytvoření tlačítek Bootstrap s jednoduchým designem. Chcete-li vytvořit barevná a obrysová tlačítka, „ btn-* ' a ' btn-outline-* “ třídy se používají tam, kde „ * “ symbolizuje jakoukoli barevnou třídu. Například, ' btn-varování “ vytvoří žluté tlačítko, “ btn-outline-warning ” vytvoří žlutě ohraničené tlačítko a mnoho dalších. Aby byla tlačítka aktivní nebo deaktivovaná, použijí se třídy „aktivní“ a „vypnuto“. Tento příspěvek poskytl komplexní průvodce tlačítky Bootstrap.