Atosaigh

Atosaigh, bailiúchán d’athruithe CSS a bhaineann go sonrach le heilimintí i gcomhad amháin, kickstart Bootstrap chun bonnlíne galánta, comhsheasmhach agus simplí a sholáthar le tógáil uirthi.

Cur Chuige

Tógann Atosaigh ar Normalú, ag soláthar go leor eilimintí HTML le stíleanna beagán tuairimí ag baint úsáide as roghnóir eilimint amháin. Ní dhéantar styling breise ach amháin le ranganna. Mar shampla, déanaimid roinnt <table>stíleanna a atosú le haghaidh bunlíne níos simplí agus cuirimid .table, .table-bordered, agus níos mó ar fáil níos déanaí.

Seo iad ár dtreoirlínte agus ár gcúiseanna le roghnú cad ba cheart a shárú in Atosaigh:

Nuashonraigh roinnt luachanna réamhshocraithe brabhsálaí chun s a úsáid remin ionad ems le haghaidh spásáil comhpháirteanna inscálaithe.
Seachain margin-top. Is féidir le corrlaigh ingearach titim, rud a thugann torthaí gan choinne. marginNíos tábhachtaí fós, áfach, is samhail mheabhrach níos simplí é treo amháin .
Chun scálú níos éasca a dhéanamh thar mhéideanna gléasanna, ba cheart go n-úsáidfeadh bloc-eilimintí rems le haghaidh margins.
Coimeád dearbhuithe fontmaoine gaolmhar a laghad agus is féidir, ag baint úsáide as inheritaon uair is féidir.

Réamhshocruithe leathanach

Déantar na heilimintí <html>agus <body>na míreanna a nuashonrú chun réamhshocruithe níos fearr ar fud an leathanaigh a sholáthar. Go sonrach:

Tá box-sizingan leagan domhanda ar gach eilimint - lena n-áirítear *::beforeagus *::after, go border-box. Cinntíonn sé seo nach sáraítear leithead dearbhaithe na heiliminte riamh mar gheall ar stuáil nó teorann.
font-sizeNí dhearbhaítear bonn ar bith ar an <html>, ach 16pxglactar leis (réamhshocrú an bhrabhsálaí). font-size: 1rema chuirtear i bhfeidhm ar an <body>le haghaidh cineálscála sofhreagrach éasca trí fhiosrúcháin ó na meáin agus ag an am céanna meas a bheith agat ar roghanna úsáideoirí agus ag cinntiú cur chuige níos inrochtana.
Socraíonn an <body>chomh maith le domhanda font-family, line-height, agus text-align. Faightear é seo le hoidhreacht níos déanaí ag roinnt eilimintí foirme chun neamhréireachtaí cló a chosc.
Ar mhaithe le sábháilteacht , <body>tá dearbhaithe ag an background-color, réamhshocraithe go #fff.

Stack cló dúchasach

Tá na clónna gréasáin réamhshocraithe (Helvetica Neue, Helvetica, agus Arial) tite i Bootstrap 4 agus cuireadh “stack cló dúchasach” ina n-ionad chun an rindreáil téacs is fearr ar gach feiste agus OS. Léigh tuilleadh faoi stoic chló dúchasacha san alt Smashing Magazine seo .

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

Tabhair faoi deara, toisc go bhfuil clónna emoji san áireamh sa chruach cló, go ndéanfar go leor carachtar coitianta siombaile/dingbat Unicode a rindreáil mar phicteagraif ildaite. Athróidh a gcuma, ag brath ar an stíl a úsáidtear i gcló emoji dúchais an bhrabhsálaí/ardáin, agus ní bheidh aon tionchar ag colorstíleanna CSS orthu.

Cuirtear é seo font-familyi bhfeidhm <body>ar Bootstrap agus faightear é go huathoibríoch ar fud an domhain. Chun an leathanach domhanda a athrú font-family, nuashonraigh $font-family-baseagus athchumraigh Bootstrap.

Ceannteidil agus ailt

Déantar gach ceannteideal - m.sh., <h1>-agus <p>a athshocrú chun iad a margin-topbhaint. Tá ceannteidil curtha margin-bottom: .5remleis agus míreanna margin-bottom: 1remle haghaidh spásáil éasca.

Ceannteideal	Sampla
`<h1></h1>`	h1. Ceannteideal Bootstrap
`<h2></h2>`	h2. Ceannteideal Bootstrap
`<h3></h3>`	h3. Ceannteideal Bootstrap
`<h4></h4>`	h4. Ceannteideal Bootstrap
`<h5></h5>`	h5. Ceannteideal Bootstrap
`<h6></h6>`	h6. Ceannteideal Bootstrap

Liostaí

Baintear na liostaí go léir — <ul>, <ol>, agus <dl>— margin-topagus a margin-bottom: 1rem. Níl aon liostaí neadaithe margin-bottom.

Baintear corrlach barr na liostaí go léir
Agus normalaíodh a n-imeall bun
Níl aon corrlach íochtair ag liostaí neadaithe
- Ar an mbealach seo tá cuma níos cothroime orthu
- Go háirithe nuair a leanann níos mó míreanna liostaí
Tá an stuáil chlé athshocrú freisin

Seo liosta ordaithe
Le roinnt míreanna liosta
Tá an cuma foriomlán céanna air
Mar an liosta neamhordaithe roimhe seo

Ar mhaithe le stíliú níos simplí, ordlathas soiléir, agus spásáil níos fearr, tá liostaí tuairiscithe margins. <dd>s athshocrú margin-leftgo dtí 0agus cuir margin-bottom: .5rem. <dt>tá siad trom .

