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. Is féidir an réamhshocrú brabhsálaí seo a shárú tríd an$font-size-root
athróg a mhodhnú.
- Leagann
<body>
sé amach freisin , domhandafont-family
,font-weight
,line-height
, aguscolor
. 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
Úsáideann Bootstrap “stack cló dúchasach” nó “stack cló córais” chun an rindreáil téacs is fearr a dhéanamh ar gach feiste agus OS. Dearadh na clónna córais seo go sonrach le feistí an lae inniu i gcuimhne, le rindreáil feabhsaithe ar scáileáin, tacaíocht cló inathraithe, agus níos mó. Léigh tuilleadh faoi stoic chló dúchasacha san alt Smashing Magazine seo .
$font-family-sans-serif:
// Cross-platform generic font family (default user interface font)
system-ui,
// Safari for macOS and iOS (San Francisco)
-apple-system,
// 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 de na carachtair choitianta siombaile/dingbatacha aonchód 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 color
stíleanna CSS orthu.
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></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-top
agus a margin-bottom: 1rem
. Níl aon liostaí neadaithe margin-bottom
. Táimid tar éis a athshocrú freisin padding-left
ar an <ul>
agus <ol>
eilimintí.
- 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 margin
s. <dd>
s athshocrú margin-left
go dtí 0
agus 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.
Cód inlíne
Wrap sleachta inlíne den chód le <code>
. Bí cinnte éalú lúibíní uillinn HTML.
<section>
ba chóir a bheith fillte mar inlíne.
For example, <code><section></code> should be wrapped as inline.
Bloic cód
Úsáid <pre>
s le haghaidh línte iolracha de chód. Arís eile, bí cinnte éalú ó aon lúibíní uillinne sa chód le haghaidh rindreála cuí. Athshocraítear an <pre>
eilimint chun a haonaid a bhaint margin-top
agus a úsáid dá cuid .rem
margin-bottom
<p>Sample text here...</p>
<p>And another line of sample text here...</p>
<pre><code><p>Sample text here...</p>
<p>And another line of sample text here...</p>
</code></pre>
Athróga
<var>
Úsáid an chlib chun athróga a léiriú .
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>
Ionchur úsáideora
Úsáid an <kbd>
chun ionchur a chuirtear isteach de ghnáth tríd an méarchlár a léiriú.
Chun socruithe a chur in eagar, brúigh ctrl + ,
To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>
Aschur samplach
Chun aschur samplach ó ríomhchlár a léiriú, úsáid an <samp>
chlib.
<samp>This text is meant to be treated as sample output from a computer program.</samp>
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.
Tacaíocht ionchur dáta & dath
Cuimhnigh nach dtacaíonn gach brabhsálaí, eadhon Safari, le hionchuir dáta.
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- cursor
athrú féin.
<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 .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.
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.
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ú.
<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 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.