Uchapaji
Hati na mifano ya uchapaji wa Bootstrap, ikijumuisha mipangilio ya kimataifa, vichwa, maandishi ya mwili, orodha, na zaidi.
Mipangilio ya kimataifa
Bootstrap huweka onyesho msingi la kimataifa, uchapaji, na mitindo ya viungo. Wakati udhibiti zaidi unahitajika, angalia madarasa ya matumizi ya maandishi .
- Tumia mrundikano wa fonti asilia unaochagua bora zaidi
font-family
kwa kila OS na kifaa. - Kwa ukubwa wa aina unaojumuisha zaidi na unaoweza kufikiwa, tunadhania mzizi wa chaguo-msingi wa kivinjari
font-size
(kawaida 16px) ili wageni waweze kubinafsisha chaguo-msingi za kivinjari chao kama inavyohitajika. - Tumia
$font-family-base
,$font-size-base
, na$line-height-base
sifa kama msingi wetu wa uchapaji kutumika kwa<body>
. - Weka rangi ya kiungo cha kimataifa kupitia
$link-color
na tumia mistari ya chini ya kiungo kwenye:hover
. - Tumia
$body-bg
kuwekabackground-color
kwenye<body>
(#fff
kwa chaguo-msingi).
Mitindo hii inaweza kupatikana ndani _reboot.scss
, na anuwai za kimataifa zimefafanuliwa katika _variables.scss
. Hakikisha $font-size-base
kuweka rem
.
Vichwa
Vichwa vyote vya HTML, <h1>
kupitia <h6>
, vinapatikana.
Kichwa | Mfano |
---|---|
|
h1. Kichwa cha bootstrap |
|
h2. Kichwa cha bootstrap |
|
h3. Kichwa cha bootstrap |
|
h4. Kichwa cha bootstrap |
|
h5. Kichwa cha bootstrap |
|
h6. Kichwa cha bootstrap |
.h1
kupitia .h6
madarasa zinapatikana pia, kwa wakati unataka kulinganisha mtindo wa fonti ya kichwa lakini huwezi kutumia kipengele cha HTML kinachohusika.
h1. Kichwa cha bootstrap
h2. Kichwa cha bootstrap
h3. Kichwa cha bootstrap
h4. Kichwa cha bootstrap
h5. Kichwa cha bootstrap
h6. Kichwa cha bootstrap
Kubinafsisha vichwa
Tumia madarasa ya matumizi yaliyojumuishwa ili kuunda upya maandishi madogo ya kichwa cha upili kutoka Bootstrap 3.
Kichwa cha onyesho dhahania Na maandishi ya pili yaliyofifia
Onyesha vichwa
Vipengele vya vichwa vya jadi vimeundwa kufanya kazi vyema katika maudhui ya ukurasa wako. Unapohitaji kichwa ili kujipambanua, zingatia kutumia kichwa cha onyesho —mtindo mkubwa zaidi, wenye maoni mengi zaidi. Kumbuka vichwa hivi havijisikii kwa chaguo-msingi, lakini inawezekana kuwezesha saizi za fonti zinazojibu .
Onyesho 1 |
Onyesho 2 |
Onyesho 3 |
Onyesho 4 |
Kuongoza
Fanya aya isimame kwa kuongeza .lead
.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor dalali. Duis mollis, est non commodo luctus.
Vipengele vya maandishi ya ndani
Mtindo wa vipengele vya kawaida vya HTML5 vya ndani.
Unaweza kutumia alama ya lebokuonyeshamaandishi.
Mstari huu wa maandishi unakusudiwa kuchukuliwa kama maandishi yaliyofutwa.
Mstari huu wa maandishi unakusudiwa kuchukuliwa kuwa si sahihi tena.
Mstari huu wa maandishi unakusudiwa kuzingatiwa kama nyongeza ya hati.
Mstari huu wa maandishi utatoa kama ilivyopigiwa mstari
Mstari huu wa maandishi unakusudiwa kuzingatiwa kama chapa nzuri.
Mstari huu umetolewa kama maandishi mazito.
Mstari huu umetolewa kama maandishi ya italiki.
.mark
na .small
madarasa pia yanapatikana ili kutumia mitindo sawa <mark>
na <small>
huku ikiepuka athari zozote za kisemantiki zisizohitajika ambazo lebo zinaweza kuleta.
Ingawa haijaonyeshwa hapo juu, jisikie huru kutumia <b>
na <i>
katika HTML5. <b>
inakusudiwa kuangazia maneno au vifungu vya maneno bila kuwasilisha umuhimu wa ziada huku <i>
zaidi ikiwa ni ya sauti, maneno ya kiufundi, n.k.
Huduma za maandishi
Badilisha mpangilio wa maandishi, badilisha, mtindo, uzito na rangi na matumizi yetu ya maandishi na rangi .
Vifupisho
Utekelezaji wa mtindo wa <abbr>
kipengele cha HTML cha vifupisho na vifupisho ili kuonyesha toleo lililopanuliwa kwenye kielelezo. Vifupisho vina mstari chaguomsingi na hupata kishale cha usaidizi ili kutoa muktadha wa ziada kwenye kuelea na kwa watumiaji wa teknolojia saidizi.
Ongeza .initialism
kwa kifupi cha saizi ndogo ya fonti.
attr
HTML
Nukuu za kuzuia
Kwa kunukuu vizuizi vya maudhui kutoka chanzo kingine ndani ya hati yako. Funga HTML<blockquote class="blockquote">
yoyote kama nukuu.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nambari kamili imesababisha ante.
Kutaja chanzo
Ongeza a <footer class="blockquote-footer">
kwa kutambua chanzo. Funga jina la kazi ya chanzo katika <cite>
.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nambari kamili imesababisha ante.
Mpangilio
Tumia huduma za maandishi inavyohitajika ili kubadilisha mpangilio wa nukuu yako ya kuzuia.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nambari kamili imesababisha ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nambari kamili imesababisha ante.
Orodha
Isiyo na mtindo
Ondoa ukingo chaguomsingi list-style
na wa kushoto kwenye vipengee vya orodha (watoto wa karibu pekee). Hii inatumika tu kwa vipengee vya orodha ya watoto mara moja tu , kumaanisha utahitaji kuongeza darasa kwa orodha zozote zilizoorodheshwa pia.
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Uwezeshaji katika 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
Katika mstari
Ondoa vitone vya orodha na uweke mwanga margin
kwa mchanganyiko wa aina mbili, .list-inline
na .list-inline-item
.
- Lorem ipsum
- Phasellus iaculis
- Nulla volutpat
Mpangilio wa orodha ya maelezo
Pangilia maneno na maelezo kwa mlalo kwa kutumia madarasa yaliyobainishwa mapema ya mfumo wetu (au michanganyiko ya kisemantiki). Kwa maneno marefu, unaweza kuongeza .text-truncate
darasa kwa hiari ili kupunguza maandishi kwa duaradufu.
- Orodha za maelezo
- Orodha ya maelezo ni kamili kwa kufafanua maneno.
- 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.
- Neno lililopunguzwa limepunguzwa
- Fusce dapibus, tellus ac cursus commodo, tor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
- Nesting
-
- Orodha ya ufafanuzi iliyoorodheshwa
- Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.
Saizi za fonti zinazojibu
Bootstrap v4.3 husafirishwa ikiwa na chaguo la kuwezesha saizi za fonti zinazojibika, ikiruhusu maandishi kupanuka kwa njia asilia kwenye saizi za kifaa na tovuti ya kutazama. RFS inaweza kuwezeshwa kwa kubadilisha utofauti wa $enable-responsive-font-sizes
Sass hadi true
na kurejesha Bootstrap.
Ili kusaidia RFS , tunatumia mchanganyiko wa Sass kuchukua nafasi ya font-size
mali zetu za kawaida. Saizi za fonti zinazojibu zitajumuishwa katika calc()
vitendakazi pamoja na mchanganyiko wa rem
vitengo vya tovuti ya kutazama ili kuwezesha tabia ya kujibu ya kuongeza ukubwa. Zaidi kuhusu RFS na usanidi wake unaweza kupatikana kwenye hazina yake ya GitHub .