Rekomencu

Reboot, kolekto de elementoj-specifaj CSS-ŝanĝoj en ununura dosiero, ekfunkciigas Bootstrap por provizi elegantan, konsekvencan kaj simplan bazlinion por konstrui.

Alproksimiĝo

Reboot konstruas sur Normaligi, provizante multajn HTML-elementojn per iom opiniemaj stiloj uzante nur elemento-elektilojn. Kroma stilo estas farita nur kun klasoj. Ekzemple, ni rekomencas iujn <table>stilojn por pli simpla bazlinio kaj poste provizas .table, .table-bordered, kaj pli.

Jen niaj gvidlinioj kaj kialoj por elekti kion anstataŭi en Reboot:

Ĝisdatigu iujn defaŭltajn valorojn de retumilo por uzi rems anstataŭ ems por skalebla komponentinterspaco.
Evitu margin-top. Vertikalaj randoj povas kolapsi, donante neatenditajn rezultojn. Pli grave tamen, ununura direkto de marginestas pli simpla mensa modelo.
Por pli facila skalo trans aparatoj, blokelementoj devus uzi rems por margins.
Tenu deklarojn de font-rilataj propraĵoj al minimumo, uzante inheritkiam ajn eblas.

Paĝaj defaŭltoj

La <html>kaj <body>elementoj estas ĝisdatigitaj por provizi pli bonajn paĝ-defaŭltojn. Pli specife:

La box-sizingestas tutmonde agordita sur ĉiu elemento—inkluzive *::beforekaj *::after, al border-box. Ĉi tio certigas, ke la deklarita larĝo de elemento neniam estas superita pro remburaĵo aŭ limo.
Neniu bazo font-sizeestas deklarita sur la <html>, sed 16pxestas supozita (la retumilo defaŭlta). font-size: 1remestas aplikata sur la <body>por facila respondema tipo-skalo per amaskomunikilaraj demandoj dum respekto de uzantpreferoj kaj certigante pli alireblan aliron.
La <body>ankaŭ metas tutmondan font-family, line-height, kaj text-align. Ĉi tio estas poste heredita de kelkaj formalementoj por malhelpi tiparkongruojn.
Por sekureco, la <body>havas deklaritan background-color, defaŭlte al #fff.

Denaska tiparo stako

La defaŭltaj retaj tiparoj (Helvetica Neue, Helvetica kaj Arial) estis forigitaj en Bootstrap 4 kaj anstataŭigitaj per "denaska tiparo" por optimuma teksta bildigo en ĉiu aparato kaj OS. Legu pli pri denaskaj tiparaj stakoj en ĉi tiu artikolo de Smashing Magazine .

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

Rimarku, ke ĉar la tiparstako inkluzivas emoji-tiparojn, multaj komunaj simboloj/dingbataj Unikodaj signoj estos bilditaj kiel plurkoloraj piktogramoj. Ilia aspekto varias, depende de la stilo uzata en la denaska emoji-tiparo de la retumilo/platformo, kaj ili ne estos tuŝitaj de iuj CSS- colorstiloj.

Ĉi tio font-familyestas aplikata al la <body>kaj aŭtomate heredita tutmonde tra Bootstrap. Por ŝanĝi la tutmondan font-family, ĝisdatigu $font-family-basekaj rekompilu Bootstrap.

Titoloj kaj alineoj

Ĉiuj titolo-elementoj—ekz, <h1>—kaj <p>estas rekomencigitaj por esti margin-topforigitaj. Aldonitaj titoloj margin-bottom: .5remkaj alineoj margin-bottom: 1rempor facila interspaco.

Titolo	Ekzemplo
`<h1></h1>`	h1. Bootstrap-titolo
`<h2></h2>`	h2. Bootstrap-titolo
`<h3></h3>`	h3. Bootstrap-titolo
`<h4></h4>`	h4. Bootstrap-titolo
`<h5></h5>`	h5. Bootstrap-titolo
`<h6></h6>`	h6. Bootstrap-titolo

Listoj

Ĉiuj listoj— <ul>, <ol>, kaj <dl>— havas siajn margin-topforigitajn kaj margin-bottom: 1rem. Nestitaj listoj ne havas margin-bottom.

Ĉiuj listoj havas sian supran marĝenon forigita
Kaj ilia malsupra marĝeno normaliĝis
Nestitaj listoj ne havas malsupran marĝenon
- Tiel ili havas pli egalan aspekton
- Precipe kiam sekvas pli da listeroj
La maldekstra kompletigo ankaŭ estis rekomencigita

Jen ordigita listo
Kun kelkaj listeroj
Ĝi havas la saman ĝeneralan aspekton
Kiel la antaŭa neordigita listo

Por pli simpla stilado, klara hierarkio kaj pli bona interspaco, priskriblistoj ĝisdatigis margins. <dd>s restarigi margin-leftal 0kaj aldoni margin-bottom: .5rem. <dt>s estas grasigitaj .

