Rubutun rubutu

Takaddun bayanai da misalai don rubutun Bootstrap, gami da saitunan duniya, kanun labarai, rubutun jiki, jeri, da ƙari.

Saitunan duniya

Bootstrap yana saita ainihin nunin duniya, rubutun rubutu, da salon haɗin kai. Lokacin da ake buƙatar ƙarin sarrafawa, duba azuzuwan amfanin rubutu .

Yi amfani da tari na rubutu na asali wanda ke zaɓar mafi kyau font-familyga kowane OS da na'ura.
Don ƙarin ma'aunin nau'in nau'in nau'i mai haɗaka da samun dama, muna amfani da tushen asalin mai binciken font-size(yawanci 16px) don haka baƙi za su iya keɓance kuskuren burauzan su kamar yadda ake buƙata.
Yi amfani da $font-family-base, $font-size-base, da $line-height-basesifofi kamar yadda tushen rubutun mu ya shafi <body>.
Saita kalar mahaɗin duniya ta hanyar $link-colorkuma yi amfani da layin layi kawai akan :hover.
Yi amfani $body-bgdon saita background-colora kan <body>( #fffta tsohuwa).

Ana iya samun waɗannan salon a _reboot.scssciki , kuma ana siffanta masu canjin duniya a cikin _variables.scss. Tabbatar kun saita $font-size-baseciki rem.

Kanun labarai

Duk kanun HTML, <h1>ta hanyar <h6>, akwai su.

Jagora	Misali
`<h1></h1>`	h1. Bootstrap jagora
`<h2></h2>`	h2. Bootstrap jagora
`<h3></h3>`	h3. Bootstrap jagora
`<h4></h4>`	h4. Bootstrap jagora
`<h5></h5>`	h5. Bootstrap jagora
`<h6></h6>`	h6. Bootstrap jagora

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

.h1Hakanan ana samun ta hanyar .h6azuzuwan, don lokacin da kuke son daidaita salon rubutun rubutu amma ba za ku iya amfani da abubuwan HTML masu alaƙa ba.

h1. Bootstrap jagora

h2. Bootstrap jagora

h3. Bootstrap jagora

h4. Bootstrap jagora

h5. Bootstrap jagora

h6. Bootstrap jagora

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

Keɓance kanun labarai

Yi amfani da azuzuwan masu amfani da aka haɗa don sake ƙirƙirar ƙaramin rubutun jigon sakandare daga Bootstrap 3.

Babban nuni mai ban sha'awa Tare da ruɗewar rubutu na sakandare

<h3>
  Fancy display heading
  <small class="text-muted">With faded secondary text</small>
</h3>

Nuna kanun labarai

An tsara abubuwan kan al'ada don yin aiki mafi kyau a cikin naman abun cikin shafin ku. Lokacin da kuke buƙatar jagora don ficewa, yi la'akari da yin amfani da taken nuni - mafi girma, salon taken ra'ayi. Ka tuna cewa waɗannan jigogin ba su da amsa ta tsohuwa, amma yana yiwuwa a kunna girman rubutu masu amsawa .

Nunawa 1

Nunawa 2

Nunawa 3

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

Jagoranci

Sanya sakin layi ya fice ta ƙara .lead.

Wannan sakin layi ne na jagora. Ya fice daga sakin layi na yau da kullun.

<p class="lead">
  This is a lead paragraph. It stands out from regular paragraphs.
</p>

Abubuwan rubutu na layi

Salo don abubuwan HTML5 na layi na gama gari.

Kuna iya amfani da alamar alamar zuwahaskakawarubutu.

~~Wannan layin rubutun ana nufin a kula dashi azaman rubutun da aka goge.~~

~~Wannan layin rubutun ana nufin a bi da shi kamar yadda ba daidai ba ne.~~

Wannan layin rubutun ana nufin a kula dashi azaman ƙari ga takaddar.

Wannan layin rubutun zai fassara kamar yadda aka ja layi

Wannan layin rubutun ana nufin a kula dashi azaman bugu mai kyau.

An fassara wannan layin azaman rubutu mai ƙarfi.

An fassara wannan layin azaman rubutun rubutun.

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

.markHakanan ana samun .smallazuzuwan don yin amfani da salo iri ɗaya kamar yadda <mark>kuma <small>yayin guje wa duk wani abin da ba'a so ba wanda alamun zai kawo.

Duk da yake ba a nuna a sama ba, jin kyauta don amfani <b>kuma <i>a cikin HTML5. <b>ana nufin haskaka kalmomi ko jimloli ba tare da isar da ƙarin mahimmanci ba yayin <i>da galibin murya ne, kalmomin fasaha, da sauransu.

Abubuwan amfani rubutu

Canja jeri na rubutu, canzawa, salo, nauyi, da launi tare da kayan aikin rubutu da kayan aikin launi .

Taqaitaccen bayani

Salon aiwatar da abubuwan HTML <abbr>don gajartawa da gajartawa don nuna faɗaɗɗen sigar akan hover. Gajartawa suna da tsayayyen layi kuma suna samun siginan taimako don samar da ƙarin mahallin akan shawagi da masu amfani da fasahar taimako.

Ƙara .initialismzuwa ga taƙaitaccen girman girman rubutu kaɗan.

attr

HTML

<p><abbr title="attribute">attr</abbr></p>
<p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr></p>

Blockquotes

Don faɗar tubalan abun ciki daga wani tushe a cikin takaddar ku. Kunna <blockquote class="blockquote">kowane HTML a matsayin zance.

Sanannen zance, wanda ke ƙunshe a cikin ɓangaren blockquote.

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

Sunan tushe

Ƙara wani <footer class="blockquote-footer">don gano tushen. Kunna sunan tushen aikin a cikin <cite>.

Sanannen zance, wanda ke ƙunshe a cikin ɓangaren blockquote.

Wani sananne a Tushen Tushen

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

Daidaitawa

Yi amfani da kayan aikin rubutu kamar yadda ake buƙata don canza daidaitawar blockquote ɗin ku.

Sanannen zance, wanda ke ƙunshe a cikin ɓangaren blockquote.

Wani sananne a Tushen Tushen

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

Sanannen zance, wanda ke ƙunshe a cikin ɓangaren blockquote.

Wani sananne a Tushen Tushen

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

Lissafi

Mara salo

Cire tsoho list-styleda gefen hagu akan abubuwan jeri (yara nan take kawai). Wannan kawai ya shafi jerin abubuwa na yara nan da nan , ma'ana kuna buƙatar ƙara ajin don kowane jeri na gida kuma.

Wannan jeri ne.
Ya bayyana gaba daya mara salo.
A tsari, har yanzu jeri ne.
Koyaya, wannan salon yana aiki ne kawai ga abubuwan yara nan da nan.
Lissafin da aka saka:
- wannan salon bai shafe su ba
- har yanzu zai nuna harsashi
- kuma suna da gefen hagu mai dacewa
Wannan na iya zuwa da amfani a wasu yanayi.

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

Layin layi

Cire harsasai na jeri kuma yi amfani da ɗan haske margintare da haɗin aji biyu, .list-inlineda .list-inline-item.

Wannan abun jeri ne.
Da wani.
Amma ana nuna su ta layi.

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

Daidaita lissafin bayanin

Daidaita sharuɗɗa da kwatance a kwance ta amfani da ƙayyadaddun azuzuwan tsarin grid ɗin mu (ko mixins). Don dogon sharuɗɗa, zaku iya ƙara .text-truncateaji da zaɓi don yanke rubutu da ellipsis.

Jerin bayanin

Jerin bayanin ya dace don ma'anar kalmomi.

Lokaci

Ma'anar kalmar.

Da wasu ƙarin ma'anar ma'anar mai riƙe wuri.

Wani lokaci

Wannan ma'anar gajere ce, don haka babu ƙarin sakin layi ko wani abu.

An yanke kalmar da aka yanke

Wannan na iya zama da amfani idan sarari ya matse. Yana ƙara ellipsis a ƙarshe.

Gurasa

Jerin ma'anar ma'ana: Na ji kuna son lissafin ma'anar. Bari in sanya lissafin ma'anar a cikin jerin ma'anar ku.

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

Girman rubutu masu amsawa

Kamar na v4.3.0, Bootstrap yana jigilar kaya tare da zaɓi don ba da damar girman girman rubutu, yana ba da damar rubutu don haɓaka ta halitta a cikin na'ura da girman kallon kallo. Ana iya kunna RFS$enable-responsive-font-sizes ta canza canjin Sass zuwa trueda sake haɗa Bootstrap.

Don tallafawa RFS , muna amfani da mahaɗin Sass don maye gurbin kayanmu na yau da kullun font-size. Za a haɗa girman nau'ikan rubutu masu amsawa zuwa calc()ayyuka tare da gaurayawan remraka'o'in kallon kallo don ba da damar ɗabi'ar ƙira. Ana iya samun ƙarin game da RFS da tsarin sa akan ma'ajiyar ta GitHub .