Kujambula
Zolemba ndi zitsanzo za kalembedwe ka Bootstrap, kuphatikiza zosintha zapadziko lonse lapansi, mitu, zolemba zathupi, mindandanda, ndi zina zambiri.
Bootstrap imayika mawonedwe oyambira padziko lonse lapansi, typography, ndi masitayilo a ulalo. Mukafunika kuwongolera kwambiri, yang'anani makalasi ogwiritsira ntchito malemba .
- Gwiritsani ntchito masanjidwe amtundu omwe amasankha zabwino
font-family
kwambiri pa OS ndi chipangizo chilichonse. - Kuti mukhale ndi mtundu wophatikizika komanso wofikirika, timaganiza kuti msakatuli wosasintha
font-size
(nthawi zambiri 16px) kuti alendo azitha kusintha makonda awo ngati pakufunika. - Gwiritsani ntchito
$font-family-base
,$font-size-base
, ndi mawonekedwe$line-height-base
monga maziko athu a typographic akugwiritsidwa ntchito ku<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
muyike rem
.
Mitu yonse ya HTML, <h1>
kupyolera mu <h6>
, ilipo.
Mutu | Chitsanzo |
---|---|
|
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 |
.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
Gwiritsani ntchito makalasi ophatikizidwa kuti mulembenso mutu wawung'ono wachiwiri kuchokera ku Bootstrap 3.
Mitu yodziwika bwino idapangidwa kuti izigwira bwino ntchito patsamba lanu. Mukafuna mutu kuti muwoneke bwino, ganizirani kugwiritsa ntchito mutu wowonetsera - wokulirapo, wamutu wamutu wokulirapo pang'ono.
Chiwonetsero 1 |
Chiwonetsero 2 |
Chiwonetsero 3 |
Chiwonetsero 4 |
Pangani ndime kukhala yodziwika bwino powonjezera .lead
.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Chifukwa chake, si commodo luctus.
Kukongoletsedwa kwazinthu zodziwika bwino za HTML5.
Mutha kugwiritsa ntchito chizindikirocho kutiwunikiranimawu.
Mzerewu walemba uyenera kutengedwa ngati malemba ochotsedwa.
Mzerewu uyenera kuwonedwa ngati wosalondola.
Mzere wa malembawo 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.
.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.
Sinthani kamvekedwe ka mawu, sinthani, masitayilo, kulemera, ndi mtundu ndi zida zathu zamawu ndi utoto .
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
Kuti mugwire mawu midadada kuchokera kugwero lina mkati mwazolemba zanu. Manga <blockquote class="blockquote">
mozungulira HTML iliyonse ngati mawu.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere ndi ante.
Onjezani a <footer class="blockquote-footer">
kuti muzindikire kochokera. Manga dzina la gwero la ntchitoyo mu <cite>
.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere ndi ante.
Gwiritsani ntchito zolembera ngati pakufunika kusintha kusintha kwa blockquote yanu.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere ndi ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere ndi ante.
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.
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem ndi massa
- Facilisis mu pretium nisl aliquet
- Chotsatira cha volutpat aliquam velit
- Phasellus iaculis neque
- Zakudya za Purus sodales
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem
Chotsani zipolopolo za mndandanda ndikuyika kuwala margin
kophatikiza magulu awiri, .list-inline
ndi .list-inline-item
.
- Lorem ipsum
- Phasellus iaculis
- Nulla volutpat
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.
- Euismod
-
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id ili si mi porta gravida ndi eget metus.
- Malesuada porta
- Etiam porta sem malesuada magna mollis euismod.
- Mawu odulidwa amadulidwa
- Fusce dapibus, tellus ac cursus commodo, tor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
- Nesting
-
- Mndandanda wa matanthauzo okhazikika
- Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.
Mayankhidwe kalembedwe amatanthawuza kukweza mawu ndi zigawo zake pongosintha mizu yomwe ili font-size
mkati mwa mafunso atolankhani. Bootstrap sichimakuchitirani izi, koma ndizosavuta kuwonjezera ngati mukuzifuna.
Pano pali chitsanzo cha izo pochita. Sankhani chilichonse chomwe font-size
mukufuna komanso pazama media.