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-family
minden operációs rendszerhez és eszközhöz. - Egy átfogóbb és elérhetőbb
font-size
tí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-base
attribú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-bg
az a beállításáhozbackground-color
a<body>
(#fff
alapé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-base
be rem
.
Címsorok
Az összes HTML-címsor <h1>
elérhető <h6>
a következőig.
Cím | Példa |
---|---|
|
h1. Bootstrap címsor |
|
h2. Bootstrap címsor |
|
h3. Bootstrap címsor |
|
h4. Bootstrap címsor |
|
h5. Bootstrap címsor |
|
h6. Bootstrap címsor |
.h1
keresztül .h6
osztályok is rendelkezésre állnak, ha egy fejléc 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
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
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. Ne feledje, hogy ezek a címsorok alapértelmezés szerint nem adaptívak, de lehetséges az adaptív betűméretek engedélyezése .
Kijelző 1 |
2. kijelző |
3. kijelző |
4. kijelző |
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.
Szövegközi elemek
Stílus a gyakori beépített HTML5-elemekhez.
A mark címkét használhatjaKiemelszö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.
.mark
és .small
osztá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 .initialism
hozzá egy rövidítést valamivel kisebb betűmérethez.
attr
HTML
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.
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.
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.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
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
Sorban
Távolítsa el a felsorolásjeleket, és alkalmazzon némi fényt margin
két osztály kombinációjával, .list-inline
és .list-inline-item
.
- Lorem ipsum
- Phasellus iaculis
- Nulla volutpat
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-truncate
osztá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.
Reszponzív betűméretek
A 4.3.0-s verziótól kezdve a Bootstrap az adaptív betűméretek engedélyezésének lehetőségével is rendelkezik, így a szöveg természetesebben méretezhető át az eszköz és a nézetablak méretei között. Az RFS engedélyezhető a $enable-responsive-font-sizes
Sass változó módosításával true
és a Bootstrap újrafordításával.
Az RFS támogatásához egy Sass mixint használunk a normál font-size
tulajdonságaink helyettesítésére. A reszponzív betűméretek függvényekké lesznek összeállítva a nézetablak egységek calc()
keverékével, hogy lehetővé tegyék az adaptív méretezési viselkedést. rem
További információ az RFS -ről és annak konfigurációjáról a GitHub-tárolóban található .