Uchapaji

Hati na mifano ya uchapaji wa Bootstrap, ikijumuisha mipangilio ya kimataifa, vichwa, maandishi ya mwili, orodha, na zaidi.

Katika ukurasa huu

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-familykwa 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-basesifa kama msingi wetu wa uchapaji kutumika kwa <body>.
Weka rangi ya kiungo cha kimataifa kupitia $link-color.
Tumia $body-bgkuweka background-colorkwenye <body>( #fffkwa chaguo-msingi).

Mitindo hii inaweza kupatikana ndani _reboot.scss, na anuwai za kimataifa zimefafanuliwa katika _variables.scss. Hakikisha $font-size-basekuweka 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>

.h1kupitia .h6madarasa 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

html

<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

html

<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.

Onyesho 1

Onyesho 2

Onyesho 3

Onyesho 4

Onyesho 5

Onyesho 6

<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-sizesramani ya Sass na vigeu viwili, $display-font-weightna $display-line-height.

Vichwa vya onyesho vinaweza kubinafsishwa kupitia vigeu viwili, $display-font-familyna $display-font-style.

$display-font-sizes: (
  1: 5rem,
  2: 4.5rem,
  3: 4rem,
  4: 3.5rem,
  5: 3rem,
  6: 2.5rem
);

$display-font-family: null;
$display-font-style:  null;
$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.

html

<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.

html

<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:

inawakilisha maandishi ambayo yamewekwa alama au kuangaziwa kwa madhumuni ya marejeleo au nukuu.
inawakilisha maoni ya kando na maandishi madogo, kama hakimiliki na maandishi ya kisheria.
<s>inawakilisha kipengele ambacho hakifai tena au si sahihi tena.
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:

.markitatumia mitindo sawa na .
.smallitatumia mitindo sawa na .
.text-decoration-underlineitatumia mitindo sawa na .
.text-decoration-line-throughitatumia mitindo sawa na <s>.

Ingawa haijaonyeshwa hapo juu, jisikie huru kutumia na katika HTML5. inakusudiwa kuangazia maneno au vifungu vya maneno bila kuwasilisha umuhimu wa ziada, huku 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 .initialismkwa kifupi cha saizi ndogo ya fonti.

attr

HTML

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 <blockquote class="blockquote">HTML yoyote kama nukuu.

Nukuu inayojulikana sana, iliyo katika kipengele cha kuzuia.

html

<blockquote class="blockquote">
  <p>A well-known quote, contained in a blockquote element.</p>
</blockquote>

Kutaja chanzo

Vipimo vya HTML vinahitaji kwamba maelezo ya blockquote kuwekwa nje ya faili ya <blockquote>. Unapotoa maelezo, funga <blockquote>a <figure>na utumie <figcaption>kipengele cha kiwango cha kuzuia (km, ) na .blockquote-footerdarasa. Hakikisha umefunga jina la kazi ya chanzo <cite>pia.

Nukuu inayojulikana sana, iliyo katika kipengele cha kuzuia.

html

<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.

Nukuu inayojulikana sana, iliyo katika kipengele cha kuzuia.

html

<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>

Nukuu inayojulikana sana, iliyo katika kipengele cha kuzuia.

html

<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-stylena 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 vya haraka.
Orodha zilizowekwa:
- hawajaathiriwa na mtindo huu
- bado itaonyesha risasi
- na uwe na ukingo wa kushoto unaofaa
Hii bado inaweza kusaidia katika hali zingine.

html

<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 marginkwa mchanganyiko wa aina mbili, .list-inlinena .list-inline-item.

Hiki ni kipengee cha orodha.
Na mwingine.
Lakini zinaonyeshwa kwenye mstari.

html

<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>

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-truncatedarasa 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 zaidi 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.

html

<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, tumewasha saizi za fonti zinazojibika kwa chaguomsingi, na kuruhusu maandishi kupanuka zaidi kwa ukubwa kwenye kifaa na ukubwa wa 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;

// fusv-disable
$hr-bg-color:                 null; // Deprecated in v5.2.0
$hr-height:                   null; // Deprecated in v5.2.0
// fusv-enable

$hr-border-color:             null; // Allows for inherited colors
$hr-border-width:             $border-width;
$hr-opacity:                  .25;

$legend-margin-bottom:        .5rem;
$legend-font-size:            1.5rem;
$legend-font-weight:          null;

$dt-font-weight:              $font-weight-bold;

$list-inline-padding:         .5rem;

$mark-padding:                .1875em;
$mark-bg:                     $yellow-100;

Mchanganyiko

Hakuna michanganyiko iliyojitolea ya uchapaji, lakini Bootstrap haitumii Sizing Font Sizing (RFS) .