in English

Atunbere

Atunbere, ikojọpọ awọn ayipada CSS-pato ninu faili kan, kickstart Bootstrap lati pese ohun didara, deede, ati ipilẹ ipilẹ ti o rọrun lati kọ sori.

Ona

Atunbere duro lori Normalize, pese ọpọlọpọ awọn eroja HTML pẹlu awọn aza ti o ni imọran nipa lilo awọn yiyan eroja nikan. Afikun iselona ni a ṣe pẹlu awọn kilasi nikan. Fun apẹẹrẹ, a tun atunbere diẹ ninu awọn <table>aza fun ipilẹ ti o rọrun ati nigbamii pese .table, .table-bordered, ati diẹ sii.

Eyi ni awọn itọnisọna ati awọn idi wa fun yiyan kini lati fagile ni Atunbere:

  • Ṣe imudojuiwọn diẹ ninu awọn iye aiyipada aṣawakiri lati lo rems dipo ems fun aaye paati ti iwọn.
  • Yẹra fun margin-top. Awọn ala inaro le ṣubu, ti nso awọn abajade airotẹlẹ. Ni pataki julọ botilẹjẹpe, itọsọna kan ti marginjẹ awoṣe ọpọlọ ti o rọrun.
  • Fun wiwọn ti o rọrun lori awọn iwọn ẹrọ, awọn eroja dina yẹ ki o lo rems fun margins.
  • Jeki awọn ikede ti awọn fontohun-ini ibatan si o kere ju, ni lilo inheritnigbakugba ti o ṣee ṣe.

Awọn aiyipada oju-iwe

Awọn eroja <html>ati <body>awọn eroja ti wa ni imudojuiwọn lati pese awọn aiyipada oju-iwe ti o dara julọ. Ni pataki diẹ sii:

  • Awọn box-sizingti wa ni agbaye ṣeto lori gbogbo eroja-pẹlu *::beforeati *::after, lati border-box. Eyi ni idaniloju pe iwọn ti a kede ti eroja ko kọja nitori fifẹ tabi aala.
  • Ko si ipilẹ font-sizeti a kede lori <html>, ṣugbọn 16pxa ro (aiyipada aṣawakiri). font-size: 1remti lo lori <body>iru-iwọn idahun ti o rọrun nipasẹ awọn ibeere media lakoko ti o bọwọ fun awọn ayanfẹ olumulo ati aridaju ọna iraye si diẹ sii.
  • Awọn <body>tun ṣeto kan agbaye font-family, line-height, ati text-align. Eyi jẹ jogun nigbamii nipasẹ diẹ ninu awọn eroja fọọmu lati ṣe idiwọ awọn aiṣedeede fonti.
  • Fun ailewu, o <body>ti kede background-color, aiyipada si #fff.

Native font akopọ

Awọn nkọwe wẹẹbu aiyipada (Helvetica Neue, Helvetica, ati Arial) ti lọ silẹ ni Bootstrap 4 ati rọpo pẹlu “akopọ fonti abinibi” fun sisọ ọrọ to dara julọ lori gbogbo ẹrọ ati OS. Ka diẹ sii nipa awọn akopọ fonti abinibi ni nkan Iwe irohin Smashing yii .

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

Ṣe akiyesi pe nitori akopọ fonti pẹlu awọn nkọwe emoji, ọpọlọpọ aami ti o wọpọ/dingbat awọn ohun kikọ Unicode ni yoo ṣe bi awọn aworan aworan olona-pupọ. Irisi wọn yoo yatọ, da lori ara ti a lo ninu ẹrọ aṣawakiri/Syeed ti abinibi emoji fonti, ati pe wọn kii yoo ni ipa nipasẹ eyikeyi awọn ara CSS color.

Eyi font-familyni a lo si <body>ati jogun laifọwọyi ni agbaye jakejado Bootstrap. Lati yi agbaye pada font-family, ṣe imudojuiwọn $font-family-baseati ṣajọ Bootstrap.

