Yambitsaninso
Yambitsaninso, zosonkhanitsira zosintha za CSS mu fayilo imodzi, kickstart Bootstrap kuti mupereke maziko abwino, osasinthika, komanso osavuta kuti mumangepo.
Yambitsaninso kumangirira pa Normalize, ndikupereka zinthu zambiri za HTML zokhala ndi masitaelo ongogwiritsa ntchito zosankha zokhazokha. Kukongoletsa kowonjezera kumachitika kokha ndi makalasi. Mwachitsanzo, timayambitsanso <table>
masitayelo ena kuti akhale osavuta ndikupereka .table
, .table-bordered
, ndi zina.
Nawa maupangiri athu ndi zifukwa zosankhira zomwe mungasinthe mu Reboot:
- Sinthani zina zosasinthika za msakatuli kuti mugwiritse ntchito
rem
s m'malo mwaem
s pakukula kwa magawo. - Pewani
margin-top
. Mitsempha yoyimirira imatha kugwa, kutulutsa zotsatira zosayembekezereka. Chofunika kwambiri, njira imodzi yokhamargin
ndi chitsanzo chosavuta chamalingaliro. - Kuti muwonjezeko mosavuta kukula kwa chipangizocho, ma block element akuyenera kugwiritsa ntchito
rem
s pamargin
s. - Chepetsani
font
zidziwitso za katundu wokhudzana ndi zinthu zochepa, pogwiritsa ntchitoinherit
ngati kuli kotheka.
Zosintha <html>
ndi <body>
zinthu zimasinthidwa kuti zipereke zosasintha zapatsamba lonse. Makamaka:
- The
box-sizing
imayikidwa padziko lonse lapansi pazinthu zonse-kuphatikiza*::before
ndi*::after
, mpakaborder-box
. Izi zimatsimikizira kuti m'lifupi mwazinthu zomwe zalengezedwa sizidutsa chifukwa cha padding kapena malire.- Palibe maziko omwe
font-size
adalengezedwa pa<html>
, koma16px
amaganiziridwa (osatsegula osasintha).font-size: 1rem
ikugwiritsidwa ntchito<body>
pakusintha mtundu wosavuta kuyankha kudzera pamafunso apawailesi yakanema ndikulemekeza zomwe amakonda komanso kuwonetsetsa kuti njira yofikirako ikupezeka.
- Palibe maziko omwe
- The
<body>
imayikanso zapadziko lonse lapansifont-family
,line-height
, nditext-align
. Izi zimatengera pambuyo pake ndi mawonekedwe ena kuti aletse kusagwirizana kwa zilembo. - Kwa chitetezo,
<body>
adalengezabackground-color
kuti#fff
.
Mafonti osasinthika (Helvetica Neue, Helvetica, ndi Arial) adatsitsidwa mu Bootstrap 4 ndikusinthidwa ndi "mafonti amtundu" kuti azitha kumasulira bwino pazida zilizonse ndi OS. Werengani zambiri za masanjidwe a zilembo m'nkhani iyi ya Smashing Magazine .
Izi font-family
zimagwiritsidwa ntchito ku <body>
cholowa chapadziko lonse lapansi mu Bootstrap. Kuti musinthe zapadziko lonse lapansi font-family
, sinthani $font-family-base
ndikuwonjezeranso Bootstrap.
Zinthu zonse zamutu-mwachitsanzo, <h1>
-ndipo <p>
zimakonzedwanso kuti margin-top
zichotsedwe. Mitu margin-bottom: .5rem
yawonjezedwa ndi ndime margin-bottom: 1rem
kuti muzitalikirana mosavuta.
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 |
Mindanda yonse— <ul>
, <ol>
, ndi <dl>
— margin-top
yachotsedwa ndi margin-bottom: 1rem
. Minda yosungidwa ilibe margin-bottom
.
- 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
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem ndi massa
- Facilisis mu pretium nisl aliquet
- Chotsatira cha volutpat aliquam velit
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem
Pamakongoletsedwe osavuta, maulamuliro omveka bwino, ndi masitayilo abwinoko, mindandanda yofotokozera yasinthidwa ma margin
s. <dd>
s bwererani margin-left
ndi 0
kuwonjezera margin-bottom: .5rem
. <dt>
s ndi olimba mtima .
- Mndandanda wamafotokozedwe
- Mndandanda wamafotokozedwe ndi abwino kufotokozera mawu.
- Euismod
- Vestibulum id ligula porta felis euismod semper eget lacinia odio sem.
- Donec id ili si mi porta gravida ndi eget metus.
- Malesuada porta
- Etiam porta sem malesuada magna mollis euismod.
Chinthucho <pre>
chimakonzedwanso kuti chichotse margin-top
ndikugwiritsa ntchito rem
mayunitsi ake margin-bottom
.
.chitsanzo-chinthu { malire-pansi: 1rem; }
Matebulo amasinthidwa pang'ono kukhala masitayelo <caption>
s, kugwa m'malire, ndikuwonetsetsa kuti zonse zikuyenda text-align
bwino. Zosintha zowonjezera pamalire, padding, ndi zina zimabwera ndi .table
kalasi .
Mutu wapatebulo | Mutu wapatebulo | Mutu wapatebulo | Mutu wapatebulo |
---|---|---|---|
Table cell | Table cell | Table cell | Table cell |
Table cell | Table cell | Table cell | Table cell |
Table cell | Table cell | Table cell | Table cell |
Mitundu yosiyanasiyana yapangidwanso kuti ikhale masitayilo osavuta. Nazi zina mwazosintha kwambiri:
<fieldset>
s alibe malire, zotchingira, kapena malire kotero kuti azitha kugwiritsidwa ntchito ngati zokutira pazolowetsa zapagulu kapena magulu a zolowetsa.<legend>
s, monga ma fieldsets, adasinthidwanso kuti awonetsedwe ngati mutu wamtundu.<label>
s adayikidwadisplay: inline-block
kuti alolemargin
kugwiritsidwa ntchito.<input>
s,<select>
s,<textarea>
s, ndi<button>
s nthawi zambiri amayankhidwa ndi Normalize, koma Yambitsaninso amachotsa awomargin
ndikuyikaline-height: inherit
, nawonso.<textarea>
s amasinthidwa kuti azitha kukula molunjika ngati kukula kopingasa nthawi zambiri "kuphwanya" masanjidwe amasamba.
Zosintha izi, ndi zina zambiri, zikuwonetsedwa pansipa.
Zinthuzi <address>
zasinthidwa kuti zikhazikitsenso osatsegula osatsegula font-style
kuchokera italic
ku normal
. line-height
nawonso tsopano cholowa, ndipo margin-bottom: 1rem
iwonjezedwa. <address>
s ndi zofotokozera za makolo apafupi (kapena gulu lonse la ntchito). Sungani masanjidwe pomaliza mizere ndi <br>
.
1355 Market St, Suite 900
San Francisco, CA 94103
P: (123) 456-7890 Dzina
Lathunthu [email protected]
Zosasintha pa blockquotes margin
ndi 1em 40px
, kotero timayikanso izo kuti 0 0 1rem
zikhale zina zogwirizana ndi zinthu zina.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere ndi ante.
Chinthuchi <abbr>
chimalandira masitayelo ofunikira kuti chiwoneke bwino pakati pa ndime.
Zosasintha cursor
pa chidule ndi text
, kotero timayikanso izo kuti pointer
zisonyeze kuti chinthucho chingathe kuyanjana nacho podina.
Zambiri
Zambiri zatsatanetsatane.
Ngakhale zambiri
Nazi zambiri zatsatanetsatane.
HTML5 imawonjezera mawonekedwe atsopano apadziko lonse lapansi otchedwa[hidden]
, omwe amalembedwa ngati display: none
mwachisawawa. Kubwereka lingaliro kuchokera ku PureCSS , timakonza izi popanga [hidden] { display: none !important; }
kuti zisawonongeke display
mwangozi. Ngakhale [hidden]
sichimathandizidwa ndi IE10, kulengeza momveka bwino mu CSS yathu kumakhudza vutoli.
jQuery kusagwirizana
[hidden]
sizigwirizana ndi jQuery $(...).hide()
ndi $(...).show()
njira. Chifukwa chake, pakadali pano sitikuvomereza makamaka [hidden]
njira zina zoyendetsera display
zinthu.
Kungosintha mawonekedwe a chinthu, kutanthauza kuti display
sichinasinthidwe ndipo chinthucho chikhoza kukhudzabe kuyenda kwa chikalatacho, gwiritsani ntchito .invisible
kalasi m'malo mwake.