Source

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 zosasinthika 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 chipangizocho, 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, sans-serif,
  // Emoji fonts
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;

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.

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 margins. <dd>s bwererani margin-leftndi 0kuwonjezera 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.

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.

Zosintha izi, ndi zina zambiri, zikuwonetsedwa pansipa.

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 kuti 0 0 1remzikhale zina zogwirizana ndi zinthu zina.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere ndi ante.

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.