Priskribolistoj: Priskriba listo estas perfekta por difini terminojn.
Terminon: Difino por la termino.; Dua difino por la sama termino.
Alia termino: Difino por ĉi tiu alia termino.

Antaŭformata teksto

La <pre>elemento estas rekomencigita por forigi sian margin-topkaj uzi remunuojn por sia margin-bottom.

.ekzemplo-elemento {
  rando-malsupro: 1rem;
}

Tabeloj

Tabeloj estas iomete ĝustigitaj al stiloj <caption>, kolapsas randojn kaj certigas konsekvencan text-alignĉie. Pliaj ŝanĝoj por randoj, kompletigo kaj pli venas kun la .tableklaso .

Ĉi tio estas ekzemplotabelo, kaj ĉi tiu estas ĝia bildoteksto por priskribi la enhavon.
Tabelo titolo	Tabelo titolo	Tabelo titolo	Tabelo titolo
Tabelĉelo	Tabelĉelo	Tabelĉelo	Tabelĉelo
Tabelĉelo	Tabelĉelo	Tabelĉelo	Tabelĉelo
Tabelĉelo	Tabelĉelo	Tabelĉelo	Tabelĉelo

Formoj

Diversaj formalementoj estis rekomencitaj por pli simplaj bazstiloj. Jen kelkaj el la plej rimarkindaj ŝanĝoj:

<fieldset>s havas neniujn randojn, remburaĵon aŭ marĝenon, do ili povas esti facile uzataj kiel envolvaĵoj por individuaj enigaĵoj aŭ grupoj de enigaĵoj.
<legend>s, kiel kamparo, ankaŭ estis restiligitaj por esti montrataj kiel speco de titolo.
<label>s estas agordita al display: inline-blockpor permesi marginesti aplikata.
<input>s, <select>s, <textarea>s, kaj <button>s estas plejparte traktitaj de Normalize, sed Reboot forigas iliajn marginkaj arojn line-height: inherit, ankaŭ.
<textarea>s estas modifitaj nur por esti regrandigeblaj vertikale ĉar horizontala regrandigo ofte "rompas" paĝan aranĝon.
<button>s kaj <input>butonelementoj havas cursor: pointerkiam :not(:disabled).

Ĉi tiuj ŝanĝoj, kaj pli, estas pruvitaj sube.

Montriloj sur butonoj

Reboot inkluzivas plibonigon por role="button"ŝanĝi la defaŭltan kursoron al pointer. Aldonu ĉi tiun atributon al elementoj por helpi indiki ke elementoj estas interagaj. Ĉi tiu rolo ne estas necesa por <button>elementoj, kiuj ricevas sian propran cursorŝanĝon.

Ne-butono-elementa butono

<span role="button" tabindex="0">Non-button element button</span>

Diversaj elementoj

Adreso

La <address>elemento estas ĝisdatigita por restarigi la defaŭltan retumilon font-stylede italical normal. line-heightestas ankaŭ nun heredita, kaj margin-bottom: 1remestis aldonita. <address>s estas por prezenti kontaktinformojn por la plej proksima prapatro (aŭ tuta laboro). Konservu formatadon finante liniojn per <br>.

Twitter, Inc.
1355 Market St, Suite 900
San Francisco, CA 94103
P: (123) 456-7890

Plena Nomo
[email protected]

Blokcitaĵo

La defaŭlta marginĉe blokquotetoj estas 1em 40px, do ni rekomencigas tion 0 0 1rempor io pli konsekvenca kun aliaj elementoj.

Bonkonata citaĵo, enhavita en blokcita elemento.

Iu fama en Fonta Titolo

Enliniaj elementoj

La <abbr>elemento ricevas bazan stilon por igi ĝin elstari inter alinea teksto.

Nulla attr vitae elit libero, a pharetra augue.

Resumo

La defaŭlta cursorresumo estas text, do ni rekomencigas tion pointerpor transdoni, ke la elemento povas esti interagata alklakante ĝin.

Kelkaj detaloj

Pli da informoj pri la detaloj.

Eĉ pli da detaloj

Jen eĉ pli da detaloj pri la detaloj.

HTML5- `[hidden]`atributo

HTML5 aldonas novan tutmondan atributon nomitan[hidden] , kiu estas stilita display: nonedefaŭlte. Pruntante ideon de PureCSS , ni plibonigas ĉi tiun defaŭlton per [hidden] { display: none !important; }helpi malhelpi ĝin displayakcidente anstataŭi. Kvankam [hidden]ne estas denaske subtenata de IE10, la eksplicita deklaro en nia CSS solvigas tiun problemon.

<input type="text" hidden>

jQuery nekongruo

[hidden]ne kongruas kun jQuery $(...).hide()kaj $(...).show()metodoj. Tial ni nuntempe ne speciale aprobas [hidden]aliajn teknikojn por administri la displayelementojn.

Por simple ŝanĝi la videblecon de elemento, tio signifas, ke displayĝi ne estas modifita kaj la elemento ankoraŭ povas influi la fluon de la dokumento, uzu la .invisibleklason anstataŭe.