Bevezetés a Bootstrap tipográfiába

A tipográfia a bootstrap egyik legújabb funkciója. Különösen a szöveges elemek stílusához és formázásához használják. A bootstrap tipográfiai jellemzőjével valaki fejléceket, bekezdéseket, más inline elemeket és listákat készíthet. A bootstrap alapvetően 1rem (16 képpont) betűméretet használ, beleértve a sormagasságot is. Alapértelmezés szerint a bootstrap által használt betűtípuscsaládok a sans-serif, Arial, beállítják, hogy a tartalom miként jelenjen meg a testben, a háttér színe a testben, a betűkészlet méret és vonalmagasság a margók, párnák stb. létrehozásához

A Bootstrap tipográfia jellemzői

Az alábbiakban bemutatjuk a tipográfia különféle jellemzőit, az alábbiak szerint:

1) Címsorok

A HTML címsorok fel vannak osztva

nak nek

Bootstrap fejléc
betűméretben jelenik meg

Bootstrap fejléc

betűméretben jelenik meg

Bootstrap fejléc

betűméretben jelenik meg

Bootstrap fejléc

betűméretben jelenik meg
Bootstrap fejléc
betűméretben jelenik meg
Bootstrap fejléc
betűméretben jelenik meg

HTML kód használatával az alább látható módon adja ki a kimenetet:

A Bootstrap tipográfia felhasználásával a következő osztályok szerint stílusosította és formázta:

Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size

Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size

Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size

Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size

Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size

Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size

Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size

Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size

A fenti kód kimenete a Bootstrap Typography segítségével a következő:

2) Érzékeny címsorok

Az érzékeny címsorok az egyik legjobb dolog, amelyet tipográfia segítségével megtervezhetünk. Ezek az elemek, amelyekben a szöveg automatikusan beállítható az eszköz méretére vonatkoztatva osztályra reagálva. Tehát könnyen láthatja ugyanazt a szöveget megfelelő módon, különböző eszközökön.

Csak adjon hozzá reagáló osztályt a fejléccímkéjéhez az alábbiak szerint:

Responsive Header

Tehát a következőképpen jeleníti meg a kimenetet:

Érzékeny fejléc.

Ugyanazt a szöveget ellenőrizheti a különböző készülékeken, valamint a böngésző átméretezésével a változásokat fogja mutatni.

3)

Ez a címke könnyebb, kisebb, másodlagos szöveg létrehozására szolgál a fejlécében. Alapértelmezés szerint a szülő címsorának 85% -ára van állítva.

Példa:

Example heading secondary text

Kimenet:

h5 fejléc másodlagos szöveg

4)

Ezt a címkét a szöveg kiemelésére használják.

Példa :

Bootstrap Typography

Bootstrap Typography

Ez a szöveg kiemelésére szolgál.

5)

Ez a címke rövidítés megjelölésére szolgál. A rövidítéseknek alapértelmezés szerint alá vannak húzva, és egy segédkurzort kapnak, hogy további környezetet biztosítsanak a lebegéshez és a segítő technológiák felhasználói számára.

Példa:

Olyan sok ország van a világon.Indiais a legjobb ország

6)

A törölt szöveget jelöli

Példa:

Ez a címke a törölt szöveg megjelenítésére szolgál.

Kimenet:

Ezt a címkét megmutatják.

7)

A blockquote elem egy másik forrásból származó tartalom bemutatására szolgál.

Példa:

Blockquotes

Blockquotes

A blockquote elem egy másik forrásból származó tartalom bemutatására szolgál:


Nagyon kevésre van szükség a boldog élethez; az egész önmagában van, a gondolkodásmódjában. A élet olyan, mint egy nyilvános hegedű és a hangszer megtanulása, amint folytatódik.

Kimenet:

Blockquotes
A blockquote elem egy másik forrásból származó tartalom bemutatására szolgál:

