Source

Endurræstu

Endurræsa, safn af þáttasértækum CSS breytingum í einni skrá, kickstart Bootstrap til að veita glæsilega, samkvæma og einfalda grunnlínu til að byggja á.

Nálgun

Endurræsa byggir á Normalize, sem veitir mörgum HTML þáttum með nokkuð skoðanalegum stíl með því að nota aðeins þáttaval. Viðbótar stíll er aðeins gert með flokkum. Til dæmis endurræsum við nokkra <table>stíla fyrir einfaldari grunnlínu og gefum síðar .table, .table-bordered, og fleira.

Hér eru leiðbeiningar okkar og ástæður fyrir því að velja hvað á að hnekkja í endurræsingu:

  • Uppfærðu sum sjálfgefin gildi vafra til að nota rems í stað ems fyrir stigstærð íhlutabil.
  • Forðastu margin-top. Lóðrétt framlegð getur hrunið og skilað óvæntum niðurstöðum. Mikilvægara er þó að ein stefna marginer einfaldara andlegt líkan.
  • Til að auðvelda stærðarstærð á tækjastærðum ættu blokkeiningar að nota rems fyrir margins.
  • Haldið yfirlýsingum um fonttengdar eignir í lágmarki, notaðu inheritþegar mögulegt er.

Sjálfgefnar síður

Þættirnir <html>og <body>eru uppfærðir til að veita betri sjálfgefnar stillingar á síðu. Nánar tiltekið:

  • The box-sizinger á heimsvísu stillt á alla þætti—þar á meðal *::beforeog *::after, til border-box. Þetta tryggir að aldrei sé farið yfir uppgefin breidd frumefnis vegna fyllingar eða ramma.
    • Enginn grunnur font-sizeer lýstur yfir á <html>, en 16pxgert er ráð fyrir (sjálfgefið vafra). font-size: 1remer beitt á til <body>að auðvelda móttækileg tegundarstærð í gegnum fjölmiðlafyrirspurnir á meðan notendastillingar eru virtar og tryggir aðgengilegri nálgun.
  • Setur <body>einnig alþjóðlegt font-family, line-height, og text-align. Þetta erfist síðar af sumum formþáttum til að koma í veg fyrir ósamræmi í leturgerð.
  • Til öryggis <body>er lýst yfir background-color, sem er sjálfgefið #fff.

Innfæddur leturstafla

Sjálfgefin vefleturgerð (Helvetica Neue, Helvetica og Arial) hefur verið sleppt í Bootstrap 4 og skipt út fyrir „innfæddan leturstafla“ til að fá sem besta textaútgáfu í hverju tæki og stýrikerfi. Lestu meira um innfædda leturstafla í þessari grein í 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;

Þetta font-familyer notað á <body>og erfist sjálfkrafa um allan heim allan Bootstrap. Til að skipta um alþjóðlegt font-familyskaltu uppfæra $font-family-baseog setja saman Bootstrap aftur.

Fyrirsagnir og málsgreinar

Allir fyrirsagnarþættir — td — <h1>og <p>eru endurstilltir til að þeir verði margin-topfjarlægðir. Fyrirsagnir hafa margin-bottom: .5rembætt við og málsgreinar margin-bottom: 1remtil að auðvelda bil.

Fyrirsögn Dæmi

<h1></h1>

 h1. Bootstrap fyrirsögn

<h2></h2>

 h2. Bootstrap fyrirsögn

<h3></h3>

 h3. Bootstrap fyrirsögn

<h4></h4>

 h4. Bootstrap fyrirsögn

<h5></h5>

 h5. Bootstrap fyrirsögn

<h6></h6>

 h6. Bootstrap fyrirsögn

Listar

Allir listar— <ul>, <ol>, og <dl>—hafa margin-topfjarlægðir og margin-bottom: 1rem. Hreiður listar hafa engin margin-bottom.

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Heiltala 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 kl
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem
  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Heiltala molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem

Fyrir einfaldari stíl, skýra stigveldi og betra bil hafa lýsingarlistar uppfært margins. <dd>s endurstilla margin-leftá 0og bæta við margin-bottom: .5rem. <dt>s eru feitletruð .

Lýsingarlistar
Lýsingarlisti er fullkominn til að skilgreina hugtök.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.

Forsniðinn texti

