Kujambula

Zolemba ndi zitsanzo za kalembedwe ka Bootstrap, kuphatikiza zosintha zapadziko lonse lapansi, mitu, zolemba zathupi, mindandanda, ndi zina zambiri.

Zokonda padziko lonse lapansi

Bootstrap imayika mawonedwe oyambira padziko lonse lapansi, typography, ndi masitayilo a ulalo. Pakafunika kuwongolera kwambiri, yang'anani makalasi ogwiritsira ntchito malemba .

Gwiritsani ntchito masanjidwe amtundu omwe amasankha zabwino font-familykwambiri pa OS ndi chipangizo chilichonse.
Kuti tipeze mitundu yambiri yophatikizika komanso yofikirika, timagwiritsa ntchito mizu yosasinthika ya font-sizeasakatuli (yomwe nthawi zambiri imakhala 16px) kuti alendo azitha kusintha makonda awo asakatuli momwe angafunikire.
Gwiritsani ntchito $font-family-base, $font-size-base, ndi mawonekedwe $line-height-basemonga typographic base yathu yogwiritsira ntchito <body>.
Khazikitsani mtundu wa ulalo wapadziko lonse kudzera $link-colorndikugwiritsa ntchito mizere ya ulalo pa :hover.
Gwiritsani $body-bgntchito kukhazikitsa a background-colorpa <body>( #fffmwachisawawa).

Masitayilo awa atha kupezeka mkati _reboot.scss, ndipo zosintha zapadziko lonse lapansi zimatanthauzidwa mu _variables.scss. Onetsetsani kuti $font-size-basemwalowa rem.

Mitu

Mitu yonse ya HTML, <h1>kupyolera mu <h6>, ilipo.

Mutu	Chitsanzo
`<h1></h1>`	h1 ndi. Mutu wa bootstrap
`<h2></h2>`	h2 ndi. Mutu wa bootstrap
`<h3></h3>`	h3 ndi. Mutu wa bootstrap
`<h4></h4>`	h4 ndi. Mutu wa bootstrap
`<h5></h5>`	h5 ndi. Mutu wa bootstrap
`<h6></h6>`	h6 ndi. Mutu wa 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>

.h1kudzera .h6m'makalasi amapezekanso, chifukwa mukafuna kufananiza masitayilo amutu koma osagwiritsa ntchito chinthu chogwirizana ndi HTML.

h1 ndi. Mutu wa bootstrap

h2 ndi. Mutu wa bootstrap

h3 ndi. Mutu wa bootstrap

h4 ndi. Mutu wa bootstrap

h5 ndi. Mutu wa bootstrap

h6 ndi. Mutu wa 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>

Kusintha mitu

Gwiritsani ntchito makalasi ophatikizidwa kuti mulembenso mutu wawung'ono wachiwiri kuchokera ku Bootstrap 3.

Mutu wowoneka bwino Wokhala ndi mawu achiwiri ozimiririka

<h3>
  Fancy display heading
  <small class="text-muted">With faded secondary text</small>
</h3>

Onetsani mitu

Mitu yachikhalidwe idapangidwa kuti izigwira bwino ntchito patsamba lanu. Mukafuna mutu kuti muwoneke bwino, ganizirani kugwiritsa ntchito mutu wowonetsera - wokulirapo, wamutu wamutu wokulirapo pang'ono. Kumbukirani kuti mitu iyi simayankhidwa mwachisawawa, koma ndizotheka kuyatsa makulidwe a font .

Chiwonetsero 1

Chiwonetsero 2

Chiwonetsero 3

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

Kutsogolera

Pangani ndime kukhala yodziwika bwino powonjezera .lead.

Iyi ndi ndime yotsogolera. Imasiyana ndi ndime zanthawi zonse.

<p class="lead">
  This is a lead paragraph. It stands out from regular paragraphs.
</p>

Zolemba zapaintaneti

Kukongoletsedwa kwazinthu zodziwika bwino za HTML5.

Mutha kugwiritsa ntchito chizindikirochi kutiwunikiranimawu.

~~Mzerewu walemba uyenera kutengedwa ngati malemba ochotsedwa.~~

~~Mzerewu uyenera kuwonedwa ngati wosalondola.~~

Mzerewu walemba uyenera kutengedwa ngati chowonjezera pa chikalatacho.

Mzere wa mawuwa uwonetsa ngati watsindikira

Mzere wa mawu awa akuyenera kuwonedwa ngati kusindikizidwa bwino.

Mzerewu wamasuliridwa ngati mawu akuda kwambiri.

Mzerewu wamasuliridwa ngati mawu opendekera.

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

.markndipo .smallmakalasi amapezekanso kuti agwiritse ntchito masitayelo omwewo <mark>komanso <small>popewa zosokoneza zilizonse zomwe ma tag angabweretse.

Ngakhale sizinawonetsedwe pamwambapa, omasuka kugwiritsa ntchito <b>komanso <i>mu HTML5. <b>cholinga chake ndi kuwunikira mawu kapena ziganizo popanda kuwonetsa kufunikira kowonjezera pomwe <i>nthawi zambiri zimakhala za mawu, mawu aukadaulo, ndi zina.

Zothandizira zolemba

Sinthani kamvekedwe ka mawu, sinthani, masitayilo, kulemera, ndi mtundu ndi zida zathu zamawu ndi utoto .

Chidule cha mawu

Kukhazikitsa kosinthika kwa chinthu cha HTML <abbr>chofupikitsa ndi ma acronyms kuti awonetse mtundu wokulitsidwa pa hover. Mafupipafupi amakhala ndi mzere wokhazikika ndipo amapeza cholozera chothandizira kuti apereke zina zowonjezera pa hover ndi kwa ogwiritsa ntchito matekinoloje othandizira.

Onjezani .initialismku chidule cha kukula kwa mawonekedwe ang'onoang'ono.

attr

HTML

<p><abbr title="attribute">attr</abbr></p>
<p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr></p>

Zolemba za block

Kuti mugwire mawu midadada kuchokera kugwero lina mkati mwazolemba zanu. Mangirirani HTML<blockquote class="blockquote"> iliyonse ngati mawu.

Mawu odziwika bwino, omwe ali mu blockquote element.

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

Kutchula gwero

Onjezani a <footer class="blockquote-footer">kuti muzindikire kochokera. Manga dzina la gwero ntchito mu <cite>.

Mawu odziwika bwino, omwe ali mu blockquote element.

Wina wotchuka mu Source Title

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

Kuyanjanitsa

Gwiritsani ntchito zolembera ngati pakufunika kusintha kusintha kwa blockquote yanu.

Mawu odziwika bwino, omwe ali mu blockquote element.

Wina wotchuka mu Source Title

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

Mawu odziwika bwino, omwe ali mu blockquote element.

Wina wotchuka mu Source Title

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

Mndandanda

Osatchulidwa

Chotsani malire okhazikika list-stylendi akumanzere pazinthu zamndandanda (ana omwe angobadwa kumene). Izi zimagwiranso ntchito pa mndandanda wazinthu zomwe zangotsala pang'ono za ana , kutanthauza kuti mudzafunikanso kuwonjezera kalasi pamndandanda uliwonse womwe wasungidwa.

Uwu ndi mndandanda.
Zikuoneka kuti sizinalembedwe.
Mwamadongosolo, akadali mndandanda.
Komabe, kalembedwe kameneka kamangokhudza zinthu zomwe zangochitika kumene za mwana.
Minda yosungidwa:
- osakhudzidwa ndi sitayilo iyi
- adzawonetsabe chipolopolo
- ndi kukhala ndi malire oyenera kumanzere
Izi zitha kukhala zothandiza nthawi zina.

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

Motsatana

Chotsani zipolopolo za mndandanda ndikuyika kuwala marginkophatikiza magulu awiri, .list-inlinendi .list-inline-item.

Ichi ndi mndandanda wazinthu.
Ndipo wina.
Koma zikuwonetsedwa pamzere.

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

Kuyika mndandanda wamafotokozedwe

Gwirizanitsani mawu ndi mafotokozedwe molunjika pogwiritsa ntchito makalasi omwe tafotokozeratu (kapena ma semantic mixin). Pamawu ataliatali, mutha kuwonjezera .text-truncatekalasi kuti muchepetse mawuwo ndi ellipsis.

Mndandanda wamafotokozedwe

Mndandanda wamafotokozedwe ndi abwino kufotokozera mawu.

Nthawi

Tanthauzo la mawuwa.

Ndipo mawu enanso otanthauzira malo.

Nthawi ina

Tanthauzoli ndi lalifupi, kotero palibe ndime zowonjezera kapena chirichonse.

Mawu odulidwa amadulidwa

Izi zitha kukhala zothandiza ngati malo ali olimba. Imawonjezera ellipsis kumapeto.

Nesting

Mndandanda wa matanthauzo okhazikika: Ndinakumvani mumakonda mindandanda yamatanthauzidwe. Ndiroleni ndiike mndandanda wa matanthauzo mkati mwa ndandanda yanu yomasulira.

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

Makulidwe amitundu omvera

Pofika pa v4.3.0, zombo za Bootstrap zili ndi mwayi wolola masaizi afonti kuyankha, kulola kuti mawu azikula mwachilengedwe pazida zonse ndi kukula kwa mawonekedwe. RFS ikhoza kuthandizidwa posintha kusintha kwa $enable-responsive-font-sizesSass truendi kubwezeretsanso Bootstrap.

Kuti tithandizire RFS , timagwiritsa ntchito chosakaniza cha Sass kuti tisinthe zinthu zathu zonse font-size. Makulidwe amtundu woyankhidwa adzaphatikizidwa kukhala calc()ntchito zosakanikirana remndi mayunitsi owonera kuti athe kuyankha mokweza. Zambiri za RFS ndi kasinthidwe kake zitha kupezeka pankhokwe yake ya GitHub .