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-family
kwambiri pa OS ndi chipangizo chilichonse. - Kuti tipeze mitundu yambiri yophatikizika komanso yofikirika, timagwiritsa ntchito mizu yosasinthika ya
font-size
asakatuli (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-base
monga typographic base yathu yogwiritsira ntchito<body>
. - Khazikitsani mtundu wa ulalo wapadziko lonse kudzera
$link-color
ndikugwiritsa ntchito mizere ya ulalo pa:hover
. - Gwiritsani
$body-bg
ntchito kukhazikitsa abackground-color
pa<body>
(#fff
mwachisawawa).
Masitayilo awa atha kupezeka mkati _reboot.scss
, ndipo zosintha zapadziko lonse lapansi zimatanthauzidwa mu _variables.scss
. Onetsetsani kuti $font-size-base
mwalowa 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>
.h1
kudzera .h6
m'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>
.mark
ndipo .small
makalasi 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 .initialism
ku 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.
<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.
<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.
<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-style
ndi 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 margin
kophatikiza magulu awiri, .list-inline
ndi .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-truncate
kalasi 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-sizes
Sass true
ndi 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 rem
ndi mayunitsi owonera kuti athe kuyankha mokweza. Zambiri za RFS ndi kasinthidwe kake zitha kupezeka pankhokwe yake ya GitHub .