Source

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 OS X and iOS (San Francisco)
  -apple-system,
  // Chrome < 56 for OS X (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;

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.

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Slánuimhir molestie lorem ag massa
  • Facilisis i pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttititor sem
    • Ac tristique libero volutpat ag
  • Faucibus porta lacus fringilla nó
  • Aenean sit amet erat nunc
  • Eget porttitor lorem
  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Slánuimhir molestie lorem ag massa
  4. Facilisis i pretium nisl aliquet
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla nó
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem

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ú.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem.
Donec id elit non mi porta gravida agus eget metus.
Porta Malesuada
Etiam porta sem malesuada magna mollis euismod.

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.

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

Finscéal samplach

100

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.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Slánuimhir posuere erat a ante.

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.