Einingin <pre>er endurstillt til að fjarlægja margin-topog nota remeiningar fyrir margin-bottom.

.example-element {
  spássíu-botn: 1rem;
}

Töflur

Töflur eru örlítið aðlagaðar að stíl <caption>, hrynja saman landamæri og tryggja samræmi text-aligní gegn. Viðbótarbreytingar fyrir ramma, fyllingu og fleira koma með bekknum.table .

Þetta er dæmi tafla og þetta er yfirskrift hennar til að lýsa innihaldinu.
Fyrirsögn töflu Fyrirsögn töflu Fyrirsögn töflu Fyrirsögn töflu
Tafla klefi Tafla klefi Tafla klefi Tafla klefi
Tafla klefi Tafla klefi Tafla klefi Tafla klefi
Tafla klefi Tafla klefi Tafla klefi Tafla klefi

Eyðublöð

Ýmsir formþættir hafa verið endurræstir fyrir einfaldari grunnstíla. Hér eru nokkrar af athyglisverðustu breytingunum:

  • <fieldset>s hafa engin landamæri, fyllingu eða spássíu svo auðvelt er að nota þau sem umbúðir fyrir einstök inntak eða hópa inntak.
  • <legend>s, eins og fieldsets, hafa einnig verið endurstílað til að birtast sem fyrirsögn.
  • <label>s eru stillt á til display: inline-blockað leyfa marginað vera beitt.
  • <input>s, <select>s, <textarea>s og <button>s eru að mestu leyti tekin fyrir með Normalize, en Reboot fjarlægir líka þeirra marginog setur line-height: inherit.
  • <textarea>s eru breytt til að vera aðeins hægt að breyta stærðinni lóðrétt þar sem lárétt stærðarbreyting „brýtur“ oft síðuuppsetningu.

Þessar breytingar og fleiri eru sýndar hér að neðan.

Dæmi goðsögn

100

Ýmsir þættir

Heimilisfang

Einingin <address>er uppfærð til að endurstilla sjálfgefna vafra font-styleúr italicí normal. line-heighter einnig nú erfður, og margin-bottom: 1remhefur verið bætt við. <address>s eru til að kynna tengiliðaupplýsingar fyrir næsta forföður (eða allt verk). Varðveittu sniðið með því að enda línur með <br>.

Twitter, Inc.
1355 Market St, Suite 900
San Francisco, CA 94103
P: (123) 456-7890
Fullt nafn
[email protected]

Blockquote

Sjálfgefið marginá blokkatilvitnunum er 1em 40px, svo við endurstillum það á 0 0 1remfyrir eitthvað meira í samræmi við aðra þætti.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Heiltala posuere ert a ante.

Einhver frægur í Source Title

Innbyggðir þættir

Einingin <abbr>fær grunngerð til að gera hann áberandi meðal málsgreinatexta.

Nulla attr vitae elit libero, a pharetra augue.

Samantekt

Sjálfgefið cursorá samantekt er text, svo við endurstillum það á til pointerað koma því á framfæri að hægt sé að hafa samskipti við þáttinn með því að smella á hann.

Nokkur smáatriði

Nánari upplýsingar um smáatriðin.

Jafnvel fleiri smáatriði

Hér eru enn frekari upplýsingar um smáatriðin.

HTML5 [hidden]eiginleiki

HTML5 bætir við nýjum alþjóðlegum eiginleikum sem heitir[hidden] , sem er display: nonesjálfgefið stíll. Með því að fá lánaða hugmynd frá PureCSS , bætum við þetta sjálfgefið með því að gera það [hidden] { display: none !important; }til að koma í veg fyrir displayað það verði óvart hnekkt. Þó að [hidden]hún sé ekki studd af IE10, þá kemur skýra yfirlýsingin í CSS okkar í kringum það vandamál.

<input type="text" hidden>
jQuery ósamrýmanleiki

[hidden]er ekki samhæft við jQuery $(...).hide()og $(...).show()aðferðir. Þess vegna styðjum við nú ekki sérstaklega [hidden]aðrar aðferðir til að stjórna displayþáttum.

Til að skipta aðeins um sýnileika staks, sem þýðir að því displayer ekki breytt og þátturinn getur samt haft áhrif á flæði skjalsins, notaðu flokkinn .invisibleí staðinn.