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-family
kullekin käyttöjärjestelmälle ja laitteelle parhaan. - Kattavamman ja helppokäyttöisemmän tyyppiasteikon saamiseksi käytämme selaimen
font-size
oletusjuurta (yleensä 16 kuvapistettä), jotta vierailijat voivat mukauttaa selaimensa oletusasetuksia tarpeen mukaan. - Käytä attribuutteja
$font-family-base
,$font-size-base
ja$line-height-base
attribuutteja typografisena perustana, jota sovelletaan<body>
. - Aseta yleinen linkin väri käyttämällä
$link-color
. - Käytä
$body-bg
asettaaksesi abackground-color
kohtaan<body>
(#fff
oletuksena).
Nämä tyylit löytyvät sisällä _reboot.scss
ja globaalit muuttujat määritellään _variables.scss
. Muista ottaa $font-size-base
kä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>
.h1
kautta .h6
luokat 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ä.
<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-sizes
Sass-kartalla ja kahdella muuttujalla $display-font-weight
ja $display-line-height
.
$display-font-sizes: (
1: 5rem,
2: 4.5rem,
3: 4rem,
4: 3.5rem,
5: 3rem,
6: 2.5rem
);
$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.
<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>
Varo, että näitä tunnisteita tulee käyttää semanttiseen tarkoitukseen:
<mark>
edustaa tekstiä, joka on merkitty tai korostettu viite- tai merkintätarkoituksiin.<small>
edustaa sivukommentteja ja pientä tekstiä, kuten tekijänoikeus- ja lakitekstiä.<s>
edustaa elementtiä, joka ei ole enää relevantti tai ei ole enää tarkka.<u>
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:
.mark
käyttää samoja tyylejä kuin<mark>
..small
käyttää samoja tyylejä kuin<small>
..text-decoration-underline
käyttää samoja tyylejä kuin<u>
..text-decoration-line-through
käyttää samoja tyylejä kuin<s>
.
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 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ää .initialism
lyhenteeseen 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>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. <p>
) .blockquote-footer
luokassa. Muista kääriä myös lähdeteoksen nimi <cite>
.
<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.
<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>
<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-style
ja 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 margin
kahden luokan yhdistelmällä .list-inline
ja .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-truncate
luokan 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
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;
$hr-height: $border-width;
$hr-opacity: .25;
$legend-margin-bottom: .5rem;
$legend-font-size: 1.5rem;
$legend-font-weight: null;
$mark-padding: .2em;
$dt-font-weight: $font-weight-bold;
$nested-kbd-font-weight: $font-weight-bold;
$list-inline-padding: .5rem;
$mark-bg: #fcf8e3;
Seokset
Typografiaa varten ei ole erillisiä sekoituksia, mutta Bootstrap käyttää Responsive Font Sizing (RFS) -muotoa .