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
rem
in ionadem
s 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.margin
Ní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í
rem
s le haghaidhmargin
s. - Coimeád dearbhuithe
font
maoine gaolmhar a laghad agus is féidir, ag baint úsáide asinherit
aon 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-sizing
an leagan domhanda ar gach eilimint - lena n-áirítear*::before
agus*::after
, goborder-box
. Cinntíonn sé seo nach sáraítear leithead dearbhaithe na heiliminte riamh mar gheall ar stuáil nó teorann. font-size
Ní dhearbhaítear bonn ar bith ar an<html>
, ach16px
glactar leis (réamhshocrú an bhrabhsálaí).font-size: 1rem
a 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 domhandafont-family
,line-height
, agustext-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 anbackground-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 .
Cuirtear é seo font-family
i bhfeidhm <body>
ar Bootstrap agus faightear é go huathoibríoch ar fud an domhain. Chun an leathanach domhanda a athrú font-family
, nuashonraigh $font-family-base
agus athchumraigh Bootstrap.
Ceannteidil agus ailt
Déantar gach ceannteideal - m.sh., <h1>
-agus <p>
a athshocrú chun iad a margin-top
bhaint. Tá ceannteidil curtha margin-bottom: .5rem
leis agus míreanna margin-bottom: 1rem
le haghaidh spásáil éasca.
Ceannteideal | Sampla |
---|---|
|
h1. Ceannteideal Bootstrap |
|
h2. Ceannteideal Bootstrap |
|
h3. Ceannteideal Bootstrap |
|
h4. Ceannteideal Bootstrap |
|
h5. Ceannteideal Bootstrap |
|
h6. Ceannteideal Bootstrap |
Liostaí
Baintear na liostaí go léir — <ul>
, <ol>
, agus <dl>
— margin-top
agus 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
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- slánuimhir molestie lorem ag massa
- Facilisis i pretium nisl aliquet
- Nulla volutpat aliquam velit
- Faucibus porta lacus fringilla nó
- Aenean sit amet erat nunc
- Eget porttitor lorem
Ar mhaithe le stíliú níos simplí, ordlathas soiléir, agus spásáil níos fearr, tá liostaí tuairisce margin
s. <dd>
s a athshocrú agus margin-left
a 0
chur leis 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-top
agus a úsáid dá cuid .rem
margin-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-align
ar fud. Tagann athruithe breise le haghaidh teorainneacha, stuáil, agus níos mó leis an .table
rang .
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 chundisplay: inline-block
go bhféadfarmargin
iad 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 gcuidmargin
agus tacairline-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í cnaipecursor: pointer
nuair:not(:disabled)
.
Léirítear na hathruithe seo, agus tuilleadh, thíos.
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 .italic
normal
line-height
margin-bottom: 1rem
<address>
<br>
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ú margin
ar blockquotes ná 1em 40px
, mar sin athshocróimid é sin le 0 0 1rem
haghaidh rud éigin níos comhsheasmhaí le heilimintí eile.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Slánuimhir posuere erat a ante.
Eilimintí inlíne
Faigheann an <abbr>
eilimint stíliú bunúsach chun é a dhéanamh seasamh amach i measc téacs na míre.
Achoimre
Is é an réamhshocrú cursor
ar achoimre text
, mar sin athshocraímid é sin chun pointer
a 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: none
ré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 display
chur 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.
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 display
nach 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 .invisible
rang ina ionad.