in English

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
  1. Nawu mndandanda wolamulidwa
  2. Ndi zinthu zingapo mndandanda
  3. Ili ndi mawonekedwe ofanana onse
  4. 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.

Chitsanzo nthano

100

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.