Ddamu okutandika

Reboot, okukuŋŋaanyizibwa kw'enkyukakyuka za CSS ezikwata ku elementi mu fayiro emu, kickstart Bootstrap okuwa omusingi omulungi, ogukwatagana, era omungu okuzimbako.

Okutuukirira

Reboot ezimba ku Normalize, okuwa ebintu bingi ebya HTML n'emisono egy'endowooza ezimu nga ekozesa ebisunsula ebintu byokka. Okukola sitayiro okw’enjawulo kukolebwa ne kiraasi zokka. Okugeza, tuddamu okutandika <table>emisono egimu okusobola okufuna omusingi omunyangu ate oluvannyuma ne tuwa .table, .table-bordered, n’ebirala.

Wano waliwo ebiragiro byaffe n’ensonga lwaki olonze ky’olina okusazaamu mu Reboot:

Update ezimu ku browser default values okukozesa rems mu kifo kya ems for scalable component spacing.
Weewale margin-top. Vertical margins zisobola okugwa, ne zivaamu ebivaamu ebitali bisuubirwa. Kyokka ekisinga obukulu, obulagirizi bumu obwa marginis a simpler mental model.
Okusobola okwanguyirwa okugerageranya mu sayizi z’ebyuma, ebitundu bya bulooka birina okukozesa rems ku margins.
Kuuma ebirangiriro fontby'ebintu ebikwatagana - nga bitono, nga okozesa inheritbuli lwe kiba kisoboka.

Olupapula lusookerwako

Ebintu <html>ne <body>bitereezebwa okusobola okuwa ebisookerwako ebirungi ku lupapula lwonna. Okusingawo:

The box-sizingeteekeddwa mu nsi yonna ku buli elementi —nga mw’otwalidde *::beforene *::after, okutuuka ku border-box. Kino kikakasa nti obugazi bwa elementi obulangirirwa tebusussa olw’okupadding oba ensalosalo.
Tewali base font-sizeelangirirwa ku <html>, naye 16pxeteeberezebwa (entandikwa ya browser). font-size: 1remekozesebwa ku the <body>for easy responsive type-scaling via media queries nga essa ekitiibwa mu by’abakozesa bye baagala n’okukakasa enkola etuukirirwa.
The <body>era eteekawo eky'ensi yonna font-family, line-height, ne text-align. Kino kisikira oluvannyuma ebimu ku bikozesebwa mu ffoomu okuziyiza obutakwatagana mu fonti.
Ku lw'obukuumi, the <body>has a declared background-color, okulemererwa okutuuka ku #fff.

Omutambi gw'empandiika enzaaliranwa

Empandiika z’omukutu ezisookerwako (Helvetica Neue, Helvetica, ne Arial) zisuuliddwa mu Bootstrap 4 ne zikyusibwamu “native font stack” okusobola okulaga obulungi ebiwandiiko ku buli kyuma ne OS. Soma ebisingawo ku nsengeka z'empandiika enzaaliranwa mu kiwandiiko kino ekya 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;

Weetegereze nti olw’okuba font stack erimu emoji fonts, ennukuta nnyingi eza bulijjo ez’obubonero/dingbat Unicode zijja kulagibwa nga pictographs eza langi nnyingi. Endabika yaabwe ejja kwawukana, okusinziira ku sitayiro ekozesebwa mu fonti ya emoji enzaaliranwa eya browser/platform, era tezijja kukosebwa colorsitayiro yonna eya CSS.

Kino font-familykikozesebwa ku <body>era automatically okusikira mu nsi yonna mu Bootstrap yonna. Okukyusa global font-family, zza obuggya $font-family-baseera oddemu okukuŋŋaanya Bootstrap.

Emitwe n’ennyiriri

Ebintu byonna eby’omutwe —okugeza, <h1>—era biddamu <p>okuteekebwawo okusobola margin-topokuggyibwawo kwabyo. Emitwe giyongeddeko margin-bottom: .5remn’obutundu margin-bottom: 1remokusobola okwanguyirwa okuteeka ebanga.

