Source

Atunbere

Atunbere, ikojọpọ awọn ayipada CSS-pato ninu faili kan, kickstart Bootstrap lati pese ohun didara, deede, ati ipilẹ ipilẹ ti o rọrun lati kọ sori.

Ona

Atunbere duro lori Normalize, pese ọpọlọpọ awọn eroja HTML pẹlu awọn aza ti o ni imọran nipa lilo awọn yiyan eroja nikan. Afikun iselona ni a ṣe pẹlu awọn kilasi nikan. Fun apẹẹrẹ, a tun atunbere diẹ ninu awọn <table>aza fun ipilẹ ti o rọrun ati nigbamii pese .table, .table-bordered, ati diẹ sii.

Eyi ni awọn itọnisọna ati awọn idi wa fun yiyan kini lati fagile ni Atunbere:

Ṣe imudojuiwọn diẹ ninu awọn iye aiyipada aṣawakiri lati lo rems dipo ems fun aaye paati ti iwọn.
Yẹra fun margin-top. Awọn ala inaro le ṣubu, ti nso awọn abajade airotẹlẹ. Ni pataki julọ botilẹjẹpe, itọsọna kan ti marginjẹ awoṣe ọpọlọ ti o rọrun.
Fun wiwọn ti o rọrun lori awọn iwọn ẹrọ, awọn eroja dina yẹ ki o lo rems fun margins.
Jeki awọn ikede ti awọn fontohun-ini ibatan si o kere ju, ni lilo inheritnigbakugba ti o ṣee ṣe.

Awọn aiyipada oju-iwe

Awọn eroja <html>ati <body>awọn eroja ti wa ni imudojuiwọn lati pese awọn aiyipada oju-iwe ti o dara julọ. Ni pataki diẹ sii:

Awọn box-sizingti wa ni agbaye ṣeto lori gbogbo eroja-pẹlu *::beforeati *::after, lati border-box. Eyi ni idaniloju pe iwọn ti a kede ti eroja ko kọja nitori fifẹ tabi aala.
Ko si ipilẹ font-sizeti a kede lori <html>, ṣugbọn 16pxa ro (aiyipada aṣawakiri). font-size: 1remti lo lori <body>iru-iwọn idahun ti o rọrun nipasẹ awọn ibeere media lakoko ti o bọwọ fun awọn ayanfẹ olumulo ati aridaju ọna iraye si diẹ sii.
Awọn <body>tun ṣeto kan agbaye font-family, line-height, ati text-align. Eyi jẹ jogun nigbamii nipasẹ diẹ ninu awọn eroja fọọmu lati ṣe idiwọ awọn aiṣedeede fonti.
Fun ailewu, o <body>ti kede background-color, aiyipada si #fff.

Native font akopọ

Awọn nkọwe wẹẹbu aiyipada (Helvetica Neue, Helvetica, ati Arial) ti lọ silẹ ni Bootstrap 4 ati rọpo pẹlu “akopọ fonti abinibi” fun sisọ ọrọ to dara julọ lori gbogbo ẹrọ ati OS. Ka diẹ sii nipa awọn akopọ fonti abinibi ni nkan Iwe irohin Smashing yii .

$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;

Eyi font-familyni a lo si <body>ati jogun laifọwọyi ni agbaye jakejado Bootstrap. Lati yi agbaye pada font-family, ṣe imudojuiwọn $font-family-baseati ṣajọ Bootstrap.

Awọn akọle ati awọn ìpínrọ

Gbogbo awọn eroja akọle — fun apẹẹrẹ, <h1>— ati <p>pe a tunto lati yọ wọn margin-topkuro. Awọn akọle ti margin-bottom: .5remṣafikun ati awọn paragira margin-bottom: 1remfun aye irọrun.

Akori	Apeere
`<h1></h1>`	h1. Bootstrap akori
`<h2></h2>`	h2. Bootstrap akori
`<h3></h3>`	h3. Bootstrap akori
`<h4></h4>`	h4. Bootstrap akori
`<h5></h5>`	h5. Bootstrap akori
`<h6></h6>`	h6. Bootstrap akori

Awọn akojọ

Gbogbo awọn atokọ — <ul>, <ol>, ati <dl>— ti margin-topyọkuro ati margin-bottom: 1rem. Awọn atokọ itẹle ko ni margin-bottom.

Lorem ipsum dolor joko amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis ni pretium nisl aliquet
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat ni
Faucibus porta lacus fringilla vel
Aenean joko amet erat nunc
Eget porttitor lorem

Lorem ipsum dolor joko amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis ni pretium nisl aliquet
Nulla volutpat aliquam velit
Faucibus porta lacus fringilla vel
Aenean joko amet erat nunc
Eget porttitor lorem

Fun iselona ti o rọrun, awọn ilana mimọ, ati aye to dara julọ, awọn atokọ apejuwe ti ni imudojuiwọn margins. <dd>s tunto margin-leftsi 0ati fikun margin-bottom: .5rem. <dt>s wa ni igboya .

