Source

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'in nau'in nau'in nau'in nau'in nau'in nau'in nau'in nau'in nau'in nau'in nau'in nau'in nau'i nau'i nau'i nau'i nau'i nau'i nau'i nau'i nau'i nau'i nau'i nau'i nau'i nau'i nau'i nau'i nau'i nau'i nau'i nau'i nau'i nau'i nau'i nau'i nau'i nau'i nau'i nau'i nau'i nau'i nau'i nau'i)) mai haɗawa, muna ɗaukar tushen tushen burauzar font-size(yawanci 16px) don haka baƙi za su iya keɓance kuskuren burauzan su kamar yadda ake bukata.
  • 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.

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.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est ba commodo luctus.

<p class="lead">
  Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
</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.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ƙididdigar ƙididdiga ta ƙididdigewa.

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

Sunan tushe

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ƙididdigar ƙididdiga ta ƙididdigewa.

Wani sananne a Tushen Tushen 
<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>

Daidaitawa

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ƙididdigar ƙididdiga ta ƙididdigewa.

Wani sananne a Tushen Tushen 
<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. Ƙididdigar ƙididdiga ta ƙididdigewa.

Wani sananne a Tushen Tushen 
<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>

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.

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis a cikin pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculus neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat a
  • 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>

Layin layi

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

  • Lorem ipsum
  • Phasellus iaculus
  • 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>

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

Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.

Donec id un mi porta gravida a eget metus.

Malesuada porta
Ka yi la'akari da abin da ake kira euismod.
An yanke kalmar da aka yanke
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
Gurasa
Jerin ma'anar ma'ana
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>

Rubutun rubutu mai amsawa

Rubutun rubutu mai amsawa yana nufin daidaita rubutu da abubuwan da aka gyara ta hanyar daidaita tushen tushen kawai font-sizea cikin jerin tambayoyin kafofin watsa labarai. Bootstrap baya yi muku wannan, amma yana da sauƙin ƙarawa idan kuna buƙata.

Ga misalinsa a aikace. Zaɓi duk font-sizes da tambayoyin kafofin watsa labarai da kuke so.

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