Tsallake zuwa babban abun ciki Tsallake zuwa kewayawa na takardu
in English

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 mai haɗawa da samun dama, muna amfani da tushen tushen mai binciken font-size(yawanci 16px) don haka baƙi za su iya keɓance gazawar burauzar 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-color.
  • 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.

Nunawa 1
Nunawa 2
Nunawa 3
Nunawa 4
Nunawa 5
Nunawa 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>

An saita taken nuni ta hanyar $display-font-sizestaswirar Sass da masu canji biyu, $display-font-weightda $display-line-height.

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

$display-font-weight: 300;
$display-line-height: $headings-line-height;

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>

Hattara cewa ya kamata a yi amfani da waɗancan tamburan don dalilai na ma'ana:

  • <mark>yana wakiltar rubutu wanda aka yiwa alama ko alama don dalilai ko sanarwa.
  • <small>yana wakiltar sharhin gefe da ƙaramin bugu, kamar haƙƙin mallaka da rubutu na doka.
  • <s>yana wakiltar abubuwan da ba su da alaƙa ko kuma ba su da inganci.
  • <u>yana wakiltar tazarar rubutu na layi wanda yakamata a fassara shi ta hanyar da ke nuna cewa yana da bayanin da ba na rubutu ba.

Idan kuna son tsara rubutun ku, yakamata kuyi amfani da azuzuwan masu zuwa maimakon:

  • .markzai yi amfani da salo iri ɗaya kamar <mark>.
  • .smallzai yi amfani da salo iri ɗaya kamar <small>.
  • .text-decoration-underlinezai yi amfani da salo iri ɗaya kamar <u>.
  • .text-decoration-line-throughzai yi amfani da salo iri ɗaya kamar <s>.

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 daidaita rubutu, canzawa, salo, nauyi, tsayin layi, ado da launi tare da kayan aikin rubutu da kayan aikin launi .

Taqaitaccen bayani

Salon aiwatar da abubuwan HTML <abbr>don gajartawa da gajarta 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>A well-known quote, contained in a blockquote element.</p>
</blockquote>

Sunan tushe

Takaddun HTML yana buƙatar sanya sifa ta blockquote a wajen <blockquote>. Lokacin bayar da sifa, kunsa naku <blockquote>a cikin a <figure>kuma yi amfani da kashi <figcaption>ko matakin toshe (misali, <p>) tare da .blockquote-footerajin. Tabbatar kunsa sunan tushen aikin a <cite>ciki kuma.

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

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

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.

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

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

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

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

A cikin Bootstrap 5, mun kunna girman font mai amsawa ta tsohuwa, ba da damar rubutu ya fi girma ta halitta a cikin na'ura da girman tashar kallo. Duba shafin RFS don gano yadda wannan ke aiki.

Sass

Masu canji

Kanun labarai suna da wasu keɓaɓɓun mabambanta don ƙima da tazara.

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

Daban-daban abubuwan rubutun rubutu da aka rufe anan da kuma a cikin Sake yi suma suna da sauye-sauye masu mahimmanci.

$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;
$hr-height:                   $border-width;
$hr-opacity:                  .25;

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

$mark-padding:                .2em;

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

$nested-kbd-font-weight:      $font-weight-bold;

$list-inline-padding:         .5rem;

$mark-bg:                     #fcf8e3;

Mixins

Babu mahaɗan da aka keɓe don rubutun rubutu, amma Bootstrap yana amfani da Responsive Font Sizing (RFS) .