Source

Tipográfia

Dokumentáció és példák a Bootstrap tipográfiához, beleértve a globális beállításokat, címsorokat, törzsszöveget, listákat és még sok mást.

Általános beállítások

A Bootstrap alapvető globális megjelenítési, tipográfiai és hivatkozási stílusokat állít be. Ha nagyobb szabályozásra van szükség, tekintse meg a szöveges segédprogram osztályait .

Használjon natív betűkészletet , amely kiválasztja a legjobbat font-familyminden operációs rendszerhez és eszközhöz.
Egy átfogóbb és elérhetőbb font-sizetípusskála érdekében feltételezzük a böngésző alapértelmezett gyökerét (általában 16 képpont), így a látogatók szükség szerint testreszabhatják böngészőjük alapbeállításait.
Használja a $font-family-base, $font-size-baseés $line-height-baseattribútumokat tipográfiai alapként a <body>.
Állítsa be a globális hivatkozás színét a következőn keresztül $link-color, és csak a hivatkozáson alkalmazza a hivatkozás aláhúzásokat :hover.
Használja $body-bgaz a beállításához background-colora <body>( #fffalapértelmezés szerint).

Ezek a stílusok a -ban találhatók _reboot.scss, a globális változók pedig a -ban vannak meghatározva _variables.scss. Feltétlenül állítsa $font-size-basebe rem.

Címsorok

Az összes HTML-címsor <h1>elérhető <h6>a következőig.

Cím	Példa
`<h1></h1>`	h1. Bootstrap címsor
`<h2></h2>`	h2. Bootstrap címsor
`<h3></h3>`	h3. Bootstrap címsor
`<h4></h4>`	h4. Bootstrap címsor
`<h5></h5>`	h5. Bootstrap címsor
`<h6></h6>`	h6. Bootstrap címsor

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

.h1keresztül .h6osztályok is rendelkezésre állnak, ha egy címsor betűstílusát szeretné egyeztetni, de nem tudja használni a kapcsolódó HTML elemet.

h1. Bootstrap címsor

h2. Bootstrap címsor

h3. Bootstrap címsor

h4. Bootstrap címsor

h5. Bootstrap címsor

h6. Bootstrap címsor

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

Címsorok testreszabása

Használja a mellékelt segédosztályokat a kis másodlagos fejléc szövegének újbóli létrehozásához a Bootstrap 3-ból.

Díszes kijelzőfejléc Fakult másodlagos szöveggel

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

Címsorok megjelenítése

A hagyományos címsorelemeket úgy alakítottuk ki, hogy a legjobban illeszkedjenek az oldal tartalmához. Ha szüksége van egy címsorra, hogy kitűnjön, fontolja meg a megjelenítési címsor használatát – ez egy nagyobb, kissé véleményesebb címsorstílus.

Kijelző 1

2. kijelző

3. kijelző

4. kijelző

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

Vezet

Tegye kiemelhetővé a bekezdést a hozzáadásával .lead.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

<p class="lead">
  Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
</p>

Szövegközi elemek

Stílus a gyakori beépített HTML5-elemekhez.

Használhatja a mark címkétKiemelszöveg.

~~Ezt a szövegsort törölt szövegként kell kezelni.~~

~~Ezt a szövegsort már nem pontosként kell kezelni.~~

Ezt a szövegsort a dokumentum kiegészítéseként kell kezelni.

Ez a szövegsor aláhúzottként jelenik meg

Ezt a szövegsort apró betűsként kell kezelni.

Ez a sor félkövér szövegként jelenik meg.

Ez a sor dőlt betűs szövegként jelenik meg.

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

.markés .smallosztályok is rendelkezésre állnak, hogy ugyanazokat a stílusokat alkalmazzák, mint <mark>és <small>elkerülve a címkék által okozott nemkívánatos szemantikai következményeket.

Bár fent nem látható, nyugodtan használhatja <b>és <i>HTML5-ben. <b>célja, hogy kiemelje a szavakat vagy kifejezéseket anélkül, hogy további jelentőséget tulajdonítana, míg <i>többnyire hang, szakkifejezések stb.

Szöveges segédprogramok

Módosíthatja a szöveg igazítását, átalakítását, stílusát, súlyát és színét szöveg- és színsegédprogramjainkkal .

Rövidítések

A HTML elem stilizált megvalósítása <abbr>a rövidítésekhez és a mozaikszavakhoz, hogy a kibővített verziót mutasson. A rövidítések alapértelmezett aláhúzással rendelkeznek, és súgókurzort kapnak, amely további kontextust biztosít a lebegtetéskor és a kisegítő technológiák felhasználóinak.

Adjon .initialismhozzá egy rövidítést valamivel kisebb betűmérethez.

attr

HTML

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

Blokkidézetek

Más forrásból származó tartalomblokkok idézéséhez a dokumentumban. Tekerje <blockquote class="blockquote">körbe bármely HTML -kódot idézetként.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

<blockquote class="blockquote">
  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>

Forrás megnevezése

Adjon hozzá egyet <footer class="blockquote-footer">a forrás azonosításához. A forrásmunka nevét burkolja be <cite>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Valaki híres a Forrás címében

<blockquote class="blockquote">
  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

Igazítás

Szükség szerint használjon szöveges segédprogramokat az idézőjel igazításának módosításához.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Valaki híres a Forrás címében

<blockquote class="blockquote text-center">
  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Valaki híres a Forrás címében

<blockquote class="blockquote text-right">
  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

Listák

Stílus nélküli

Távolítsa el az alapértelmezett list-styleés a bal margót a listaelemekről (csak az azonnali gyermekeknél). Ez csak az azonnali leszármazott listaelemekre vonatkozik , vagyis minden beágyazott listához hozzá kell adnia az osztályt is.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem és massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

<ul class="list-unstyled">
  <li>Lorem ipsum dolor sit amet</li>
  <li>Consectetur adipiscing elit</li>
  <li>Integer molestie lorem at massa</li>
  <li>Facilisis in pretium nisl aliquet</li>
  <li>Nulla volutpat aliquam velit
    <ul>
      <li>Phasellus iaculis neque</li>
      <li>Purus sodales ultricies</li>
      <li>Vestibulum laoreet porttitor sem</li>
      <li>Ac tristique libero volutpat at</li>
    </ul>
  </li>
  <li>Faucibus porta lacus fringilla vel</li>
  <li>Aenean sit amet erat nunc</li>
  <li>Eget porttitor lorem</li>
</ul>

Sorban

Távolítsa el a felsorolásjeleket, és alkalmazzon némi fényt marginkét osztály kombinációjával, .list-inlineés .list-inline-item.

Lorem ipsum
Phasellus iaculis
Nulla volutpat

<ul class="list-inline">
  <li class="list-inline-item">Lorem ipsum</li>
  <li class="list-inline-item">Phasellus iaculis</li>
  <li class="list-inline-item">Nulla volutpat</li>
</ul>

Leíráslista igazítása

A kifejezéseket és leírásokat vízszintesen igazítsa a rácsrendszerünk előre meghatározott osztályaival (vagy szemantikai mixinjeivel). Hosszabb időtartamra opcionálisan hozzáadhat egy .text-truncateosztályt a szöveg hárompontos csonkolásához.

Leírás listák

A leírások listája tökéletes a kifejezések meghatározásához.

Euismod

Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.

Donec id elit non mi porta gravida at eget metus.

Malesuada porta

Etiam porta sem malesuada magna mollis euismod.

A csonka kifejezés csonka

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

Fészekrakás

Beágyazott definíciós lista: Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.

<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">Euismod</dt>
  <dd class="col-sm-9">
    <p>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</p>
    <p>Donec id elit non mi porta gravida at eget metus.</p>
  </dd>

  <dt class="col-sm-3">Malesuada porta</dt>
  <dd class="col-sm-9">Etiam porta sem malesuada magna mollis euismod.</dd>

  <dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
  <dd class="col-sm-9">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</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">Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.</dd>
    </dl>
  </dd>
</dl>

Reszponzív tipográfia

A reszponzív tipográfia a szöveg és az összetevők méretezését jelenti a gyökérelemek egyszerű módosításával a font-sizemédialekérdezések sorozatán belül. A Bootstrap ezt nem teszi meg helyetted, de ha szükséged van rá, meglehetősen könnyű hozzáadni.

Íme egy példa rá a gyakorlatban. Válassza ki a kívánt font-sizes és médialekérdezéseket.

html {
  font-size: 1rem;
}

@include media-breakpoint-up(sm) {
  html {
    font-size: 1.2rem;
  }
}

@include media-breakpoint-up(md) {
  html {
    font-size: 1.4rem;
  }
}

@include media-breakpoint-up(lg) {
  html {
    font-size: 1.6rem;
  }
}