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 rems m'malo mwa ems pakukula kwa magawo.
Pewani margin-top. Mitsempha yoyimirira imatha kugwa, kutulutsa zotsatira zosayembekezereka. Chofunika kwambiri, njira imodzi yokha marginndi chitsanzo chosavuta chamalingaliro.
Kuti muwonjezeko mosavuta kukula kwa chipangizo, ma block element akuyenera kugwiritsa ntchito rems pa margins.
Chepetsani fontzidziwitso za katundu wokhudzana ndi zinthu zochepa, pogwiritsa ntchito inheritngati kuli kotheka.

Zosasintha zamasamba

Zosintha <html>ndi <body>zinthu zimasinthidwa kuti zipereke zosasintha zapatsamba lonse. Makamaka:

The box-sizingimayikidwa padziko lonse lapansi pazinthu zonse-kuphatikiza *::beforendi *::after, mpaka border-box. Izi zimatsimikizira kuti m'lifupi mwazinthu zomwe zalengezedwa sizidutsa chifukwa cha padding kapena malire.
Palibe maziko omwe font-sizeadalengezedwa pa <html>, koma 16pxamaganiziridwa (osatsegula osasintha). font-size: 1remikugwiritsidwa ntchito <body>pakusintha mtundu wosavuta kuyankha kudzera pamafunso apawailesi yakanema ndikulemekeza zomwe amakonda komanso kuwonetsetsa kuti njira yofikirako ikupezeka.
The <body>imayikanso zapadziko lonse lapansi font-family, line-height, ndi text-align. Izi zimatengera pambuyo pake ndi mawonekedwe ena kuti aletse kusagwirizana kwa zilembo.
Kwa chitetezo, <body>adalengeza background-colorkuti #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 colormasitayilo aliwonse a CSS.

Izi font-familyzimagwiritsidwa ntchito ku <body>cholowa chapadziko lonse lapansi mu Bootstrap. Kuti musinthe zapadziko lonse lapansi font-family, sinthani $font-family-basendikuwonjezeranso Bootstrap.

Mitu ndi ndime

Zinthu zonse zamutu-mwachitsanzo, <h1>-ndipo <p>zimakonzedwanso kuti margin-topzichotsedwe. Mitu margin-bottom: .5remyawonjezedwa ndi ndime margin-bottom: 1remkuti 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-topyachotsedwa 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 margins. <dd>s bwererani margin-leftndi 0kuwonjezera 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-topndikugwiritsa ntchito remmayunitsi 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-alignbwino. Zosintha zowonjezera pamalire, padding, ndi zina zimabwera ndi .tablekalasi .

Ili ndi tebulo lachitsanzo, ndipo ili ndi mawu ake ofotokozera zomwe zili mkati.
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 adayikidwa display: inline-blockkuti alole marginkugwiritsidwa ntchito.
<input>s, <select>s, <textarea>s, ndi <button>s nthawi zambiri amayankhidwa ndi Normalize, koma Yambitsaninso amachotsa awo marginndikuyika line-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 ndi cursor: pointernthawi :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 cursorzimasintha zokha.

Non-batani chinthu batani

<span role="button" tabindex="0">Non-button element button</span>

Zinthu zosiyanasiyana

Adilesi

Zinthuzi <address>zasinthidwa kuti zikhazikitsenso osatsegula osatsegula font-stylekuchokera italicku normal. line-heightnawonso tsopano cholowa, ndipo margin-bottom: 1remiwonjezedwa. <address>s ndi zofotokozera za makolo apafupi (kapena gulu lonse la ntchito). Sungani masanjidwe pomaliza mizere ndi <br>.

Twitter, Inc.
1355 Market St, Suite 900
San Francisco, CA 94103
P: (123) 456-7890

Dzina
Lathunthu [email protected]

Blockquote

Zosasintha pa blockquotes marginndi 1em 40px, kotero timayikanso izo ku 0 0 1remchinachake chogwirizana ndi zinthu zina.

Mawu odziwika bwino, omwe ali mu blockquote element.

Wina wotchuka mu Source Title

Zinthu zam'kati

Chinthuchi <abbr>chimalandira masitayelo ofunikira kuti chiwoneke bwino pakati pa ndime.

Nulla attr vitae elit libero, pharetra augue.

Chidule

Zosasintha cursorpa chidule ndi text, kotero timayikanso izo kuti pointerzisonyeze 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: nonemwachisawawa. Kubwereka lingaliro kuchokera ku PureCSS , timakonza izi popanga [hidden] { display: none !important; }kuti zisawonongeke displaymwangozi. 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 displayzinthu.

Kungosintha mawonekedwe a chinthu, kutanthauza kuti displaysichinasinthidwe ndipo chinthucho chikhoza kukhudzabe kuyenda kwa chikalatacho, gwiritsani ntchito .invisiblekalasi m'malo mwake.