Ukuthayipha
Amadokhumenti nezibonelo ze-Bootstrap typography, okuhlanganisa izilungiselelo zomhlaba, izihloko, umbhalo womzimba, izinhlu, nokuningi.
Izilungiselelo zomhlaba jikelele
I-Bootstrap isetha isibonisi somhlaba jikelele esiyisisekelo, i-typography, nezitayela zokuxhumanisa. Uma kudingeka ukulawula okwengeziwe, hlola amakilasi ensiza yombhalo .
- Sebenzisa isitaki sefonti yomdabu ekhetha okungcono kakhulu
font-family
ku-OS ngayinye nedivayisi. - Ukuze uthole uhlobo lwesikali esibandakanyayo nesifinyelelekayo, sithatha impande ezenzakalelayo yesiphequluli
font-size
(imvamisa engu-16px) ukuze izivakashi zikwazi ukwenza ngendlela oyifisayo okuzenzakalelayo kwesiphequluli njengoba kudingeka. - Sebenzisa
$font-family-base
,$font-size-base
, kanye$line-height-base
nezibaluli njengesisekelo sethu sokuthayipha sisetshenziswa ku-<body>
. - Setha umbala wesixhumanisi somhlaba wonke ngokusebenzisa
$link-color
futhi usebenzise isixhumanisi esidwebelayo kuphela kokuthi:hover
. - Sebenzisa
$body-bg
ukusetha okuthibackground-color
(<body>
ngokuzenzakalelayo#fff
).
Lezi zitayela zingatholakala ngaphakathi _reboot.scss
, futhi okuguquguqukayo komhlaba wonke kuchazwe ku _variables.scss
. Qiniseka ukuthi $font-size-base
uyangena rem
.
Izihloko
Zonke izihloko ze-HTML, <h1>
ukuya ku- <h6>
, ziyatholakala.
Isihloko | Isibonelo |
---|---|
|
h1. Isihloko se-Bootstrap |
|
h2. Isihloko se-Bootstrap |
|
h3. Isihloko se-Bootstrap |
|
h4. Isihloko se-Bootstrap |
|
h5. Isihloko se-Bootstrap |
|
h6. Isihloko se-Bootstrap |
.h1
ngamakilasi .h6
nawo ayatholakala, uma ufuna ukufanisa isitayela sefonti yesihloko kodwa awukwazi ukusebenzisa isici se-HTML esihlotshaniswayo.
h1. Isihloko se-Bootstrap
h2. Isihloko se-Bootstrap
h3. Isihloko se-Bootstrap
h4. Isihloko se-Bootstrap
h5. Isihloko se-Bootstrap
h6. Isihloko se-Bootstrap
Ukwenza izihloko ngendlela oyifisayo
Sebenzisa amakilasi ensiza afakiwe ukuze udale kabusha umbhalo omncane wesihloko sesibili ukusuka ku-Bootstrap 3.
Isihloko sesibonisi esihle Esinombhalo wesibili ofiphele
Bonisa izihloko
Izihloko zendabuko zenzelwe ukusebenza kahle kakhulu kokuqukethwe kwekhasi lakho. Uma udinga isihloko ukuze ugqame, cabanga ukusebenzisa isihloko esibonisiwe—isitayela sesihloko esikhulu, esinombono othe xaxa. Khumbula ukuthi lezi zihloko aziphenduli ngokuzenzakalela, kodwa kungenzeka ukunika amandla amasayizi wefonti asabelayo .
Isibonisi 1 |
Isibonisi 2 |
Isibonisi 3 |
Isibonisi 4 |
Ukuhola
Yenza isigaba sigqame ngokungeza .lead
.
I-Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. I-Duis mollis, ayiyona i-commodo luctus.
Izakhi zombhalo osemgqeni
Isitayela sezinto ezijwayelekile ze-HTML5 ezingaphakathi komugqa.
Ungasebenzisa umaki wokumaka ukuzegqamisaumbhalo.
Lo mugqa wombhalo uhloselwe ukuthathwa njengombhalo osusiwe.
Lo mugqa wombhalo uhloselwe ukuthi uthathwe njengongasanembile.
Lo mugqa wombhalo uhloselwe ukuthi uthathwe njengesengezo kudokhumenti.
Lo mugqa wombhalo uzosebenza njengokudwetshelwe
Lo mugqa wombhalo uhloselwe ukuthathwa njengokuphrinta kahle.
Lo mugqa uhunyushwe njengombhalo ogqamile.
Lo mugqa uhunyushwe njengombhalo omalukeke.
.mark
futhi .small
amakilasi ayatholakala ukuze asebenzise izitayela ezifanayo <mark>
futhi <small>
ngenkathi ugwema noma yimiphi imithelela ye-semantic engalethwa omaka.
Nakuba kungaboniswa ngenhla, zizwe ukhululekile ukusebenzisa <b>
futhi <i>
ku-HTML5. <b>
ihloselwe ukugqamisa amagama noma imishwana ngaphandle kokudlulisa ukubaluleka okwengeziwe kuyilapho <i>
ngokuvamile kungokwezwi, amagama obuchwepheshe, njll.
Izinsiza zombhalo
Shintsha ukuqondanisa kombhalo, guqula, isitayela, isisindo, nombala ngezinsiza zethu zombhalo nezinsiza zombala .
Izifinyezo
Stylized implementation of HTML’s <abbr>
element for abbreviations and acronyms to show the expanded version on hover. Abbreviations have a default underline and gain a help cursor to provide additional context on hover and to users of assistive technologies.
Add .initialism
to an abbreviation for a slightly smaller font-size.
attr
HTML
Blockquotes
For quoting blocks of content from another source within your document. Wrap <blockquote class="blockquote">
around any HTML as the quote.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Naming a source
Add a <footer class="blockquote-footer">
for identifying the source. Wrap the name of the source work in <cite>
.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Alignment
Use text utilities as needed to change the alignment of your blockquote.
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.
Lists
Unstyled
Remove the default list-style
and left margin on list items (immediate children only). This only applies to immediate children list items, meaning you will need to add the class for any nested lists as well.
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at 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
Inline
Remove a list’s bullets and apply some light margin
with a combination of two classes, .list-inline
and .list-inline-item
.
- Lorem ipsum
- Phasellus iaculis
- Nulla volutpat
Description list alignment
Align terms and descriptions horizontally by using our grid system’s predefined classes (or semantic mixins). For longer terms, you can optionally add a .text-truncate
class to truncate the text with an ellipsis.
- Description lists
- A description list is perfect for defining terms.
- 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.
- Truncated term is truncated
- Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
- Nesting
-
- Nested definition list
- Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.
Responsive font sizes
As of v4.3.0, Bootstrap ships with the option to enable responsive font sizes, allowing text to scale more naturally across device and viewport sizes. RFS can be enabled by changing the $enable-responsive-font-sizes
Sass variable to true
and recompiling Bootstrap.
Ukuze sisekele i- RFS , sisebenzisa ingxube ye-Sass ukuze simiselele font-size
izakhiwo zethu ezivamile. Osayizi befonti abaphendulayo bazohlanganiswa babe calc()
imisebenzi rem
enenhlanganisela namayunithi embobo yokubuka ukuze kunikwe amandla ukuziphatha kokukala okusabelayo. Okuningi mayelana ne- RFS nokucushwa kwayo kungatholakala endaweni yayo yokugcina ye- GitHub .