in English

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.

Ar an leathanach seo

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.

Athróga CSS

Curtha leis in v5.1.1

Le v5.1.1, rinneamar ár gcuid s riachtanacha a chaighdeánú ar @importfud ár gcuid beart CSS go léir (lena n-áirítear bootstrap.css, bootstrap-reboot.css, agus bootstrap-grid.csschun _root.scss. :rootféach ar níos mó athróg CSS curtha leis le himeacht ama.

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. Is féidir an réamhshocrú brabhsálaí seo a shárú tríd an $font-size-rootathróg a mhodhnú.
Leagann <body>sé amach freisin , domhanda font-family, font-weight, line-height, agus color. 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

Ú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 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.

Athróga CSS

De réir mar a leanann Bootstrap 5 ag aibíocht, tógfar stíleanna níos mó agus níos mó le hathróga CSS mar mhodh chun níos mó saincheaptha fíor-ama a sholáthar gan an gá le Sass a athchruinniú i gcónaí. Is é an cur chuige atá againn ná ár bhfoinsí athróg Sass a ghlacadh agus iad a athrú ina n-athróga CSS. Ar an mbealach sin, fiú mura n-úsáideann tú athróga CSS, tá cumhacht uile Sass fós agat. Tá sé seo fós idir lámha agus tógfaidh sé am é a chur i bhfeidhm go hiomlán.

Mar shampla, smaoinigh ar na :roothathróga CSS seo le haghaidh <body>stíleanna coitianta:

  @if $font-size-root != null {
    --#{$variable-prefix}root-font-size: #{$font-size-root};
  }
  --#{$variable-prefix}body-font-family: #{$font-family-base};
  --#{$variable-prefix}body-font-size: #{$font-size-base};
  --#{$variable-prefix}body-font-weight: #{$font-weight-base};
  --#{$variable-prefix}body-line-height: #{$line-height-base};
  --#{$variable-prefix}body-color: #{$body-color};
  @if $body-text-align != null {
    --#{$variable-prefix}body-text-align: #{$body-text-align};
  }
  --#{$variable-prefix}body-bg: #{$body-bg};

Go praiticiúil, cuirtear na hathróga sin i bhfeidhm in Atosaigh mar seo:

body {
  margin: 0; // 1
  font-family: var(--#{$variable-prefix}body-font-family);
  @include font-size(var(--#{$variable-prefix}body-font-size));
  font-weight: var(--#{$variable-prefix}body-font-weight);
  line-height: var(--#{$variable-prefix}body-line-height);
  color: var(--#{$variable-prefix}body-color);
  text-align: var(--#{$variable-prefix}body-text-align);
  background-color: var(--#{$variable-prefix}body-bg); // 2
  -webkit-text-size-adjust: 100%; // 3
  -webkit-tap-highlight-color: rgba($black, 0); // 4
}

A ligeann duit saincheaptha fíor-ama a dhéanamh, cibé rud is mian leat:

<body style="--bs-body-color: #333;">
  <!-- ... -->
</body>

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. Táimid tar éis a athshocrú freisin padding-leftar 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 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.

Cód inlíne

Wrap sleachta inlíne den chód le <code>. Bí cinnte éalú lúibíní uillinn HTML.

Mar shampla, <section>ba chóir a bheith fillte mar inlíne.

For example, <code>&lt;section&gt;</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-topagus a úsáid dá cuid .remmargin-bottom

<p>Sample text here...</p>
<p>And another line of sample text here...</p>

<pre><code>&lt;p&gt;Sample text here...&lt;/p&gt;
&lt;p&gt;And another line of sample text here...&lt;/p&gt;
</code></pre>

Athróga

<var>Úsáid an chlib chun athróga a léiriú .

y = m x + b

<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 comhadlanna a athrú, clóscríobh cdagus ainm an eolaire ina dhiaidh sin.
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.

Tá sé i gceist an téacs seo a láimhseáil mar aschur samplach ó ríomhchlár.

<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-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.

Finscéal samplach

Ionchur samplach

Sampla de ríomhphost

Sampla fón

Sampla url

Uimhir shamplach

Cuardach samplach

Raon samplach

Ionchur comhad samplach

Sampla roghnaigh

Seiceáil an ticbhosca seo

Rogha a haon é seo agus sin Is rud eile é rogha a dó atá thar a bheith fada freisin chun timfhilleadh na rialuithe foirmeacha mhaisiúla seo a léiriú. Tá rogha a trí díchumasaithe

Réimse téacs samplach

Dáta samplach

Am samplach

Pasfhocal samplach

Sampla datetime-áitiúil

Seachtain shamplach

Sampla mí

Dath samplach

Aschur sampla 100

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- 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.

An eilimint ghiorrúcháin HTML .

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ú.

<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.

Atosaigh

Cur Chuige

Athróga CSS

Réamhshocruithe leathanach

Stack cló dúchasach

Athróga CSS

Ceannteidil agus ailt

Liostaí

Cód inlíne

Bloic cód

Athróga

Ionchur úsáideora

Aschur samplach

Táblaí

Foirmeacha

Tacaíocht ionchur dáta & dath

Leideanna ar na cnaipí

Eilimintí éagsúla

Seoladh

Blockquote

Eilimintí inlíne

Achoimre

[hidden]Tréith HTML5

neamh-chomhoiriúnacht jQuery

`[hidden]`Tréith HTML5