Awọn akojọ apejuwe: Akojọ apejuwe jẹ pipe fun asọye awọn ofin.
Euismod: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem.; Donec id elit ti kii mi porta gravida ati eget metus.
Malesuada porta: Etiam porta sem malesuada magna mollis euismod.

Ọrọ ti a ti ṣe tẹlẹ

A <pre>tunto eroja lati yọkuro margin-topati lo remawọn ẹya fun margin-bottom.

.apẹẹrẹ-eroja {
  ala-isalẹ: 1rem;
}

Awọn tabili

Awọn tabili ni atunṣe die-die si ara <caption>s, awọn aala wó lulẹ, ati rii daju pe o wa ni ibamu text-alignjakejado. Awọn iyipada afikun fun awọn aala, padding, ati diẹ sii wa pẹlu kilasi.table naa .

Eyi jẹ tabili apẹẹrẹ, ati pe eyi ni akọle rẹ lati ṣe apejuwe awọn akoonu.
Tabili akori	Tabili akori	Tabili akori	Tabili akori
Tabili cell	Tabili cell	Tabili cell	Tabili cell
Tabili cell	Tabili cell	Tabili cell	Tabili cell
Tabili cell	Tabili cell	Tabili cell	Tabili cell

Awọn fọọmu

Awọn eroja fọọmu oriṣiriṣi ti tun bẹrẹ fun awọn aza ipilẹ ti o rọrun. Eyi ni diẹ ninu awọn iyipada olokiki julọ:

<fieldset>s ko ni awọn aala, padding, tabi ala ki wọn le ṣee lo ni irọrun bi awọn apamọra fun awọn igbewọle kọọkan tabi awọn ẹgbẹ ti awọn igbewọle.
<legend>s, gẹgẹbi awọn ipilẹ aaye, tun ti tun ṣe atunṣe lati ṣe afihan bi akọle iru.
<label>s ti ṣeto lati display: inline-blockgba laaye marginlati lo.
<input>s, <select>s, <textarea>s, ati <button>s ni a koju pupọ julọ nipasẹ Normalize, ṣugbọn Atunbere yọ wọn kuro marginati ṣeto line-height: inherit, paapaa.
<textarea>s ti wa ni títúnṣe lati nikan wa ni resizable ni inaro bi petele iwọn igba "fifọ" iwe ifilelẹ.
<button>s ati <input>awọn eroja bọtini ni cursor: pointernigbati :not(:disabled).

Awọn ayipada wọnyi, ati diẹ sii, ni afihan ni isalẹ.

Awọn eroja oriṣiriṣi

Adirẹsi

A ṣe imudojuiwọn eroja lati <address>tun aiyipada ẹrọ aṣawakiri font-stylelati . ti wa ni tun bayi jogun, ati awọn ti a ti fi kun. s wa fun iṣafihan alaye olubasọrọ fun baba ti o sunmọ (tabi gbogbo ara iṣẹ). Ṣetọju ọna kika nipasẹ ipari awọn ila pẹlu .italicnormalline-heightmargin-bottom: 1rem<address><br>

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

Orukọ kikun
[email protected]

Blockquote

Awọn aiyipada marginlori blockquotes ni 1em 40px, ki a tun pe si 0 0 1remfun nkankan siwaju sii ni ibamu pẹlu awọn eroja miiran.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Odidi posuere erat a ante.

Ẹnikan olokiki ni Akọle Orisun

Awọn eroja inu

Ohun <abbr>elo naa gba iselona ipilẹ lati jẹ ki o ṣe pataki laarin ọrọ paragira.

Nulla attr vitae elit libero, a pharetra augue.

Lakotan

Aiyipada cursorlori akopọ jẹ text, nitorinaa a tunto iyẹn pointerlati fihan pe nkan naa le ṣe ibaraenisepo pẹlu tite lori rẹ.

Diẹ ninu awọn alaye

Alaye diẹ sii nipa awọn alaye.

Paapaa awọn alaye diẹ sii

Eyi ni awọn alaye diẹ sii nipa awọn alaye.

HTML5 `[hidden]`abuda

HTML5 ṣe afikun abuda agbaye tuntun ti a npè ni[hidden] , eyiti o jẹ aṣa bi display: nonenipasẹ aiyipada. Yiyawo imọran lati PureCSS , a ni ilọsiwaju lori aiyipada yii nipa ṣiṣe [hidden] { display: none !important; }lati ṣe iranlọwọ lati yago fun displaygbigba rẹ lairotẹlẹ. Lakoko [hidden]ti ko ṣe atilẹyin abinibi nipasẹ IE10, ikede ti o han gbangba ninu CSS wa ni ayika iṣoro yẹn.

<input type="text" hidden>

jQuery aibaramu

[hidden]ko ni ibamu pẹlu jQuery's $(...).hide()ati $(...).show()awọn ọna. Nitorinaa, lọwọlọwọ a ko fọwọsi ni pataki [hidden]lori awọn ilana miiran fun ṣiṣakoso awọn displayeroja.

Lati yi iyipada hihan ohun kan nikan, afipamo pe ko yipada ati pe ano tun le ni ipa lori sisan tidisplay iwe, lo kilasi.invisible dipo.