Ddamu okutandika

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

Ku muko guno

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.

Enkyukakyuka za CSS

Yayongerwako mu v5.1.1

Nga tulina v5.1.1, twassa omutindo ku @imports zaffe ezeetaagisa mu bibinja byaffe byonna ebya CSS (nga mw’otwalidde bootstrap.css, bootstrap-reboot.css, bootstrap-grid.cssn’okussaamu _root.scss. Kino kyongera :rootenkyukakyuka za CSS ez’omutendera ku bibinja byonna, awatali kulowooza ku mmeka ku zo ezikozesebwa mu kibinja ekyo. Ultimately Bootstrap 5 ejja kusigala nga laba enkyukakyuka za CSS endala ezigattibwako okumala ekiseera.

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. Enkola eno eya bbulawuzi esobola okukyusibwa nga okyusa $font-size-rootenkyukakyuka.
The <body>era eteekawo eky'ensi yonna font-family, font-weight, line-height, ne color. 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

Bootstrap ekozesa “native font stack” oba “system font stack” okusobola okulaga ebiwandiiko obulungi ku buli kyuma ne OS. Empandiika zino ez’enkola zikoleddwa mu ngeri ey’enjawulo nga zitunuulidde ebyuma eby’ennaku zino, nga zirongooseddwa mu kulaga ku ssirini, okuwagira efonti ezikyukakyuka, n’ebirala. Soma ebisingawo ku nsengeka z'empandiika enzaaliranwa mu kiwandiiko kino ekya Smashing Magazine .

$font-family-sans-serif:
  // Cross-platform generic font family (default user interface font)
  system-ui,
  // Safari for macOS and iOS (San Francisco)
  -apple-system,
  // 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’akabonero/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.

Enkyukakyuka za CSS

Nga Bootstrap 5 yeeyongera okukula, sitayiro ezisinga obungi zijja kuzimbibwa n’enkyukakyuka za CSS ng’engeri y’okuwa okulongoosa okusingawo mu kiseera ekituufu awatali kwetaaga kuddamu kukungaanya Sass bulijjo. Enkola yaffe kwe kutwala enkyukakyuka zaffe eza Sass ez’ensibuko ne tuzikyusa mu nkyukakyuka za CSS. Mu ngeri eyo, nebwoba tokozesa CSS variables, okyalina amaanyi gonna aga Sass. Kino kikyali mu maaso era kijja kutwala obudde okussa mu nkola mu bujjuvu.

Okugeza, lowooza ku :rootnkyukakyuka zino eza CSS ku <body>sitayiro eza bulijjo:

  @if $font-size-root != null {
    --#{$variable-prefix}root-font-size: #{$font-size-root};
  }
  --#{$variable-prefix}body-font-family: #{$font-family-base};
  --#{$variable-prefix}body-font-size: #{$font-size-base};
  --#{$variable-prefix}body-font-weight: #{$font-weight-base};
  --#{$variable-prefix}body-line-height: #{$line-height-base};
  --#{$variable-prefix}body-color: #{$body-color};
  @if $body-text-align != null {
    --#{$variable-prefix}body-text-align: #{$body-text-align};
  }
  --#{$variable-prefix}body-bg: #{$body-bg};

Mu nkola, enkyukakyuka ezo olwo zikozesebwa mu Reboot nga bwe zityo:

body {
  margin: 0; // 1
  font-family: var(--#{$variable-prefix}body-font-family);
  @include font-size(var(--#{$variable-prefix}body-font-size));
  font-weight: var(--#{$variable-prefix}body-font-weight);
  line-height: var(--#{$variable-prefix}body-line-height);
  color: var(--#{$variable-prefix}body-color);
  text-align: var(--#{$variable-prefix}body-text-align);
  background-color: var(--#{$variable-prefix}body-bg); // 2
  -webkit-text-size-adjust: 100%; // 3
  -webkit-tap-highlight-color: rgba($black, 0); // 4
}

Ekikusobozesa okukola okulongoosa mu kiseera ekituufu mu ngeri yonna gy’oyagala:

<body style="--bs-body-color: #333;">
  <!-- ... -->
</body>

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. Tuzzeemu okuteekawo ne elements za padding-lefton ne.<ul><ol>

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.

Koodi mu layini

Zinga ebitundutundu bya koodi ebiri mu layini ne <code>. Kakasa nti otolose mu bbulakisi z'enkoona za HTML.

Okugeza, <section>erina okuzingibwa nga inline.

For example, <code>&lt;section&gt;</code> should be wrapped as inline.

Ebiziyiza bya koodi

Kozesa <pre>s ku layini za koodi eziwera. Nate, kakasa nti otolokako enkoona zonna mu koodi okusobola okulaga obulungi. Element <pre>eddamu okuteekebwawo okuggyawo yaayo margin-topn'okukozesa remunits zaayo margin-bottom.

<p>Sample text here...</p>
<p>And another line of sample text here...</p>

<pre><code>&lt;p&gt;Sample text here...&lt;/p&gt;
&lt;p&gt;And another line of sample text here...&lt;/p&gt;
</code></pre>

Enkyukakyuka ezikyukakyuka

Okulaga enkyukakyuka kozesa <var>tag.

y = m x + b

<var>y</var> = <var>m</var><var>x</var> + <var>b</var>

Okuyingiza kw’omukozesa

Kozesa <kbd>okulaga okuyingiza okutera okuyingizibwa nga oyita ku kibboodi.

Okukyusa dayirekita, wandiika cdng’ogoberere erinnya lya dayirekita.
Okukyusa ensengeka, nyweza ctrl + ,

To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>

Ekyokulabirako ekifulumizibwa

Okulaga sample output okuva mu program kozesa <samp>tag.

Ekiwandiiko kino kigendereddwamu okutwalibwa ng’ekyokulabirako ekifulumizibwa okuva mu pulogulaamu ya kompyuta.

<samp>This text is meant to be treated as sample output from a computer program.</samp>

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 ezisobola okukyusibwa obunene mu vertikal yokka 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.

Eky’okulabirako legend

Eky’okulabirako okuyingiza

Okugeza email

Okugeza essimu

Okugeza url

Eky’okulabirako nnamba

Okunoonya eky’okulabirako

Eky’okulabirako range

Eky’okulabirako okuyingiza fayiro

Eky’okulabirako okulonda

Laga akabokisi kano akalaga nti

Enkola esooka ye eno ne eri Option two kye kintu ekirala nga nakyo super long okulaga okuzinga kwa bino fancy form controls. Enkola eyokusatu eremeddwa

Eky’okulabirako ekitundu ky’ebiwandiiko

Eky’okulabirako olunaku

Eky’okulabirako obudde

Okugeza ekigambo ky’okuyingira

Eky’okulabirako datetime-local

Eky’okulabirako wiiki

Eky’okulabirako omwezi

Eky’okulabirako langi

Eky’okulabirako ebifulumizibwa 100 nga bwe kiri

Obuwagizi bw'okuyingiza olunaku & langi

Kuuma mu birowoozo nti ebiyingizibwa mu nnaku tebiwagirwa mu bujjuvu browser zonna, kwe kugamba Safari.

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

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.

Ekintu ekifupi ekya HTML .

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.

<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 ekyasobola okukosa entambula y’ekiwandiiko, kozesa kiraasi mu.invisible kifo ky’ekyo.

Ddamu okutandika

Okutuukirira

Enkyukakyuka za CSS

Olupapula lusookerwako

Omutambi gw'empandiika enzaaliranwa

Enkyukakyuka za CSS

Emitwe n’ennyiriri

Enkalala

Koodi mu layini

Ebiziyiza bya koodi

Enkyukakyuka ezikyukakyuka

Okuyingiza kw’omukozesa

Ekyokulabirako ekifulumizibwa

Emmeeza

Ffoomu

Obuwagizi bw'okuyingiza olunaku & langi

Ebiraga ku buttons

Ebintu eby’enjawulo

Okwoogera eri

Blockquote nga bwe kiri

Ebintu ebiri mu layini

Okubumbako

[hidden]Ekintu ekiyitibwa HTML5

jQuery obutakwatagana

`[hidden]`Ekintu ekiyitibwa HTML5