Source

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

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.

Lorem ipsum dolor tuula amet
Consectetur okusiiga elit
Ennamba enzijuvu molestie lorem ku massa
Facilisis mu kikuta kya pretium nisl
Nulla volutpat aliquam omubisi gw’enjuki
- Ekitundu ekiyitibwa Phasellus iaculis neque ekiyitibwa ekimera ekiyitibwa Phasellus
- Purus sodales eddagala eriyitibwa ultricies
- Ekiwandiiko ekiyitibwa Vestibulum laoreet portttitor sem
- Ac tristique libero volutpat ku bwesigwa ku
Faucibus porta lacus eriko ekikuta ky’omubiri ekiyitibwa fringilla vel
Aenean okutuula amet erat nunc
Eget omuwala lorem

Lorem ipsum dolor tuula amet
Consectetur okusiiga elit
Ennamba enzijuvu molestie lorem ku massa
Facilisis mu kikuta kya pretium nisl
Nulla volutpat aliquam omubisi gw’enjuki
Faucibus porta lacus eriko ekikuta ky’omubiri ekiyitibwa fringilla vel
Aenean okutuula amet erat nunc
Eget omuwala lorem

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.
Euismod: Ensigo id ligula porta felis euismod ensigo eget lacinia odio sem.; Donec id elit etali ya mi porta gravida ku eget metus.
Malesuada eriko ensolo: Etiam porta sem omusajja omunene ennyo omuto.

Ebiwandiiko ebitegekeddwa 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.

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 ziri za kwanjula ebikwata ku bantu abakwatagana ne jjajja asinga 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.

Lorem ipsum dolor okutuula amet, okusengejja amasavu elit. Namba enzijuvu posuere erat a ante.

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.