Source

Segin ka baara kɛ

Reboot, n’o ye CSS fɛn kɛrɛnkɛrɛnnenw caman yeli dalajɛlen ye dosiye kelen kɔnɔ, kickstart Bootstrap walasa ka basigi cɛɲi, basigilen, ani nɔgɔman di walasa ka jɔ a kan.

Surunya

Reboot bɛ jɔ Normalize kan, ka HTML fɛn caman Di ni hakilinata-fɔcogo dɔw ye ni fɛnw sugandili dɔrɔn ye. Styling wɛrɛw bɛ kɛ ni kalanw dɔrɔn de ye. Misali la, an bɛ <table>cogoya dɔw daminɛ kokura walasa ka basigi nɔgɔman sɔrɔ ani kɔfɛ ka .table, .table-bordered, ani dɔ wɛrɛw di.

An ka laadilikanw ni kun minnu b’a to an bɛ se ka min sugandi Reboot kɔnɔ, olu filɛ nin ye:

  • Navigatɛri nafama dɔw labɛncogo kura walasa ka baara kɛ ni rems ye s nɔ na emwalasa ka scalable component spacing kɛ.
  • Aw ye aw yɛrɛ tanga margin-top. Marge jɔlenw bɛ se ka bin, ka na ni nɔw ye minnu ma labɛn. Nka, min nafa ka bon kosɛbɛ, o ye ko sira kelen marginde ye hakili misali nɔgɔman ye.
  • Walasa ka sɛgɛsɛgɛli nɔgɔya minɛnw hakɛw bɛɛ la, bloki kɔnɔfɛnw ka kan ka baara kɛ ni rems ye s kama margin.
  • Aw bɛ font-related properties (nafolo minnu bɛ tali kɛ ɲɔgɔn na) jirali kɛ ka caya, ka baara kɛ ni u ye inheritni a bɛ se ka kɛ tuma o tuma.

Page defaults (ɲɛ fɔlɔw).

The <html>and <body>elements bɛ ladamu walasa ka ɲɛ bɛɛ lajɛlen defaults ɲumanw di. Kɛrɛnkɛrɛnnenya la:

  • The box-sizingis globally set on every element—o la *::beforeani *::after, ka border-box. O b’a To fɛnɲɛnɛma bonya fɔlen tɛ Tɛmɛ abada k’a sababu Kɛ padding walima dancɛ ye.
  • Base si ma font-size<html>, nka a 16pxbɛ jate (navigatɛri ka default). font-size: 1rembɛ waleya kan kan <body>walasa ka jaabi nɔgɔya suguya-sɛgɛsɛgɛli kɛ kunnafonidilan ɲininkaliw fɛ k’a sɔrɔ a bɛ baarakɛlaw ka fɛɛrɛw bonya ani ka fɛɛrɛ sɔrɔ min bɛ se ka sɔrɔ kosɛbɛ.
  • A <body>fana bɛ diɲɛ font-family, line-height, ani text-align. O bɛ ciyɛn sɔrɔ kɔfɛ foroko yɔrɔ dɔw fɛ walasa ka sɛbɛnnibolow ka bɛnbaliya bali.
  • Walasa ka lakana sɔrɔ, the <body>has a declared background-color, defaulting to #fff.

Native sɛbɛnnibolow kulu

Ɛntɛrinɛti sɛbɛnnibolow (Helvetica Neue, Helvetica ani Arial) bɔra Bootstrap 4 kɔnɔ ka bila u nɔ na ni “native font stack” ye walasa ka sɛbɛnni kɛcogo ɲuman sɔrɔ minɛn bɛɛ kan ani OS bɛɛ kan. aw ye kunnafoni wɛrɛw kalan sɛbɛnnikɛlanw kuluw kan nin Smashing Magazine barokun in kɔnɔ .

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

O font-familybɛ Kɛ <body>ni ani otomatiki ciyɛn ye diɲɛ kɔnɔ Bootstrap bɛɛ kɔnɔ. Walasa ka global font-family, sɛgɛsɛgɛli kura $font-family-basekɛ ani ka Bootstrap labɛn kokura.

Kumakunw ni dakunw

Kumakunw bɛɛ—misali la, <h1>—ani <p>u bɛ segin u cogo kɔrɔ la walasa u ka margin-topbɔ yen. Kumakunw margin-bottom: .5remfarala ɲɔgɔn kan ani dakunw margin-bottom: 1remwalisa ka u ni ɲɔgɔn cɛ ka nɔgɔ.

