in English

Typografia

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

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 kautta $link-colorja käytä linkin alleviivauksia vain :hover.
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

<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

<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ä. Muista, että nämä otsikot eivät ole oletuksena responsiivisia, mutta responsiiviset kirjasinkoot on mahdollista ottaa käyttöön .

Näyttö 1

Näyttö 2

Näyttö 3

Näyttö 4

<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>

Johtaa

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

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

<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.

<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>

.markja .smallluokat ovat myös saatavilla käyttämään samoja tyylejä kuin <mark>ja <small>samalla välttäen kaikki ei-toivotut semanttiset vaikutukset, joita tunnisteet tuovat mukanaan.

Vaikka sitä ei näy yllä, voit käyttää <b>sitä <i>HTML5:ssä. <b>on tarkoitettu korostamaan sanoja tai lauseita antamatta lisätärkeyttä, kun taas <i>se on enimmäkseen puhetta, teknisiä termejä jne.

Tekstin apuohjelmat

Muuta tekstin kohdistusta, muunnaa, tyyliä, painoa 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

<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 lainauksena <blockquote class="blockquote">minkä tahansa HTML -koodin ympärille.

Tunnettu lainaus, joka sisältyy blockquote-elementtiin.

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

Lähteen nimeäminen

Lisää a <footer class="blockquote-footer">lähteen tunnistamiseksi. Kääri lähdeteoksen nimi muotoon <cite>.

Tunnettu lainaus, joka sisältyy blockquote-elementtiin.

Joku kuuluisa lähdeotsikossa

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

Tasaus

Käytä tekstiapuohjelmia tarpeen mukaan muuttaaksesi lohkolainauskohteen tasausta.

Tunnettu lainaus, joka sisältyy blockquote-elementtiin.

Joku kuuluisa lähdeotsikossa

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

Tunnettu lainaus, joka sisältyy blockquote-elementtiin.

Joku kuuluisa lähdeotsikossa

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

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.

<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ä.

<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.

<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

Vuodesta 4.3.0 lähtien Bootstrapissa on mahdollisuus ottaa käyttöön reagoivat kirjasinkoot, mikä mahdollistaa tekstin luonnollisemman skaalauksen laitteen ja näkymän kokojen välillä. RFS voidaan ottaa käyttöön muuttamalla $enable-responsive-font-sizesSass-muuttuja muotoon trueja kääntämällä Bootstrap uudelleen.

RFS :n tukemiseksi käytämme Sass-miksiiniä korvaamaan normaalit font-sizeominaisuudet. Responsiiviset kirjasinkoot kootaan calc()funktioiksi, joissa on sekoitus remja näkymän yksikköjä, jotta reagoiva skaalaus toimii. Lisää RFS :stä ja sen määrityksistä löytyy sen GitHub-arkistosta .