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-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-colorna tumia mistari ya chini ya kiungo kwenye :hover.
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 wa kichwa lakini hauwezi 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 wa kichwa wenye maoni zaidi. Kumbuka vichwa hivi havijisikii kwa chaguo-msingi, lakini inawezekana kuwezesha saizi za fonti zinazojibu .

Onyesho 1

Onyesho 2

Onyesho 3

Onyesho 4

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

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>

.markna .smallmadarasa 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 ilhali <i>mara nyingi ni kwa 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 .initialismkwa 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 class="mb-0">A well-known quote, contained in a blockquote element.</p>
</blockquote>

Kutaja chanzo

Ongeza a <footer class="blockquote-footer">kwa kutambua chanzo. Funga jina la kazi ya chanzo katika <cite>.

Nukuu inayojulikana sana, iliyo katika kipengele cha kuzuia.

Mtu maarufu katika Mada ya Chanzo

<blockquote class="blockquote">
  <p class="mb-0">A well-known quote, contained in a blockquote element.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

Mpangilio

Tumia huduma za maandishi inavyohitajika ili kubadilisha mpangilio wa nukuu yako ya kuzuia.

Nukuu inayojulikana sana, iliyo katika kipengele cha kuzuia.

Mtu maarufu katika Mada ya Chanzo

<blockquote class="blockquote text-center">
  <p class="mb-0">A well-known quote, contained in a blockquote element.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

Nukuu inayojulikana sana, iliyo katika kipengele cha kuzuia.

Mtu maarufu katika Mada ya Chanzo

<blockquote class="blockquote text-right">
  <p class="mb-0">A well-known quote, contained in a blockquote element.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

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.

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

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

Kufikia v4.3.0, Bootstrap husafirishwa ikiwa na chaguo la kuwezesha saizi za fonti zinazojibika, ikiruhusu maandishi kupanuka zaidi kwa ukubwa kwenye kifaa na saizi ya tovuti ya kutazama. RFS inaweza kuwezeshwa kwa kubadilisha utofauti wa $enable-responsive-font-sizesSass hadi truena kurejesha Bootstrap.

Ili kusaidia RFS , tunatumia mchanganyiko wa Sass kuchukua nafasi ya font-sizemali zetu za kawaida. Saizi za fonti zinazojibu zitajumuishwa katika calc()vitendakazi pamoja na mchanganyiko wa remvitengo vya tovuti ya kutazama ili kuwezesha tabia ya mwitikio wa kuongeza ukubwa. Zaidi kuhusu RFS na usanidi wake unaweza kupatikana kwenye hazina yake ya GitHub .