Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Oppiskele Tekstin Muotoilu ja Asettelu Bootstrapissa | Peruskäsitteet
Bootstrapin Perusteet Nykyaikaisille Verkkosivustoille

bookTekstin Muotoilu ja Asettelu Bootstrapissa

Tekstin väri

Bootstrap tarjoaa joukon apuluokkia, joilla voidaan asettaa ennalta määritettyjä tekstin värejä elementteihin.

  • text-primary: Asettaa tekstin väriksi ensisijaisen värin, yleensä sinisen sävyn;
  • text-secondary: Asettaa tekstin väriksi toissijaisen värin, usein harmaan sävyn;
  • text-success: Asettaa tekstin väriksi onnistumista osoittavan värin, yleensä vihreän sävyn;
  • text-danger: Asettaa tekstin väriksi vaaran tai virheen osoittavan värin, usein punaisen sävyn;
  • text-warning: Asettaa tekstin väriksi varoituksen osoittavan värin, yleensä keltaisen sävyn;
  • text-info: Asettaa tekstin väriksi tiedon välittämiseen tarkoitetun värin, usein syaanin tai turkoosin sävyn;
  • text-light: Asettaa tekstin väriksi vaaleamman sävyn, tyypillisesti vaaleanharmaan tai valkoisen;
  • text-dark: Asettaa tekstin väriksi tummemman sävyn, tyypillisesti tummanharmaan tai mustan;
  • text-muted: Asettaa tekstin väriksi hillityn tai vaimennetun sävyn, usein vaaleanharmaan, osoittamaan että teksti on vähemmän tärkeä tai pois käytöstä.

Näitä luokkia voidaan käyttää esimerkiksi elementeissä kuten <p>, <span>, <div>, <h> jne.

index.html

index.html

copy

Tekstin muuntaminen

Luokat kuten text-uppercase, text-lowercase, ja text-capitalize muuntavat tekstin muotoa.

  • text-uppercase: Muuntaa tekstin kokonaan isoiksi kirjaimiksi;
  • text-lowercase: Muuntaa tekstin kokonaan pieniksi kirjaimiksi;
  • text-capitalize: Muuttaa jokaisen sanan ensimmäisen kirjaimen isoksi.
index.html

index.html

copy

Tekstin koristelu

Luokkia kuten text-decoration-underline, text-decoration-line-through ja text-decoration-none käytetään tekstin koristeluun.

  • text-decoration-underline: Lisää alleviivauksen tekstiin;
  • text-decoration-line-through: Lisää yliviivauksen tekstiin;
  • text-decoration-none: Poistaa kaikki tekstin koristelut.
index.html

index.html

copy

Oliko kaikki selvää?

Miten voimme parantaa sitä?

Kiitos palautteestasi!

Osio 3. Luku 3

Kysy tekoälyä

expand

Kysy tekoälyä

ChatGPT

Kysy mitä tahansa tai kokeile jotakin ehdotetuista kysymyksistä aloittaaksesi keskustelumme

Awesome!

Completion rate improved to 3.23

bookTekstin Muotoilu ja Asettelu Bootstrapissa

Pyyhkäise näyttääksesi valikon

Tekstin väri

Bootstrap tarjoaa joukon apuluokkia, joilla voidaan asettaa ennalta määritettyjä tekstin värejä elementteihin.

  • text-primary: Asettaa tekstin väriksi ensisijaisen värin, yleensä sinisen sävyn;
  • text-secondary: Asettaa tekstin väriksi toissijaisen värin, usein harmaan sävyn;
  • text-success: Asettaa tekstin väriksi onnistumista osoittavan värin, yleensä vihreän sävyn;
  • text-danger: Asettaa tekstin väriksi vaaran tai virheen osoittavan värin, usein punaisen sävyn;
  • text-warning: Asettaa tekstin väriksi varoituksen osoittavan värin, yleensä keltaisen sävyn;
  • text-info: Asettaa tekstin väriksi tiedon välittämiseen tarkoitetun värin, usein syaanin tai turkoosin sävyn;
  • text-light: Asettaa tekstin väriksi vaaleamman sävyn, tyypillisesti vaaleanharmaan tai valkoisen;
  • text-dark: Asettaa tekstin väriksi tummemman sävyn, tyypillisesti tummanharmaan tai mustan;
  • text-muted: Asettaa tekstin väriksi hillityn tai vaimennetun sävyn, usein vaaleanharmaan, osoittamaan että teksti on vähemmän tärkeä tai pois käytöstä.

Näitä luokkia voidaan käyttää esimerkiksi elementeissä kuten <p>, <span>, <div>, <h> jne.

index.html

index.html

copy

Tekstin muuntaminen

Luokat kuten text-uppercase, text-lowercase, ja text-capitalize muuntavat tekstin muotoa.

  • text-uppercase: Muuntaa tekstin kokonaan isoiksi kirjaimiksi;
  • text-lowercase: Muuntaa tekstin kokonaan pieniksi kirjaimiksi;
  • text-capitalize: Muuttaa jokaisen sanan ensimmäisen kirjaimen isoksi.
index.html

index.html

copy

Tekstin koristelu

Luokkia kuten text-decoration-underline, text-decoration-line-through ja text-decoration-none käytetään tekstin koristeluun.

  • text-decoration-underline: Lisää alleviivauksen tekstiin;
  • text-decoration-line-through: Lisää yliviivauksen tekstiin;
  • text-decoration-none: Poistaa kaikki tekstin koristelut.
index.html

index.html

copy

Oliko kaikki selvää?

Miten voimme parantaa sitä?

Kiitos palautteestasi!

Osio 3. Luku 3
some-alt