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, tunatumia mzizi chaguo-msingi wa kivinjari
font-size
(kawaida 16px) ili wageni waweze kubinafsisha chaguo-msingi za vivinjari vyao inapohitajika. - 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
. - 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></h1> |
h1. Kichwa cha bootstrap |
<h2></h2> |
h2. Kichwa cha bootstrap |
<h3></h3> |
h3. Kichwa cha bootstrap |
<h4></h4> |
h4. Kichwa cha bootstrap |
<h5></h5> |
h5. Kichwa cha bootstrap |
<h6></h6> |
h6. Kichwa cha bootstrap |
<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>
.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
<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>
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
<h3>
Fancy display heading
<small class="text-muted">With faded secondary text</small>
</h3>
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.
<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>
<h1 class="display-5">Display 5</h1>
<h1 class="display-6">Display 6</h1>
Vichwa vya onyesho vimesanidiwa kupitia $display-font-sizes
ramani ya Sass na vigeu viwili, $display-font-weight
na $display-line-height
.
$display-font-sizes: (
1: 5rem,
2: 4.5rem,
3: 4rem,
4: 3.5rem,
5: 3rem,
6: 2.5rem
);
$display-font-weight: 300;
$display-line-height: $headings-line-height;
Kuongoza
Fanya aya isimame kwa kuongeza .lead
.
Hii ni aya inayoongoza. Inasimama kutoka kwa aya za kawaida.
<p class="lead">
This is a lead paragraph. It stands out from regular paragraphs.
</p>
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.
<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>
Jihadharini kwamba vitambulisho hivyo vinapaswa kutumika kwa madhumuni ya semantic:
<mark>
inawakilisha maandishi ambayo yamewekwa alama au kuangaziwa kwa madhumuni ya marejeleo au nukuu.<small>
inawakilisha maoni ya kando na maandishi madogo, kama hakimiliki na maandishi ya kisheria.<s>
inawakilisha kipengele ambacho hakifai tena au si sahihi tena.<u>
inawakilisha muda wa maandishi ya ndani ambayo yanapaswa kutolewa kwa njia inayoonyesha kuwa yana ufafanuzi usio wa maandishi.
Ikiwa unataka kupanga maandishi yako, unapaswa kutumia madarasa yafuatayo badala yake:
.mark
itatumia mitindo sawa na<mark>
..small
itatumia mitindo sawa na<small>
..text-decoration-underline
itatumia mitindo sawa na<u>
..text-decoration-line-through
itatumia mitindo sawa na<s>
.
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 upangaji wa maandishi, badilisha, mtindo, uzito, urefu wa mstari, mapambo 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
<p><abbr title="attribute">attr</abbr></p>
<p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr></p>
Nukuu za kuzuia
Kwa kunukuu vizuizi vya maudhui kutoka chanzo kingine ndani ya hati yako. Funga HTML<blockquote class="blockquote">
yoyote kama nukuu.
Nukuu inayojulikana sana, iliyo katika kipengele cha kuzuia.
<blockquote class="blockquote">
<p>A well-known quote, contained in a blockquote element.</p>
</blockquote>
Kutaja chanzo
Vipimo vya HTML vinahitaji maelezo ya blockquote kuwekwa nje ya faili ya <blockquote>
. Unapotoa maelezo, funga <blockquote>
a <figure>
na utumie <figcaption>
kipengele cha kiwango cha kuzuia (km, <p>
) na .blockquote-footer
darasa. Hakikisha umefunga jina la kazi ya chanzo <cite>
pia.
<figure>
<blockquote class="blockquote">
<p>A well-known quote, contained in a blockquote element.</p>
</blockquote>
<figcaption class="blockquote-footer">
Someone famous in <cite title="Source Title">Source Title</cite>
</figcaption>
</figure>
Mpangilio
Tumia huduma za maandishi inavyohitajika ili kubadilisha mpangilio wa nukuu yako ya kuzuia.
<figure class="text-center">
<blockquote class="blockquote">
<p>A well-known quote, contained in a blockquote element.</p>
</blockquote>
<figcaption class="blockquote-footer">
Someone famous in <cite title="Source Title">Source Title</cite>
</figcaption>
</figure>
<figure class="text-end">
<blockquote class="blockquote">
<p>A well-known quote, contained in a blockquote element.</p>
</blockquote>
<figcaption class="blockquote-footer">
Someone famous in <cite title="Source Title">Source Title</cite>
</figcaption>
</figure>
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.
- Hii ni orodha.
- Inaonekana bila mtindo kabisa.
- Kimuundo, bado ni orodha.
- Hata hivyo, mtindo huu unatumika tu kwa vipengele vya mtoto wa haraka.
- Orodha zilizowekwa:
- hawajaathiriwa na mtindo huu
- bado itaonyesha risasi
- na uwe na ukingo wa kushoto unaofaa
- Hii bado inaweza kusaidia katika hali zingine.
<ul class="list-unstyled">
<li>This is a list.</li>
<li>It appears completely unstyled.</li>
<li>Structurally, it's still a list.</li>
<li>However, this style only applies to immediate child elements.</li>
<li>Nested lists:
<ul>
<li>are unaffected by this style</li>
<li>will still show a bullet</li>
<li>and have appropriate left margin</li>
</ul>
</li>
<li>This may still come in handy in some situations.</li>
</ul>
Katika mstari
Ondoa vitone vya orodha na uweke mwanga margin
kwa mchanganyiko wa aina mbili, .list-inline
na .list-inline-item
.
- Hiki ni kipengee cha orodha.
- Na mwingine.
- Lakini zinaonyeshwa kwenye mstari.
<ul class="list-inline">
<li class="list-inline-item">This is a list item.</li>
<li class="list-inline-item">And another one.</li>
<li class="list-inline-item">But they're displayed inline.</li>
</ul>
Upangaji 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.
- Muda
-
Ufafanuzi wa neno.
Na maandishi mengine ya ufafanuzi wa kishika nafasi.
- Neno lingine
- Ufafanuzi huu ni mfupi, kwa hivyo hakuna aya za ziada au kitu chochote.
- Neno lililopunguzwa limepunguzwa
- Hii inaweza kuwa muhimu wakati nafasi ni ngumu. Inaongeza ellipsis mwishoni.
- Nesting
-
- Orodha ya ufafanuzi iliyoorodheshwa
- Nilisikia ukipenda orodha za ufafanuzi. Acha niweke orodha ya ufafanuzi ndani ya orodha yako ya ufafanuzi.
<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">Term</dt>
<dd class="col-sm-9">
<p>Definition for the term.</p>
<p>And some more placeholder definition text.</p>
</dd>
<dt class="col-sm-3">Another term</dt>
<dd class="col-sm-9">This definition is short, so no extra paragraphs or anything.</dd>
<dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
<dd class="col-sm-9">This can be useful when space is tight. Adds an ellipsis at the end.</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">I heard you like definition lists. Let me put a definition list inside your definition list.</dd>
</dl>
</dd>
</dl>
Saizi za fonti zinazojibu
Katika Bootstrap 5, tumewezesha saizi za fonti zinazojibika kwa chaguo-msingi, kuruhusu maandishi kuongezwa kwa njia ya kawaida kwenye kifaa na saizi za poti ya kutazama. Angalia ukurasa wa RFS ili kujua jinsi hii inavyofanya kazi.
Sass
Vigezo
Vichwa vina vigeu vilivyojitolea vya kuweka ukubwa na nafasi.
$headings-margin-bottom: $spacer * .5;
$headings-font-family: null;
$headings-font-style: null;
$headings-font-weight: 500;
$headings-line-height: 1.2;
$headings-color: null;
Vipengele mbalimbali vya uchapaji vilivyoangaziwa hapa na kwenye Reboot pia vina viambajengo maalum.
$lead-font-size: $font-size-base * 1.25;
$lead-font-weight: 300;
$small-font-size: .875em;
$sub-sup-font-size: .75em;
$text-muted: $gray-600;
$initialism-font-size: $small-font-size;
$blockquote-margin-y: $spacer;
$blockquote-font-size: $font-size-base * 1.25;
$blockquote-footer-color: $gray-600;
$blockquote-footer-font-size: $small-font-size;
$hr-margin-y: $spacer;
$hr-color: inherit;
$hr-height: $border-width;
$hr-opacity: .25;
$legend-margin-bottom: .5rem;
$legend-font-size: 1.5rem;
$legend-font-weight: null;
$mark-padding: .2em;
$dt-font-weight: $font-weight-bold;
$nested-kbd-font-weight: $font-weight-bold;
$list-inline-padding: .5rem;
$mark-bg: #fcf8e3;
Mchanganyiko
Hakuna michanganyiko iliyojitolea ya uchapaji, lakini Bootstrap haitumii Sizing Font Sizing (RFS) .