Omutwe	Eky'okulabirako
`<h1></h1>`	h1. Omutwe gwa bootstrap
`<h2></h2>`	h2. Omutwe gwa bootstrap
`<h3></h3>`	h3. Omutwe gwa bootstrap
`<h4></h4>`	h4. Omutwe gwa bootstrap
`<h5></h5>`	h5. Omutwe gwa bootstrap
`<h6></h6>`	h6. Omutwe gwa bootstrap

Enkalala

Enkalala zonna— <ul>, <ol>, ne <dl>—zirina margin-topeziggyiddwawo era a margin-bottom: 1rem. Enkalala eziteekeddwa mu kiyumba tezirina margin-bottom.

Enkalala zonna zirina omukono gwazo ogw’okungulu oguggiddwawo
Era margin yaabwe eya wansi yafuuka ya bulijjo
Enkalala eziteekeddwa mu kisenge tezirina ludda lwa wansi
- Mu ngeri eno baba n’endabika esinga okubeera ey’enjawulo
- Naddala nga kigobererwa ebintu ebirala ebiri ku lukalala
Padding ya kkono nayo ezzeemu okuteekebwawo

Wano waliwo olukalala olulagirwa
Nga mulimu ebintu ebitonotono ebiri ku lukalala
Okutwalira awamu erina entunula y’emu
Nga olukalala olusooka olutalagirwa

Okusobola okukola sitayiro ennyangu, ensengeka entegeerekeka obulungi, n’okuteeka ebanga eddene, enkalala z’ennyonnyola zirina margins ezitereezeddwa. <dd>s okuddamu okuteeka margin-leftku 0n'okugattako margin-bottom: .5rem. <dt>s ziwandiikiddwako enzirugavu .

Enkalala z’ennyonnyola: Olukalala lw’ennyonnyola lutuukiridde okunnyonnyola ebigambo.
Ekisanja: Ennyonyola y’ekigambo.; Ennyonyola eyokubiri ku kigambo kye kimu.
Ekisanja ekirala: Ennyonyola y’ekigambo kino ekirala.

Ebiwandiiko ebiteekeddwateekeddwa nga tebinnabaawo

Element <pre>eddamu okuteekebwawo okuggyawo yaayo margin-topn'okukozesa remunits zaayo margin-bottom.

.ekyokulabirako-ekintu { .
  margin-wansi: 1rem;
} .

Emmeeza

Emmeeza zitereezebwa katono ku sitayiro <caption>s, okugwa ensalosalo, era okukakasa nti zikwatagana text-alignwonna. Enkyukakyuka endala ku nsalo, padding, n'ebirala bijja ne .tableclass .

Eno ye mmeeza ey’ekyokulabirako, era eno ye bigambo byayo okunnyonnyola ebirimu.
Omutwe gw’emmeeza	Omutwe gw’emmeeza	Omutwe gw’emmeeza	Omutwe gw’emmeeza
Akasengejja k’emmeeza	Akasengejja k’emmeeza	Akasengejja k’emmeeza	Akasengejja k’emmeeza
Akasengejja k’emmeeza	Akasengejja k’emmeeza	Akasengejja k’emmeeza	Akasengejja k’emmeeza
Akasengejja k’emmeeza	Akasengejja k’emmeeza	Akasengejja k’emmeeza	Akasengejja k’emmeeza

Ffoomu

Ebintu eby'enjawulo ebya ffoomu bizzeemu okutandika okusobola okukola emisono egy'omusingi egyangu. Wano waliwo enkyukakyuka ezisinga okweyoleka:

<fieldset>s tezirina nsalo, padding, oba margin kale zisobola bulungi okukozesebwa nga wrappers for individual inputs oba groups of inputs.
<legend>s, nga fieldsets, nazo zikyusiddwa okulagibwa nga omutwe gw'ebika.
<label>s ziteekebwa ku display: inline-blockokukkiriza marginokukozesebwa.
<input>s, <select>s, <textarea>s, ne <button>s zisinga kukolebwako Normalize, naye Reboot eggyawo zaabwe marginne ziteekawo line-height: inherit, nazo.
<textarea>s zikyusibwa okubeera zokka ezisobola okukyusibwa obunene mu vertikal nga okukyusa obunene obw’okwebungulula kitera “okumenya” ensengeka y’olupapula.
<button>s ne <input>button elements zirina cursor: pointerddi :not(:disabled).

Enkyukakyuka zino, n’ebirala, biragiddwa wansi.

Ebiraga ku buttons

Reboot erimu ennongoosereza for role="button"okukyusa cursor esookerwako okudda ku pointer. Okwongerako ekintu kino ku elementi okuyamba okulaga elementi zikwatagana. Omulimu guno tegwetaagisa ku elementi, ezifuna enkyukakyuka <button>yazo .cursor

Butaamu ya elementi etali ya button

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

Ebintu eby’enjawulo

Okwoogera eri

Element <address>etereezebwa okuddamu okuteekawo browser default font-styleokuva italicku normal. line-heightnayo kati yasikira, era margin-bottom: 1remeyongerwako. <address>s za kwanjula ebikwata ku bantu b’oyinza okutuukirira jjajjaawe ali okumpi (oba omubiri gwonna ogw’omulimu). Kuuma ensengeka ng'omaliriza ennyiriri ne <br>.

1355
Market St, Suite 900
San Francisco, CA 94103
P: (123) 456-7890. Enkola y’okukozesa eddagala lino

Erinnya mu bujjuvu
[email protected]

Blockquote nga bwe kiri

Ekisookerwako marginku blockquotes kiri 1em 40px, kale tuddamu okuteeka ekyo ku 0 0 1remku kintu ekisinga okukwatagana n'ebintu ebirala.

Ekijuliziddwa ekimanyiddwa ennyo, ekiri mu elementi ya blockquote.

Omuntu omututumufu mu Source Title

Ebintu ebiri mu layini

Element <abbr>efuna sitayiro enkulu okugifuula eyawukana mu biwandiiko by’akatundu.

Nulla attr vitae elit libero, ekiwandiiko ekiyitibwa pharetra augue.

Okubumbako

Ekisookerwako cursorku bufunze kiri text, kale tuddamu okuteeka ekyo ku pointerokutuusa nti elementi esobola okukwatagana nayo nga tuginyigako.

Ebimu ku bikwata ku nsonga eno

Ebisingawo ku bikwata ku nsonga eno.

Ebisingawo n’okusingawo

Wano waliwo ebisingawo ku bikwata ku nsonga eno.

`[hidden]`Ekintu ekiyitibwa HTML5

HTML5 eyongerako ekintu ekipya eky'ensi yonna ekiyitibwa[hidden] , ekikoleddwa nga display: nonebwe kibadde. Borrowing an idea from PureCSS , tulongoosa ku default eno nga tukola [hidden] { display: none !important; }okuyamba okuziyiza yaayo displayokuva mu butanwa overridden. Wadde [hidden]nga si natively supported by IE10, okulangirira okw'olwatu mu CSS yaffe kwetoloola ekizibu ekyo.

<input type="text" hidden>

jQuery obutakwatagana

[hidden]tekwatagana na jQuery's $(...).hide()n'enkola $(...).show(). N’olwekyo, mu kiseera kino tetuwagira naddala [hidden]ku bukodyo obulala obw’okuddukanya displayeby’ebintu.

Okukyusakyusa kwokka okulabika kw’ekintu, ekitegeeza nti kyayo displaytekikyusiddwa era ekintu ekyayinza okukosa entambula y’ekiwandiiko, kozesa kiraasi mu.invisible kifo ky’ekyo.