Kumakun Misaliya

<h1></h1>

h1. Bootstrap ka kumasen

<h2></h2>

h2. Bootstrap ka kumasen

<h3></h3>

h3. Bootstrap ka kumasen

<h4></h4>

h4. Bootstrap ka kumasen

<h5></h5>

h5. Bootstrap ka kumasen

<h6></h6>

h6. Bootstrap ka kumasen

Lisitiw

Lisitiw bɛɛ— <ul>, <ol>, ani <dl>—u margin-topbɔra u la ani a margin-bottom: 1rem. Lisiti minnu bɛ nested la , olu tɛ margin-bottom.

  • Lorem ipsum dolor sigi amet
  • Consectetur ye farikolojidɛsɛ ye
  • Jateden dafalen molestie lorem ka mass
  • Fasilisi bɛ sɔrɔ pretium nisl aliquet la
  • Nulla volutpat ye aliquam ye
    • Fasellus iaculis ye jiri ye
    • Purus sodales bɛ sɔgɔsɔgɔninjɛ furakɛ
    • Vestibulu laoreet porttitor sem.. Bamako, Mali
    • Ac tristique libero volutpat ka baara kɛ
  • Faucibus porta lacus ye jiri ye min bɛ wele ko fringilla vel
  • Aenean sigi amet erat nunc
  • Eget porttitor ka lorem
  1. Lorem ipsum dolor sigi amet
  2. Consectetur ye farikolojidɛsɛ ye
  3. Jateden dafalen molestie lorem ka mass
  4. Fasilisi bɛ sɔrɔ pretium nisl aliquet la
  5. Nulla volutpat ye aliquam ye
  6. Faucibus porta lacus ye jiri ye min bɛ wele ko fringilla vel
  7. Aenean sigi amet erat nunc
  8. Eget porttitor ka lorem

Walasa ka cogoya nɔgɔman sɔrɔ, ka ɲɔgɔndan jɛlen kɛ, ani ka yɔrɔ janya, ɲɛfɔli lisiw ye margins kuraya. <dd>s segin margin-leftka kɛ 0ani ka fara a kan margin-bottom: .5rem. <dt>s bɛ sɛbɛn ɲɛ jɛmanw na .

Ɲɛfɔli lisiw
Ɲɛfɔli lisi dafalen don daɲɛw ɲɛfɔli kama.
Euismod ye
Vestibulum id ligula porta felis euismod cɛya bɛ sɔrɔ lacinia odio sem.
Donec id elit non mi porta gravida ye eget metus ye.
Malesuada ka porta
Etiam porta sem cɛmanba min bɛ wele ko magna mollis euismod.

Sɛbɛn minnu labɛnna ka kɔn

Eleman <pre>bɛ segin ka a bɔ a margin-topla ani ka baara kɛ ni remunitw ye a kama margin-bottom.

.misali-yɔrɔ { .
  margin-jukɔrɔ: 1rem;
} ye .

Tabali minnu bɛ yen

Tabali bɛ ladilan dɔɔnin ka kɛɲɛ ni cogoya <caption>s ye, ka dancɛw da, ani ka a jira ko u bɛ bɛn ɲɔgɔn ma u text-alignbɛɛ kɔnɔ. Yɛlɛma wɛrɛw bɛ kɛ dankanw, padding ani fɛn wɛrɛw la ni kalan .tableye .

Nin ye misali tabali ye, wa nin ye a ɲɛfɔli ye walasa ka kɔnɔkow ɲɛfɔ.
Tabali kuncɛcogo Tabali kuncɛcogo Tabali kuncɛcogo Tabali kuncɛcogo
Tabali selilɛri Tabali selilɛri Tabali selilɛri Tabali selilɛri
Tabali selilɛri Tabali selilɛri Tabali selilɛri Tabali selilɛri
Tabali selilɛri Tabali selilɛri Tabali selilɛri Tabali selilɛri

Sɛbɛnw

