Source

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 amaskomunikilaj 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 iuj 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, sans-serif,
  // Emoji fonts
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;

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

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

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 .

Priskriblistoj: Priskriba listo estas perfekta por difini terminojn.
Euismod: Vestibulum id ligula porta felis euismod sempre eget lacinia odio sem.; Donec id elit non mi porta gravida at eget metus.
Malesuada porta: Etiam porta sem malesuada magna mollis euismod.

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.

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.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

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