Source

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

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.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor dalali. Duis mollis, est non commodo luctus.

<p class="lead">
  Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
</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.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nambari kamili imesababisha ante.

<blockquote class="blockquote">
  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>

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.

Mtu maarufu katika Mada ya Chanzo

<blockquote class="blockquote">
  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</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.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nambari kamili imesababisha ante.

Mtu maarufu katika Mada ya Chanzo

<blockquote class="blockquote text-center">
  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nambari kamili imesababisha ante.

Mtu maarufu katika Mada ya Chanzo

<blockquote class="blockquote text-right">
  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</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.

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

<ul class="list-unstyled">
  <li>Lorem ipsum dolor sit amet</li>
  <li>Consectetur adipiscing elit</li>
  <li>Integer molestie lorem at massa</li>
  <li>Facilisis in pretium nisl aliquet</li>
  <li>Nulla volutpat aliquam velit
    <ul>
      <li>Phasellus iaculis neque</li>
      <li>Purus sodales ultricies</li>
      <li>Vestibulum laoreet porttitor sem</li>
      <li>Ac tristique libero volutpat at</li>
    </ul>
  </li>
  <li>Faucibus porta lacus fringilla vel</li>
  <li>Aenean sit amet erat nunc</li>
  <li>Eget porttitor lorem</li>
</ul>

Katika mstari

Ondoa vitone vya orodha na uweke mwanga marginkwa mchanganyiko wa aina mbili, .list-inlinena .list-inline-item.

Lorem ipsum
Phasellus iaculis
Nulla volutpat

<ul class="list-inline">
  <li class="list-inline-item">Lorem ipsum</li>
  <li class="list-inline-item">Phasellus iaculis</li>
  <li class="list-inline-item">Nulla volutpat</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.

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.

<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">Euismod</dt>
  <dd class="col-sm-9">
    <p>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</p>
    <p>Donec id elit non mi porta gravida at eget metus.</p>
  </dd>

  <dt class="col-sm-3">Malesuada porta</dt>
  <dd class="col-sm-9">Etiam porta sem malesuada magna mollis euismod.</dd>

  <dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
  <dd class="col-sm-9">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</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">Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.</dd>
    </dl>
  </dd>
</dl>

Uchapaji msikivu

Uchapaji jibu hurejelea kuongeza maandishi na vijenzi kwa kurekebisha tu kipengele cha mizizi font-sizendani ya mfululizo wa hoja za midia. Bootstrap haikufanyii hivi, lakini ni rahisi kuiongeza ikiwa unaihitaji.

Hapa kuna mfano wake katika mazoezi. Chagua font-sizemaswali yoyote na media unayotaka.

html {
  font-size: 1rem;
}

@include media-breakpoint-up(sm) {
  html {
    font-size: 1.2rem;
  }
}

@include media-breakpoint-up(md) {
  html {
    font-size: 1.4rem;
  }
}

@include media-breakpoint-up(lg) {
  html {
    font-size: 1.6rem;
  }
}