Foroko fɛn suguya caman daminɛna kokura walasa ka basigi cogoya nɔgɔmanw sɔrɔ. Yɛlɛma minnu kɛra, olu dɔw filɛ nin ye:

  • <fieldset>s dan tɛ minnu na, padding, walima margin tɛ u la walasa u ka se ka baara kɛ nɔgɔya la i n’a fɔ wrappers donna kelen-kelen walima donna kuluw la.
  • <legend>s, i n’a fɔ forow, olu fana labɛnna kokura walasa u ka jira i n’a fɔ suguya dɔw tɔgɔ.
  • <label>s bɛ sigi ka display: inline-blockto ka sira margindi ka waleya.
  • <input>s, <select>s, <textarea>s, ani <button>s bɛ ɲɛnabɔ kosɛbɛ Normalize fɛ, nka Reboot bɛ u marginni setw Bɔ line-height: inherit, olu fana.
  • <textarea>s bɛ ladilan walasa u ka se ka bonya wulilen dɔrɔn de kɛ i n’a fɔ bonya jiginni tilennen bɛ “kari” tuma caman na ɲɛ labɛncogo la.
  • <button>s ni <input>butɔni fɛnw bɛ cursor: pointerwaati min na :not(:disabled).

O yɛlɛmaw, ani fɛn wɛrɛw, olu jiralen bɛ jukɔrɔ.

Misali la, nsiirin

100 ye

Misc fɛnw

Dagayɔrɔ

Eleman <address>in bɛ ladamu walasa ka navigatɔrɔn ka default lasegin ka font-styleitalicka taa normal. line-heightfana bɛ ciyɛn ta sisan, wa margin-bottom: 1rema farala a kan. <address>s ye ka ɲɛsin mɔgɔw ka kunnafoniw jirali ma bɛnbakɛ min ka surun a la (walima baara bɛɛ lajɛlen). Aw bɛ sɛbɛnniw mara ni zana laban ye ni <br>.

Twitter, Inc.
1355 Market St, Suite 900
San Fransisko, CA 94103
P: (123) 456-7890. Kalanjɛ ni sɛbɛnni : kalanjɛ ni sɛbɛnni gafew
Tɔgɔ dafalen
fɔlɔ[email protected]

Bloki-kɔlɔsili

Default marginkan blockquotes ye 1em 40px, o la an b'o Lasegin ka 0 0 1remKɛ fɛn dɔ ye min bɛ Bɛn ni fɛn wɛrɛw ye.

Lorem ipsum dolor sigilen amet, consectetur adipiscing elit. Jateden dafalen posuere erat a ante.

Mɔgɔ min tɔgɔ bɔra Source Title kɔnɔ

Inline fɛnw

Eleman <abbr>bɛ cogoya jɔnjɔn sɔrɔ walasa a ka bɔ kɛnɛ kan dakun sɛbɛnniw cɛma.

Nulla attr vitae elit libero, o ye fura ye min bɛ wele ko pharetra augue.

Farankan

Default cursoron summary ye text, o la an bɛ o reset to to pointerwalasa k’a Jira ko element bɛ Se ka Jὲ ni a digilen ye.

Kunnafoni dɔw

Kunnafoni wɛrɛw sɔrɔ o kunnafoni kunbabaw kan.

Hali kunnafoni wɛrɛw

Nin ye kunnafoni wɛrɛw yɛrɛ ye o kunnafoni kunbabaw kan.

HTML5 [hidden]ka fɛnsɛbɛnni

HTML5 bɛ diɲɛ fɛnɲɛnɛma kura dɔ Fàra a kan min tɔgɔ ye ko[hidden] , o min bɛ Kɛ i n’a fɔ display: nonea bɛ Kɛ cogo min na. Borrowing an idea from PureCSS , an bɛ ɲɛtaa kɛ nin default in na ni kɛli [hidden] { display: none !important; }ye walasa ka dɛmɛ don a bali displayka kɛ balawu la. Hali n’a [hidden]ma Dɛmɛ IE10 fɛ a yɛrɛ la, fɔli jɛlen min bɛ an ka CSS kɔnɔ o bɛ o gɛlɛya in Lamini.

<input type="text" hidden>
jQuery ka bɛnbaliya

[hidden]tɛ bɛn jQuery's $(...).hide()ni $(...).show()fɛɛrɛw ma. O la, an tɛ sisan kɛrɛnkɛrɛnnenya la endorse [hidden]ka tɛmɛ fɛɛrɛ wɛrɛw kan ka ɲɛsin displayof elements ɲɛnabɔli ma.

Walasa ka fɛn dɔ yecogo wuli dɔrɔn, o kɔrɔ ye ko a displayma fɛn caman sɛmɛntiya ani fɛn in bɛ se ka nɔ bila sɛbɛn in bolicogo la hali bi, i bɛ baara kɛ ni .invisiblekalasi ye o nɔ na.