Bulma-napin värit - Zentica

Bulma-napin värit - Zentica

Bulmassa painikkeita on saatavana useissa väreissä. Voimme asettaa painikkeen värit vaatimuksemme mukaan. Bulmassa on monia väriluokkia, kaikki luokat on mainittu ja kuvattu alla.

Painikkeiden väriluokat:

  • on valkoinen: Tätä luokkaa käytetään painikkeen valkoisena värinä.
  • on musta: Tätä luokkaa käytetään painikkeen mustalle värille.
  • on valoa: Tätä luokkaa käytetään painikkeen vaaleana värinä.
  • on pimeä: Tätä luokkaa käytetään painikkeen tummalle värille.
  • is-text: Tätä luokkaa käytetään painikkeen tekstimäiseen ulkonäköön.
  • is-ghost: Tätä luokkaa käytetään painikkeen haamumaiseen ulkonäköön.
  • on ensisijainen: Tätä luokkaa käytetään antamaan painikkeen pääväri.
  • is-link: Tätä luokkaa käytetään antamaan painikkeen linkin väri.
  • is-info: Tätä luokkaa käytetään antamaan painikkeen tietoväri.
  • on-menestys: Tätä luokkaa käytetään antamaan painikkeen menestysväri.
  • on-varoitus: Tätä luokkaa käytetään antamaan painikkeen varoitusväri.
  • on vaara: Tätä luokkaa käytetään antamaan painikkeen vaaraväri.

Syntaksi:

<button class="button Colors-classes">...</button>

Alla olevat esimerkit havainnollistavat Bulma-painikkeen värejä.

Esimerkki 1:

HTML

<!DOCTYPE html>

<html>

 

<head>

    <title>Bulma Button Colors</title>

    <link rel='stylesheet'

          href=

</head>

 

<body>

    <button class="button is-white">

      White

    </button>

    <button class="button is-light">

      Light

    </button>

    <button class="button is-dark">

      Dark

    </button>

    <button class="button is-black">

      Black

    </button>

    <button class="button is-text">

      Text

    < /button>

    <button class="button is-ghost">

      Ghost

    </button>

</body>

 

</html>

Lähtö:

Bulma-painikkeen värit

Bulma-painikkeen värit

Esimerkki 2:

HTML

<!DOCTYPE html>

<html>

 

<head>

    <title>Bulma Button Colors</title>

    <link rel='stylesheet'

          href=

</head>

 

<body>

    <div>

        <button class="button is-primary">

          GeeksforGeeks

        </button>

        <button class="button is-link">

          GeeksforGeeks

        </button>

        <button class="button is-info">

          GeeksforGeeks

        </button>

        <button class="button is-success">

          GeeksforGeeks

        </button>

        <button class="button is-warning">

          GeeksforGeeks

        </button>

        <button class="button is-danger">

          GeeksforGeeks

        </button>

    </div>

</body>

 

</html>

Lähtö:

Bulma-painikkeen värit

Esimerkki 3: Voimme myös lisätä kevyen version napin väriin käyttämällä on valoa värinmuuntimeen.

HTML

<!DOCTYPE html>

<html>

 

<head>

    <title>Bulma Button Colors</title>

    <link rel='stylesheet'

          href=

</head>

 

<body>

    <div class="buttons">

        <button class="button is-primary is-light">

            GeeksforGeeks

        </button>

        <button class="button is-link is-light">

            GeeksforGeeks

        </button>

        <button class="button is-info is-light">

            GeeksforGeeks

        </button>

        <button class="button is-success is-light">

            GeeksforGeeks

        </button>

        <button class="button is-warning is-light">

            GeeksforGeeks

        </button>

        <button class="button is-danger is-light">

            GeeksforGeeks

        </button>

    </div>

</body>

 

</html>

Lähtö:

Bulma-painikkeen värit

Viite: https://bulma.io/documentation/elements/button/#colors


Saatat olla kiinnostunut myös