in English

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.

Li ser vê rûpelê

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 saz $link-colorbikin.
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

html

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

html

<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 bisekine, bi karanîna sernavek xuyangê bifikirin bifikirin - şêwazek sernivîsê ya mezintir, hinekî bi ramanek bêtir.

Nîşan 1

Nîşan 2

Nîşan 3

Nîşan 4

Nîşan 5

Nîşan 6

<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>
<h1 class="display-5">Display 5</h1>
<h1 class="display-6">Display 6</h1>

Sernavên xuyangê bi riya $display-font-sizesnexşeya Sass û du guherbaran ve têne mîheng kirin, $display-font-weightû$display-line-height .

Sernavên xuyangê bi du guherbaran ve têne xweş kirin, $display-font-familyû $display-font-style.

$display-font-sizes: (
  1: 5rem,
  2: 4.5rem,
  3: 4rem,
  4: 3.5rem,
  5: 3rem,
  6: 2.5rem
);

$display-font-family: null;
$display-font-style:  null;
$display-font-weight: 300;
$display-line-height: $headings-line-height;

Gûlle

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

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

html

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

html

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

Hişyar bin ku divê ew tag ji bo mebesta semantîkî werin bikar anîn:

metna ku ji bo mebestên referansê an nîşankirinê hatî nîşankirin an ronî kirin temsîl dike.
şîroveyên alîgir û çapa piçûk, mîna maf û nivîsa qanûnî, temsîl dike.
<s>hêmanên ku êdî ne têkildar in an jî ne rast in temsîl dike.
qalibek ji nivîsa xêzkirî nîşan dide ku divê bi rengekî ku nîşan bide ku şîroveyek ne-tekst heye were pêşkêş kirin.

Heke hûn dixwazin nivîsa xwe şêwaz bikin, divê hûn li şûna wan dersên jêrîn bikar bînin:

.markdê heman şêwazên wekî .
.smalldê heman şêwazên wekî .
.text-decoration-underlinedê heman şêwazên wekî .
.text-decoration-line-throughdê heman şêwazên wekî <s>.

Digel ku li jor nayê xuyang kirin, bi serbestî bikar bînin û di HTML5 de. tê wateya ronîkirina peyvan an hevokan bêyî gihandina girîngiyek zêde, di heman demê de 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ê, veguheztin, şêwaz, giranî, rêz-bilindî, xemilandin û reng biguherî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

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.

html

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

Navê çavkaniyekê

Taybetmendiya HTML-ê hewce dike ku jêdera blokê li derveyî <blockquote>. Dema ku veqetandinê peyda bikin, xwe <blockquote>di nav ayekê de bipêçin <figure>û <figcaption>hêmanek asta blokê (mînak, ) bi .blockquote-footerpolê re bikar bînin. Jê bawer bin ku navê xebata çavkaniyê <cite>jî pêça.

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

html

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

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.

html

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

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

html

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

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.

html

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

html

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

html

<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

Di Bootstrap 5-ê de, me ji hêla xwerû ve mezinahiyên fontê yên bersivdar çalak kiriye, ku dihêle ku nivîs bi rengek xwezayî di nav mezinahiyên cîhaz û dîmenderê de were pîvandin. Li rûpela RFS binihêrin da ku hûn fêr bibin ka ev çawa dixebite.

Sass

Variables

Sernav ji bo mezinahî û cihêbûnê hin guhêrbarên veqetandî hene.

$headings-margin-bottom:      $spacer * .5;
$headings-font-family:        null;
$headings-font-style:         null;
$headings-font-weight:        500;
$headings-line-height:        1.2;
$headings-color:              null;

Hêmanên cûrbecûr yên tîpografiyê yên ku li vir û di Reboot -ê de hatine girtin jî guhêrbarên veqetandî hene.

$lead-font-size:              $font-size-base * 1.25;
$lead-font-weight:            300;

$small-font-size:             .875em;

$sub-sup-font-size:           .75em;

$text-muted:                  $gray-600;

$initialism-font-size:        $small-font-size;

$blockquote-margin-y:         $spacer;
$blockquote-font-size:        $font-size-base * 1.25;
$blockquote-footer-color:     $gray-600;
$blockquote-footer-font-size: $small-font-size;

$hr-margin-y:                 $spacer;
$hr-color:                    inherit;

// fusv-disable
$hr-bg-color:                 null; // Deprecated in v5.2.0
$hr-height:                   null; // Deprecated in v5.2.0
// fusv-enable

$hr-border-color:             null; // Allows for inherited colors
$hr-border-width:             $border-width;
$hr-opacity:                  .25;

$legend-margin-bottom:        .5rem;
$legend-font-size:            1.5rem;
$legend-font-weight:          null;

$dt-font-weight:              $font-weight-bold;

$list-inline-padding:         .5rem;

$mark-padding:                .1875em;
$mark-bg:                     $yellow-100;

Mixins

Ji bo tîpografiyê mîksên veqetandî tune, lê Bootstrap Mezinahiya Fontê Bersiv (RFS) bikar tîne .