Source

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 celebek berfirehtir û gihîştî, em guman dikin ku root-ya xwerû ya gerokê 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.

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.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. 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>

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 .

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

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

Navê çavkaniyekê

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Kesek di Sernavê Çavkaniyê de navdar e

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

Alignment

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Kesek di Sernavê Çavkaniyê de navdar e

<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. Integer posuere erat a ante.

Kesek di Sernavê Çavkaniyê de navdar e

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

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.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Hêsankirin di aliquet pretium nisl
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>

Inline

Kulîlkên lîsteyek derxînin û hin ronahiyê marginbi tevliheviya du çînan bicîh bikin, .list-inlineû .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>

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.

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.

Termê qutkirî tê qutkirin

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

Nesting

Lîsteya pênase hêlîn: 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>

Tîpografiya bersivdar

Tîpografiya bersivdar bi pîvandina nivîs û hêmanan ve bi tenê verastkirina hêmana bingehîn font-sizedi nav rêzek pirsên medyayê de vedibêje. Bootstrap vê yekê ji we re nake, lê heke hûn jê re hewce ne zêde hêsan e.

Li vir mînakek wê di pratîkê de ye. font-sizeTiştên ku hûn dixwazin û pirsên medyayê hilbijêrin .

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