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-family
ga 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-base
sifofi kamar yadda tushen rubutun mu ya shafi<body>
. - Saita kalar mahaɗin duniya ta hanyar
$link-color
. - Yi amfani
$body-bg
don saitabackground-color
a kan<body>
(#fff
ta tsohuwa).
Ana iya samun waɗannan salon a _reboot.scss
ciki , kuma ana siffanta masu canjin duniya a cikin _variables.scss
. Tabbatar kun saita $font-size-base
ciki 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>
.h1
Hakanan ana samun ta hanyar .h6
azuzuwan, 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.
<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-sizes
taswirar Sass da masu canji biyu, $display-font-weight
da $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:
.mark
zai yi amfani da salo iri ɗaya kamar<mark>
..small
zai yi amfani da salo iri ɗaya kamar<small>
..text-decoration-underline
zai yi amfani da salo iri ɗaya kamar<u>
..text-decoration-line-through
zai 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 .initialism
zuwa 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-footer
ajin. Tabbatar kunsa sunan tushen aikin a <cite>
ciki kuma.
<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.
<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>
<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-style
da 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 margin
tare da haɗin aji biyu, .list-inline
da .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-truncate
aji 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) .