Tîpografi

Belgekirin û mînakên ji bo tîpografiya Bootstrap, di nav de mîhengên gerdûnî, sernav, teksta laş, navnîşan, û hêj bêtir.

Mîhengên gerdûnî

Bootstrap pêşandana gerdûnî ya bingehîn, tîpografî, û şêwazên girêdanê destnîşan dike. Dema ku bêtir kontrol hewce ye, dersên kargêriya nivîsê binihêrin .

Stek tîpên xwemalî bikar bînin ku font-familyji bo her OS û cîhazê çêtirîn hildibijêre.
Ji bo pîvanek cûrbecûr tevlihevtir û gihîştî, em root-ya xwerû ya gerokê bikar tînin font-size(bi gelemperî 16px) da ku mêvan dikarin li gorî hewcedariyê pêşnumayên geroka xwe xweş bikin.
$font-family-baseWekî bingeha meya tîpografî ya ku li ser hatî sepandin , $font-size-base, û $line-height-basetaybetmendiyan bikar bînin <body>.
Rengê girêdana gerdûnî bi rê ve $link-colorbicîh bikin û binê zencîreyan tenê li ser bicîh bikin :hover.
Ji $body-bgbo danîna a background-colorli ser <body>( -a xwerû #fff) bikar bînin.

Ev şêwaz di hundurê de têne dîtin _reboot.scss, û guhêrbarên gerdûnî di nav de têne destnîşan kirin _variables.scss. $font-size-basePiştrast bike ku tê de bicîh bikin rem.

Sernav

Hemî sernavên HTML-ê, <h1>bi riya <h6>, berdest in.

Sernivîs	Mînak
`<h1></h1>`	h1. Sernavê Bootstrap
`<h2></h2>`	h2. Sernavê Bootstrap
`<h3></h3>`	h3. Sernavê Bootstrap
`<h4></h4>`	h4. Sernavê Bootstrap
`<h5></h5>`	h5. Sernavê Bootstrap
`<h6></h6>`	h6. Sernavê 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>

.h1di nav .h6dersan de jî hene, ji bo dema ku hûn dixwazin şêwaza tîpa sernavê li hev bikin lê nikaribin hêmana HTML-ê ya têkildar bikar bînin.

h1. Sernavê Bootstrap

h2. Sernavê Bootstrap

h3. Sernavê Bootstrap

h4. Sernavê Bootstrap

h5. Sernavê Bootstrap

h6. Sernavê 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>

Xweserkirina sernavan

Dersên kargêriya tevlêkirî bikar bînin da ku ji Bootstrap 3 nivîsa sernavê ya piçûk ji nû ve biafirînin.

Sernavê xuyangê ya xeyalî Bi nivîsa duyemîn a ziravkirî

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

Sernavan nîşan bide

Hêmanên sernavê yên kevneşopî hatine sêwirandin ku di goştê naveroka rûpela we de çêtirîn bixebitin. Gava ku hûn hewce ne ku sernavek rawestin, bi karanîna sernavek xuyangê bifikirin - şêwazek sernivîsê ya mezintir, hinekî bi ramanek bêtir. Bînin bîra xwe ku ev sernav ji hêla xwerû ve ne bersivdar in, lê gengaz e ku mezinahiyên tîpên bersivdar çalak bikin .

Nîşan 1

Nîşan 2

Nîşan 3

Nîşan 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>

Gûlle

Bi lêzêdekirina paragrafekê rawestin .lead.

Ev paragrafek sereke ye. Ew ji paragrafên birêkûpêk derdikeve.

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

Hêmanên nivîsê yên xêzkirî

Styling ji bo hêmanên HTML5-ê yên hevbeş.

Hûn dikarin nîşana nîşanê bikar bîninhighlightnivîstok.

~~Ev rêza nivîsê tê wateya ku wekî metna jêbirin were hesibandin.~~

~~Ev rêza nivîsê tê wê wateyê ku wekî êdî ne rast were hesibandin.~~

Ev rêza nivîsê tê wateya ku wekî pêvekek belgeyê were hesibandin.

Ev rêza nivîsê dê wekî binxêzkirî be

Ev rêza nivîsê tê vê wateyê ku wekî çapa xweş were hesibandin.

Ev rêz wek nivîsa qelew hatiye pêşkêşkirin.

Ev rêz wek nivîsa îtalîk hatiye pêşkêşkirin.

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

.markû .smallders di heman demê de peyda dibin ku heman şêwazên wekî <mark>û di heman demê de <small>ku ji ber encamên semantîkî yên nexwestî yên ku etîketan derdixin dûr bixin.

Digel ku li jor nayê xuyang kirin, bi serbestî bikar bînin <b>û <i>di HTML5 de. <b>tê vê wateyê ku peyvan an hevokan ronî bike bêyî ku girîngiyek zêde ragihîne dema ku <i>bi piranî ji bo deng, peyvên teknîkî, hwd.

Karûbarên nivîsê

Bi karûbarên meya nivîsê û karûbarên rengîn re hevrêziya nivîsê, veguherîn, şêwaz, giranî û reng biguhezînin .

Kurtenivîsandin

Pêkanîna stîlîzekirî ya <abbr>hêmana HTML-ê ji bo kurtenivîs û kurtenivîsan da ku guhertoya berfireh li ser hover nîşan bide. Kurtenivîsek xwedan xêzek xwerû heye û kursorek alîkariyê werdigire da ku li ser hover û ji bikarhênerên teknolojiyên alîkar re çarçoveyek zêde peyda bike.

Ji .initialismbo tîpek piçûktir li kurtenivîsekê zêde bikin.

attr

HTML

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

Blockquotes

Ji bo girtina blokên naverokê ji çavkaniyek din di hundurê belgeya we de. <blockquote class="blockquote">Li dora her HTML-ê wekî vebêjê bipêçin .

Gotinek naskirî, ku di hêmanek blokê de heye.

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

Navê çavkaniyekê

Ji <footer class="blockquote-footer">bo tespîtkirina çavkaniyê a-yek zêde bikin. Navê xebata çavkaniyê pêça <cite>.

Gotinek naskirî, ku di hêmanek blokê de heye.

Kesek di Sernavê Çavkaniyê de navdar e

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

Alignment

Ji bo guheztina lihevhatina bloka xweya xwe wekî ku hewce be karûbarên nivîsê bikar bînin.

Gotinek naskirî, ku di hêmanek blokê de heye.

Kesek di Sernavê Çavkaniyê de navdar e

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

Gotinek naskirî, ku di hêmanek blokê de heye.

Kesek di Sernavê Çavkaniyê de navdar e

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

Lists

Unstyled

Li ser hêmanên navnîşê marjînala xwerû list-styleû çepê rake (tenê zarokên yekser). Ev tenê ji bo tiştên tavilê yên navnîşa zarokan derbas dibe , tê vê wateyê ku hûn hewce ne ku ji bo her navnîşên hêlîn jî polê zêde bikin.

Ev lîsteyek e.
Ew bi tevahî bê şêwaz xuya dike.
Ji hêla strukturî ve, ew hîn jî navnîşek e.
Lêbelê, ev şêwaz tenê ji bo hêmanên zarokê yekser derbas dibe.
Lîsteyên nested:
- ji vê şêwazê bêbandor in
- dê hê jî guleyek nîşan bide
- û xwedî marjîna çepê ya guncan e
Dibe ku ev hîn jî di hin rewşan de bi kêr were.

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

Inline

Kulîlkên lîsteyek derxînin û hin ronahiyê marginbi tevliheviya du çînan bicîh bikin, .list-inlineû .list-inline-item.

Ev babeteke lîsteya ye.
Û yekî din.
Lê ew di hundurê de têne xuyang kirin.

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

Lihevhatina lîsteya danasînê

Bi karanîna çînên pêşwextkirî yên pergala meya torê (an jî tevliheviyên semantîkî) şert û ravekirinên horîzontal li hev bikin. Ji bo şertên dirêj, hûn dikarin vebijarkî .text-truncateçînek lê zêde bikin da ku nivîsê bi elipsîsê qut bikin.

Navnîşan lîsteyên

Lîsteya ravekirinê ji bo diyarkirina terman bêkêmasî ye.

Îfade

Pênaseya termê.

Û hin nivîsa pênasekirina cîhê din.

Termek din

Ev pênase kurt e, ji ber vê yekê paragrafên zêde an tiştek tune.

Termê qutkirî tê qutkirin

Dema ku cîh teng be ev dikare bikêr be. Di dawiyê de elipsisek zêde dike.

Nesting

Lîsteya pênase hêlîn: Min bihîst ku hûn ji navnîşên pênase hez dikin. Bihêle ez navnîşek pênase bikim hundurê navnîşa pênaseya we.

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

Mezinahiyên tîpên bersivdar

Ji v4.3.0 ve, Bootstrap vebijarka çalakkirina mezinahiyên fontê yên bersivdar vedigire, dihêle ku nivîs bi rengek xwezayî di nav mezinahiyên cîhaz û dîmenderê de were pîvandin. RFS dikare bi $enable-responsive-font-sizesguheztina guherbara Sass li trueBootstrap û ji nû ve berhevkirina Bootstrap ve were çalak kirin.

Ji bo piştgirîkirina RFS , em Sass mixin bikar tînin da ku font-sizetaybetmendiyên xweyên normal biguhezînin. Mezinahiyên fontê yên bersivdar dê di calc()fonksiyonên bi tevlihevî remû yekîneyên dîtinê de bêne berhev kirin da ku tevgera pîvana bersivdar çalak bike. Zêdetir li ser RFS û veavakirina wê dikare li ser depoya wê ya GitHub were dîtin .