Awọn akọle ati awọn ìpínrọ

Gbogbo awọn eroja akọle — fun apẹẹrẹ, <h1>— ati <p>pe a tunto lati yọ wọn margin-topkuro. Awọn akọle ti margin-bottom: .5remṣafikun ati awọn paragira margin-bottom: 1remfun aye irọrun.

Akori Apeere
<h1></h1> h1. Bootstrap akori
<h2></h2> h2. Bootstrap akori
<h3></h3> h3. Bootstrap akori
<h4></h4> h4. Bootstrap akori
<h5></h5> h5. Bootstrap akori
<h6></h6> h6. Bootstrap akori

Awọn akojọ

Gbogbo awọn atokọ — <ul>, <ol>, ati <dl>— ti margin-topyọkuro ati margin-bottom: 1rem. Awọn atokọ itẹle ko ni margin-bottom.

  • Gbogbo awọn atokọ ti yọkuro ala oke wọn
  • Ati ala isalẹ wọn ṣe deede
  • Awọn atokọ itẹ-ẹiyẹ ko ni ala isale
    • Ni ọna yii wọn ni irisi paapaa diẹ sii
    • Ni pataki nigbati awọn nkan atokọ diẹ sii tẹle
  • Padding osi tun ti tunto
  1. Eyi ni atokọ ti o paṣẹ
  2. Pẹlu awọn nkan atokọ diẹ
  3. O ni irisi gbogbogbo kanna
  4. Gẹgẹbi atokọ ti a ko paṣẹ tẹlẹ

Fun iselona ti o rọrun, awọn ilana mimọ, ati aye to dara julọ, awọn atokọ apejuwe ti ni imudojuiwọn margins. <dd>s tunto margin-leftsi 0ati fikun margin-bottom: .5rem. <dt>s wa ni igboya .

Awọn akojọ apejuwe
Akojọ apejuwe jẹ pipe fun asọye awọn ofin.
Igba
Definition fun oro.
Itumọ keji fun igba kanna.
Igba miiran
Itumọ fun igba miiran yii.

Ọrọ ti a ti ṣe tẹlẹ

A <pre>tunto eroja lati yọkuro margin-topati lo remawọn ẹya fun margin-bottom.

.apẹẹrẹ-eroja {
  ala-isalẹ: 1rem;
}

Awọn tabili

Awọn tabili ni atunṣe die-die si ara <caption>s, awọn aala wó lulẹ, ati rii daju pe o wa ni ibamu text-alignjakejado. Awọn iyipada afikun fun awọn aala, padding, ati diẹ sii wa pẹlu kilasi.table naa .

Eyi jẹ tabili apẹẹrẹ, ati pe eyi ni akọle rẹ lati ṣe apejuwe awọn akoonu.
Tabili akori Tabili akori Tabili akori Tabili akori
Tabili cell Tabili cell Tabili cell Tabili cell
Tabili cell Tabili cell Tabili cell Tabili cell
Tabili cell Tabili cell Tabili cell Tabili cell

Awọn fọọmu

Awọn eroja fọọmu oriṣiriṣi ti tun bẹrẹ fun awọn aza ipilẹ ti o rọrun. Eyi ni diẹ ninu awọn iyipada olokiki julọ:

  • <fieldset>s ko ni awọn aala, padding, tabi ala ki wọn le ṣee lo ni irọrun bi awọn apamọra fun awọn igbewọle kọọkan tabi awọn ẹgbẹ ti awọn igbewọle.
  • <legend>s, gẹgẹbi awọn ipilẹ aaye, tun ti tun ṣe atunṣe lati ṣe afihan bi akọle iru.
  • <label>s ti ṣeto lati display: inline-blockgba laaye marginlati lo.
  • <input>s, <select>s, <textarea>s, ati <button>s ni a koju pupọ julọ nipasẹ Normalize, ṣugbọn Atunbere yọ wọn kuro marginati ṣeto line-height: inherit, paapaa.
  • <textarea>s ti wa ni títúnṣe lati nikan wa ni resizable ni inaro bi petele iwọn igba "fifọ" iwe ifilelẹ.
  • <button>s ati <input>awọn eroja bọtini ni cursor: pointernigbati :not(:disabled).

