in English

Typografia

Dokumentaatio ja esimerkkejä Bootstrap-typografiasta, mukaan lukien yleiset asetukset, otsikot, leipäteksti, luettelot ja paljon muuta.

Tällä sivulla

Yleiset asetukset

Bootstrap määrittää yleiset perusnäytöt, typografian ja linkityylit. Kun tarvitaan enemmän hallintaa, tutustu tekstimuotoisiin hyödyllisyysluokkiin .

Käytä alkuperäistä kirjasinpinoa , joka valitsee font-familykullekin käyttöjärjestelmälle ja laitteelle parhaan.
Kattavamman ja helppokäyttöisemmän tyyppiasteikon saamiseksi käytämme selaimen font-sizeoletusjuurta (yleensä 16 kuvapistettä), jotta vierailijat voivat mukauttaa selaimensa oletusasetuksia tarpeen mukaan.
Käytä attribuutteja $font-family-base, $font-size-baseja $line-height-baseattribuutteja typografisena perustana, jota sovelletaan <body>.
Aseta yleinen linkin väri käyttämällä $link-color.
Käytä $body-bgasettaaksesi a background-colorkohtaan <body>( #fffoletuksena).

Nämä tyylit löytyvät sisällä _reboot.scssja globaalit muuttujat määritellään _variables.scss. Muista ottaa $font-size-basekäyttöön rem.

Otsikot

Kaikki HTML-otsikot, alkaen , ovat saatavilla <h1>.<h6>

Otsikko	Esimerkki
`<h1></h1>`	h1. Bootstrap otsikko
`<h2></h2>`	h2. Bootstrap otsikko
`<h3></h3>`	h3. Bootstrap otsikko
`<h4></h4>`	h4. Bootstrap otsikko
`<h5></h5>`	h5. Bootstrap otsikko
`<h6></h6>`	h6. Bootstrap otsikko

<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>

.h1kautta .h6luokat ovat myös saatavilla, kun haluat sovittaa otsikon kirjasintyyliä, mutta et voi käyttää siihen liittyvää HTML-elementtiä.

h1. Bootstrap otsikko

h2. Bootstrap otsikko

h3. Bootstrap otsikko

h4. Bootstrap otsikko

h5. Bootstrap otsikko

h6. Bootstrap otsikko

html

<p class="h1">h1. Bootstrap heading</p>
<p class="h2">h2. Bootstrap heading</p>
<p class="h3">h3. Bootstrap heading</p>
<p class="h4">h4. Bootstrap heading</p>
<p class="h5">h5. Bootstrap heading</p>
<p class="h6">h6. Bootstrap heading</p>

Otsikoiden mukauttaminen

Käytä mukana toimitettuja hyödyllisyysluokkia luodaksesi uudelleen pienen toissijaisen otsikon tekstin Bootstrap 3:sta.

Näytön hieno otsikko Haalistunut toissijainen teksti

html

<h3>
  Fancy display heading
  <small class="text-muted">With faded secondary text</small>
</h3>

Näytä otsikot

Perinteiset otsikkoelementit on suunniteltu toimimaan parhaiten sivusi sisällön sisällössä. Kun tarvitset otsikon erottuaksesi joukosta, harkitse näytön otsikon käyttöä – suurempaa, hieman mielipiteellisempää otsikotyyliä.

Näyttö 1

Näyttö 2

Näyttö 3

Näyttö 4

Näyttö 5

Näyttö 6

<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-4">Display 4</h1>
<h1 class="display-5">Display 5</h1>
<h1 class="display-6">Display 6</h1>

Näytön otsikot määritetään $display-font-sizesSass-kartalla ja kahdella muuttujalla $display-font-weightja $display-line-height.

Näytön otsikot ovat mukautettavissa kahdella muuttujalla $display-font-familyja $display-font-style.

$display-font-sizes: (
  1: 5rem,
  2: 4.5rem,
  3: 4rem,
  4: 3.5rem,
  5: 3rem,
  6: 2.5rem
);

$display-font-family: null;
$display-font-style:  null;
$display-font-weight: 300;
$display-line-height: $headings-line-height;

Johtaa

Tee kappaleesta erottuva lisäämällä .lead.

Tämä on johdantokappale. Se erottuu tavallisista kappaleista.

html

<p class="lead">
  This is a lead paragraph. It stands out from regular paragraphs.
</p>

Upotetut tekstielementit

Tyylityyli yleisille HTML5-elementeille.

Voit käyttää merkkitunnistettakohokohtateksti.

~~Tätä tekstiriviä on tarkoitus käsitellä poistettuna tekstinä.~~

~~Tätä tekstiriviä on tarkoitus käsitellä epätarkana.~~

Tätä tekstiriviä on tarkoitus käsitellä asiakirjan lisäyksenä.

Tämä tekstirivi hahmonnetaan alleviivatuksi.

Tätä tekstiriviä on tarkoitus käsitellä pienellä tekstillä.

Tämä rivi esitetään lihavoituna.

Tämä rivi muutettiin kursivoituksi tekstiksi.

html

<p>You can use the mark tag to <mark>highlight</mark> text.</p>
<p><del>This line of text is meant to be treated as deleted text.</del></p>
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
<p><u>This line of text will render as underlined.</u></p>
<p><small>This line of text is meant to be treated as fine print.</small></p>
<p><strong>This line rendered as bold text.</strong></p>
<p><em>This line rendered as italicized text.</em></p>

Varo, että näitä tunnisteita tulee käyttää semanttiseen tarkoitukseen:

edustaa tekstiä, joka on merkitty tai korostettu viite- tai merkintätarkoituksiin.
edustaa sivukommentteja ja pientä tekstiä, kuten tekijänoikeus- ja lakitekstiä.
<s>edustaa elementtiä, joka ei ole enää relevantti tai ei ole enää tarkka.
edustaa sisäistä tekstiä, joka tulee hahmontaa tavalla, joka osoittaa, että siinä on ei-tekstuaalinen huomautus.

Jos haluat muokata tekstiäsi, käytä sen sijaan seuraavia luokkia:

.markkäyttää samoja tyylejä kuin .
.smallkäyttää samoja tyylejä kuin .
.text-decoration-underlinekäyttää samoja tyylejä kuin .
.text-decoration-line-throughkäyttää samoja tyylejä kuin <s>.

Vaikka sitä ei näy yllä, voit käyttää sitä HTML5:ssä. on tarkoitettu korostamaan sanoja tai lauseita antamatta lisätärkeyttä, kun taas se on enimmäkseen puheille, teknisille termeille jne.

Tekstin apuohjelmat

Muuta tekstin kohdistusta, muuntamista, tyyliä, painoa, viivan korkeutta, koristelua ja väriä teksti- ja väriapuohjelmillamme .

Lyhenteet

HTML-elementin tyylitelty toteutus <abbr>lyhenteille ja lyhenteille, jotta laajennettu versio näytetään. Lyhenteillä on oletusarvoinen alleviivaus, ja ne saavat ohjekohdistimen, joka tarjoaa lisäkontekstia hiirikäytössä ja avustavien tekniikoiden käyttäjille.

Lisää .initialismlyhenteeseen hieman pienemmän fontin koon saamiseksi.

attr

HTML

html

<p><abbr title="attribute">attr</abbr></p>
<p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr></p>

Lohkolainaukset

Toisesta lähteestä peräisin olevien sisältölohkojen lainaamiseen dokumentissasi. Kääri <blockquote class="blockquote">lainauksena minkä tahansa HTML-koodin ympärille.

Tunnettu lainaus, joka sisältyy blockquote-elementtiin.

html

<blockquote class="blockquote">
  <p>A well-known quote, contained in a blockquote element.</p>
</blockquote>

Lähteen nimeäminen

HTML-spesifikaatio edellyttää, että blockquote-attribuutio sijoitetaan <blockquote>. Kun annat attribuutiota, kirjoita <blockquote>a <figure>ja käytä a- <figcaption>tai lohkotason elementtiä (esim. ) .blockquote-footerluokassa. Muista kääriä myös lähdeteoksen nimi <cite>.

Tunnettu lainaus, joka sisältyy blockquote-elementtiin.

html

<figure>
  <blockquote class="blockquote">
    <p>A well-known quote, contained in a blockquote element.</p>
  </blockquote>
  <figcaption class="blockquote-footer">
    Someone famous in <cite title="Source Title">Source Title</cite>
  </figcaption>
</figure>

Tasaus

Käytä tekstiapuohjelmia tarpeen mukaan muuttaaksesi lohkolainauskohteen tasausta.

Tunnettu lainaus, joka sisältyy blockquote-elementtiin.

html

<figure class="text-center">
  <blockquote class="blockquote">
    <p>A well-known quote, contained in a blockquote element.</p>
  </blockquote>
  <figcaption class="blockquote-footer">
    Someone famous in <cite title="Source Title">Source Title</cite>
  </figcaption>
</figure>

Tunnettu lainaus, joka sisältyy blockquote-elementtiin.

html

<figure class="text-end">
  <blockquote class="blockquote">
    <p>A well-known quote, contained in a blockquote element.</p>
  </blockquote>
  <figcaption class="blockquote-footer">
    Someone famous in <cite title="Source Title">Source Title</cite>
  </figcaption>
</figure>

Luettelot

Tyylitön

Poista oletus- list-styleja vasen marginaali luettelokohteista (vain välittömät alakohdat). Tämä koskee vain välittömiä alatason luettelokohteita , mikä tarkoittaa, että sinun on lisättävä luokka myös kaikille sisäkkäisille luetteloille.

Tämä on luettelo.
Se näyttää täysin tyylittömältä.
Rakenteellisesti se on edelleen luettelo.
Tämä tyyli koskee kuitenkin vain välittömiä lapsielementtejä.
Sisäkkäiset luettelot:
- tämä tyyli ei vaikuta niihin
- näyttää silti luodin
- ja niillä on sopiva vasen marginaali
Tästä voi silti olla hyötyä joissain tilanteissa.

html

<ul class="list-unstyled">
  <li>This is a list.</li>
  <li>It appears completely unstyled.</li>
  <li>Structurally, it's still a list.</li>
  <li>However, this style only applies to immediate child elements.</li>
  <li>Nested lists:
    <ul>
      <li>are unaffected by this style</li>
      <li>will still show a bullet</li>
      <li>and have appropriate left margin</li>
    </ul>
  </li>
  <li>This may still come in handy in some situations.</li>
</ul>

Linjassa

Poista luettelon luettelomerkit ja lisää valoa marginkahden luokan yhdistelmällä .list-inlineja .list-inline-item.

Tämä on luettelon kohde.
Ja toinen.
Mutta ne näytetään rivissä.

html

<ul class="list-inline">
  <li class="list-inline-item">This is a list item.</li>
  <li class="list-inline-item">And another one.</li>
  <li class="list-inline-item">But they're displayed inline.</li>
</ul>

Kuvausluettelon tasaus

Tasaa termit ja kuvaukset vaakasuunnassa käyttämällä ruudukkojärjestelmämme ennalta määritettyjä luokkia (tai semanttisia mixinejä). Pidempiä ajanjaksoja varten voit halutessasi lisätä .text-truncateluokan katkaistaksesi tekstin ellipsillä.

Kuvausluettelot

Kuvausluettelo on täydellinen termien määrittelyyn.

Termi

Määritelmä termille.

Ja lisää paikkamerkkimäärittelytekstiä.

Toinen termi

Tämä määritelmä on lyhyt, joten ei ylimääräisiä kappaleita tai mitään.

Katkaistu termi on katkaistu

Tästä voi olla hyötyä, kun tilaa on vähän. Lisää loppuun ellipsin.

Pesivä

Sisäkkäinen määritelmäluettelo: Kuulin, että pidät määritelmäluetteloista. Haluan laittaa määritelmäluettelosi määritelmäluetteloosi.

html

<dl class="row">
  <dt class="col-sm-3">Description lists</dt>
  <dd class="col-sm-9">A description list is perfect for defining terms.</dd>

  <dt class="col-sm-3">Term</dt>
  <dd class="col-sm-9">
    <p>Definition for the term.</p>
    <p>And some more placeholder definition text.</p>
  </dd>

  <dt class="col-sm-3">Another term</dt>
  <dd class="col-sm-9">This definition is short, so no extra paragraphs or anything.</dd>

  <dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
  <dd class="col-sm-9">This can be useful when space is tight. Adds an ellipsis at the end.</dd>

  <dt class="col-sm-3">Nesting</dt>
  <dd class="col-sm-9">
    <dl class="row">
      <dt class="col-sm-4">Nested definition list</dt>
      <dd class="col-sm-8">I heard you like definition lists. Let me put a definition list inside your definition list.</dd>
    </dl>
  </dd>
</dl>

Responsiiviset fonttikoot

Bootstrap 5:ssä olemme oletuksena ottaneet käyttöön reagoivat kirjasinkoot, mikä mahdollistaa tekstin luonnollisemman skaalauksen laitteen ja näkymän kokojen välillä. Katso RFS-sivulta , kuinka tämä toimii.

Sass

Muuttujat

Otsikoissa on joitain erityisiä muuttujia kokoa ja väliä varten.

$headings-margin-bottom:      $spacer * .5;
$headings-font-family:        null;
$headings-font-style:         null;
$headings-font-weight:        500;
$headings-line-height:        1.2;
$headings-color:              null;

Tässä ja Rebootissa käsitellyillä sekalaisilla typografiaelementeillä on myös omat muuttujat.

$lead-font-size:              $font-size-base * 1.25;
$lead-font-weight:            300;

$small-font-size:             .875em;

$sub-sup-font-size:           .75em;

$text-muted:                  $gray-600;

$initialism-font-size:        $small-font-size;

$blockquote-margin-y:         $spacer;
$blockquote-font-size:        $font-size-base * 1.25;
$blockquote-footer-color:     $gray-600;
$blockquote-footer-font-size: $small-font-size;

$hr-margin-y:                 $spacer;
$hr-color:                    inherit;

// fusv-disable
$hr-bg-color:                 null; // Deprecated in v5.2.0
$hr-height:                   null; // Deprecated in v5.2.0
// fusv-enable

$hr-border-color:             null; // Allows for inherited colors
$hr-border-width:             $border-width;
$hr-opacity:                  .25;

$legend-margin-bottom:        .5rem;
$legend-font-size:            1.5rem;
$legend-font-weight:          null;

$dt-font-weight:              $font-weight-bold;

$list-inline-padding:         .5rem;

$mark-padding:                .1875em;
$mark-bg:                     $yellow-100;

Seokset

Typografiaa varten ei ole erillisiä sekoituksia, mutta Bootstrap käyttää Responsive Font Sizing (RFS) -muotoa .