Nagyon kevésre van szükség a boldog élethez; mindez önmagában van, a gondolkodásmódjában. Az élet olyan, mint a hegedű nyilvános lejátszása és a hangszer elsajátítása.

8)
:

Ez a címke a leíráslista megjelenítésére szolgál.

Példa:

A dl elem leírási listát jelöl:


Kenyér

- Fehér

- Barna

Hideg italok

- Pepsi

Kimenet:

A dl elem leírási listát jelöl:

Kenyér
fehér
Barna
Hideg italok
Pepsi.

9)

Az inline kódnyilatkozatot együtt kell elhelyezni a kód elemben.

Példa:

A következő HTML elemek: span, section és div a dokumentum egy szakaszát definiálják.

Kimenet:

A következő HTML elemek: span, szakasz és div a dokumentum egy szakaszát definiálják.

10) Kontextuális színek

Ez nem más, mint egy másik osztály, amelyet a különböző színek felhasználásával közvetítünk.
Különböző osztályokkal rendelkezik, például .text-néma, .text-info, .text-primer, .text-siker, .text-figyelmeztetés, .text-veszély.

Példa:

A kontextuális osztályok segítségével adja meg a "jelentést a színekön keresztül":


Ez a szöveg el van némítva.

Ez a szöveg fontos.

Ez a szöveg a sikert jelzi.

Ez a szöveg néhány információt képvisel.

Ez a szöveg figyelmeztetést jelent.

Ez a szöveg veszélyt jelent.

Kimenet:

Ez a szöveg el van némítva.
Ez a szöveg fontos.
Ez a szöveg a sikert jelzi.
Ez a szöveg néhány információt képvisel.
Ez a szöveg figyelmeztetést jelent.
Ez a szöveg veszélyt jelent.

Ahol használhatjuk

  • A legtöbb webdizájner inkább a bootstrap tipográfiát használja a szöveges formátum jobb megjelenése érdekében.
  • Különösen a szövegtartalom stílusa és formázása során használják.
  • A legtöbb esetben kérdés merül fel a szöveg reagálhatóságával kapcsolatban. A szöveg mérete különböző eszközökönként változik. Ezért ezt a kérdést tisztázni kell a bootstrap tipográfia funkció használatával.
  • A Bootstrap tipográfia egyszerű módon van testreszabva, hogy vonzóan megjelenjen a végfelhasználó számára.
  • A weboldal ilyen szöveges elemeit mindig ugyanúgy jelenítik meg a Bootstrap 4 stíluslapra mutató hivatkozáson keresztül, kivéve, ha ezeket az elemeket más stílusosztály felülbírálja.
  • A Bootstrap kényelmes tipográfiai funkciókat kínál a fejlesztőknek, hogy megkönnyítsék fejlécek, bekezdések, listák és más olyan elemeket létrehozni, amelyek vonzóak lennének az olvasók számára.

Következtetés

  • A fenti tartalomban megadott részletek szerint a Bootstrap fejlécek, tipikus idézetek, Ólom szöveg, Jelölt szöveg, Rövidítések megfelelő tipográfiai jellemzői megfelelő példákkal.
  • A Bootstrap ilyen robusztus és szép tulajdonságai miatt nagyon népszerű és egyedülálló front-end fejlesztési keretrendszer, amelyet sok szervezet széles körben használ.
  • A rendszerindító csomag tartalmazza az összes tipográfiai címkét, amelyet szeretnénk kialakítani, mindent a címkétől kezdve

    és a teljes fejléc-hierarchia.

Ajánlott cikkek

Ez egy útmutató a Bootstrap tipográfiához. Itt a Bootstrap tipográfia különféle jellemzőit tárgyaljuk, például címsorokat, blokkjegyzést, rövidítést, jelölést stb. További tudnivalókat a következő cikkekben is megnézhet -

  • Rendszerindító parancsok
  • Bootstrap alkatrészek
  • A Bootstrap telepítése
  • Bootstrap elrendezés

Kategória:

Szoftverfejlesztés