Awọn ayipada wọnyi, ati diẹ sii, ni afihan ni isalẹ.

Àlàyé apẹẹrẹ

100

Awọn itọka lori awọn bọtini

Atunbere pẹlu imudara role="button"lati yi kọsọ aiyipada pada si pointer. Ṣafikun ẹda yii si awọn eroja lati ṣe iranlọwọ tọka awọn eroja jẹ ibaraenisepo. Ipa yii ko ṣe pataki fun awọn eroja, eyiti o gba iyipada <button>tiwọn .cursor

Bọtini eroja ti kii ṣe bọtini 
<span role="button" tabindex="0">Non-button element button</span>

Awọn eroja oriṣiriṣi

Adirẹsi

A ṣe imudojuiwọn eroja lati <address>tun aiyipada ẹrọ aṣawakiri font-stylelati . ti wa ni tun bayi jogun, ati awọn ti a ti fi kun. s wa fun iṣafihan alaye olubasọrọ fun baba ti o sunmọ (tabi gbogbo ara iṣẹ). Ṣetọju ọna kika nipasẹ ipari awọn ila pẹlu .italicnormalline-heightmargin-bottom: 1rem<address><br>

Twitter, Inc.
1355 Ọja St, Suite 900
San Francisco, CA 94103
P: (123) 456-7890
Orukọ kikun
[email protected]

Blockquote

Awọn aiyipada marginlori blockquotes ni 1em 40px, ki a tun pe si 0 0 1remfun nkankan siwaju sii ni ibamu pẹlu awọn eroja miiran.

Ọrọ agbasọ ti a mọ daradara, ti o wa ninu nkan blockquote kan.

Ẹnikan olokiki ni Akọle Orisun

Awọn eroja inu

Ohun <abbr>elo naa gba iselona ipilẹ lati jẹ ki o ṣe pataki laarin ọrọ paragira.

Nulla attr vitae elit libero, a pharetra augue.

Lakotan

Aiyipada cursorlori akopọ jẹ text, nitorinaa a tunto iyẹn pointerlati fihan pe nkan naa le ṣe ibaraenisepo pẹlu tite lori rẹ.

Diẹ ninu awọn alaye

Alaye diẹ sii nipa awọn alaye.

Paapaa awọn alaye diẹ sii

Eyi ni awọn alaye diẹ sii nipa awọn alaye.

HTML5 [hidden]abuda

HTML5 ṣe afikun abuda agbaye tuntun ti a npè ni[hidden] , eyiti o jẹ aṣa bi display: nonenipasẹ aiyipada. Yiyawo imọran lati PureCSS , a ni ilọsiwaju lori aiyipada yii nipa ṣiṣe [hidden] { display: none !important; }lati ṣe iranlọwọ lati yago fun displaygbigba rẹ lairotẹlẹ. Lakoko [hidden]ti ko ṣe atilẹyin abinibi nipasẹ IE10, ikede ti o han gbangba ninu CSS wa ni ayika iṣoro yẹn.

<input type="text" hidden>
jQuery aibaramu

[hidden]ko ni ibamu pẹlu jQuery's $(...).hide()ati $(...).show()awọn ọna. Nitorinaa, lọwọlọwọ a ko fọwọsi ni pataki [hidden]lori awọn ilana miiran fun ṣiṣakoso awọn displayeroja.

Lati yi iyipada hihan ohun kan nikan, afipamo pe ko yipada ati pe ano tun le ni ipa lori sisan tidisplay iwe, lo kilasi.invisible dipo.