Yambitsaninso
Yambitsaninso, zosonkhanitsira zosintha za CSS mu fayilo imodzi, kickstart Bootstrap kuti mupereke maziko abwino, osasinthika, komanso osavuta kuti mumangepo.
Njira
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 zosasintha 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 chipangizo, ma block element akuyenera kugwiritsa ntchito
rem
s pamargin
s. - Chepetsani
font
zidziwitso za katundu wokhudzana ndi zinthu zochepa, pogwiritsa ntchitoinherit
ngati kuli kotheka.
Zosasintha zamasamba
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. - 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 achilengedwe
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 .
$font-family-sans-serif:
// Safari for macOS and iOS (San Francisco)
-apple-system,
// Chrome < 56 for macOS (San Francisco)
BlinkMacSystemFont,
// Windows
"Segoe UI",
// Android
Roboto,
// Basic web fallback
"Helvetica Neue", Arial,
// Linux
"Noto Sans",
"Liberation Sans",
// Sans serif fallback
sans-serif,
// Emoji fonts
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
Zindikirani kuti chifukwa ma fonti akuphatikizanso zilembo za emoji, zilembo zambiri zodziwika bwino za zilembo za Unicode/dingbat ziziwonetsedwa ngati zithunzi zamitundu yambiri. Maonekedwe awo amasiyana, kutengera ndi kalembedwe ka emoji msakatuli / nsanja, ndipo sangakhudzidwe ndi color
masitayilo aliwonse a CSS.
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.
Mitu ndi ndime
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></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 |
Mndandanda
Mindanda yonse— <ul>
, <ol>
, ndi <dl>
— margin-top
yachotsedwa ndi margin-bottom: 1rem
. Minda yosungidwa ilibe margin-bottom
.
- Mindandanda yonse ili ndi malire ake apamwamba achotsedwa
- Ndipo malire awo pansi adakhazikika
- Minda yosungidwa ilibe malire apansi
- Mwanjira iyi amakhala ndi mawonekedwe ochulukirapo
- Makamaka zikatsatiridwa ndi zinthu zambiri zamndandanda
- Padding yakumanzere yakhazikitsidwanso
- Nawu mndandanda wolamulidwa
- Ndi zinthu zingapo mndandanda
- Ili ndi mawonekedwe ofanana onse
- Monga mndandanda wapita wosayitanidwa
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.
- Nthawi
- Tanthauzo la mawuwa.
- Tanthauzo lachiwiri la mawu omwewo.
- Nthawi ina
- Tanthauzo la liwu lina ili.
Mawu osinthidwa
Chinthucho <pre>
chimakonzedwanso kuti chichotse margin-top
ndikugwiritsa ntchito rem
mayunitsi ake margin-bottom
.
.chitsanzo-chinthu { malire-pansi: 1rem; }
Matebulo
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 |
Mafomu
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.<button>
s ndi<input>
batani zinthu zili ndicursor: pointer
nthawi:not(:disabled)
.
Zosintha izi, ndi zina zambiri, zikuwonetsedwa pansipa.
Zolozera pa mabatani
Kuyambitsanso kumaphatikizapo zowonjezera role="button"
kuti musinthe cholozera chokhazikika kukhala pointer
. Onjezani izi kuzinthu kuti zithandizire kuwonetsa kuti zinthu zikuyenda bwino. Udindowu siwofunikira pazinthu <button>
zomwe cursor
zimasintha zokha.
<span role="button" tabindex="0">Non-button element button</span>
Zinthu zosiyanasiyana
Adilesi
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]
Blockquote
Zosasintha pa blockquotes margin
ndi 1em 40px
, kotero timayikanso izo ku 0 0 1rem
chinachake chogwirizana ndi zinthu zina.
Mawu odziwika bwino, omwe ali mu blockquote element.
Zinthu zam'kati
Chinthuchi <abbr>
chimalandira masitayelo ofunikira kuti chiwoneke bwino pakati pa ndime.
Chidule
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 [hidden]
mawonekedwe
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.
<input type="text" hidden>
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.