Liostaí cur síos: Tá liosta tuairisce foirfe chun téarmaí a shainiú.
Téarma: Sainmhíniú don téarma.; An dara sainmhíniú ar an téarma céanna.
Téarma eile: Sainmhíniú don téarma eile seo.

Téacs réamhfhormáidithe

Athshocraítear an <pre>eilimint chun a haonaid a bhaint margin-topagus a úsáid dá cuid .remmargin-bottom

.shampla-eilimint {
  imeall-bun: 1rem;
}

Táblaí

Déantar táblaí a choigeartú beagán de réir stíl <caption>s, titim teorainneacha, agus cinntíonn siad comhsheasmhach text-alignar fud. Tagann athruithe breise le haghaidh teorainneacha, stuáil, agus níos mó leis an .tablerang .

Is tábla samplach é seo, agus seo é a theideal chun cur síos a dhéanamh ar an ábhar.
Ceannteideal tábla	Ceannteideal tábla	Ceannteideal tábla	Ceannteideal tábla
cill tábla	cill tábla	cill tábla	cill tábla
cill tábla	cill tábla	cill tábla	cill tábla
cill tábla	cill tábla	cill tábla	cill tábla

Foirmeacha

Athchóiríodh eilimintí foirmeacha éagsúla le haghaidh bunstíleanna níos simplí. Seo cuid de na hathruithe is suntasaí:

<fieldset>s níl aon teorainneacha, stuáil nó corrlach acu ionas gur féidir iad a úsáid go héasca mar chumhdaigh le haghaidh ionchuir aonair nó grúpaí ionchuir.
<legend>s, cosúil le sraitheanna páirce, athshonraithe freisin le taispeáint mar cheannteideal de shaghasanna.
<label>s socraithe chun display: inline-blockgo bhféadfar marginiad a chur i bhfeidhm.
<input>Tugtar aghaidh ar s, <select>s, <textarea>s, agus <button>s go príomha trí Normalú, ach baineann Atosaigh amach a gcuid marginagus tacair line-height: inherit, freisin.
<textarea>s athraítear iad ionas gur féidir iad a athmhéadú go hingearach amháin mar is minic a “bhriseann” leagan amach an leathanaigh ar athrú cothrománach.
<button>s agus <input>eilimintí cnaipe cursor: pointernuair :not(:disabled).

Léirítear na hathruithe seo, agus tuilleadh, thíos.

Leideanna ar na cnaipí

Áiríonn Atosaigh feabhas role="button"chun an cúrsóir réamhshocraithe a athrú go pointer. Cuir an tréith seo le heilimintí chun cabhrú le léiriú go bhfuil eilimintí idirghníomhach. Níl an ról seo riachtanach le haghaidh <button>eilimintí, a fhaigheann a n- cursorathrú féin.

Cnaipe eilimint neamh-cnaipe

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

Eilimintí éagsúla

Seoladh

Nuashonraítear an eilimint chun réamhshocrú an bhrabhsálaí a <address>athshocrú font-styleó . Tá oidhreacht anois freisin, agus cuireadh leis. s chun eolas teagmhála a chur i láthair don sinsear is gaire (nó do chorpas iomlán oibre). Caomhnaigh an fhormáidiú trí línte deiridh le .italicnormalline-heightmargin-bottom: 1rem<address><br>

Twitter, Inc.
1355 Sráid an Mhargaidh, Suite 900
San Francisco, CA 94103
P: (123) 456-7890

Ainm Iomlán
[email protected]

Blockquote

Is é an réamhshocrú marginar blockquotes ná 1em 40px, mar sin athshocróimid é sin le 0 0 1remhaghaidh rud éigin níos comhsheasmhaí le heilimintí eile.

Sleachta mór le rá, atá in eilimint bhlocquote.

Duine a bhfuil cáil air in Source Title

Eilimintí inlíne

Faigheann an <abbr>eilimint stíliú bunúsach chun é a dhéanamh seasamh amach i measc téacs na míre.

Nulla attr vitae elit libero, pharetra augue.

Achoimre

Is é an réamhshocrú cursorar achoimre text, mar sin athshocraímid é sin chun pointera chur in iúl gur féidir idirghníomhú leis an eilimint trí chliceáil air.

Roinnt sonraí

Tuilleadh eolais faoi na sonraí.

Níos mó sonraí fós

Seo fiú níos mó sonraí faoi na sonraí.

`[hidden]`Tréith HTML5

Cuireann HTML5 aitreabúid dhomhanda nua darb ainm[hidden] , a stíltear mar display: noneréamhshocrú. Trí smaoineamh a fháil ar iasacht ó PureCSS , cuirimid feabhas ar an réamhshocrú seo trí [hidden] { display: none !important; }chabhrú le cosc a displaychur air trí thimpiste a shárú. Cé [hidden]nach dtacaíonn IE10 leis ó dhúchas, cuireann an dearbhú follasach inár CSS réiteach ar an bhfadhb sin.

<input type="text" hidden>

neamh-chomhoiriúnacht jQuery

[hidden]nach bhfuil ag luí le modhanna $(...).hide()agus $(...).show()modhanna jQuery. Mar sin, ní thacaímid faoi láthair ach go háirithe le teicnící eile chun na heilimintí a [hidden]bhainistiú .display

Chun infheictheacht eilimint a scoránaigh amháin, rud a chiallaíonn displaynach bhfuil sé modhnaithe agus go bhféadfadh an eilimint difear a dhéanamh fós ar shreabhadh an doiciméid, bain úsáid as an .invisiblerang ina ionad.